Design with AI
Methods and references for research, ideas, prototypes and design delivery.
Copyright and Third Party Content
When using prompt-to-prototype tools such as Figma Make, third-party fonts, images, or code packages may be introduced. Please confirm content authorization, commercial license and attribution before publishing to the outside world.
Data sensitivity
Public searches can be used during the problem discovery phase; when it comes to user interviews, work orders, behavior logs, and internal documents, priority is given to using corporate compliance environments or anonymized data.
1) Discover the problem
Look for recurring problems in user feedback and research, keeping the evidence that supports or challenges each finding.
- Remove unnecessary personal information from interviews, tickets and notes.
- Trace key findings to their sources and distinguish facts, interpretations and open questions.
Perplexity
Use it to research market context and capture source-backed signals before synthesis.
Google PAIR Guidebook
Use it to decide which signals are worth pursuing, especially for trust and control trade-offs.
Claude
Cluster de-identified notes with source IDs and counterexamples, then have a researcher validate priorities.
ChatGPT
Use for a fast first-pass categorization when you need quick directional signal.
Gemini Notebook
Organize themes and trace passages in existing interviews or reports; web imports use text and video imports rely on captions.
Atlassian Design Lab
Run a lightweight co-design workshop to validate assumptions before locking the problem.
2) Define the problem
Define who faces the problem, when it occurs and what a successful outcome would look like.
- Describe the user problem without assuming AI is the solution.
- Choose how to test priority assumptions and what would change your decision.
Claude
Use it to draft structured problem statements from your evidence pool and constraints.
NN/g Problem Statement
Use as a quality bar for framing research objectives and testable problem language.
Notion
Track H1/H2/H3 hypotheses with linked evidence and success signals in one table.
Microsoft HAX Toolkit
Define what AI should and should not do across initial use, normal use, failure, and long-term use.
Issue trees
Break broad problem spaces into testable branches before committing to one problem statement.
Iceberg Model
Move from surface symptoms to underlying system causes when framing the core problem.
Problem statement template
Use with Claude or paste into Notion to standardize scenario, trigger, goal, success, and failure fields.
Prompt: "Given this evidence, write a problem statement covering scenario, trigger, user goal, success signal, failure consequence, AI role, and risk boundary." Fields: Scenario | Trigger | User goal | Success signal | Failure consequence | AI role | Risk boundary | Recovery path
3) Explore solutions
Explore different approaches and compare user value, implementation effort and user control.
- Consider non-AI, assisted and automated approaches.
- Choose directions to test and explain the tradeoffs.
ChatGPT
Generate 5+ directions by varying automation level, user control, and fallback behavior.
FigJam
Branch ideas visually with the team and capture early directional votes quickly.
AIUXPatterns
Use pattern and anti-pattern references to pressure-test concepts before convergence.
Shape of AI
Scan common AI interaction forms so your directions differ on meaningful dimensions.
IDEO Design Kit
Use diverge/converge method cards when teams need stronger facilitation structure.
Zwicky box
Generate non-obvious solution combinations by recombining dimensions systematically.
FigJam
Run decision matrices or dot-voting to converge from many options to one or two bets.
Impact-Effort Matrix
Prioritize directions by expected value versus implementation effort before final selection.
Direction comparison template
Use with Claude or as a Notion table to compare value, risk, controllability, and fallback side by side.
Prompt: "Compare these directions across user value, implementation cost, risk, explainability, user control, and fallback strategy. Return a table with keep/watch/cut recommendation."
4) Design the experience
Build key screens with existing components and visual standards, using AI for repetitive production, copy and iteration.
- Cover loading, empty, error and permission states.
- Check layout, fonts and brand consistency on a few variants before generating assets in bulk.
Figma
Design core paths and critical states, including loading, error, low confidence, and permissions.
IBM Carbon for AI
Use AI labeling and explanation patterns to clarify generated content and available actions.
Material Design 3
Reference layout hierarchy and interaction specs to keep complex states consistent.
ChatGPT
Draft state-specific UI copy for errors, low-confidence prompts, and recovery actions.
WCAG Overview
Use as the baseline for accessible labels, instructions, and state communication.
Figma Weave
Create asset variations from existing brand templates by connecting Figma frames and changing text or image inputs. Weave tools in Design support image and vector output.
Figma Weave: five creative workflows
Learn reference-style blending, asset variations and multi-format production through official examples.
Figma Agent
Agent-assisted design and iteration on the canvas; check account access.
Critical states checklist
Add your project material, then adapt the result to the actual work.
Review default, loading, empty, error and permission states. For each, describe what users see, what they can do and what happens next. Preserve existing components and tone.
5) Test the solution
Observe target users completing realistic tasks and use hesitation, errors and requests for help to improve the design.
- Describe the task goal without prescribing clicks.
- Test common tasks and recovery, recording observations before interpreting them.
Figma Make
Generate interactive prototypes quickly for early usability sessions on target flows.
Figma Prototyping
Use it to set up click-through paths and observable success/failure checkpoints.
Maze
Run remote tests and capture completion rate, time-on-task, and path friction signals.
Lyssna
Validate first-click and information architecture choices with lightweight studies.
Axe DevTools
Run automated scans on the live page to catch contrast, ARIA, and keyboard issues fast.
WCAG Overview
Use as the release baseline checklist for accessibility pass/fail decisions.
Usability script template
Prompt Claude with this to generate task script, success criteria, and observation prompts.
Prompt: "Write a usability test script for [feature], including task description, success criteria, failure criteria, and 3 observation prompts for hesitation or recovery moments."
6) Handoff
Explain screens, component states and interaction rules so developers can implement and check the design intent.
- Identify component sources, responsive rules and edge states.
- Describe expected behavior with concrete actions and results, and share design changes.
Figma Dev Mode
Use inspect-ready annotations and ready-for-dev status so engineering can implement without ambiguity.
Notion
Document acceptance criteria linked to each component state and edge-case rule.
Claude
Turn design decisions into testable Given/When/Then criteria across all states.
Figma MCP
Official reference for design context, native canvas writes, Make resources and Code Connect.
Acceptance criteria prompt
Prompt Claude with this, then paste results into the spec doc for engineering and QA.
Prompt: "Given this component spec, write acceptance criteria for default, loading, error, empty, long text, null values, and permission denied states in Given/When/Then format."
7) Review the implementation
Review layout, interaction and accessibility in the running product, prioritizing issues that block user tasks.
- Complete key tasks with a keyboard and on mobile; check focus, zoom and status messages.
- Combine automated accessibility scans with manual interaction checks.
FigJam
Run collaborative walkthroughs and cluster issues by severity and issue type.
Nielsen 10 Heuristics
Use a consistent heuristic lens to review visibility, error prevention, and recovery.
Notion
Track issues with screenshot evidence, owner, priority, and closure deadlines.
WCAG 2.2
Accessibility success criteria; passing an automated scan alone does not establish conformance.
8) Maintain the design system
Turn proven, recurring components, styles and interactions into shared design-system resources.
- Document intended uses, states and cases where a component is unsuitable.
- Check existing screens after changes to variables or components.
Figma
Maintain shared component libraries, variables, and documentation for team-wide reuse.
Figma Variables
Structure tokens and themes so component behavior stays consistent across contexts.
Tokens Studio
Bind Figma variables to token outputs so updates sync into implementation pipelines.
Style Dictionary
Export a single token source to iOS, Android, CSS, and JS formats.
Design Systems Repo
Benchmark governance models and naming strategies from mature systems.
Component contribution checklist
Prompt Claude with this to generate contribution rules for your team governance doc.
Prompt: "Write a contribution checklist for a new design-system component, covering naming, required states, token usage, accessibility baseline, review sign-off, and deprecation criteria."
9) Measure outcomes
Measure changes against the original user problem, combining behavioral data with feedback.
- Define metrics, a baseline and an observation period first.
- Explain sample limits and avoid assuming every change was caused by the design.
Notion
Maintain a metric dictionary with definitions, owners, cadence, and thresholds.
HEART Framework
Choose UX metrics systematically before instrumentation and dashboarding.
AARRR Framework
Map design impact to growth funnel stages when activation and retention matter.
Amplitude
Track behavior changes and tie design iterations to adoption and funnel movement.
Mixpanel
Use for segmented funnel and cohort analysis when behavior slicing is critical.
Statsig
Gate releases and run controlled experiments to measure impact against baseline.
Decision matrix
Compare metric or experiment options explicitly when multiple success criteria compete.
Impact instrumentation prompt
Add your project material, then adapt the result to the actual work.
Design change: [description]. User task: [task]. Suggest relevant metrics, a baseline and collection methods. Explain confounding factors and leave unsupported targets blank.
Start here
Step 1 - Learn core AI UX patterns (PAIR v2)
Start with practical patterns for trust, transparency, control, and failure handling in AI products.
Step 2 - Turn principles into review checks (HAX)
Use HAX guidelines to convert abstract principles into concrete design and QA checkpoints.
Step 3 - Use the 9-stage map for execution
Pick your current stage, then follow its recommended tools, templates, and evaluation criteria.
Cross-stage methods & resources
Google PAIR Guidebook
Establish a humanistic AI design judgment framework.
Microsoft HAX Toolkit
Convert principles into actionable review items.
Shape of AI
AI interaction patterns and anti-patterns reference library.
WCAG Overview
Cross-stage accessibility baseline.