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'.