AI agent workflow
Cursor can change UI quickly, but speed only helps when the agent has stable design context. A DESIGN.md file gives Cursor the colors, typography, spacing, component rules, page patterns, and anti-patterns it should follow before it edits React, Tailwind, or shadcn code.
Put DESIGN.md near your repo instructions and ask Cursor to read it before UI work. The file should name the product mood, semantic color roles, type scale, spacing rhythm, button variants, form states, table density, and examples of UI that should not appear in the product.
A strong Cursor prompt is specific: read AGENTS.md for engineering rules, read DESIGN.md for visual rules, reuse existing components, then implement the screen. This prevents generic cards, random gradients, oversized hero layouts, and one-off component styling.
Move from this landing page into deeper DESIGN.md references, examples, and guides.
DESIGN.md is a Markdown file that gives Cursor a written visual contract before it edits React, Tailwind, or shadcn code. It covers colors, typography, spacing, component rules, page patterns, and anti-patterns — giving Cursor stable design context instead of letting it make visual decisions from generic training data.
Place DESIGN.md in your repo root alongside CLAUDE.md or .cursorrules. Reference it in prompts: "Read DESIGN.md for visual rules before editing UI." You can also add a pointer in .cursorrules so Cursor reads it automatically for all UI tasks without an explicit reminder.
Include brand mood, color tokens mapped to Tailwind classes or CSS variables, typography scale, spacing rhythm with exact pixel values, component variants for buttons and cards, page layout patterns, accessibility rules, and anti-patterns. Use concrete values instead of adjectives — "card padding is 20px" rather than "clean and modern."
Yes. shadcn and Tailwind projects benefit most from DESIGN.md because those tools provide primitives but not product taste. Map your tokens and component choices to Tailwind classes and shadcn variants in DESIGN.md, and Cursor can apply them consistently across every new component.