THE VAULT / START HERE / PROMPT + MARKDOWN

The Design Heist: Starter Edition

You saw a website and thought "I want my app to feel like THAT." You don't know CSS, and you shouldn't need to. This kit turns one screenshot into a plain-English design.md (a small text file that describes your app's look) and then makes Lovable, Bolt, Replit, or Claude actually follow it. Three prompts, five minutes, no code.

LAST VERIFIED 2026-07-09

Why every vibe-coded app looks like every other vibe-coded app

Tell an AI builder to "make it look nice" and you get the same app everyone else got that week: a purple-to-blue gradient, soft gray shadows on floating cards, the same default font. Not ugly. Just instantly recognizable as "an AI made this", which quietly tells your users nobody made a single deliberate choice.

NOTE

Use this page as a prompt reference. Every file below is built to be handed straight to an AI. Download it, drop it into Claude, ChatGPT, Cursor, or Lovable, and say "use this as my playbook." The prompts on this page are copy-paste ready.

Here's why it happens: design is hundreds of tiny choices (this shade of gray, that button shape), and when you don't make them, the AI picks the most average answer for every single one. Average everywhere adds up to generic. The fix is not asking harder ("make it POP" makes it worse). The fix is handing the AI a file where the choices are already made.

That file is design.md: one page of plain English describing your app's look. Colors with names and hex codes, what buttons look like, five do rules, five don't rules. You don't write it. You steal it, from a site whose look you already love, with one screenshot and one prompt.

WATCH OUT

The one rule of the heist: steal the system, not the assets. The style (colors, shapes, mood, spacing) is how every designer alive learned; that's fair game. The assets (their logo, name, words, photos, mascot) are property; those are never taken. The prompt below enforces this automatically.

The 5-minute heist, start to finish

1
Find a site whose look you love
Not the most famous site, the one whose FEEL matches your app. More on picking a good one below.
2
Take a screenshot
Mac: press Cmd+Shift+3 for the whole screen (the image lands on your Desktop), or Cmd+Shift+4 and drag to grab just the browser window. Windows: press Windows key+Shift+S, drag over the page, and the shot goes to your clipboard, ready to paste. Close any cookie pop-ups first; you want the actual design, full width, not a banner.
3
Fill the 3 slots in the Starter Heist Prompt
Your app in one line, the feeling you want in 3 words, what the screenshot shows. Takes 30 seconds.
4
Paste into Claude or ChatGPT with the screenshot attached
Use the paperclip or "+" button in the chat box to attach the screenshot (on Windows you can often just paste it with Ctrl+V). Send. You get back a complete design.md in plain English.
5
Save the reply as design.md
Copy the whole output into a text file named design.md. Notes app, TextEdit, Notepad, anything works. This file is now your app's taste, on paper.

Picking a good target site (this is half the result)

The prompt can only extract what the screenshot shows, so pick your mark deliberately:

[ ]Match the feeling, not the industry. Building a budgeting app that should feel calm? A well-designed meditation or stationery site is a better target than another finance app.
[ ]Pick sites with a strong, simple look. One or two main colors, a clear personality. If you can describe the vibe in 3 words, the AI can extract it. If the site is chaos, your design.md will be chaos.
[ ]Skip the giants. Famous sites are risky to imitate (people will notice) and usually too complex to be useful. Small studios, indie tools, and portfolio sites are richer targets.
[ ]Never heist a direct competitor. You want to look different from them, not similar. It's also the one case where copying a look can get legally murky.
[ ]Screenshot the homepage, top part. That's where a site's personality is most concentrated.

Prompt 1: screenshot in, plain-English design.md out

This is the whole trick. It forces the AI to describe the look in sentences you can read ("buttons are pill-shaped with a hard black shadow"), never in code, and to give every color a friendly name plus a hex code (a hex code is a 6-character color ID like #2B2119, so the AI uses the exact same shade every time). It also builds the ethics rule in: the output must never contain the source site's logo, name, words, or images.

PROMPT: THE STARTER HEIST PROMPT (paste with 1 screenshot attached, fill the 3 slots)

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.

NOTE

Read the output before you use it. If any section came back vague ("nice colors", no hex codes), reply: "Redo the Colors section. Every color needs a name and a hex code, per the instructions." The prompt is strict on purpose; hold it to that.

Prompt 2: making your builder actually follow the file

A design.md in your Downloads folder changes nothing. You have to hand it to your builder AND set the rules of engagement, because AI builders drift back to their defaults the moment they think you've stopped watching. This prompt makes design.md the law: read it before every screen, and if you deviate, say so out loud.

To attach the file: in Lovable, Bolt, and Replit, use the paperclip or "+" button in the chat box and attach design.md, or simply paste its full text into the chat right before this prompt. Both work.

PROMPT: THE MAKE-IT-OBEY PROMPT (paste with design.md attached, for new builds)

I am giving you a file called design.md. It describes exactly how my app must look, in plain English, with exact hex color codes. From now on, treat it as law:

1. Read design.md again before every screen or component you build for me, every time. Do not build from memory.
2. Follow every rule in it: the colors (use the hex codes exactly as written), the fonts, the shapes, the spacing feel, and all 10 do/don't rules.
3. When a design question comes up that design.md does not answer, choose the option that best matches its vibe, and tell me in one line what you chose so I can correct it if needed.
4. If you ever deviate from design.md for any reason, say so clearly and explain why BEFORE you show me the result. Silent deviations are the one thing I will always reject.
5. Never fall back to your default look. No purple-to-blue gradients, no generic gray cards, no soft shadow on everything, unless design.md explicitly asks for them.

Before we build anything: confirm you have read design.md by summarizing its vibe in one sentence and naming its accent color. Then wait for my first build request.

Already built your app before finding this page? Same idea, pointed backwards. This variant repaints what exists without breaking what works:

PROMPT: THE REDECORATE PROMPT (paste with design.md attached, for existing apps)

I am giving you a file called design.md. It describes how my app SHOULD look. The app you already built for me does not match it yet. Your job is to redecorate the existing app to match design.md, without breaking anything.

Rules for this job:

1. Looks only. Do not change what any button, form, or page DOES. Do not rename, move, remove, or add any feature. If a visual fix would require changing behavior, skip it and tell me.
2. Go screen by screen. For each screen: first list what currently breaks the design.md rules (wrong colors, wrong button shapes, gradients, random grays), then apply the fixes for that screen, then move to the next one.
3. Replace colors everywhere, not just the obvious spots: backgrounds, text, buttons, links, borders, icons, error and success messages. Use the exact hex codes from design.md.
4. Apply the 5 DON'T rules as a cleanup checklist. Anything on that list that exists in my app right now gets removed.
5. When you are completely done, give me a plain-English summary: every screen you touched and the 3 biggest changes on each, so I can spot-check them.

Start with my app's main screen. Show me the before-problems list for that screen first.

What good output looks like (a complete worked example)

Below is a full design.md exactly as the Starter Heist Prompt produces it, for a fictional app called Shelfie (a reading tracker) heisting the look of a fictional indie bookshop site. Read it once before running your own heist so you can tell a good output from a lazy one.

Notice three things: every color has a name and a hex, every rule is checkable by looking ("no shadows anywhere" beats "keep it minimal"), and the last section lists what was deliberately NOT taken from the source site.

The 4 ways this breaks, and the exact fix for each

What happens	The fix
The design.md comes back with code in it (CSS, class names)	Reply: "Rewrite this with zero code. Plain English sentences and hex codes only, per the original instructions."
Your builder ignores the file and ships the purple gradient anyway	Paste the drift fixer: "Stop. Re-read design.md. Audit the last screen you built against its color list and 5 DON'T rules, list every violation, then fix them all."
The colors look wrong (the AI guessed hex codes badly from a small screenshot)	Retake the screenshot at full desktop width and re-run the heist. Small or blurry screenshots produce bad color guesses; the prompt marks guesses with "(best guess)" so you know which ones to distrust.
Your app looks TOO much like the source site	Ask your builder: "Change the accent color to [pick a new one] and switch the headline font to the other Google Fonts suggestion in design.md." Those two swaps break the resemblance almost every time.

PAYOFF

The habit that makes this stick: when you catch yourself correcting the same visual thing twice in chat, don't argue with the AI a third time. Edit design.md once, re-attach it, and the correction becomes permanent.

When you outgrow this: the pro edition

This starter kit gets one app looking intentional. When you're building bigger (multiple pages that must stay perfectly consistent, dark mode, or you've started using Cursor or Claude Code with a real project folder), graduate to The Design Heist Kit. Same heist, pro output: a full DESIGN-KIT.md with exact type scales, spacing systems, component states, ready-to-paste code, plus variants for blending 3 sites into one style and deriving dark mode. Run this starter version first; you'll understand exactly why every section of the pro kit exists.

Get the next drop

Every new Vault system ships to the list first. Twice a week, free.