Cursor Rules for Design: Make AI-Built UIs Look On-Brand

Cursor reads project rules from .cursor/rules. Each rule is an .mdc file (Markdown with a short header) that can be always applied, attached to matching files, or pulled in when the agent decides it's relevant. For design, two layers work best:

• An always-on rule of a few lines: the non-negotiables (palette roles, the type scale, one accent, no gradients) and where the full system lives.
• Reference files the rule points to: tokens.json, rules.md, components.md. The agent reads them when it's building UI, not on every request.

---
description: Our design system
alwaysApply: true
---

Always follow the design system in .livery/my-site/.
- Colours, type and spacing come from tokens.json; never hard-code values.
- One accent per screen, on the primary action.
- Read rules.md before building or restyling any UI.

"Use #0d7268 for buttons" is followed for a while and then broken in a modal. "The accent marks the one action you want taken, so use it once per screen" survives new screens, because the agent understands the intent. Give every rule its reason, and keep a short Never list: never a gradient, never a coloured shadow, never body text under 14px.

Asked to "apply the design", an agent may restyle the whole app in one pass. Ask for a plan first, then one area per change: tokens first (so colours and spacing are centralised), then components, layout, motion. Review each diff on its own.

A Livery kit is the same set of files, measured from any public website: tokens.json, rules.md, components.md, layout.md, motion.md and a SKILL.md with the step-by-step process. For Cursor, unzip it into your project and add the one-line rule above. The agent follows the same audit, ask and commit steps as in Claude Code.