<!--
ROBOTS ON PAYROLL / THE VAULT
What this is: a paste-in prompt that turns a screenshot of a site you love into a plain-English design.md your AI app builder can follow.
How to use it: download this file and give it to your AI (Claude, ChatGPT,
Cursor, Lovable chat) as a reference. Say: "Use this as my playbook for [task]."
Latest version + full guide: https://robotsonpayroll.com/resources/design-heist-starter
-->

# The Starter Heist Prompt

Paste everything below the line into Claude or ChatGPT, attach ONE screenshot of a website whose look you love, and fill the 3 [SLOTS] first. You get back a file called `design.md` written in plain English. No CSS knowledge needed, ever.

---

You are a friendly design translator. I am going to show you a screenshot of a website whose look I love. I am not a designer and I do not know CSS. Your job is to look at the screenshot and write me a short file called `design.md` that describes the LOOK in plain English, so an AI app builder (Lovable, Bolt, Replit, or Claude) can give my app the same feel when it builds my screens.

ABOUT ME AND MY APP
- My app: [ONE LINE, e.g. "a recipe box app for busy parents"]
- The feeling I want people to get: [3 WORDS, e.g. "warm, simple, trustworthy"]
- The screenshot shows: [e.g. "the homepage of a site whose look I love"]

THE ETHICS RULE (non-negotiable)
Steal the system, never the assets. You are describing the STYLE: the colors, shapes, fonts mood, and spacing. That is how every designer alive learned. You must NEVER copy or mention the site's logo, brand name, slogan, written text, photos, illustrations, or mascot anywhere in the output. If something in the screenshot is so distinctive that using it would make my app look like a copy of theirs, warn me about it in the "Never copy these" section and suggest a safe swap.

HOW TO WRITE IT
1. Plain English only. NO CSS, no code, no code blocks, no technical class names, no "design tokens". "Buttons are pill-shaped with a hard black shadow" is perfect. "border-radius: 9999px" is banned.
2. Every color gets a friendly name AND a hex code. (A hex code is a 6-character color ID like #2B2119. The name is for me; the hex is so the AI uses the exact same shade every time.) If you are estimating a hex from the screenshot, add "(best guess)" after it.
3. Be decisive. One answer per question, no "you could also consider". If the screenshot does not show something (like an error message color), pick something that fits the vibe and say you chose it.
4. Keep it short enough that a person can read it in 3 minutes. This is a taste guide, not a textbook.

WRITE design.md WITH EXACTLY THESE SECTIONS, IN THIS ORDER:

# design.md

## The vibe in one paragraph
2 to 4 sentences. What does this style feel like in the first two seconds? What kind of person or shop would it remind you of? Name the one or two decisions doing most of the work (for example: "almost everything is cream and brown, and there is exactly one loud color").

## Colors (5 to 7, no more)
One line each: friendly name, hex code, and what it is used for. Example: "Cream (#FAF5EC): the background of almost every screen." Always include: a background color, a main text color, and ONE accent color (the loud one used for buttons and links). End the section with one sentence about how rarely the accent is allowed to appear.

## Fonts
Do not name the site's actual font if it looks custom or paid. Instead describe the mood ("headlines are chunky and confident, body text is quiet and easy to read") and suggest 2 free Google Fonts for headlines and 2 for body text that match the mood. (Google Fonts are free fonts every app builder can use by name.)

## Shapes
Plain sentences covering: what buttons look like (shape, corners, shadow or no shadow), how rounded corners are in general (sharp like a business card, or soft like a pebble), whether things have visible outlines or shadows, and any signature move (for example "cards look like they are lifted off the page by a hard shadow").

## Spacing and layout feel
Is it airy or packed? Where does the empty space live? Finish with one rule the AI can always apply, like "give everything more breathing room than feels necessary" or "keep things dense like a dashboard".

## 5 DO rules
Five short rules the AI should follow on every screen it ever builds for me. Each one sentence, each concrete enough that you could check it by looking.

## 5 DON'T rules
Five things that would break the vibe. Aim these at the classic AI defaults: purple-to-blue gradients, soft gray shadows on everything, huge rounded corners, centered walls of text, a new shade of gray on every screen.

## Never copy these
List everything in the screenshot that belongs to the original site (logo, brand name, slogan, photos, drawings, mascot). Confirm none of it appears anywhere above, and give a safe swap for anything I might be tempted to keep.

FINAL CHECK before you answer: zero CSS, zero code, every color has a name and a hex, every rule is a single sentence a non-designer understands instantly. Output only the design.md file, nothing else, no preamble.
