How to use a DESIGN.md file so your AI-built pages stop looking generic

A DESIGN.md file is one plain text document that tells your AI coding tool which colours, fonts and spacing to use. Here is where to get 75 free ones, and how to wire one up in about two minutes.

The generic look is not a model problem, it is a missing brief. Ask an AI tool to build a page with no reference and it falls back on the safest defaults it knows: mid grey text, a softly rounded card, a faint shadow, the same blue button. It looks fine. It looks like everything else.

The second problem is drift. Each new request starts with no memory of the last screen, so the corner radius shifts, the heading size changes, and page three quietly stops matching page one. Writing the decisions down once, in a file the tool opens every time, fixes both.

01 / Setup

How to set up a DESIGN.md file in three steps

01

Get the file

Open getdesign.md, pick a style from the 75 published analyses, and use the Download DESIGN.md button on that brand's page. If you would rather work in the terminal, the window where you type commands instead of clicking, run npx getdesign@latest add apple from your project folder, swapping apple for any slug listed by npx getdesign list.

why it mattersThis is the only real decision in the whole process, so look at a few preview pages before you choose. The command route needs Node.js 18 or newer, the download button needs nothing.

browse the catalogue →

02

Drop it into your project

Save it in the top folder of your project, beside files like package.json, and keep the name exactly DESIGN.md in capitals. That is the whole step. Nothing to install, nothing to configure.

why it mattersAgents look for it at the root. Anywhere else it is just another document in your project, and most tools will never open it.

the source repository →

03

Tell your agent to read it

In Claude Code, add one line to CLAUDE.md, the notes file it loads at the start of every session: Read @DESIGN.md before writing or changing any UI. Treat it as the source of truth for colours, type, spacing and components. In Cursor or Windsurf the same sentence goes in your project rules, and in v0, Lovable or Bolt you paste the contents of the file at the top of your prompt. Then ask for a screen as you normally would, with one clause added: Follow DESIGN.md for all styling decisions.

why it mattersDropping the file in the folder is not enough on its own, because most tools use what you point them at and quietly ignore the rest. Repeat that last clause on every interface request, since the first screen sets the pattern the rest of the project copies.

claude code memory docs →

In plain English

Two words you will meet constantly here. A token is a named value the design reuses, like --accent standing in for one exact blue, so every button pulls the same colour instead of a fresh guess. An agent is an AI tool that can open and write files in your project by itself, rather than only talking to you in a chat window.

02 / Anatomy

The nine sections inside the file

The format did not appear out of nowhere. It came from Google Stitch, and the files on getdesign.md follow that specification with a few sections added. Opening one is the quickest way to understand what your agent is actually reading.

• Visual Theme & Atmosphere. Mood, density and design philosophy: the paragraph that decides whether a page feels airy or packed.
• Color Palette & Roles. Every colour with a name, a hex value and the job it does, which is the part that stops an accent leaking across the whole page.
• Typography Rules. Font families and the full hierarchy, from display sizes down to captions.
• Component Stylings. Buttons, cards, inputs and navigation, with their hover and disabled states spelled out.
• Layout Principles. The spacing scale, the grid, and how much empty space the style expects you to leave.
• Depth & Elevation. The shadow system, and which surfaces are meant to sit above which.
• Do's and Don'ts. Guardrails and anti-patterns. This is the section that keeps output from sliding back towards the default look.
• Responsive Behavior. Breakpoints, touch target sizes, and what collapses on a phone.
• Agent Prompt Guide. A quick colour reference plus ready made prompts you can paste as they are.

Each brand also ships preview.html and preview-dark.html, two pages that render the palette, type scale, buttons and cards, so you can look at a style properly before you commit a project to it.

03 / Picks

Which file to start from

Choose for the feeling you want, not the brand you admire. Each file describes a look, and that look will either suit what you are building or fight it all week. Eight worth opening first:

01

Apple

Premium white space, SF Pro type and cinematic imagery.

suitsA product page carried by one large image and very little else on the screen.

view the file →

02

Nike

Monochrome interface, massive uppercase Futura, full bleed photography.

suitsWork where the photography is the product and the words are a shout, not a paragraph.

view the file →

03

Ferrari

Cinema black canvas, Ferrari Red used sparingly, strong editorial light and shade.

suitsA launch page that has to feel expensive and restrained at the same time.

view the file →

