UI/UX Prompt
Generator.
Wireframes, user flows, component specs, research scripts, usability tests, design critiques — as structured briefs your team (or your AI) can actually act on.
Works with ChatGPT, Claude, Cursor, v0, Lovable, Bolt — and as kickoff briefs for human designers.
Describe the design work
3 design brief variations
Paste into ChatGPT, Claude, or Cursor# ROLE
You are an experienced product designer.
# TASK
Describe the wireframe as a hierarchical layout tree: header, content region, sidebar, footer — with specific content blocks inside each. List the primary CTA and the one supporting CTA. Call out placements for empty, loading, and error states. Do not describe visual design — stick to structure and content.
# CONTEXT
Product type: SaaS web app.
# DESIGN PRINCIPLES TO HONOR
- WCAG 2.2 AA accessibility
- Mobile-first responsive
# FIDELITY
Mid-fi (greyscale, real content)
# OUTPUT RULES
- Be specific. Avoid generic design advice ("make it clean", "reduce clutter").
- Name real patterns, components, or references by name when you use them.
- When proposing copy, write the actual copy — not a description of what it should say.
- When something is ambiguous, state your assumption explicitly before continuing.# ROLE
You are a senior product designer with strong systems-thinking and a track record of shipping.
# TASK
Describe the wireframe as a hierarchical layout tree: header, content region, sidebar, footer — with specific content blocks inside each. List the primary CTA and the one supporting CTA. Call out placements for empty, loading, and error states. Do not describe visual design — stick to structure and content.
# CONTEXT
Product type: SaaS web app.
# DESIGN PRINCIPLES TO HONOR
- WCAG 2.2 AA accessibility
- Mobile-first responsive
# FIDELITY
Mid-fi (greyscale, real content)
# OUTPUT RULES
- Be specific. Avoid generic design advice ("make it clean", "reduce clutter").
- Name real patterns, components, or references by name when you use them.
- When proposing copy, write the actual copy — not a description of what it should say.
- When something is ambiguous, state your assumption explicitly before continuing.
# SELF-CHECK BEFORE DELIVERING
Ask yourself: Would a developer / PM / researcher receive this and be able to act on it without follow-up questions? If not, add the missing specificity.# ROLE
You are a staff product designer with 12+ years across B2B SaaS and consumer products, known for shipping work that moves metrics.
# TASK
Describe the wireframe as a hierarchical layout tree: header, content region, sidebar, footer — with specific content blocks inside each. List the primary CTA and the one supporting CTA. Call out placements for empty, loading, and error states. Do not describe visual design — stick to structure and content.
# CONTEXT
Product type: SaaS web app.
# DESIGN PRINCIPLES TO HONOR
- WCAG 2.2 AA accessibility
- Mobile-first responsive
# FIDELITY
Mid-fi (greyscale, real content)
# OUTPUT RULES
- Be specific. Avoid generic design advice ("make it clean", "reduce clutter").
- Name real patterns, components, or references by name when you use them.
- When proposing copy, write the actual copy — not a description of what it should say.
- When something is ambiguous, state your assumption explicitly before continuing.
# DELIVERY FORMAT
Finish with a "Trade-offs" section listing 2–3 decisions you made and the alternative you rejected, with a 1-line reason for each.Why these prompts work
Specific inputs in. Specific design outputs out.
Each task has its own output structure. A research script gets a 5-part interview format; a wireframe gets a hierarchical layout tree. Not one-size-fits-all.
Every prompt bans hand-wavy advice ('make it clean', 'reduce clutter'). Outputs must name specific patterns, write real copy, and state assumptions.
The senior-designer variant forces a trade-offs section — what you chose vs what you rejected and why. That's what separates juniors from staff designers.
Related tools
Full design-prompt toolkit.
FAQ
Questions about UI/UX prompts.
What can I use this UI/UX prompt generator for?+
Ten design tasks: wireframe a screen, design a user flow, spec a component, write research questions, plan a usability test, critique a design, design an empty state, design onboarding, write error / system microcopy, or produce a redesign brief.
Will this work in Cursor, Claude Code, or v0?+
Yes. The generated prompts are structured design briefs — they work anywhere you can paste text. Teams use them in ChatGPT, Claude, Cursor, v0, Lovable, Bolt, and as kickoff briefs for human designers.
Can I use it to generate wireframes with AI tools like v0 or Galileo?+
Yes. The wireframe task outputs a hierarchical layout spec that tools like v0, Galileo, and Figma AI can consume directly. For higher-fidelity output, first run the wireframe prompt, then paste that output into a high-fi tool with 'render this as a clean UI design'.
Does it enforce accessibility?+
Only if you check the WCAG 2.2 AA principle in the inputs. When selected, the generator adds explicit accessibility requirements (keyboard support, screen reader labels, color contrast 4.5:1, focus states) to the output.
How is this different from a generic ChatGPT prompt?+
Generic prompts produce generic design advice. This generator bakes in a senior-designer persona, task-specific output structures (e.g. research scripts use the 5-part interview format), design principles, and rules that prevent hand-wavy language like 'make it clean'.