Brand kits designed for AI coding agents
AI coding agents do not read Figma files. They read markdown, JSON, and prompts. An AI coding agent brand kit packages your visual identity into formats agents parse: DESIGN.md for context, tokens.json for structure, CSS variables for implementation.
AI Brand Kits generates agent-ready brand systems in minutes. Randomize curated font pairs and palettes, preview on live UI, export documentation your agent follows on every generation. One kit works across Cursor, Claude Code, v0, Lovable, and Windsurf.
Start with export design tokens for AI agents, then drill into Cursor rules or brand kit for Claude Code for your primary tool.
What agents need in a brand kit
Vague prompts produce vague UI. Structured brand kits give agents explicit constraints they apply consistently across components, pages, and refactors.
- DESIGN.md: agent-readable design system markdown (DESIGN.md generator)
- Semantic color tokens with usage rules per role: primary, accent, muted, surface
- Headline and body font roles with exact Google Fonts family names
- Auto-generated prompts for Cursor, Claude, v0, and Lovable (Claude design system prompt)
- Pro zip bundle with tokens.json, globals.css, AGENTS.md, and starter components
- Logo pack, favicons, and OG image from playground Pro export
Build a brand kit your agent will follow
Generate below, export to your repo, and reference DESIGN.md in agent instructions. The auto-generated prompt adds explicit font and color constraints.
- Randomize or customize font pairs and color palettes
- Validate tokens on live component preview in the generator or playground
- Export DESIGN.md to your project root
- Add AGENTS.md and cursor rules from how to make Cursor follow my brand
- Import tokens.json and merge Tailwind export into your app
Supported AI coding agents
Cursor, Claude Code, v0, Lovable, Windsurf, and any agent that reads project context files benefit from a structured brand kit. One export works across tools when you maintain consistent UI with AI coding.
Use the Chrome extension to seed kits from live sites. Browse the gallery for community kits to fork. Save finalized kits to your dashboard.
- Cursor and Windsurf: .cursorrules plus DESIGN.md in repo root
- Claude Code: AGENTS.md plus DESIGN.md Claude prompt
- v0 and Lovable: paste DESIGN.md context (v0 brand kit, Lovable design system)
FAQ
- Which file should AI coding agents read first?
- DESIGN.md in your repo root. Reference it in AGENTS.md and your prompt. Copy the auto-generated AI prompt for additional constraints.
- How is this different from a style guide PDF?
- PDFs are not machine-readable. DESIGN.md and tokens.json are structured formats agents index during code generation.
- Can I update the brand kit as my product evolves?
- Yes. Regenerate tokens in the tool, re-export DESIGN.md and tokens.json, commit, and agents pick up the latest values.
- Do I need Pro for agent workflows?
- Free DESIGN.md and prompts work for many teams. Pro adds tokens.json, Tailwind globals, components, and logo pack for production-ready handoff.
- What makes guidelines AI ready?
- Semantic tokens, file-backed rules, and synced exports. See AI ready brand guidelines for the full checklist.
Related
Free tools
Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.