AI Brand Kits

Claude Design System Prompt

Paste a Claude design system prompt that locks fonts, colors, and component rules. Works in Claude Code sessions and Claude project chats.

Design system prompts that Claude follows

A Claude design system prompt translates your brand into constraints Claude applies while writing React components, Tailwind layouts, and CSS modules. Generic instructions like "make it beautiful" produce generic UI. Named tokens produce repeatable UI.

AI Brand Kits generates a prompt synced to your kit: exact Google Font names, semantic color roles, and rules for buttons, surfaces, and text hierarchy. Combine it with DESIGN.md in your repo for file-backed sessions, or paste the full prompt when working in Claude without a codebase.

For Claude Code specifically, see DESIGN.md Claude prompt and brand kit for Claude Code for repo setup.

Anatomy of a high-converting Claude design system prompt

The best prompts are structured, short, and token-first. They tell Claude what to use, what to avoid, and which file is authoritative when repo context exists.

  • Brand name and product vibe in one sentence for tone alignment
  • Headline font and body font with Google Fonts family strings
  • Color tokens: primary, accent, background, foreground, muted, border with usage notes
  • UI rules: primary for CTAs, muted for secondary text, card for elevated surfaces
  • Hard constraint: "Never invent hex values. Use tokens from DESIGN.md or tokens.json."
  • Optional: link to AI ready brand guidelines for layout density and spacing

Get your Claude design system prompt

Customize your kit below. The Copy AI Prompt button outputs a Claude design system prompt that updates as you change fonts and colors.

  • Set fonts and palette in the generator or playground
  • Click Copy AI Prompt in the export panel
  • Paste at the start of a Claude Code session or Claude project chat
  • For repo work, also commit DESIGN.md and tokens.json
  • Re-copy after brand updates and tell Claude tokens changed

When to use inline prompt vs DESIGN.md

Claude project chats without a repo: paste the full Claude design system prompt each session. Claude Code with git: short prompt plus DESIGN.md in root so Claude reads files directly.

Multi-tool teams share one kit export across v0, Lovable, and Claude so marketing and product pages match.

  • Quick prototypes: paste prompt only, no repo setup
  • Production repos: prompt + DESIGN.md + tokens.json committed to git
  • Refactors: prompt emphasizes migrating hardcoded styles to semantic tokens

FAQ

Where do I paste the Claude design system prompt?
First message in Claude Code, or project instructions in Claude.ai. For Cursor, use cursor rules brand design tokens instead.
Does the prompt include hex values?
Yes, synced to your kit. Semantic names are listed first so Claude prefers token references over raw hex in generated code.
Can I customize the prompt after copying?
Yes. Add component naming, file paths, or accessibility rules. Keep token names aligned with DESIGN.md.
Will this fix inconsistent Claude UI?
It dramatically reduces drift. Pair with consistent UI with AI coding and committed DESIGN.md for best results.
Is the Claude design system prompt free?
Yes. Copy AI Prompt is free and updates with your kit. Pro adds zip export with tokens.json and Tailwind config.

Related

Free tools

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