How to Prompt UI Design in Cursor (With Examples)

To prompt UI design in Cursor effectively, attach DESIGN.md and target files with @, scope each request to one section, and specify layout geometry, type scale, and forbidden patterns — not adjectives like "modern" or "clean." Cursor has repo context; prompts should supply taste constraints the model cannot infer.

This guide is Cursor-specific prompt examples. For full workflow, see how to design UI with Cursor and 15 design prompts for better UI.

Prompt anatomy that works in Cursor

Every strong UI prompt in Cursor includes:

Part	Example
`@` context	`@DESIGN.md` `@components/ui/button.tsx` `@components/landing/hero.tsx`
Scope	"Hero only — do not edit other files"
Layout geometry	"55/45 split, copy left, mockup right"
Content	Real headline and CTA text
Stack	"Next.js, Tailwind, shadcn Button"
Anti-patterns	"No gradients, no three equal cards"

Missing any layer increases slop risk.

Example 1: First hero (greenfield)

@DESIGN.md @components/ui/button.tsx @components/landing/hero.tsx

Implement hero section only.

Layout: 55/45 split on lg+, stacked on mobile. Copy left, product screenshot frame right (16:10, border, subtle shadow).

Copy:
- Eyebrow: "For engineering teams"
- H1: "Ship dashboards your users actually open"
- Subhead: "One API. Real-time charts. No BI ticket queue."
- Primary CTA: "Start free trial"
- Secondary: text link "View docs" — no second button

Use Button from @components/ui/button.tsx. Colors and type from DESIGN.md only.
No gradient backgrounds. No font imports beyond DESIGN.md.
Do not edit files outside hero.tsx and page.tsx import.

Example 2: Bento features (fix slop)

@DESIGN.md @components/landing/features.tsx

Replace current features section with bento grid per DESIGN.md.

Grid: 5 cells — one spans 2x2, four smaller. Gap 16px. Rounded-lg, border, no drop shadow.

Cell content:
1. "Live queries" — Run SQL on streaming data without warehouse sync.
2. "Shared dashboards" — Pin charts to Slack channels.
3. "Git sync" — Version dashboards like code.
4. "Row-level security" — Map roles to data access.
5. "Embeds" — iframe or React component for customer portals.

No icon-in-circle trio. No three equal columns. Typography from DESIGN.md.

Example 3: Pricing table

@DESIGN.md @components/ui/card.tsx @components/landing/pricing.tsx

Pricing section: 3 tiers in a row (stack on mobile).

Tiers:
- Starter $29/mo — 5 seats, 10 dashboards, email support
- Pro $79/mo (highlighted) — unlimited dashboards, SSO, priority support
- Team Custom — SLA, dedicated CSE, contact sales

Middle tier: ring-2 ring-accent, slightly larger scale. Toggle UI for monthly/annual (state only).
Use Card and Button from components/ui. Real feature names only — no lorem.

Example 4: Navigation shell

@DESIGN.md @components/landing/nav.tsx

Sticky nav: logo text left, 4 anchor links center (Product, Pricing, Docs, Blog), "Sign up" button right.
Backdrop blur on scroll. Mobile: hamburger → sheet menu.

Links are # anchors matching section ids on page. No dropdown menus.
Height 64px. Border-b on scroll only.

Example 5: Anti-slop recovery (screenshot feedback)

Paste browser screenshot into Cursor chat:

This hero has too much vertical padding and the H1 is oversized.

@DESIGN.md @components/landing/hero.tsx

Reduce section py by one step from DESIGN.md scale. H1 one size smaller on md breakpoint.
Increase gap between subhead and CTA to 24px. Keep copy unchanged.

Visual feedback beats "make it look better."

Example 6: Inline edit (Cmd+K) for polish

Select a JSX block, Cmd+K:

Tighten line-height on this paragraph to DESIGN.md body spec.
Change muted text to text-muted-foreground token. No other edits.

Use Composer for structure; inline for micro-adjustments.

Example 7: Component library enforcement

@DESIGN.md @components/ui/

Add contact form to components/landing/contact.tsx.
Fields: name, email, company, message. Use Input, Label, Textarea, Button from components/ui only.
Do not create raw HTML inputs. Error states: border-destructive + text below field.

Example 8: Dark mode section (if in spec)

@DESIGN.md @components/landing/cta.tsx

CTA band: full-width bg-neutral-950, text neutral-50.
Headline + one sentence + single white button (primary).
Padding py-24. No gradient mesh. No decorative blobs.

Prompts that fail in Cursor

Weak prompt	Why it fails
"Make a beautiful landing page"	No geometry, no scope
"Like Stripe but for X"	Agent guesses wrong patterns
"Use shadcn" without `@components/ui/`	May duplicate primitives
Whole app in one Composer message	Inconsistent sections
No DESIGN.md attached	Reverts to purple gradient median

Pair prompts with persistent rules

Add to .cursor/rules:

Always read DESIGN.md before UI changes
One section per Composer request unless user says otherwise
Never add font families not in DESIGN.md
Reject wide diffs — ask to narrow scope

Rules + prompts compound.

When to paste gallery prompts

If you use Agent's Design templates:

@DESIGN.md @PROMPT.md @components/landing/hero.tsx

Implement hero per PROMPT.md section 1. Tokens from DESIGN.md override PROMPT styling conflicts.

Gallery prompts are section-decomposed — faster than writing from scratch.

Prompt checklist before sending

@DESIGN.md attached
Target file(s) attached
"Only edit [files]" stated
Layout described with numbers (columns, splits, gaps)
Real copy pasted for headlines and CTAs
Anti-patterns listed
Stack and component paths explicit

Related resources

How to build a landing page with Cursor — end-to-end build order
15 Design Prompts for Better UI — more copy-paste patterns
Anti-slop design checklist

Copy a template prompt from Agent's Design, @-reference your spec, and prompt one section at a time. Cursor already has the codebase — prompts supply the taste layer.