04

BMW

Dark premium surfaces and a precise, engineered layout.

suitsA safer dark theme than most, because the structure carries it instead of the glow.

view the file →

05

Meta

Photography first, hard light and dark surfaces, Meta Blue held back for the buttons.

suitsPages with a lot of product images, where the interface should stay out of the way.

view the file →

06

Stripe

Signature purple gradients and unusually light font weights.

suitsAnything fintech or developer facing. It is the default for a reason, so expect company.

view the file →

07

Notion

Warm minimalism, serif headings, soft surfaces.

suitsThe friendliest of the set. Good for documentation, guides and anything with real reading in it.

view the file →

08

Linear

Ultra minimal and tight, one purple accent, nothing decorative.

suitsDashboards and app screens, where density matters more than drama.

view the file →

Paste this

Fill in the blanks once the file is in place: Read DESIGN.md at the project root. Build [the page you want] for [what the product does]. Use only the colours, type scale, spacing and component patterns defined there. If something is not covered in the file, ask me before inventing it. The last sentence is the one doing the work. It turns silent guessing into a question you can answer.

04 / Your own

How to turn one into your own

A brand file is a starting point, not a destination. Once your product has a look of its own, a file that describes it beats a borrowed one, and the fastest route there is editing rather than starting from nothing.

• Start from the closest match. Download the file whose feeling is nearest to yours and change it from there. A blank page invites vague answers, while an existing file forces specific ones.
• Replace the values, keep the structure. Swap in your own hex codes, fonts and spacing, and leave the nine headings exactly where they are. The headings are what an agent scans for.
• Write the don'ts from real corrections. Every time you tell your agent to stop doing something, add it as a don't. That section improves faster than any other, because it is made of your actual complaints.
• Name colours by job, not by shade. A token called --accent beats one called --blue-500, because the job survives a rebrand and the shade does not.
• Keep it with the code. Store it in the project rather than in a notes app, so it travels with the work and everyone, human or agent, is reading the same version.

Worth knowing

These are independent readings of publicly visible styling, not official design systems, and getdesign.md says exactly that on every page. The repository behind it is MIT licensed, but a licence on the analysis is not permission to wear another company's identity in public.

Watch out

Common mistakes when using a DESIGN.md file in 2026

The file is the easy part. Getting an agent to actually obey it is where most of the lost afternoons happen.

• Wrong name, wrong place. A lowercase design.md, or a copy sitting one folder down, will often be skipped in silence. Capitals, exact spelling, top folder.
• Assuming it was found. If the output ignores your palette, say so plainly: refer to DESIGN.md in the project root. Some tools want the file dragged into the chat window before they will read it at all.
• Mixing two brand files in one project. The tokens fight each other and you end up with Stripe's purple sitting on Nike's layout. One file per project.
• Treating it as a rule engine. Agents read these files as context, not as settings they are forced to obey, so they can still drift over a long session. Check what comes back, and repeat the instruction when it slips.
• Letting it go out of date. The first time you change a colour in the code and not in the file, the file starts lying, and every screen after that inherits the lie.

Questions

FAQ

Is getdesign.md free?

The published brand analyses are free to download, and the repository behind them is open source. There is also a paid Catalog Pass at $99 a month, which covers a separate set of 30 analyses of smaller SaaS and startup sites, plus a request service if you want a private file made for a specific website. Neither is needed to get started.

Do I need to know how to code?

No. You need to be able to save a file into your project folder and add one sentence to your prompt. If you build through a browser tool rather than an editor, you can paste the contents of the file straight into the chat instead.

Does this work with tools other than Claude Code?

Yes, with anything that can read a file or accept a long prompt, because it is ordinary markdown, the plain text format language models handle most reliably. Only the instruction changes: a project rule in Cursor and Windsurf, pasted text in v0, Lovable and Bolt.

Can I use a brand file for a client project?

Use it for direction, not duplication. The closer your result sits to a recognisable brand, the more risk you are handing your client, and a look copied that closely tends to read as borrowed anyway. Change the palette and the typeface, keep the structure, which was the useful part.

What is the difference between DESIGN.md and CLAUDE.md or AGENTS.md?

Different jobs. AGENTS.md and CLAUDE.md describe how to build the project: commands, structure, conventions. DESIGN.md describes how it should look. Keeping them apart keeps each one short enough to be followed.