What is DESIGN.md for AI agents?
DESIGN.md is a markdown design system file placed in your project root. Cursor, Claude Code, v0, and Lovable read it as context, learning your fonts, color tokens, spacing rules, and component patterns before generating UI.
Without DESIGN.md, agents drift to inconsistent colors and random font choices on every prompt. With it, they follow semantic tokens and produce interfaces that match your brand. AI Brand Kits generates DESIGN.md live as you customize your kit.
Pair exports with DESIGN.md Claude prompt, cursor rules, and tokens.json for full stack brand enforcement.
What our DESIGN.md generator includes
Every export is a complete, agent-ready design document. Content updates live as you customize fonts, colors, and vibe in the generator.
- Typography section with headline and body font roles and Google Fonts names
- Color palette with hex values and semantic token names for light mode
- CSS custom properties block ready to paste into globals.css
- Tailwind theme extension snippet from Tailwind export
- JSON design tokens reference pointing to tokens.json in Pro zip
- Usage rules agents follow for buttons, surfaces, text hierarchy, and borders
- Auto-generated AI prompt copied alongside DESIGN.md download
How to generate DESIGN.md
Customize your brand kit below. Every change updates the DESIGN.md output. Download when ready or copy to clipboard for Claude project chats.
- Set fonts via font pair generator presets or manual pick
- Set colors via color palette generator or custom edits
- Preview components to validate token choices in live UI
- Click Download DESIGN.md or Copy Markdown
- Place DESIGN.md in repo root and reference in how to make Cursor follow my brand
DESIGN.md for Cursor, Claude Code, v0, and Lovable
Drop DESIGN.md alongside your codebase. Tell your agent: "Follow DESIGN.md for all UI decisions." The file gives explicit constraints: which font for headings, which token for primary buttons, how surfaces relate to backgrounds.
Regenerate anytime your brand evolves. Combine with export design tokens for AI agents for tokens.json, AGENTS.md, and starter components in one Pro zip.
- Cursor and Claude Code: commit DESIGN.md to git, reference in AGENTS.md
- v0 and Lovable: paste DESIGN.md into chat context (v0 brand kit)
- Teams: publish AI ready brand guidelines derived from the same export
FAQ
- Where should I put DESIGN.md in my project?
- Repository root or docs folder. Cursor and Claude Code index root-level markdown. Reference it in AGENTS.md for reliable results.
- What is the difference between DESIGN.md and AGENTS.md?
- AGENTS.md tells agents how to work in your repo. DESIGN.md tells agents how your product should look: fonts, colors, tokens, and UI rules.
- Can I edit DESIGN.md after export?
- Yes. It is standard markdown. Add component specs, layout rules, or brand voice. Re-export from the generator when token values change.
- Does DESIGN.md include dark mode?
- Pro zip exports include dark palette in globals.css and tokens.json. DESIGN.md documents light tokens; extend manually or re-export for dark rules.
- Is the DESIGN.md generator free?
- Yes. Download and copy DESIGN.md for free. Pro adds full zip with tokens.json, Tailwind, and components.
Related
Free tools
Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.