The prompt Claude Code actually needs
Most Claude Code sessions fail on brand consistency for one reason: the prompt describes taste, not tokens. "Make it modern and clean" gives Claude nothing to reuse on the next component. A DESIGN.md Claude prompt names your files, your semantic colors, and your font roles so every generation pulls from the same source.
AI Brand Kits auto-generates a prompt synced to your current kit. This page explains what to paste, where to paste it, and how to extend the prompt with cursor rules and design tokens when you use both Cursor and Claude.
Pair the prompt with a DESIGN.md export in your repo root. Claude Code reads markdown context files when you reference them explicitly in your opening message or AGENTS.md.
What a strong DESIGN.md Claude prompt includes
Effective prompts are short, specific, and file-aware. They tell Claude which documents are authoritative and which token names to use in JSX, CSS, and Tailwind classes.
- Explicit instruction: "Follow DESIGN.md for all typography, color, spacing, and component decisions"
- Font roles: headline font for h1 to h3, body font for paragraphs and UI labels
- Semantic color names: primary, accent, background, foreground, muted, border. not hex lists
- Reference to tokens.json for programmatic theme imports
- Constraint: "Do not invent new colors or fonts unless DESIGN.md is updated first"
- Link to Claude design system prompt variants for refactors vs greenfield work
Use the DESIGN.md Claude prompt in three steps
Generate your kit below, export DESIGN.md, then copy the prompt from the export panel. The prompt updates live as you change fonts and colors.
- Customize your brand kit in the generator or playground
- Download DESIGN.md and place it in your project root
- Click Copy AI Prompt in the export panel and paste into Claude Code before your first UI task
- Optional: add the same text to AGENTS.md so every session inherits the rule
- Re-copy after token changes so Claude always references current values
Prompt templates by Claude Code task
Greenfield UI: "Read DESIGN.md. Build a dashboard shell using primary for CTAs and muted surfaces for cards." Refactors: "Migrate hardcoded hex in components/ to CSS variables from tokens.json per DESIGN.md." Marketing pages: combine the prompt with v0 brand kit exports when designers and Claude Code share one token set.
For a full brand kit for Claude Code, bundle DESIGN.md, tokens.json, css-variables.css, and this prompt in one zip from Export for AI Agents.
- New feature work: prompt + DESIGN.md in repo root
- Design token migration: prompt + tokens.json import path
- Component library setup: prompt + Tailwind export globals.css
FAQ
- Where do I paste the DESIGN.md Claude prompt?
- Paste it as the first message in a Claude Code session, or save it in AGENTS.md at your repo root. Claude reads AGENTS.md when configured in your project.
- Does the prompt update when I change colors?
- Yes. The Copy AI Prompt button in AI Brand Kits reflects your current kit. Re-copy after edits and mention the update to Claude Code.
- Can I edit the prompt after export?
- Absolutely. Start from the generated prompt and add layout rules, component naming conventions, or links to Figma. Keep token names aligned with DESIGN.md.
- How is this different from a Claude design system prompt?
- The DESIGN.md Claude prompt references your exported file by name. A Claude design system prompt can embed token values inline when you paste context without a repo file.
- Will this work with Claude in the browser?
- Yes. Paste DESIGN.md content and the prompt into a Claude project chat. Repo-based Claude Code sessions work best because files stay indexed.
Related
Free tools
Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.