The Constitution Problem
Cursor is powerful. The default .cursorrules setups are not.
Browse any .cursorrules directory on GitHub and you'll find the same pattern: architecture rules, linting preferences, a note to “use TypeScript strictly” and “prefer functional components.” Useful for code consistency. Completely silent on visual decisions.
The result is predictable. Cursor writes your components in whatever aesthetic it learned from its training data — which means purple gradients, rounded-2xl borders, Inter at every weight, and shadow values that exist nowhere in your actual design system. Every new component requires manual CSS correction. Every correction gets undone the next time you ask Cursor to extend the component.
Telling Cursor to “use shadcn” or “follow Tailwind conventions” doesn't fix this. shadcn has a default theme. Tailwind has default values. Neither of them know that your surface is #171717 and your accent is #a8e635 and you've decided that lime only appears on interactive elements.
The only fix is specificity. Mathematical specificity.
What a Real .cursorrules Design System Block Looks Like
Here's a production-grade block. This example uses a dark editorial aesthetic with a single green accent. Drop it into your .cursorrules and Cursor will hold the visual line:
## Visual Design System
This project uses a locked design system. You are not permitted
to introduce colors, fonts, radii, or shadow values not listed
below. If a component requires a token not covered here, ask
before approximating.
### Typography
Heading font: "Fraunces", serif
Heading weights: 300, 400 only — do not use 700 or bold
Body font: "Karla", sans-serif
Body weights: 400, 500
Letter spacing (headings): -0.025em
Letter spacing (body): 0em
Line height (headings): 1.1
Line height (body): 1.6
Rule: Never use system fonts, Inter, Roboto, or any font
not listed above.
### Color Tokens
--bg: #0c0c0c
--surface: #161616
--surface-hover: #1e1e1e
--border: rgba(255, 255, 255, 0.06)
--text: #efefef
--text-muted: rgba(239, 239, 239, 0.4)
--accent: #a8e635
--accent-soft: rgba(168, 230, 53, 0.09)
Color rules:
- --accent applies to: primary button backgrounds, active nav
states, focus rings, link hover color. Nowhere else.
- --accent-soft applies to: tag/chip backgrounds, highlights.
- Do not introduce info, warning, success, or error colors
unless explicitly requested.
### Shape
Default radius: 6px (not rounded-lg — write 6px)
Small radius: 4px (inputs, tags, badges)
Large radius: 12px (modals, cards, sheet panels)
Full radius: 9999px (icon buttons, avatar circles only)
Rule: Do not use Tailwind radius classes by name.
### Shadows
Default: 0 4px 20px rgba(0, 0, 0, 0.4)
Small: 0 1px 4px rgba(0, 0, 0, 0.25)
None: box-shadow: none (not 0 0 0 transparent)
Rule: No colored shadows. No glow effects.
### Component Behavior
- Spacing uses 4px base unit: 4, 8, 12, 16, 24, 32, 48, 64px
- Disabled states: opacity 0.4 on the element
- Hover transitions: 150ms ease on color and background
- Never use inline styles. CSS custom properties or Tailwind.That block is approximately 1,900 characters. Every line removes a decision Cursor would otherwise make for you.
Why Generic Rules Fail
The failure pattern in most .cursorrules files isn't laziness — it's category confusion. Developers write excellent rules for code architecture and terrible rules for visual architecture, because they think about them differently.
“Follow the existing design system” is not a rule Cursor can enforce. It's an aspiration. Cursor will look at your existing components, identify patterns, and then diverge from those patterns the moment it encounters an edge case it hasn't seen in your codebase.
“The accent color is #a8e635 and it appears only on interactive elements” is a rule. It's falsifiable. Cursor either follows it or it doesn't. When it doesn't, the violation is obvious and correctable.
The behavioral rules section is where most developers underinvest. Token values alone cover 70% of drift. The other 30% is decisions like: what color do disabled states use, what's the hover transition timing, do cards sit on surface or background, what radius do icon buttons get. These aren't things Cursor will guess correctly from your existing components unless it's seen every variant. Write them down.
The Font Problem Specifically
Cursor hallucinates typography more than any other token category. Ask it to generate a hero section and it will pick Inter or Geist or whatever it saw most in training. Ask it to “use your current fonts” and it will scan your codebase, find a font reference, and then use that font at whatever weight it considers appropriate.
This is why the typography block in your .cursorrules needs to be exhaustive. Font family exactly as it appears in the Google Fonts import URL. Weights listed explicitly. Letter spacing in em. The negative instruction matters too — “do not use Inter” eliminates the most common drift vector in one line.
How SeedFlip Generates This Without the Four-Hour Setup
Building a .cursorrules block that actually works requires finalizing your design tokens, translating every visual decision into enforceable constraints, and testing the file against enough prompts to catch the edge cases. That process takes a few hours minimum — and it has to be redone every time you start a project with a different aesthetic.
SeedFlip's Pro tier exports a pre-built .cursorrules file directly from the active seed. The file is generated from that seed's actual token values — exact hex codes, exact Google Font names and weights, exact radius and shadow specs — with behavioral rules pre-written and structured for LLM parsing.
The workflow: open The Archive, browse 100+ curated seeds, find the aesthetic you want to build with. Use Lock & Remix to lock the palette you like and shuffle typography until the combination clicks. Export .cursorrules. Drop it into your project root. Start building.
The same session also exports CLAUDE.md and .windsurfrules from the same token set, so if you switch IDEs you're not starting over. And if you want to scaffold a full project first, The Briefing — the ~1,700-character AI prompt with five structured sections — pastes into Cursor's composer to generate a styled starting point before you even write the rule file.
The DNA (CSS Variables) is free. The rule file exports are Pro. The math is the same as it was for CLAUDE.md: a few hours of manual work versus $19.
One Config, Consistent UI
The developers who complain that Cursor generates inconsistent UI are usually right. The developers who blame Cursor are usually wrong. The model is doing exactly what it was trained to do in the absence of constraints. The constraint is your job.
A well-structured .cursorrules design system block is that constraint. Exact tokens, explicit rules, behavioral specificity. Write it once, update it when your design evolves, never correct the same CSS drift twice.
Stop typing hex values into the chat and start encoding them in the config.