Cursor rules for UI design: a .cursor/rules file that stops generic UI

A complete, copy-paste Cursor project rule (and CLAUDE.md equivalent) that keeps AI-written UI on your design system instead of drifting back to Tailwind defaults.

Updated 2026-10-15 · 4 min read · by the Unslop Me team

Cursor and Claude Code write excellent UI code, and then quietly reintroduce rounded-2xl, bg-gradient-to-r from-indigo-500 and a grid of Lucide icons the moment you ask for a new page. They aren't ignoring you; they just don't know your design system unless it's in the context every time. A rules file fixes that.

Here's the one we use, then how to adapt it.

The rule file

Save as .cursor/rules/ui-design.mdc:

---
description: Visual design system. Apply to any UI, styling, component or page change.
globs: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.html", "tailwind.config.*"]
alwaysApply: false
---
# Design system (follow exactly)

## Tokens (use these, never Tailwind default palette colors)
- paper #f4f0e8 (background), ink #16130f (text, primary buttons), muted #6b6459,
  accent #ff4d1c (one highlight per screen), line #d9d2c4 (borders)
- Defined in src/index.css as CSS variables and in tailwind.config as colors.paper/ink/muted/accent/line.

## Type
- Display: Fraunces (headings, logo). Text: Inter Tight. Labels/meta: JetBrains Mono, 12px, uppercase, tracking 0.12em.
- Hero h1: clamp(46px, 6.6vw, 92px), line-height 0.95, tracking -0.035em, weight 800.
- h2: clamp(36px, 4.4vw, 60px), line-height 1. Body 17px / 1.55.

## Shape
- Radius: 0 on cards and sections, 2px max on inputs. No rounded-full buttons.
- Borders: 1.5px solid ink for structure, 1px line for dividers.
- Shadows: none, except a hard offset (10px 10px 0 ink) on at most one featured element per page.

## Layout
- Left-aligned heroes, asymmetric grids (7/5, 5/7). Show real product UI, not illustrations.
- Never a row of 3/4/6 identical icon cards. Use numbered rows, a lead feature + list, or two-column text.
- Section separators are 1.5px ink top borders. Generous vertical padding (96px desktop, 64px mobile).
- Must not overflow horizontally at 390px.

## Never
- Gradients (backgrounds or text), backdrop-blur/glass, emoji as icons, icons inside colored circles/squares,
  indigo/violet/purple/slate/gray classes, the builder badge.
- Copy words: unlock, supercharge, seamless(ly), elevate, empower, effortless, revolutionize, game-changer,
  cutting-edge, all-in-one, "in seconds", "take your X to the next level".

## Copy
- Headlines say what it is and for whom, max ~8 words. Buttons are verbs ("Create an invoice").

## Before finishing a UI change
- Re-read this file and check the diff against "Never".

Why it's written this way

• Values, not adjectives. "Make it elegant" means nothing to a model. #16130f and line-height 0.95 do.
• A "Never" list. Models are better at avoiding a named pattern than at inventing an alternative. Naming the defaults (indigo, glass, emoji, pill buttons) is what stops them.
• Globs, not alwaysApply. Scoping to UI files keeps the rule out of backend work and saves context. If you find Cursor ignoring it, switch alwaysApply to true.
• A final self-check. The last line nudges the agent to review its own diff before it says it's done.

Claude Code version

Claude Code reads CLAUDE.md from the repo root. Either paste the same content (without the frontmatter) or keep it in DESIGN.md and add one line to CLAUDE.md:

For any UI or styling work, read and follow DESIGN.md exactly. Check your diff against its "Never" list before finishing.

Pair it with a scanner your agent can call

Rules prevent drift; a check catches what slips through. Unslop Me runs as an MCP server, so Cursor or Claude Code can scan the deployed site and read back the tells and fix prompts directly. Add it to .cursor/mcp.json:

{
  "mcpServers": {
    "unslop": { "url": "https://unslop-me-production.up.railway.app/mcp" }
  }
}

Then ask: "Run unslop_tells and check our landing page against it" while building, or "Run unslop_scan on https://myapp.vercel.app and fix the top three tells" after deploying. Full setup, including Claude Code, is on the agents page.

Testing that the rule works

Rules files fail silently, so test yours:

1. Open a fresh chat and ask for something that would normally produce defaults: "Add a pricing section with three tiers."
2. Check the diff. You should see your tokens (bg-paper, text-ink), no gradients, no rounded-2xl, no icon circles.
3. If defaults appear, check that the file's globs match the file being edited, then try alwaysApply: true.
4. If one rule keeps getting ignored, move it into the "Never" list with the exact class name (never use rounded-2xl). Specific bans work better than general guidance.

Common additions

Depending on your project, these lines are worth adding:

• Use the existing components in src/components/ui before creating new ones. Stops duplicate buttons with slightly different styles.
• Images: real product screenshots in /public/shots. Never generate placeholder illustrations.
• Numbers in tables use tabular-nums and right alignment.
• Empty states have one sentence and one action, no illustration.

Adapting the file

Swap the tokens and fonts for your own (see colour palettes and font pairings). Keep the structure: tokens, type, shape, layout, never, copy, self-check. If you're on v0 or Bolt, the same text works as a project instruction; the v0 prompts guide shows where it goes.

When you're done, scan the result and compare against the leaderboard.

FAQ