15 Design Prompts That Make AI Agents Ship Better UI

Design prompts that make AI agents ship better UI share one trait: they constrain decisions instead of describing vibes. Use explicit layout, type, color roles, spacing, and anti-slop rules — not "make it modern." These fifteen patterns are copy-paste starting points; pair them with a template from the Agent's Design gallery for a complete brief.

Generic prompts produce generic UI. Specific prompts produce shippable first drafts.

How to use these prompts

Paste one pattern into your agent session (Cursor, Claude Code, Codex, v0)
Replace bracketed placeholders with your product details
Add your stack: Next.js App Router, Tailwind, HeroUI, etc.
Attach a DESIGN.md or gallery template spec when you have one
Scope work: one section per request for complex pages

Layout prompts

1. Split hero with proof strip

Build a landing hero: 55/45 split on desktop (copy left, product visual right), stacked on mobile.
Headline: [outcome] for [audience]. Subhead max 2 lines.
One primary CTA: [label]. Secondary text link only — no second button.
Below hero: horizontal logo strip, grayscale, max height 32px, 5–6 placeholders.
No gradient background. Use solid surface + subtle border separator between hero and logos.

2. Bento feature grid

Features section: CSS grid bento layout — one large 2x2 cell, three smaller cells.
Each cell: title (max 6 words), one sentence body, optional 16:9 media placeholder.
Consistent 24px internal padding. 16px gap between cells. Rounded-lg, border, no drop shadows.
Do not use identical icon-in-circle cards in a 3-column row.

3. Single-column editorial scroll

Long-form marketing page, max-width 680px centered prose column.
H1, lede paragraph, then alternating text blocks and full-bleed images (within max-width).
Section breaks via whitespace only — no colored bands between sections.
Typography carries hierarchy; no decorative dividers.

4. Sticky nav + anchor sections

Top nav: logo left, 4 anchor links center, one CTA button right. Sticky with backdrop blur on scroll.
Page sections in order: Hero, Problem, Solution, Proof, Pricing, FAQ, Footer.
Each section gets id matching nav. Add scroll-margin-top for sticky offset.

5. Pricing table (three tiers)

Pricing: 3 columns, middle tier visually emphasized (border accent, slightly larger scale).
Each tier: name, price, 5 bullet features, CTA button. Highlight tier gets filled button; others outline.
Include monthly/annual toggle UI (state only, no backend). Mobile: stack tiers vertically.

Typography prompts

6. Type scale lock

Typography scale — do not deviate:
- Display H1: text-4xl md:text-5xl, font-semibold, tracking-tight, max 2 lines
- H2: text-2xl md:text-3xl, font-semibold
- H3: text-lg font-medium
- Body: text-base leading-relaxed text-muted
- Caption: text-sm text-muted
Use [Inter/Geist/DM Sans] for UI and [optional display font] for H1 only.

7. Editorial serif pairing

Pair a serif display face for H1–H2 only with a neutral sans for body and UI.
Headlines: slightly negative letter-spacing. Body: comfortable line-length 60–70 characters.
No more than two font families in the entire page.

8. Monospace accent (dev tools)

Sans-serif for all UI text. Monospace for code snippets, kbd hints, and section labels (uppercase, text-xs, tracking-wider).
Code blocks: dark surface, rounded-lg, horizontal scroll, syntax classes placeholder.

Color and surface prompts

9. Neutral surface system

Color roles only — map to Tailwind theme tokens:
- background: near-white or near-black (pick one mode, commit)
- surface: subtle step above background for cards
- border: low-contrast separator
- accent: single brand color for CTAs and links only
- muted: secondary text
No purple gradients. No multi-color mesh backgrounds.

10. Dark mode developer aesthetic

Dark theme: background #0a0a0a range, surface cards #141414, border white/10.
Accent: one saturated color for primary CTA and focus rings.
Text: white primary, white/60 secondary. Test contrast on all body text.

11. Light minimal SaaS

Light theme only. White background, zinc borders, black/near-black text.
Accent color appears only on primary buttons and active nav — nowhere else.
Cards: white surface, 1px border, no shadow — or shadow-sm only on hover.

Component and interaction prompts

12. CTA hierarchy

Only one primary button style per viewport: filled, accent background.
Secondary actions: ghost or text link. Never two filled buttons side by side in the hero.
Button sizes: default h-10 px-4; large h-11 px-6 for hero CTA only.
Include focus-visible ring styles.

13. FAQ accordion

FAQ section: 6–8 questions. Accordion pattern — one open at a time.
Question row: full width click target, chevron rotate on open.
Answer: text-muted, padding-bottom when expanded. No card grid for FAQs.

14. Testimonial strip (no fake specifics)

Social proof section: 3 testimonial cards OR a single rotating quote placeholder.
Structure: quote text, name, role @ company — use [placeholder] labels, do not invent real people or metrics.
Layout: equal-width cards on desktop, scroll-snap row on mobile. Subtle border, no avatars unless provided.

Anti-slop meta-prompt

15. The constraint footer (append to any prompt)

Anti-slop rules — enforce on every section:
- No purple-to-blue gradients in hero
- No generic "3 icon cards" feature row unless explicitly requested
- No lorem ipsum; use concise placeholder copy tied to [product]
- No stock photo placeholders described as "happy team at laptop"
- Spacing: section py-16 md:py-24 consistent sitewide
- Max 2 font weights per family
- Deliver semantic HTML and accessible contrast
If DESIGN.md is attached, it overrides these defaults where they conflict.

Prompt patterns vs full templates

Approach	Best for	Limitation
Single prompt from this list	Quick course correction	No end-to-end layout
Prompt + DESIGN.md	Production pages	Requires spec authoring
Gallery template + prompt	Fastest tasteful baseline	Needs adaptation for brand

These patterns are not proprietary secrets — they are structure anyone can write. What saves time is pairing them with curated layouts and specs already tuned for agents.

Combining multiple prompts

You can chain patterns for a full page without writing a novel in one message:

Start with split hero (pattern 1)
Add bento feature grid (pattern 2) in a follow-up
Append pricing table (pattern 5)
Finish with anti-slop footer (pattern 15) on every request

Between steps, ask the agent to read existing spacing from the hero and match py-* and gap-* values. That continuity is what makes combined prompts feel like one design — not three unrelated generations stitched together.

Common prompt failures

Too aesthetic, not enough structure

"Premium, elegant, world-class" — agents have no actionable target.

Contradictory instructions

"Minimal but feature-rich with lots of visual interest" — pick a lane.

Everything in one message

Ask for hero first, then features, then pricing. Compound prompts compound mistakes.

No stack specified

Agents guess wrong on routing, CSS approach, and component imports.

Missing responsive rules

Always add one line: "Mobile-first; test at 375px width; no horizontal overflow."

Next step: prompts with specs attached

Copy a pattern above into your session, then pull a matching layout from the Agent's Design gallery. Templates include agent prompts and DESIGN.md files — the prompt patterns here are the vocabulary; the gallery is the full brief.

Better UI from agents is mostly better constraints. Start with one pattern, ship one section, append the anti-slop footer every time.