Start your learning journeyAI Playbook
Log inStart learning
Role playbook

Product and UX design

Synthesize usability research with evidence, write UX copy to your house rules, go from Figma to code through the Figma MCP server without losing your tokens, audit accessibility against WCAG 2.2, and generate images you are allowed to use.

Checked 13 Oct 202621 min read17 prompts1 skill1 hook2 routines

For Product designers, UX designers, UX researchers, content designers and design system teams

From research to shipped UI, with your design system intact

  • Usability findings ranked by severity, each with participant quotes, within a day of the last session
  • UX copy for a whole flow drafted to your house rules, with every string length checked
  • Figma frames turned into code that uses your tokens and components, not raw values
  • Accessibility audits that pair automated checks with a manual list for what tools miss
  • Generated images with a recorded source, licence and Content Credentials
Works withClaudeChatGPTGeminiFigmaFigma MakeClaude CodeStorybookAdobe Firefly
On this page
  1. Where AI helps in this job
  2. Start in 15 minutes
  3. The tools people in this role use
  4. Members only: Workflow: usability research synthesis
  5. Members only: Workflow: from Figma to code with your design system
  6. Members only: Workflow: an accessibility audit that admits its limits
  7. Members only: Workflow: images you are allowed to use
  8. Members only: A skill for designers
  9. Members only: Guardrails and hooks
  10. Members only: Routines that run without you
  11. Members only: Prompt ladder for designers
  12. Members only: Measure it
  13. Members only: Risks and what not to automate

A designer's week mixes research, flows, copy, handoff and review. AI now sits inside most of it: Figma has an agent and an MCP server, coding agents read your frames, and image models produce assets in seconds. Taste, judgement and accountability for what ships stay with you.

Where AI helps in this job#

TaskWhat AI does wellWhat you still own
Research synthesisTurns usability notes and transcripts into issues with frequency and quotesSeverity, and what to fix first
UX copyDrafts and tightens labels, errors and empty states to your rulesVoice, meaning and legal wording
Design to codeBuilds components from Figma frames through the Figma MCP serverFidelity, interaction details and review
Design system docsDrafts usage guidance, props tables and do and don't lists from the component and its codeThe rules themselves
Accessibility auditsRuns automated checks and drafts fixes with codeThe manual checks tools miss, and sign-off
CritiqueReviews a flow against heuristics and your principlesTaste, and which feedback to act on
Image generationProduces concepts, placeholders and variations in minutesRights, brand fit and disclosure
Handoff specsWrites states, edge cases and interaction notes from framesCompleteness, and the conversation with engineering

AI is weak where design needs taste and context: whether a flow feels right, whether a visual fits the brand, whether a pattern matches what your users already know. It reports accessibility confidently and incompletely. Deque's own study found automated testing catches about 57% of issues, so the rest needs a person with a keyboard and a screen reader. Generated images also raise rights questions. The US Copyright Office concluded in January 2025 that prompts alone do not make you the author of the output.

Start in 15 minutes#

These work in Claude, ChatGPT or Gemini. Attach screenshots or paste notes.

Prompt

Usability findings from session notes

Level 2Any assistant
Here are my notes from [NUMBER] usability sessions on [FLOW]. Each session starts with a participant ID such as P01, and lists the tasks they attempted.

[PASTE NOTES]

List the usability issues in a table with the columns: issue, task, participants who hit it (IDs), severity, evidence (a short quote or observed behavior with participant ID), and a suggested fix.

Severity: critical = could not complete the task, serious = completed with major difficulty or an error, minor = hesitation or a comment. Count only what the notes show. Put issues seen in one participant in a separate list.

Check two counts against the notes and confirm each quote is real. The severity column is a starting point for your judgement, not a replacement.

Prompt

Rewrite an error message

Level 1Any assistant
Rewrite this error message so it says what happened, why if we know it, and what the person should do next, in under 120 characters, in plain words, without blaming the user: [PASTE MESSAGE AND WHERE IT APPEARS].

Read it aloud. If someone who has never seen the product would not know what to do next, it is not finished.

Prompt

Critique a screen against heuristics

Level 2Any assistant
Critique the attached screen. Context: [WHO USES IT, AND THE TASK THEY ARE DOING ON THIS SCREEN].

List the five issues that most affect the task, in order of impact. For each: the heuristic it breaks, what on the screen shows it, and one concrete suggestion. Then list two things that work well and should stay. Skip comments on visual taste unless they get in the way of the task.

Every issue should point at something visible on the screen. Drop any that do not.

Warning

Unreleased designs are confidential, and research recordings contain faces, voices and sometimes customer data, which makes them personal data. Use the workspace your company approved, check that participant consent covers the tool you use, and do not upload either to a personal account.

