AI Brand Kits

Cursor Rules for Brand & Design Tokens

Write Cursor rules that enforce your brand. Point .cursorrules and AGENTS.md at DESIGN.md and tokens.json so Cursor stops inventing colors.

Cursor rules are how brand becomes habit

Cursor reads .cursorrules and AGENTS.md at the start of agent sessions. Without brand rules, Cursor defaults to generic UI patterns from training data. Cursor rules for brand and design tokens tell the agent: read DESIGN.md, use semantic color names, import from tokens.json, never add ad hoc hex values.

AI Brand Kits exports the files your rules reference: DESIGN.md, tokens.json, css-variables.css, AGENTS.md, and a copy-paste prompt. This page shows what to put in .cursorrules and how to connect it to your tokens.json brand kit.

For step-by-step Cursor setup, see how to make Cursor follow my brand. For Claude Code, use cursor rules equivalents in AGENTS.md.

What to put in Cursor rules for design tokens

Keep rules short and authoritative. Cursor performs better with clear file references than long prose about brand personality.

  • "Always read DESIGN.md before generating or editing UI components"
  • "Use semantic tokens: primary, accent, background, foreground, muted, border"
  • "Import colors from tokens.json or CSS variables in globals.css, not inline hex"
  • "Headline font from DESIGN.md for h1 to h3. Body font for paragraphs and labels"
  • "When unsure, match patterns in components/ from the Pro zip export"
  • Link rules to DESIGN.md generator output updated on each export

Set up cursor rules with design tokens

Add rules once per repo. Every Cursor Composer and Agent session inherits them.

  • Generate kit and export DESIGN.md plus Pro zip with tokens.json
  • Create AGENTS.md: "Follow DESIGN.md for all visual decisions"
  • Add .cursorrules with token enforcement rules from this page
  • Import tokens in tailwind.config or globals.css from Tailwind export
  • Test with a UI prompt: "Build a settings page using our design tokens only"

Example .cursorrules snippets for brand tokens

Greenfield: "All new components must use CSS variables from globals.css. Primary buttons use bg-primary text-primary-foreground." Refactor: "Replace hardcoded # hex in src/ with semantic tokens from tokens.json per DESIGN.md."

Teams using v0 brand kit for marketing and Cursor for app code keep one tokens.json so merged PRs do not reintroduce off-brand colors.

  • Monorepo: root .cursorrules points all packages at shared tokens.json
  • Design system package: rules require importing from @brand/tokens
  • Legacy migration: rules forbid new hex literals in JSX and CSS modules

FAQ

Where does .cursorrules go?
Repository root, or project root in monorepos. Cursor loads rules from the workspace root.
Should I duplicate tokens in .cursorrules?
No. Reference DESIGN.md and tokens.json by path. Duplicating hex in rules creates drift when the brand updates.
Do cursor rules work with Claude Code?
Claude Code uses AGENTS.md instead. Export the same DESIGN.md and tokens.json. See brand kit for Claude Code.
Can rules enforce dark mode tokens?
Yes. Pro exports include dark palette in tokens.json and globals.css. Add: "Support light and dark using exported CSS variables."
What if Cursor still ignores tokens?
Strengthen AGENTS.md, paste the export prompt, and verify tokens.json is imported in theme code so suggestions compile.

Related

Free tools

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