AI Brand Kits

Brand Kit for Claude Code

Give Claude Code a structured brand kit it can read from your repo. Export DESIGN.md, tokens.json, and agent prompts so typography and colors stay consistent.

Why Claude Code needs a brand kit, not a mood board

Claude Code excels at shipping features fast. Without design constraints, it invents a new blue, a new font stack, and a new button radius on every prompt. A brand kit for Claude Code turns vague taste into explicit rules Claude can follow while it writes components, refactors layouts, and scaffolds new pages.

The format Claude Code reads best is plain project context: markdown in your repo root, JSON tokens your app can import, and short prompts that reference those files by name. AI Brand Kits generates all three from one kit so you download once and paste into your Claude Code project.

If you already use DESIGN.md for Cursor and Claude, this page focuses on the Claude Code workflow: where to place files, what to paste into your first message, and how to combine DESIGN.md with tokens.json for production code.

What belongs in a Claude Code brand kit

Claude Code indexes files in your workspace. The highest leverage artifacts are structured, named, and short enough to stay in context alongside your codebase.

  • DESIGN.md with headline font, body font, semantic colors, spacing notes, and component usage rules
  • tokens.json with the same values in machine-readable JSON for imports and theme providers
  • css-variables.css or Tailwind export so generated components compile without manual hex hunting
  • AGENT_PROMPT.md or a Claude design system prompt that says "Follow DESIGN.md for all UI decisions"
  • Optional logo pack from the playground or logo maker for favicons and Open Graph assets

Set up a brand kit for Claude Code in five steps

You can go from zero to on-brand Claude Code output in under ten minutes. Generate the kit below, export files, and reference them in your next session.

  • Generate fonts and colors in the brand kit generator, or open the playground to refine tokens on live UI
  • Download DESIGN.md and add it to your repository root where Claude Code indexes markdown
  • Export the zip from Export for AI Agents to get tokens.json, globals.css, and AGENTS.md
  • Paste the auto-generated prompt from the export panel, or use our DESIGN.md Claude prompt template
  • Start Claude Code with: "Read DESIGN.md and tokens.json before changing any UI. Use semantic token names, not raw hex values."

When a Claude Code brand kit pays off

Solo founders use a brand kit for Claude Code to keep marketing pages, onboarding flows, and settings screens visually aligned while iterating daily. Teams pair the same export with consistent UI workflows so designers and engineers share one token source.

Claude Code also shines on refactors. When you rename `primary` to `brand` in tokens.json and DESIGN.md, Claude applies the new names across components instead of hardcoding colors from memory. Save kits to your dashboard when your brand evolves so re-exports stay organized.

  • Greenfield apps: scaffold UI with Claude Code using locked fonts and colors from day one
  • Legacy refactors: point Claude at tokens.json so it migrates hardcoded hex to semantic variables
  • Multi-tool teams: same export works in v0 and Lovable with identical token names

FAQ

Where should I put DESIGN.md for Claude Code?
Place DESIGN.md in your project root or a docs/ folder Claude Code can read. Reference it explicitly in your opening prompt and in AGENTS.md. See how to make Cursor follow your brand for a parallel Cursor setup.
Does Claude Code read tokens.json automatically?
Claude Code reads files you reference or that sit in indexed paths. Mention tokens.json in your prompt and import it in your theme setup so generated code uses the same values as DESIGN.md.
Can I use the same brand kit in Cursor and Claude Code?
Yes. DESIGN.md and tokens.json are agent-agnostic. Export once from AI Brand Kits and use the bundle in Cursor, Claude Code, v0, and Lovable.
What if Claude Code ignores my colors?
Add a Claude design system prompt with explicit rules: use primary for CTAs, use muted for secondary text, never invent new hex values. Combine with AI ready brand guidelines for voice and layout rules.
Is the brand kit export free?
DESIGN.md download and copy are free. Full zip bundles with tokens.json, Tailwind config, and starter components are available on Pro. Start with the free export and upgrade when you need the complete bundle.

Related

Free tools

Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.