---

The trick is a file called DESIGN.md that you simply drag and drop into the chat. Claude reads it, internalises the palette, typography, component rules, and dos/don'ts — and from there builds in your brand system.

Why a DESIGN.md instead of prompt chaos?

Without a design system, you prompt yourself into the ground: "make the button cyan, no lighter, no rounded corners, ok a bit of glow…". After three iterations consistency is gone.

A DESIGN.md solves the problem because it's:

• Maintained once, reused forever — one file, every new chat on-brand
• Explicit about rules instead of guessing from examples (e.g. "logo purple ONLY for the logo, nowhere else")
• Agent-readable — Claude parses Markdown natively, no translation needed
• Versionable — check it into Git, iterate like code
• Portable — the same file works in Claude Design, Claude Code, Cursor, etc.

The DESIGN.md structure

A good DESIGN.md covers 9 sections. This is the scaffold that works at 3xLABS — copy-paste as a starting point:

1. Visual Theme & Atmosphere

Two or three paragraphs of prose — what's the vibe? Which brands are neighbours, which are anti-references? Key Characteristics as a bullet list below.

2. Color Palette & Roles

Every colour with hex, role, and rule. Not just "Cyan #01FFB7", but "Cyan — anchor colour, primary CTAs, pairs with black text". Role-based, not colour-based.

3. Typography Rules

Font family + fallback stack. A hierarchy table with Role | Size | Weight | Line-Height | Letter-Spacing. Then principles ("size, not weight, for hierarchy").

4. Component Stylings

Button variants, cards, inputs, navigation, image treatment. Per component: background, text, padding, border, hover state. Very concrete — Claude copies this 1:1 later.

5. Layout Principles

Spacing system (8px base), grid & container, whitespace philosophy, border-radius rule.

6. Depth & Elevation

Shadow steps as a table. When flat, when subtle, when colored-glow.

7. Do's and Don'ts

Two lists. Short, imperative, unambiguous. "Don't round corners" > "rounding should be avoided".

8. Responsive Behavior

Breakpoint table, touch targets, collapsing strategy.

9. Agent Prompt Guide

This is the game-changer. A quick colour reference + 3–5 example prompts that show HOW to prompt the agent in this language. Claude uses this as a few-shot training signal.

Step by step: create a DESIGN.md

Option A — build it together with Claude (recommended)

1. Gather input: 3–5 reference websites, your logo file, a palette (even if rough), fonts you like
2. Open Claude (desktop or web) and prompt:

I want to create a DESIGN.md for my brand system that I can use in Claude Design.

References:
- [URL 1], [URL 2], [URL 3]
- Anti-references: [URL], because too [reason]

Brand name: [X]
Vibe: [3 adjectives]
Audience: [who]

Build me a DESIGN.md with these sections: Visual Theme, Color Palette, Typography, Component Stylings, Layout, Depth, Dos/Donts, Responsive, Agent Prompt Guide. Write it so an AI agent can build a website from it.

3. Iterate — Claude proposes, you correct ("logo purple may ONLY be in the logo"), until it lands
4. Save as DESIGN.md in your project folder

Option B — by hand from the template

1. Open an empty .md file
2. Copy the 9-section scaffold (see the 3xLABS DESIGN.md as reference)
3. Fill section by section — colours first, then typography, then components
4. Test the Agent Prompt Guide — give Claude one of the example prompts and check the output fits

Drag & drop into Claude Design

Once your DESIGN.md exists, usage is trivial:

1. Open Claude Design (claude.ai/design or via the desktop app)
2. Start a new chat or open an existing design project
3. Drag the DESIGN.md file directly from Finder/Explorer into the chat input — Claude reads it automatically
4. Confirm briefly: "Use this design system for everything that follows in this chat."
5. Prompt as usual: "Build me a hero section with the headline 'We build signal' and a primary CTA."

Claude now references your DESIGN.md on every output — colours, typography, component rules. No more double-prompting.

Concrete example: the 3xLABS DESIGN.md

The 3xLABS DESIGN.md is a working live example. Core rules it teaches Claude:

• Canvas Grey (#F5F5F5) as the page background — never pure white
• Logo Purple (#F100D6) exclusively for the logo, never elsewhere
• Cyan (#01FFB7) as the anchor for primary CTAs, with black text
• Border-radius = 0 everywhere — sharp corners as identity
• Mona Sans Bold 80px for hero, hierarchy via size not weight
• Gradient exactly once per page: violet → ultra → cyan → lime as a 4px divider above the footer
• Diffuse coloured glow as the hover state instead of a neutral drop shadow

The Agent Prompt Guide in section 9 is the key — it shows Claude in 5 examples how to translate these rules into concrete components. From there the model builds on-brand on its own.

Common mistakes when writing a DESIGN.md

• Too abstract. "Modern and clean" tells Claude nothing. Give hex values, pixel values, concrete component specs.
• No anti-rules. Dos without don'ts leave too much open. "Don't round corners" is more valuable than "use sharp corners".
• No Agent Prompt Guide. Without section 9 the few-shot anchor is missing — Claude understands the rules but can't apply them well.
• Mixed languages. Either German OR English in the file — don't mix, it confuses the parser.
• No versioning. DESIGN.md iterates. Put it in Git, tag versions, roll back when something breaks.

Next steps

1. Download the 3xLABS DESIGN.md as a reference
2. Create your own DESIGN.md with Claude in 20 minutes
3. Drag & drop into Claude Design, test with a simple hero section
4. Iterate — whatever the output misses, you sharpen in the DESIGN.md
5. Commit to Git and use the same file in Claude Code, Cursor — portable brand system