12 Prompts for UI/UX Designers: Figma, Prototypes, and Components
If you're a UI/UX designer who thinks AI only generates images, you're missing out. Large language models can be your thinking partner, critic, and documentation engine throughout the entire design process. In this article, you'll find 12 practical prompts that I use in real projects. They cover everything from a design brief to a usability testing script. You can paste them into ChatGPT, Claude, or any other LLM and adapt them to your own tasks.
But first, a warning: these prompts do not replace your expertise. They are templates that force you to articulate the "why" behind every screen. The best result comes when you give the model specific context about your product, your design system, and your users. Remember the principle "garbage in, garbage out" — a vague prompt gives a vague answer.
Now let's get to the prompts.
1. Design brief prompt
When to use: at the start of a new feature or redesign, before you open Figma.
"A problem well stated is a problem half solved." — often attributed to Charles Kettering. This prompt helps you state the problem before you start designing.
Prompt template:
Act as a senior product designer. Write a one-page design brief for [product/feature]. Include: (1) problem statement, (2) target user and key scenario, (3) success metrics, (4) constraints (platform, tech stack, brand), (5) open questions for stakeholders. Keep it concise, use plain language.
Example. You're redesigning a checkout flow for an e-commerce app. Paste the prompt with the details: "product: mobile app for designer goods; feature: checkout with Apple Pay; constraints: iOS, design system 2.0, legal requirements for tax display." The output will be a short brief you can share with the team and stakeholders. This brief answers the question "why are we doing this?" — exactly what a design doc needs.
2. User persona prompt
When to use: when you have user research notes, but need to synthesize them.
Prompt template:
Create a data-informed user persona for [product]. Use the following demographic and behavior data: [data]. Include goals, frustrations, tech comfort, and a quote from a real user. Output in a table: name, bio, goals, challenges, workflow.
Example. From 20 interview transcripts, paste key quotes and stats into the prompt. It will generate a structured persona. For example, for a fintech app, you might get "Sarah, 28, freelance designer, wants to automate savings, frustrated by transfer limits." This persona is then used in all your design decisions. And since it's based on real data, it's more trustworthy than a rubber-stamp persona.
3. User journey map prompt
When to use: when you need to understand how users interact with your product over time.
Prompt template:
Map a user journey for [task] in [product]. Break it into phases: awareness, onboarding, core task, follow-up. For each phase list: user actions, touchpoints, emotions, pain points, and opportunities. Present as a table. Highlight the moments where a Figma prototype would help test the experience.
Example. For a real estate app, map the journey of "renting an apartment" — from searching to signing a lease. The prompt will produce a table with phases and opportunities. You can then use it to determine which screens to create in Figma. This aligns your design with a real user flow, not with what you think the user wants.
4. Wireframe content outline prompt
When to use: when you need to decide what goes on a screen before drawing pixels.
Prompt template:
Act as a UX architect. For [screen/feature], list the necessary blocks in a logical order. Include: heading, subheading, input fields, buttons, states (empty, filled, error). For each block specify the component name from a design system. Output as an indented list.
Example. For a login screen, you'll get a list: Header / Email input / Password input with "show" toggle / Primary button (Continue) / Secondary link (Forgot password?) / Error state copy. This list is essentially a content wireframe. You can copy it into a Figma frame and build Auto Layout with these blocks — no more staring at a blank canvas.
5. Auto Layout structure prompt
When to use: when you're building responsive components and don't know how to structure the nested frames.
Prompt template:
Suggest an Auto Layout hierarchy for [component/card]. Define: parent frame direction (horizontal/vertical), paddings, gaps, resizing settings for children (fill/for/space between), and alignment. Explain your choices based on responsive design principles.
Example. For a media card with an image, title, and meta information, the prompt will suggest a vertical parent frame, with the image as fixed height, the title as a text layer that grows, and a horizontal row for meta. Following these suggestions saves time on trial and error. This is one of the most useful prompts for Figma users — you get a clear hierarchy you can recreate in seconds.
6. Component anatomy prompt
When to use: when you need to build or extend a design system component.
Prompt template:
Describe the anatomy of [component] (e.g., button, input, dropdown). List variants, sizes, states (default, hover, focus, active, disabled), and margins. Use a Markdown table with columns: property, values, Figma auto layout settings.
Example. Ask for "button anatomy" and you'll get a table: variants like primary, secondary, ghost; sizes from small to large; states. For each state, the prompt describes background color, border, text color. This is exactly what you need when creating a component library. You can turn it into a Figma frame with variants.
7. Design system consistency check prompt
When to use: after making changes to a component, to check if it matches your design tokens.
Prompt template:
Given these design tokens: [colors, typography, spacing]. Check my component descriptions for conflicts: [paste component list]. Identify inconsistencies (e.g., border radius, shadow levels, font weights). Give a list of fixes.
Example. You have two card components with different border radii (8px and 12px) but the same token should be 8px. The prompt will detect this and recommend a fix. This is a powerful way to keep your design system clean without manually inspecting every layer. It's like a linting tool for your design decisions.
8. Usability heuristics review prompt
When to use: before a usability test, or when you need a quick expert review.
Prompt template:
Use Nielsen's 10 usability heuristics to critique [screen description or flow description]. For each heuristic: pass/fail, explanation, and concrete suggestion. Output as a table. Prioritize the critical issues.
Example. Describe your checkout flow and get a table. For instance, heuristic #3 "User control and freedom" might show that the "Back" button is missing, causing an issue. This is based on the real methodology created by Jakob Nielsen — you can read the official article on NN/g's website: https://www.nngroup.com/articles/ten-usability-heuristics/. Using this prompt makes a quick heuristic evaluation reproducible and structured.
9. Accessibility checklist prompt
When to use: when you need to make sure your design is inclusive and follows WCAG.
Prompt template:
Act as an accessibility expert. Review the following component/flow for WCAG 2.2 AA compliance: [description]. Check: color contrast, focus visibility, screen reader labels, touch size, keyboard navigation. Provide a table with: issue, location, severity, fix. Include specific contrast ratio calculations if possible.
Example. Check a card component with gray text on a white background. The prompt will point out if the contrast ratio is below 4.5:1. WCAG 2.2 is a real standard published by W3C in October 2023 (see https://www.w3.org/WAI/WCAG22/). Note that LLMs may have outdated information — always double-check the exact contrast ratio with a color contrast calculator.
10. Microcopy generation prompt
When to use: when you need to write interface texts that guide the user.
Prompt template:
Write microcopy for [UI element] in [product] for [scenario]. Tone: [friendly/professional]. Include: placeholder text, button label, error message, success message, empty state. Keep each line under 10 words. Provide alternatives for A/B testing.
Example. For a login form with a professional tone, you might get:
- Placeholder: "Email address"
- Button: "Continue"
- Error: "Enter a valid email."
- Success: "Check your inbox."
- Empty state (when a page has no data): "No messages yet."
Using this prompt improves UX copy consistency. You can test two variants and see which one performs better.
11. Handoff spec prompt
When to use: when you're passing your Figma design to a developer and need a quick reference.
Prompt template:
Create a developer handoff specification for [component/screen]. Include: dimensions, spacing, typography (font, size, weight), colors, border radius, hover/focus states, responsive behavior. Use a semantic note style: "component/button/primary". Output as a code block.
Example. For a primary button, you'll get:
# Button/Primary
- Height: 44px
- Padding: 16px horizontal
- Radius: 8px
- Font: Inter, 16px, medium
- Background: #1A73E8
- Color: #FFFFFF
- Hover background: #1765CC
This spec is easy to copy into a code style guide or Jira ticket. The semantic naming matches your design system naming, which reduces ambiguity.
12. Prototype testing task prompt
When to use: when you've built a Figma prototype and want to plan user testing.
Prompt template:
Design a task for a usability test of [prototype]. Define: the task goal, starting screen, steps the participant should take, success criteria, and common errors to watch. Also suggest a short pre-test interview question and a post-test questionnaire.
Example. For a self-checkout app prototype, the task might be: "You need to buy a coffee using your phone. Start at the home screen and finish when you see a payment confirmation." The prompt would also give you a list of errors to watch for, like "does the user miss the payment button?" This helps you run a structured user test, even if you're doing it remotely.
How to get better answers
- Add context: mention your platform (desktop/iOS/Android), your design tool, and your design system name.
- Ask for a table or a bulleted list, because structured output is easier to copy into your notes.
- Iterate: if the first answer is too generic, say "make it more specific" or "add more detail."
Conclusion
The 12 prompts above are not magic — they simply make your design process more explicit. They help with the deliverables that usually eat your time: writing briefs, structuring components, reviewing usability, and preparing handoffs. The best way to use them is to pick one prompt for a current project and adapt it to your workflow. You don't need to follow every suggestion exactly; the goal is to get a better starting point than a blank page. Try one today and see the difference.
Comments