Why generic rules fail
Open any popular .cursorrules template on GitHub. You'll find rules like "use functional components," "prefer TypeScript," and "follow the project's existing patterns." These are fine for code quality. They do nothing for visual consistency.
The AI follows these rules and still generates rounded-lg when your system uses rounded-xl. It still picks text-gray-500 when your muted color is text-zinc-500. It still defaults to font-bold when your headings use font-semibold. Generic rules can't prevent design regressions because they never mention the design.
The anatomy of a regression-proof rule
A good design rule has three parts: the constraint (what to do), the value (the specific token or variable), and the boundary (where it applies). Here's the difference:
# Bad: vague, no specific values
Use consistent spacing throughout the app.
Follow the design system.
# Good: specific constraint + value + boundary
Spacing uses a 4px base scale: 4, 8, 12, 16, 24, 32, 48, 64.
Never use arbitrary spacing values like p-[13px] or gap-[22px].
Component internal padding is always 16px (p-4).
Section spacing between components is always 24px (gap-6).The AI can't follow "follow the design system" because it doesn't know what your design system says. It can follow "spacing uses a 4px base scale" because that's a concrete, checkable rule.
The five rule categories that prevent drift
After analyzing hundreds of AI-generated regressions, the drift always traces back to five categories. Nail these five and your .cursorrules file covers 95% of visual issues.
1. Color rules
Colors are the most common source of drift. The AI knows thousands of color values and will reach for the closest "reasonable" one unless you specify yours.
# Color System — NEVER use colors outside this palette
Background: #FAFAFA (bg-zinc-50)
Surface: #FFFFFF (bg-white)
Border: #E4E4E7 (border-zinc-200)
Text primary: #18181B (text-zinc-900)
Text muted: #71717A (text-zinc-500)
Primary: #6366F1 (bg-indigo-500)
Primary hover: #4F46E5 (bg-indigo-600)
Destructive: #EF4444 (bg-red-500)
# FORBIDDEN color classes (common AI defaults that break our palette)
Never use: gray-*, slate-*, neutral-* — we use zinc-* exclusively.
Never use: blue-* for primary — we use indigo-*.The "FORBIDDEN" section is critical. The AI defaults to gray because it's the most common gray scale in its training data. Explicitly banning it forces the model to reach for your zinc palette instead.
2. Typography rules
# Typography — three fonts, no exceptions
Body: 'Inter', 15px (text-[15px]), weight 400
Display/headings: 'Instrument Serif', italic, weight 400
Code: 'Geist Mono', 13px, weight 400
Heading hierarchy:
h1: 36px, Instrument Serif, italic, letter-spacing -0.03em
h2: 28px, Instrument Serif, italic, letter-spacing -0.02em
h3: 18px, Inter, weight 600
Body: 15px, Inter, weight 400, line-height 1.75
# FORBIDDEN
Never use font-bold (700) for headings — we use font-semibold (600).
Never use text-sm (14px) for body — our body is 15px.
Never use text-base (16px) for body — our body is 15px.3. Spacing and radius rules
# Spacing — 4px base scale only
Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
Component padding: 16px (p-4) for cards, 24px (p-6) for sections
Gap between components: 24px (gap-6)
Gap between sections: 48px (gap-12)
# Border radius
Small elements (badges, chips): 8px (rounded-lg)
Medium elements (cards, inputs): 12px (rounded-xl)
Large elements (modals, panels): 16px (rounded-2xl)
# FORBIDDEN
Never use rounded-md (6px) — too small for our system.
Never use rounded (4px) — not in our scale.4. Component boundary rules
These prevent the AI from rewriting shared components when it only needs to use them.
# Component Boundaries — READ ONLY
These components are shared across the app. NEVER modify them.
Use them as-is. If they don't fit your need, ask before changing.
Read-only components:
src/components/ui/button.tsx
src/components/ui/card.tsx
src/components/ui/input.tsx
src/components/ui/dialog.tsx
src/components/content/content-page.tsx
When building new features:
1. Import existing components — don't recreate them.
2. Compose with existing tokens — don't invent new ones.
3. If a component is missing, create it in src/components/
using the same token system.5. Shadow and border rules
# Shadows — only two levels
Subtle: 0 1px 2px rgba(0,0,0,0.05)
Elevated: 0 4px 12px rgba(0,0,0,0.08)
# Borders
Default border: 1px solid #E4E4E7
Never use border-2 or thicker borders.
Dividers: same as border color, always 1px.Putting it all together
A complete .cursorrules file for design enforcement looks like this. It combines all five categories into one file that Cursor loads automatically on every prompt.
# .cursorrules — Design System Enforcement
# This file is auto-loaded by Cursor on every prompt.
# DO NOT remove or modify these rules.
## Design Tokens (source of truth)
Colors: zinc palette. Primary: indigo-500.
bg: #FAFAFA | surface: #FFF | border: #E4E4E7
text: #18181B | muted: #71717A | primary: #6366F1
Typography: Inter (body 15px/400), Instrument Serif
(display, italic/400), Geist Mono (code, 13px/400)
h2: 28px serif italic | h3: 18px/600 | body: 15px/1.75
Radius: 8/12/16 | Spacing: 4px base scale
Shadows: subtle (1px blur) | elevated (12px blur)
## Rules
- ONLY use colors from the palette above.
- NEVER use gray/slate/neutral — use zinc.
- NEVER use font-bold — use font-semibold.
- NEVER modify shared components in src/components/ui/.
- ALL spacing values must be multiples of 4.
- Import existing components, don't recreate them.If writing these rules from scratch sounds tedious, that's because it is. SeedFlip generates complete .cursorrules files from any of its 104 design seeds. Pick a seed that matches your brand, export the rule file, and drop it in your project root. Every token, every forbidden value, every component boundary rule is already written.
Rules that backfire
Not all rules help. Some actively make things worse:
Overly verbose rules. If your .cursorrules file is 500 lines long, the AI starts ignoring the later sections. Keep it under 150 lines. Dense, not sprawling.
Contradictory rules. "Use Tailwind classes" combined with "use CSS variables for all colors" creates ambiguity. The AI picks one, and you won't know which until you see the output.
Rules without values. "Use consistent spacing" without specifying the scale is useless. The AI's idea of consistent and your idea of consistent are different.
Performance rules mixed with design rules. Keep your design rules separate from your code quality rules. The AI processes them differently and mixing them dilutes both.
Testing your rules
After writing your .cursorrules, test them. Open Cursor and ask it to build a component from scratch. Don't mention any design tokens in your prompt. Just say "build a user profile card." Then inspect the output. Did it use your colors? Your radius? Your font weights? If it used generic Tailwind defaults, your rules need to be more specific.
The gold standard: the AI produces pixel-perfect output without you mentioning design in the prompt. That's when your rules are working. Your design system is no longer something you have to remember. It's something the AI can't forget.
Your .cursorrules file is either preventing regressions or decorating your repo. There's no middle ground. For the full picture on how these rules interact with other AI instruction formats, read How .cursorrules Shape AI Design Output. To see how design tokens translate into rule files, check From Design Tokens to IDE Rule Files.