How to Use Claude Design With DESIGN.md Files for On-Brand UI

Anthropic launched Claude Design in April 2026 and the reaction from designers was immediate: it generates polished, production-ready UI from a single sentence. Prompt it with "a settings page for a fintech dashboard" and you get a layout with typography, spacing, component hierarchy — the works.

The problem shows up in the second iteration.

Ask it to build the onboarding flow for the same product and you get a different visual language. Different button radius. Different type scale. Different surface colors. By the fourth screen, your product looks like it was designed by four different teams on four different continents.

This is the problem that DESIGN.md files were built to solve — and connecting the two is one of the most underused workflows in AI-assisted product design right now.

What Claude Design actually does

Claude Design is a visual generation layer inside the Claude suite. It takes a text description, image reference, or sketch and produces interactive UI layouts with real CSS structure underneath. Unlike generic AI image generators, the output is built to be edited, iterated, and eventually connected to a codebase.

What it does not do by default is know anything about your design system. Left to its own devices, it picks a palette, a type scale, and a component style that it finds internally plausible. That output is often good-looking. It is rarely yours.

What a DESIGN.md file contains

A DESIGN.md file is a structured Markdown document that codifies your design system in a format that language models can read precisely. It typically covers nine areas:

1. Visual Theme — the mood, creative direction, and brand keywords
2. Color Palette — every color with a named semantic role and hex value
3. Typography — font families, scale table, weight and tracking rules
4. Component Stylings — exact specs for buttons, cards, inputs, navigation
5. Layout Principles — spacing system, grid philosophy, whitespace rules
6. Depth & Elevation — shadow values and elevation tiers
7. Do's and Don'ts — explicit rules that prevent visual drift
8. Responsive Behavior — breakpoints and how components collapse
9. Agent Prompt Guide — pre-written prompts for common components

The Agent Prompt Guide section is what makes the format AI-native. Instead of hoping Claude Design correctly infers your intent from tokens, you give it verbatim component prompts that embed the exact hex codes, border radii, and font weights it needs to produce correct output every time.

The connection: feeding context into Claude Design

Claude Design supports file and document uploads as context. That's the entry point.

Here's the workflow in four steps:

Step 1 — Get your DESIGN.md file

Either write one from scratch (following the nine-section structure), generate one from a production website using a token-extraction tool like dembrandt, or download one from a curated library like Design.md Store.

If you're starting from an existing brand, a pre-built file is the fastest path. A well-structured DESIGN.md for a brand like Stripe or Coinbase captures the actual CSS variable values, not guesses.

Step 2 — Open Claude Design and attach the file

Start a new project in Claude Design. Before writing your first prompt, attach your DESIGN.md file as a context document. Claude treats it as a reference it will consult throughout the session — not just for the first generation, but for every iteration that follows.

Step 3 — Reference sections explicitly in your prompts

Generic prompts produce generic output even with context attached. The more explicitly you reference your DESIGN.md, the more consistent the result:

"Using the Color Palette from the attached DESIGN.md — specifically the Primary and Surface colors — design a pricing comparison table with three tiers."

"Following the Button specs in Section 4 of the DESIGN.md, create a CTA section with one primary button and one ghost button variant."

The Agent Prompt Guide section at the bottom of your DESIGN.md gives you pre-written starters for exactly this. Copy them, adapt the layout request, and Claude Design will anchor its output to your actual design language.

Step 4 — Iterate without drift

Here's where the workflow pays off. As you generate more screens, Claude Design maintains the context from your DESIGN.md across the session. The button radius on screen eight will match screen one. The text color on your empty state will match the rest of the product.

When you want to deviate from the system deliberately — a marketing landing page with a bolder palette, for example — you can explicitly override specific tokens in your prompt while keeping the rest of the system intact.

What this looks like in practice

Take the Starbucks DESIGN.md from Design.md Store as an example. It documents House Green #1E3932 as the primary background, Starbucks Green #006241 for interactive elements, SoDoSans as the typeface family, and fully pill-shaped buttons (border-radius: 50px) as the component signature.

Without that file, prompt Claude Design with "a loyalty rewards screen for a coffee app" and you get something generic — possibly brown, probably rounded, maybe handwritten type. With the DESIGN.md attached, the same prompt produces a layout that uses the exact greens, the pill buttons, and the typographic hierarchy of the actual Starbucks system.

The difference isn't subtle.

Why this matters for teams

The standard response to AI-generated UI inconsistency is to constrain the AI more aggressively, or to treat its output as disposable and always rebuild from scratch in Figma. DESIGN.md files offer a third path: make the design system machine-readable so the AI doesn't have to guess.

This is particularly valuable for:

• Solo developers building products without a dedicated design function — a DESIGN.md file from an established brand gives you a proven design language to build on
• Small teams who want AI-generated first drafts that don't need extensive rework to match production standards
• Design systems leads who want consistent AI output across multiple contributors without policing every generation

The format is plain text. It lives in your repo. Every change is a commit. And it works with Claude Design, v0, Cursor, and any other AI coding tool that accepts document context.

Getting started

If you don't have a DESIGN.md for your product yet, the fastest starting point is to download one from Design.md Store and adapt it. The library includes files for established design systems — Stripe, Apple, Coinbase, Starbucks, and more — each one ready to attach directly to a Claude Design session.

Pick the brand whose visual language is closest to what you're building. Use it as a structural template: keep the format, swap the values. Within an afternoon you'll have a context document that makes every Claude Design generation actually look like your product.

That's the shift — from AI that invents your design language to AI that applies it.