Cursor Prompts for UI Work: A Design-Spec Approach

Updated 2026-07-05 · 7 min read

Cursor differs from Lovable and v0 in one important way: it works inside a real codebase. That makes it the strongest tool for UI work that has to live on — and it changes how you should prompt it.

Give the design system a home

The single highest-leverage move: create a DESIGN.md in your project root and reference it in prompts ("follow DESIGN.md for every component"). Keep it short and normative:

Colors: bg #0a0a0a, surface #111113, text #e6e6e6, muted #8a8f98, accent #5e6ad2 (CTAs and links only).
Type: Inter; H1 56/600/-1px; body 16/1.6.
Spacing: 8px scale. Sections 120px.
Radius: 8px everywhere. Borders 1px rgba(255,255,255,.08), no shadows.
Motion: 200ms ease-out; respect prefers-reduced-motion.
Never: gradients, emoji in UI, more than two font weights per view.

Agents read project files. A persistent spec beats repeating yourself in every prompt, and it survives across sessions and teammates.

Scope prompts to components

"Build the whole marketing site" invites drift. Instead work in passes: layout skeleton first, then one section at a time, each with its own acceptance criteria. For components, spell out states — default, hover, focus-visible, disabled, loading — because unprompted models skip the unglamorous ones.

Reference real code, not descriptions

In Cursor you can point at files: "Match the button variants in components/ui/button.tsx; add a ghost variant." That grounds generation in your actual conventions and is far more reliable than describing the convention from memory.

Review like a design lead

AI frontend code fails in predictable spots — check these before shipping:

Borrowing a design language

When you want a page to feel like a site you admire, don't say "make it look like stripe.com" — Cursor can't browse it and will hallucinate. Extract the tokens first (colors, type scale, spacing, radius) and put them in the prompt or DESIGN.md. Our design library does the extraction automatically for 350+ award-level sites.

Frequently asked questions

Should I use Cursor or Lovable for a new landing page?

Lovable is faster from zero to a complete page. Cursor is better when the page joins an existing repository, needs custom integrations, or will be maintained long-term.

What goes in DESIGN.md?

Tokens (colors, type, spacing, radius, shadows), component rules, motion rules and negative constraints. Keep it under a page — it is a contract, not documentation.

How do I keep AI edits from breaking existing styles?

Scope the request ("change only the hero"), reference the files that define your conventions, and diff-review every change like you would a junior PR.

Keep reading

How to Write Lovable Prompts That Produce Beautiful UI8 min readDesign Tokens Explained: The Vocabulary of Consistent UI6 min readv0 Prompt Guide: Components, Variants and States6 min read
Browse 350+ measured design breakdowns →