0→0
Discovery effort
man-days · 50% less
AI-assisted Product Design
Building an AI-assisted product design workflow
I connected product knowledge, functional prototyping, the Figma design system, and structured quality checks into a shared workflow. Designer validation guided every product decision and final interface.
0→0
Design review
minutes per user flow · 67% less
0%
First-pass readiness
required only minor refinement
0.0→0.0
Missed states
per user flow · 76% fewer
Observed across selected projects and repeated workflows; each metric is tied to the process shown below.
The operating model
One shared context across the workflow
Product knowledge, interface rules, validation, and review share the same context. Each completed flow adds decisions, states, and patterns that improve the next cycle.
Product knowledgePRD, research, decisions
Figma design systemComponents, states, tokens
Project calibrationRules, examples, terminology
Shared context layerProduct knowledge becomes reusable input
Validated by designer01
DiscoveryStructure context6 → 3 days02
PrototypeValidate behaviorWorking flow03
ProductionCreate in system50% ready04
QualityCheck coverage76% fewer gapsValidated decisions, new states, and approved patterns return to shared context
AI contributionSynthesis · Drafting · Coverage checks
Designer responsibilityProblem framing · Decisions · Final quality
01 · Discovery
Turn scattered sources into validated decisions
I connected requirements, research, meeting notes, and previous decisions to one AI assisted discovery flow. The output gave every discussion a traceable product model and a clear list of questions.
Connected discovery
From source material to an aligned starting point
Discovery effort0→0man days · 50% less
Source material
NotionPRD and decisions
DocsResearch and constraints
TranscriptsMeetings and user input
Connected context→
ClaudeStructure and cross check
Links requirements, identifies conflicts, and records open questions.
Structured output→
Decision model
Roles × permissionsWho can act and where
Information architectureHow product areas connect
User scenariosPrimary and alternate paths
ConstraintsBusiness and technical limits
Open questionsDecisions requiring alignment
Source review→
Designer validationResolve ambiguity and frame the problem
The validated model becomes input for prototyping and interface work.
Discovery output
A shared product model carried decisions into every next step
The artifact combined roles and permissions, information architecture, user scenarios, constraints, and open questions. The same model guided functional prototyping, interface production, and quality review.
02 · Functional prototyping
Make product behavior testable early
A working prototype gave the team direct access to navigation, data states, permissions, and interaction logic. Feedback arrived while the flow remained easy to adjust.
Functional validation loop
One flow moves through tools and returns as an approved interaction model
FigmaSelected scenario
Existing screens and product patterns
Context→
Claude CodeFunctional build
Navigation, logic, states, and permissions
Working code→
BrowserTestable experience
The team can use the flow directly
Observed use→
Team feedbackReview behavior
Capture friction, gaps, and technical input
Validated resultApproved behavior returns to Figma for detailed interface design.
03 · Interface production
Turn validated behavior into system-guided interfaces
The generation context combines a validated flow, Figma components, project rules, and approved product examples. AI creates a useful first pass for focused designer refinement.
Generation context
Validated behaviorApproved interaction logic
Product contextRequirements and decisions
Figma design systemComponents, tokens, patterns
Project calibrationReferences, rules, terminology
Structured context→
Claude + Figma MCPSystem-guided first pass
Components and product rules shape the initial interface.
Generated interface→
Designer in FigmaRefine hierarchy, content, interaction details, and visual quality
Approved decisions return to project context and the design system.
0%
of generated screens required only minor refinement
Measured across selected interface production tasks.
AI-generated draft
Final interface
04 · Quality control
Check coverage and interface quality in one review flow
AI checks each Figma flow against scenarios, permissions, recurring states, and design system rules. I verify the findings, resolve product questions, and update the final design.
Figma flows + validated contextScenarios, permissions, states, and system rules
Review context→
Claude reviewCompare every flow with the shared context
State coverageMissing branches, permissions, and edge cases
Design reviewComponents, consistency, content, and accessibility
Findings→
Designer verificationResolve findings and update the Figma design
StateBeforeAI-assisted
Loading✓✓
Skeleton—✓
Empty state✓✓
Error—✓
No permission—✓
Incomplete onboarding—✓
Partial data✓✓
Missed states per flow0.0→0.076% fewer
Review time per flow0→0minutes · 67% less
Less time checking completeness. More time evaluating the product solution.
My contribution
I designed the system around the AI
I structured project knowledge, introduced functional prototyping, connected design-system constraints to production, and defined how AI-assisted outputs were validated. These practices evolved across different projects and roles. In the project where I led two designers, I also integrated the approach into team review and quality practices.
Key learningAI output quality depends on the quality of the system around it.