The tools people in this role use#

  • Figma. The Figma agent (generally available since 6 October 2026, uses AI credits, and only Full seats can have it edit a file) absorbed the old First Draft feature. Figma AI tools rewrite, translate and shorten text, replace content, rename layers and add interactions. Figma Make turns a prompt into a working app, can use your design system through library styling or Make kits, and pushes code one way to GitHub. Check designs (Organization and Enterprise) flags color contrast without using an LLM. AI credits are per user per month: 3,000 to 4,250 on Full seats, 500 on other seats.
  • The Figma MCP server. Lets coding agents read your frames, variables and Code Connect mappings, and now write back to the canvas. The workflow below covers setup and limits.
  • Your general assistant. Claude, ChatGPT or Gemini for synthesis, copy and critique. Claude's Figma connector is Anthropic verified. ChatGPT's Figma app makes FigJam diagrams and Slides only and is not available in the EU.
  • Other design-to-code paths. Anima, Builder.io Visual Copilot and Locofy convert Figma designs to code. v0 imports Figma designs on paid plans, and Lovable has a Figma plugin.
  • Design system tooling with MCP. Storybook's MCP addon (in preview) gives agents your component docs and stories. zeroheight and Supernova also run MCP servers. The Design Tokens Community Group format reached its first stable version, 2025.10.
  • Accessibility tools. axe-core and Deque's axe DevTools, which now include an MCP server, Lighthouse, Playwright with @axe-core/playwright, and Stark in Figma.
  • Image generation. Adobe Firefly trains on licensed and public-domain content and offers IP indemnification to enterprise customers. Google's Gemini image models (branded Nano Banana) watermark every image with SynthID. OpenAI's image models attach C2PA Content Credentials.
  • Claude Cowork with Anthropic's design plugin. Open-source skills for critique, UX copy, accessibility review, design systems, handoff and research synthesis.

Workflow: usability research synthesis

Run it the day after the last session of a round, while you still remember what the notes missed. 1. Gather notes or transcripts, the task list and a participant table with IDs and segments. Strip names unless your workspace is approved for research data. ...

Members only below this line

Get the full Product and UX design playbook free

What you get on this page:

  • 4 step-by-step workflows
  • 14 prompts
  • 1 skill
  • 1 hook
  • 2 routines

Free. You also get Stratiflux Weekly: one email a week, unsubscribe anytime.

Also in the members part

  1. Workflow: from Figma to code with your design system
  2. Workflow: an accessibility audit that admits its limits
  3. Workflow: images you are allowed to use
  4. A skill for designers
  5. Guardrails and hooks
  6. Routines that run without you
  7. Prompt ladder for designers
  8. Measure it
  9. Risks and what not to automate

Sources

Checked against these on 13 Oct 2026.

  1. Figma developer docs: Figma MCP server (opens in a new tab)developers.figma.com
  2. Figma Help: Guide to the Figma MCP server (opens in a new tab)help.figma.com
  3. Figma developer docs: Remote server installation (opens in a new tab)developers.figma.com
  4. Figma developer docs: Rate limits and access (opens in a new tab)developers.figma.com
  5. Figma developer docs: Tools and prompts (opens in a new tab)developers.figma.com
  6. Figma developer docs: Write to canvas (opens in a new tab)developers.figma.com
  7. Figma developer docs: Code to canvas (opens in a new tab)developers.figma.com
  8. Figma Help: Code Connect (opens in a new tab)help.figma.com
  9. Figma Help: Figma Make FAQs (opens in a new tab)help.figma.com
  10. Figma Help: Get started with Make kits (opens in a new tab)help.figma.com
  11. Figma Help: Check designs in Figma (opens in a new tab)help.figma.com
  12. Figma Help: Manage AI credits (opens in a new tab)help.figma.com
  13. Claude connectors directory: Figma (opens in a new tab)claude.com
  14. Storybook docs: MCP overview (opens in a new tab)storybook.js.org
  15. Design Tokens Community Group: specification 2025.10 (opens in a new tab)designtokens.org
  16. W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new tab)w3.org
  17. AccessibleEU: The European Accessibility Act comes into effect in June 2025 (opens in a new tab)accessible-eu-centre.ec.europa.eu
  18. Deque: Automated accessibility coverage report (opens in a new tab)deque.com
  19. axe-core on GitHub (opens in a new tab)github.com
  20. Playwright docs: Accessibility testing (opens in a new tab)playwright.dev
  21. Adobe: Firefly approach to generative AI (opens in a new tab)adobe.com
  22. Google AI for Developers: Image generation (SynthID) (opens in a new tab)ai.google.dev
  23. Google Cloud: Generative AI indemnified services (opens in a new tab)cloud.google.com
  24. OpenAI API docs: Content provenance (opens in a new tab)developers.openai.com
  25. US Copyright Office: Copyright and AI, Part 2: Copyrightability (January 2025) (opens in a new tab)copyright.gov
  26. C2PA specifications (opens in a new tab)spec.c2pa.org
  27. Material Design 3: Content design (opens in a new tab)m3.material.io
  28. GOV.UK: A to Z style guide (opens in a new tab)guidance.publishing.service.gov.uk
  29. Anthropic knowledge-work-plugins: design plugin (opens in a new tab)github.com
  30. Claude Code docs: Hooks reference (opens in a new tab)code.claude.com
  31. Claude Code docs: Routines (opens in a new tab)code.claude.com
  32. Claude Help Center: Schedule recurring tasks in Claude Cowork (opens in a new tab)support.claude.com
  33. Claude Help Center: Use skills in Claude (opens in a new tab)support.claude.com
  34. Claude Help Center: Use connectors (tool permissions) (opens in a new tab)support.claude.com

Related

GuidePrompting, from easy to hardHow the 17 prompts on this page workGuideSkills: teach an agent a procedure once, reuse it everywhereHow the skill on this page worksGuideHooks: guardrails that run every timeHow the hook on this page worksGuideRoutines: scheduled agents that open pull requestsHow the 2 routines on this page work