Why a prototype shouldn't take a week
Every product team knows the pain: you need a clickable prototype to validate an idea, but the designer is booked for the next sprint, and Figma iterations stretch from days to weeks. Meanwhile, the cost of a bad UX decision grows exponentially after development starts. What if you could compress the prototyping phase to a single day without sacrificing quality?
The answer lies in combining Figma's design capabilities with ChatGPT's generative power. This isn't about replacing designers — it's about augmenting your team's ability to move fast. With the right prompts, you can generate UX copy, structure design systems, run heuristic audits, and even produce Figma-ready component specs in minutes.
Below are 12 battle-tested prompts that cover the entire prototyping workflow: from user research synthesis to usability testing scripts. Each prompt is designed to be copy-pasted directly into ChatGPT (or any LLM) and adapted to your project. We've included real examples and code snippets where relevant.
Note: These prompts assume you have basic familiarity with Figma and UX principles. They work best when combined with Figma's own AI features (like FigJam AI) and plugins such as "Content Reel" or "Autoflow".
1. User persona generator from raw interview notes
Task: Turn messy interview transcripts into structured personas that inform design decisions.
Prompt:
You are a senior UX researcher. Below are notes from 5 user interviews for a [product type] targeting [audience]. Extract patterns and create 3 distinct personas. For each persona include:
- Name, age, occupation
- Goals and motivations
- Pain points related to [problem area]
- Current workflow and tools
- A representative quote from the notes
- Design implications (what this means for the UI)
Format as a markdown table with columns: Attribute
| Persona 1 | Persona 2 | Persona 3.
Interview notes:
[PASTE NOTES]
Example: For a fintech app, this prompt might reveal that one persona values speed over security, leading to a streamlined onboarding flow.
Why it works: It forces the LLM to synthesize qualitative data into actionable design constraints, reducing bias by requiring evidence (quotes) for each trait.
2. UX copy generator for microinteractions
Task: Write clear, concise microcopy for buttons, error messages, and empty states.
Prompt:
Act as a UX writer. For a [screen name] in a [product type] app, generate microcopy for the following elements:
- Primary button (action: [action])
- Secondary button (action: [action])
- Error message when [error condition]
- Success message after [action]
- Empty state when [no data scenario]
Tone: [friendly/professional/playful]. Keep each under 8 words. Provide 2 alternatives for each.
Output as a markdown table: Element
| Copy Option 1 | Copy Option 2 | Rationale.
Example: For a password reset screen, the prompt might output: "Check your inbox" vs "We sent a link to your email" — both clear, but the second is more reassuring.
Why it works: It standardizes tone and length, which are critical for consistency across a design system.
3. Design system component spec generator
Task: Create detailed specifications for Figma components (buttons, inputs, cards) without a designer.
Prompt:
You are a design system architect. Generate a specification for a [component name] component in Figma. Include:
- Variants (e.g., primary, secondary, ghost)
- States (default, hover, active, disabled, focus)
- Spacing and sizing (padding, border-radius, min-width)
- Typography (font size, weight, line height)
- Color tokens (use semantic names like 'color-primary-500')
- Accessibility notes (contrast ratio, focus indicator)
Format as a YAML-like structure that can be used to create Figma styles.
Example output snippet:
Button:
variants:
- primary
- secondary
states:
- default
- hover
sizing:
padding: 12px 24px
border-radius: 8px
typography:
font-size: 16px
font-weight: 600
color:
background: color-primary-500
text: color-neutral-0
Why it works: It bridges the gap between design and development, ensuring components are consistent and accessible.
4. Heuristic evaluation of a wireframe
Task: Get a usability audit of your low-fidelity wireframe before investing in high-fidelity design.
Prompt:
Act as a UX auditor. Evaluate the following wireframe description against Nielsen's 10 usability heuristics. For each heuristic, rate severity (0-4) and provide a specific issue and recommendation.
Wireframe description:
[DESCRIBE LAYOUT, ELEMENTS, INTERACTIONS]
Output as a markdown table: Heuristic
| Severity | Issue | Recommendation.
Example: If your wireframe has a hidden logout button, the prompt might flag "Visibility of system status" with severity 3 and suggest making it always visible.
Why it works: It applies a proven framework (Nielsen Norman Group) to catch issues early, saving costly redesigns.
5. User flow diagram generator (Mermaid.js)
Task: Visualize a user journey as a flowchart directly in Figma (via Mermaid plugin) or documentation.
Prompt:
Generate a Mermaid.js flowchart for a user flow: [describe flow, e.g., "user signs up, verifies email, completes profile, lands on dashboard"]. Include decision points for [conditions]. Use rectangles for actions, diamonds for decisions, and rounded rectangles for start/end.
Output only the Mermaid code block.
Example output:
flowchart TD
A[Start] --> B[Sign Up Form]
B --> C{Email Valid?}
C -->
|Yes| D[Send Verification Email]
C -->
|No| E[Show Error]
E --> B
D --> F[Verify Email]
F --> G[Complete Profile]
G --> H[Dashboard]
Why it works: Mermaid is supported by Figma plugins and GitHub, making it easy to embed flows in design files or specs.
6. Accessibility checklist for a screen
Task: Ensure your design meets WCAG 2.2 AA standards without deep expertise.
Prompt:
You are an accessibility specialist. For a [screen name] screen with the following elements: [list elements like header, form, buttons], generate a checklist of potential accessibility issues based on WCAG 2.2 AA. For each, provide a fix.
Output as a markdown table: WCAG Criterion
| Issue | Fix | Priority (High/Medium/Low).
Example: For a form, the prompt might flag "1.4.3 Contrast (Minimum)" if text contrast is below 4.5:1 and suggest darkening the text color.
Why it works: It translates abstract guidelines into concrete design actions, reducing legal and ethical risks.
7. Content strategy for empty states
Task: Turn boring empty states into engaging onboarding opportunities.
Prompt:
Generate creative copy for empty states in a [product type] app. For each of these scenarios: [list scenarios like "no projects yet", "no messages", "no search results"], provide:
- A headline (max 5 words)
- A subtext (max 15 words)
- A call-to-action button text
- An illustration idea (brief description)
Tone: [tone].
Output as a markdown table.
Example: For "no projects yet", the prompt might suggest: "Start something great" / "Create your first project and see it come to life" / "New Project" / "A rocket taking off".
Why it works: Empty states are often neglected but are prime moments for user engagement.
8. Design critique prompt for stakeholder feedback
Task: Structure feedback sessions to avoid vague comments like "I don't like it".
Prompt:
You are a design lead. Generate 5 targeted questions to ask stakeholders during a design review of a [screen type] prototype. Questions should probe:
- Alignment with business goals
- Usability concerns
- Visual hierarchy
- Accessibility
- Emotional response
Format as a numbered list with a brief rationale for each question.
Example: "Does the primary action align with the main business objective? (Rationale: ensures design drives KPIs)."
Why it works: It turns subjective opinions into actionable insights.
9. Responsive layout breakpoint suggestions
Task: Quickly define breakpoints and layout adjustments for different devices.
Prompt:
For a [screen type] screen with [describe content], suggest responsive breakpoints (mobile, tablet, desktop) and how the layout should adapt. Consider:
- Navigation pattern (hamburger vs. sidebar)
- Grid columns
- Font size adjustments
- Image scaling
Output as a markdown table: Breakpoint
| Width | Layout Changes | Notes.
Example: Mobile: 320-767px, single column, hamburger menu; Tablet: 768-1023px, two columns; Desktop: 1024px+, three columns with sidebar.
Why it works: It ensures designs are device-agnostic from the start.
10. Usability testing script generator
Task: Create a test plan and script to validate your prototype with real users.
Prompt:
Generate a usability testing script for a [product type] prototype. Include:
- 5 tasks with clear instructions
- Success metrics (time on task, error rate)
- 3 open-ended questions
- A screening questionnaire for participants
Format as a structured document with headings.
Example task: "You want to book a flight to Paris. Show me how you would do that."
Why it works: It standardizes testing, making results comparable across iterations.
11. Color palette generator with accessibility check
Task: Create a color scheme that meets contrast requirements.
Prompt:
Generate a color palette for a [brand adjective] brand. Provide hex codes for:
- Primary, secondary, accent
- Neutral shades (100-900)
- Semantic colors (success, error, warning)
For each color, calculate contrast ratio against white and black, and flag if it fails WCAG AA for normal text (4.5:1).
Output as a markdown table: Color Name
| Hex | Contrast vs. White | Contrast vs. Black | Pass/Fail.
Example: Primary #3B82F6 passes against white (4.6:1) but fails against black (2.3:1).
Why it works: It automates a tedious but critical accessibility check.
12. Handoff documentation generator
Task: Produce developer-ready specs from your Figma file.
Prompt:
You are a design handoff specialist. Based on this component description: [describe component], generate handoff documentation including:
- CSS properties (flexbox, grid, spacing)
- Animation specs (duration, easing)
- Asset exports (SVG, PNG sizes)
- Interaction states
Format as a markdown code block with sections.
Example output:
.button {
display: inline-flex;
padding: 12px 24px;
border-radius: 8px;
transition: background 0.2s ease-in-out;
}
Why it works: It reduces back-and-forth between design and development.
From prompts to prototype in one day
By integrating these prompts into your workflow, you can compress days of design work into hours. Start with user research synthesis (#1) and UX copy (#2), then build your design system specs (#3) and wireframe evaluation (#4). Use flows (#5) and accessibility checks (#6) to refine, and finish with testing scripts (#10) and handoff docs (#12).
Remember: AI is a tool, not a replacement for human judgment. Always validate outputs with real users and stakeholders. But with these prompts, you'll have a solid, testable prototype faster than ever — leaving more time for what matters: solving real user problems.
Ready to level up your prototyping? Try these prompts in your next project and share your results. For more AI-powered workflows, explore our other guides on asibiont.com/blog.
Comments