Cursor follows files, not vibes
If Cursor keeps producing off-brand UI, the fix is rarely "prompt harder." Cursor indexes markdown, rules files, and code in your workspace. When brand rules live only in your head, Cursor fills gaps with generic Tailwind defaults and common training patterns.
To make Cursor follow your brand, put design authority in files it reads automatically: DESIGN.md for visual rules, AGENTS.md for workflow instructions, and cursor rules with design tokens for persistent constraints. AI Brand Kits generates all of these from one kit.
This guide walks through placement, prompt wording, and token structure. For Claude Code parity, see brand kit for Claude Code and consistent UI with AI coding.
What Cursor needs to stay on-brand
Cursor performs best when rules are explicit, repeatable, and stored where the agent already looks. Hex codes in a one-off prompt get forgotten. Semantic tokens in DESIGN.md persist.
- DESIGN.md in repo root with fonts, colors, spacing, and component usage (DESIGN.md generator)
- AGENTS.md line: "Follow DESIGN.md for all UI, typography, and color decisions"
- Cursor rules referencing token names and forbidding ad hoc hex values
- tokens.json imported in your theme so generated code compiles with real variables
- Auto-generated prompt from export for AI agents pasted into Composer when starting UI work
Make Cursor follow your brand in six steps
Most teams see improvement on the first UI prompt after adding these files. Complete setup takes under fifteen minutes.
- Generate fonts and colors in the brand kit generator or refine in the playground
- Download DESIGN.md and commit it to your repository root
- Add AGENTS.md with a single rule pointing at DESIGN.md
- Create or update .cursorrules with cursor rules for brand and design tokens
- Import tokens.json into your Tailwind or CSS theme
- Open Composer with: "Read DESIGN.md before editing UI. Use semantic tokens only."
Fix common Cursor brand failures
Random blues on every page: missing primary token in DESIGN.md. Inconsistent headings: no headline font role defined. Mixed border radii: no spacing or radius section in AI ready brand guidelines.
Use the Chrome extension to capture tokens from live sites when rebuilding an existing brand. Save finalized kits to your dashboard and re-export when marketing updates the palette.
- New components: Cursor reads DESIGN.md and applies primary, muted, and surface tokens
- Refactors: Cursor migrates hardcoded colors to variables from tokens.json
- Multi-page features: same rules file keeps settings, billing, and dashboard aligned
FAQ
- Does Cursor read DESIGN.md automatically?
- Cursor indexes root-level markdown. Reference DESIGN.md explicitly in AGENTS.md and .cursorrules for reliable enforcement.
- What is the difference between .cursorrules and DESIGN.md?
- DESIGN.md defines how the product looks. .cursorrules defines how Cursor behaves, including "always follow DESIGN.md for UI." See cursor rules brand design tokens.
- Can I use Cursor with v0 or Lovable output?
- Yes. Export one kit and use it in Cursor, v0, and Lovable. Merge generated code against the same tokens.json.
- Will Cursor follow my brand without Pro?
- Free DESIGN.md download works. Pro zip adds tokens.json, globals.css, AGENTS.md, and starter components for faster setup.
- How do I update brand rules when colors change?
- Edit in AI Brand Kits, re-export DESIGN.md, commit, and tell Cursor the tokens file was updated.
Related
Free tools
Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.