Updated 5 September 2026 · Works with React, Next.js, Tailwind, Vue, Svelte, Astro and plain HTML/CSS.
Copy-ready Cursor UI design prompt
Replace the three bracketed fields. Keep the rest stable across UI tasks so Cursor follows one repeatable process.
You are refining the visual layer of an existing production interface. SOURCE OF TRUTH - Read @DESIGN.md before writing code. - Reuse its colour, type, spacing, radius, shadow and motion tokens. - Preserve all routes, state, data, handlers and business logic. THIS TASK Improve [PAGE OR COMPONENT] for [PRIMARY USER AND ACTION]. The primary action is [ACTION]. It must have the strongest visual emphasis. Use [APPROVED LAYOUT] and keep supporting content quieter. DO NOT - invent colours, fonts, gradients, radii or shadows - centre every section - create three identical feature cards as filler - use emojis as UI icons - refactor unrelated code RESPONSIVE AND ACCESSIBLE - show the reflow at 375px, 768px and 1440px - preserve visible keyboard focus and WCAG AA contrast - respect prefers-reduced-motion DELIVERY Make the smallest safe diff. Then list: files changed, DESIGN.md rules applied, responsive checks and anything that still needs human review.
Why this performs better than “make it modern”
The prompt separates visual rules from application behaviour, narrows the task to one surface and defines how the agent must prove completion. The real leverage comes from replacing every open choice with a token or rule in DESIGN.md.
Add a scoped Cursor project rule
Save the following as .cursor/rules/design.mdc. The glob list scopes it to frontend files, while the task prompt still tells Cursor exactly when the visual system matters.
--- description: Pixel Perfect visual rules for frontend files globs: ["**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css"] alwaysApply: false --- Before any UI generation or visual edit, read @DESIGN.md. Apply its tokens and constraints exactly. Preserve application logic and make the smallest safe diff. Do not invent visual values that are absent from the file. After editing, audit the result against DESIGN.md and report any drift.
Use three passes instead of one giant prompt
Lock the system
Approve colours, type, spacing, layout, components, motion and do-not rules before code.
Change one surface
Run the main prompt on one page or component. Keep the diff narrow and preserve logic.
Audit the result
Compare the browser output to DESIGN.md, then fix drift, mobile issues and accessibility.
Audit-only prompt
Use this before a risky redesign or after the first visual pass:
Do not edit yet. Audit this screen against @DESIGN.md. Return a table with: rule, current evidence, pass/warn/fail, exact fix. Check hierarchy, typography, colour roles, spacing rhythm, component consistency, focus states, contrast and the 375px layout. Then rank the five fixes by impact divided by effort.
Weak prompt versus controlled prompt
| Weak instruction | Controlled replacement |
|---|---|
| “Make it look premium.” | “Use the approved editorial direction, one warm accent, high display/body contrast and no gradient.” |
| “Improve the layout.” | “Keep a split hero: copy 55%, product visual 45%, one primary CTA and a narrow proof rail.” |
| “Use better spacing.” | “Use the 8px scale in DESIGN.md; 24px inside cards and 80px between desktop sections.” |
| “Make mobile responsive.” | “At 375px stack the hero, keep 18px side padding, 44px targets and no horizontal overflow.” |
| “Make it less AI-looking.” | “Ban unapproved gradients, equal card rows, emoji icons, default font choices and invented shadows.” |
What to put in DESIGN.md before running the prompt
- Product feeling and one clear visual direction.
- Five role-based colour tokens using the 60-30-10 rule.
- Display, body and mono font roles with exact scales.
- Spacing unit, container width, section rhythm and breakpoints.
- Approved hero structures and component states.
- One radius, border, shadow and motion policy.
- WCAG, focus and reduced-motion requirements.
- A short banned list based on the generic patterns you actually see.
Four mistakes that weaken Cursor’s UI output
Too much scope
“Redesign the app” gives the agent permission to change unrelated code and invent multiple systems.
No visual source
A long prompt still drifts if colours, fonts and component rules remain undefined.
No banned list
If you dislike gradients, equal cards or generic fonts, name them before generation.
No verification pass
Code completion is not visual completion. Check the rendered page, mobile reflow and focus states.
Frequently asked questions
What is a good Cursor UI design prompt?
A good Cursor UI prompt names the visual source of truth, preserves product logic, defines hierarchy and responsive behaviour, bans generic defaults and requires a final audit. Exact tokens in DESIGN.md are stronger than descriptive adjectives.
How do I stop Cursor from generating generic UI?
Give Cursor fewer open visual decisions. Define the palette, typography, spacing, layout, components and prohibited patterns before asking it to build. Work one screen at a time and audit against the same system.
Where should I put DESIGN.md in a Cursor project?
Put DESIGN.md in the project root and add a scoped rule under .cursor/rules that tells Cursor when to read and apply it.
Can this workflow work with Tailwind and React?
Yes. The method is framework-independent. For Tailwind, map the approved colours, type, radii and spacing into the theme rather than scattering arbitrary utility values through components.
Will the prompt change my application logic?
The starter explicitly tells Cursor to preserve routes, state, data, handlers and business logic. You should still review the diff and test the page after every visual pass.