SUMMARY
Purpose: Quickly visualise and test design assumptions with low- to high-fidelity representations of an experience.
Design Thinking Phase: Prototype
Time: 1–3 hours for low-fi prototypes, up to several days for high-fi interactive flows
Difficulty: ⭐⭐
When to use:When your team needs to explore multiple UI solutions fastTo validate user interaction patterns before developmentWhen aligning product, design, and engineering on interaction intent
What it is
Prototyping involves building a visual and/or interactive model of a product to explore ideas, collect feedback, and align teams. In UX, this extends beyond static UI mockups—it’s about simulating user flows, interactions, and system feedback with just enough fidelity to evaluate them meaningfully.
📺 Video by NNgroup. Embedded for educational reference.
Why it matters
Prototypes help expose flaws or missed expectations before costly development begins. Unlike wireframes or spec docs, a prototype reveals the actual flow, timing, and friction of an experience. They act as conversation drivers—between stakeholders, users, and teams working asynchronously.
When to use
- Early in the sprint to visualise divergent solutions
- Mid-phase when usability testing functional journeys
- Just before developer handoff to clarify behaviour and edge cases
Benefits
- Rich Insights: Helps uncover user needs that aren’t visible in metrics.
- Flexibility: Works across various project types and timelines.
- User Empathy: Deepens understanding of behaviours and motivations.
How to use it
- Start with fidelity aligned to stage: paper, wireframe, or hi-fi depending on feedback needs.
- Use rapid tools like Figma, UXPin, or Principle to simulate transitions and input.
- Validate assumptions—test with even 3–5 users to spot directional issues.
- Document behaviours, not just visuals. Annotations or microcopy matter.
- Collaborate early with engineering to verify feasibility and edge cases.
Example Output
Here’s a fictional output for a mid-fidelity onboarding prototype:
- Screens: Splash → Signup → Personalisation → Product Tour
- Interactions: Animated transitions, input validation microinteractions, skip logic
- User feedback: Confused by colour contrast on ‘Get Started’ CTA, appreciated option to bypass tour
- Next steps: Iterate signup layout, move tooltip guidance into coachmarks
Common Pitfalls
- Too much fidelity too soon: High-fi prototypes early can create attachment and block input.
- No documented behaviour: Specs must describe system responses, not just look and feel.
- Ignoring feasibility: Design that can’t be built within constraints creates confusion late in the cycle.
10 Design-Ready AI Prompts for Prototyping – UX/UI Edition
How These Prompts Work (C.S.I.R. Framework)
Each of the templates below follows the C.S.I.R. method — a proven structure for writing clear, effective prompts that get better results from ChatGPT, Claude, Copilot, or any other LLM.
C.S.I.R. stands for:
- Context: Who you are and the UX situation you're working in
- Specific Info: Key design inputs, tasks, or constraints the AI should consider
- Intent: What you want the AI to help you achieve
- Response Format: The structure or format you want the AI to return (e.g. checklist, table, journey map)
Level up your career with smarter AI prompts.Get templates used by UX leaders — no guesswork, just results.Design faster, research smarter, and ship with confidence.First one’s free. Unlock all 10 by becoming a member.
Prompt Template 1: “Prototype Accessibility Audit Checklist:”
Prototype Accessibility Audit Checklist:
Context: You are a Senior UX Designer preparing a mid-fidelity prototype for stakeholder review.
Specific Info: The prototype includes a multi-step account setup flow with inputs, buttons, and error states across desktop and mobile.
Intent: Ensure the prototype meets WCAG 2.1 AA accessibility guidelines before dev handoff.
Response Format: Provide a checklist of accessibility issues to screen for, with descriptions and Figma inspection suggestions.
Ask for clarifications if key screens use non-native elements or dynamic content.
Suggest a follow-up step for user testing accessible input flows.
Prompt Template 2: “Identify Microinteraction Opportunities:”
Identify Microinteraction Opportunities:
Context: You are a Product Designer developing a high-fidelity prototype for a mobile booking app.
Specific Info: Final flow includes confirmation, date selection, and edit booking screens. User testing showed hesitation at interaction points.
Intent: Pinpoint where microinteractions (haptic, animation, sound) could reinforce usability and feedback.
Response Format: Return findings as a table: Screen, Recommendation, Rationale.
Ask about platform (iOS vs Android) if needed for haptic options.
Then suggest a behavioural principle that supports one of the ideas.
Prompt Template 3: “Generate Usability Testing Scenarios Based on Prototype:”
Generate Usability Testing Scenarios Based on Prototype:
Context: You are leading usability testing for a desktop prototype of a SaaS dashboard redesign.
Specific Info: Key workflows include adding a report, filtering data, and exporting metrics. Team wants async moderated sessions.
Intent: Draft realistic task scenarios aligned with actual use cases for target user groups.
Response Format: List five scenarios with instructions, success criteria, and observation tips.
If any core persona or job role is unclear, ask for clarification.
Recommend one warm-up question for test intro.
Prompt Template 4: “Define Edge Case Interactions for Prototypes:”
Define Edge Case Interactions for Prototypes:
Context: You are a UX Lead outlining edge scenarios in a proto-spec for a financial transaction app.
Specific Info: Key screens include insufficient funds, offline fallback, and multiple currency warnings.
Intent: Ensure the prototype accounts for “negative paths” and alerts before final testing.
Response Format: Return a list of user-triggered edge cases and expected system behaviours.
Confirm whether system-level errors or API latency are already handled.
Then suggest how to prototype one of the alerts visually in Figma.
Prompt Template 5: “Simplify a Prototype Flow for MVP Launch:”
Simplify a Prototype Flow for MVP Launch:
Context: You’re the solo UX designer on a scrappy startup shipping an MVP e-commerce flow.
Specific Info: Current prototype includes wishlist, promo code steps, full account creation before checkout.
Intent: Reduce unnecessary steps to speed up launch and reduce dev load.
Response Format: Return a simplified step-by-step version with justification for each change.
Ask what the primary success metric is (e.g. conversion, speed).
Then pose a question about reintroducing these features later.
Prompt Template 6: “Turn User Insight into Prototype Copy Improvements:”
Turn User Insight into Prototype Copy Improvements:
Context: You are iterating a Figma prototype based on usability tests with first-time users.
Specific Info: Feedback pointed to confusion around button labelling and onboarding screens.
Intent: Improve in-prototype microcopy to clarify actions and reduce abandonment.
Response Format: Return suggestions for revised button labels, tooltip text, and title copy.
Ask for brand tone or voice guidelines before rewriting.
Then suggest A/B test ideas for one revised element.
Prompt Template 7: “Visualise Navigation Structures from Prototypes:”
Visualise Navigation Structures from Prototypes:
Context: You are mapping a complex prototype to present to the engineering team.
Specific Info: App has nested tabbed layouts, modals, and conditional flows.
Intent: Generate a sitemap-style overview of screen relationships.
Response Format: JSON-style list or indented markdown of nav hierarchy based on screen interactions.
Ask about the current page naming or org convention used in Figma.
Then suggest a plugin or tool to export this diagram.
Prompt Template 8: “Write Functional Spec from Interactive Prototype:”
Write Functional Spec from Interactive Prototype:
Context: You're supporting the handoff of a working prototype in Figma to devs.
Specific Info: Flows include loading states, success screens, and custom tooltips.
Intent: Translate prototype interactions into detailed, dev-ready mock spec.
Response Format: Output as a markdown table with Component/Behavior/Condition/Note.
Confirm if platform guidelines (Material/Apple HIG) matter for this project.
Then recommend how often this doc should be updated mid-sprint.
Prompt Template 9: “Redesign a Flow Using UX Heuristics:”
Redesign a Flow Using UX Heuristics:
Context: Your existing prototype tested poorly on efficiency and clarity.
Specific Info: Flow involves registering, connecting data, and viewing analytics in B2B tool.
Intent: Apply usability heuristics to redesign the flow in Figma.
Response Format: Annotated breakdown showing violation, fix, and reference heuristic.
Ask what feedback has been received from real users/stakeholders so far.
Then offer a suggestion for validating your recommended changes.
Prompt Template 10: “Prototype Ideas for Empty State Screens:”
Prototype Ideas for Empty State Screens:
Context: You’re designing low-fi states in a dashboard prototype pre-data population.
Specific Info: Widgets include charts, alerts, and workflows yet to be enabled.
Intent: Make empty states informative and motivational enough to drive user action.
Response Format: 3 screen concepts with headline text, icons, and supporting CTA.
Check what the product voice and platform are (desktop/mobile).
Then offer one prompt to test the messaging with an AI tone of voice assistant.
Recommended Tools
- Figma: Interactive prototyping and dev ready specs
- Maze: Get feedback on prototypes at scale
- UXPin: Simulate logic, inputs, and code-like behaviours
- Anima: Export and collaborate with engineers on specs
- FigJam: Rapid storyboarding for earlier stage concept flows
