Building an AI-assisted product design workflow
I integrated AI into different stages of the product design process — from project context and discovery to functional prototyping, interface production and design review.
Too much effort was spent between understanding a product problem and reaching a validated, development-ready design solution.
Use AI to remove repetitive context, production and QA work while keeping product reasoning and final design decisions with the designer.
Faster discovery and review, earlier validation, more consistent UI, and significantly fewer missed states across complex user flows.
I designed and refined the workflows, structured project knowledge, connected AI to design tools, and defined how outputs were validated.
The real bottleneck was everything around the interface.
Design itself was only one part of the work. Context reconstruction, static discussions, repetitive production and manual QA created significant overhead.
Fragmented context
Requirements, meeting transcripts and previous decisions had to be found and connected manually.
Slow validation
Complex behavior was often discussed through descriptions or static screens before anyone could try it.
Repetitive production
Recurring patterns, states and design-system structures were rebuilt again and again.
Expensive review
Review covered both product quality and detailed UI consistency, making every flow costly to check.
I connected the product process into one context-aware system.
AI became an infrastructure layer across the workflow rather than a separate screen-generation tool.
Product context
Docs, transcripts, research, requirements
Discovery & synthesis
PRD, IA, roles, permissions, scenarios
Product hypotheses
Potential solutions and assumptions
Functional prototyping
Working interaction before polished UI
Validation & iteration
Team, stakeholder and user feedback
Design system
Tokens, components, patterns, references
Interface production
AI-assisted Figma generation
State coverage
Missing states and edge-case checks
Design review
User needs, UX logic and UI consistency
Development handoff
Final design and implementation context
Project knowledge became an active part of the design workflow.
Instead of rebuilding context for each task, AI could work across documentation, meetings and previous product decisions.
From collecting information to validating decisions
Previously, discovery meant searching documentation, reviewing meeting transcripts and client decisions, synthesizing requirements and rebuilding product artifacts manually.
With the project knowledge connected to AI, first drafts of PRDs, role and permission maps, information architecture, user scenarios, constraints and open questions could be created within hours.
My time shifted toward validating the output, resolving contradictions and focusing on the actual product problem.
Validate behavior before investing in visual polish.
Before high-fidelity UI, I generate a working prototype to experience the flow, test interaction logic and collect feedback.
Requirements
User problem + product constraints
Working prototype
Clickable behavior generated quickly
Feedback
Designer, team, stakeholder or user input
Iteration
Fix logic before detailed UI
Approved behavior
Move into high-fidelity design
Click through the flow and observe how the interface behaves against the original requirements.
Share a real interaction instead of describing behavior through static screens.
Use the prototype for brainstorming, stakeholder feedback and early usability testing.
A structured design system gave AI the same visual rules as the team.
Clear token hierarchy, predictable components and approved patterns made generated interfaces much more consistent with the existing product.
Primitive
Raw values
blue-500Semantic
Product meaning
background-brandComponent
Specific UI context
button-primary-backgroundMore semantic context, less arbitrary UI
The token hierarchy helped Claude understand not only which values existed, but where and how they should be applied.
The same structure extended to components, variants and recurring UI patterns, giving AI a reliable framework for producing interfaces consistent with the product.
Give AI examples of how the product works.
Approved reference screens cover different interface patterns so Claude can reuse established decisions instead of inventing generic layouts.
From validated behavior to production UI.
Once context, behavior and design-system constraints were clear, AI could produce a useful first-pass interface instead of inventing the product from scratch.
Validated prototype
Interaction logic is already approved.
Figma MCP
Claude works directly with the design environment.
DS-driven draft
Existing tokens, components and patterns are reused.
Designer refinement
Hierarchy, usability and final visual quality are refined.
AI became a second pair of eyes for scenarios that are easy to miss.
Before final review, I use AI to check flows against product requirements and recurring interface states.
Review shifted from mechanical checks toward product quality.
I review not only whether an interface is built correctly, but whether it actually addresses the user's needs, pains and intended scenario.
Does the solution actually work for the user?
- Addresses the user problem and pain points
- Covers the intended user goals and scenario
- Keeps interaction clear and efficient
- Avoids unnecessary friction
- Covers important edge cases
Is the interface consistent and implementation-ready?
- Spacing and layout
- Typography and color usage
- Token and component usage
- States and consistency across screens
- Design-system compliance
Better DS consistency and AI-assisted checks reduced mechanical verification, leaving more time to evaluate whether the design really solved the user's problem.
Brand voice became part of the shared project context.
I documented brand-voice rules so AI could reuse the same language principles while generating interface copy.
This reduced rewriting between designers and made generated UI copy more consistent with the rest of the product.
The outcome was not “more AI”. It was a better design operating model.
The measurable gains came together with earlier validation, reusable context and more time spent on higher-value product decisions.
Earlier validation
Functional behavior can be tested before high-fidelity UI.
Better product context
Designers can query project knowledge instead of reconstructing it.
More consistent outputs
AI reuses the product's existing system rather than arbitrary UI.
Higher-value review
More attention goes to user needs, UX logic and product decisions.
I designed the system in which AI could reliably participate in product design.
These practices evolved across different projects and roles rather than inside one single team setup.
Workflow design
Defined where AI adds value and where human judgment stays mandatory.
Knowledge architecture
Structured project context so AI could retrieve requirements and decisions.
Functional prototyping
Introduced working prototypes before detailed UI to validate behavior earlier.
Design-system enablement
Used structured tokens, components and patterns as constraints for generation.
Quality control
Combined user-need validation, UX review and interface consistency checks.
Team adoption
In the project where I led two designers, I also integrated the approach into team review and quality practices.
AI output quality depends on the quality of the system around it.
Context beats prompting
Useful AI work starts with access to real product knowledge, not isolated prompts.
Systems create consistency
Structured tokens, components and patterns make generated interfaces more reliable.
Prototype before polish
Working interactions expose problems that are difficult to see in static screens.
Review moves up the value chain
When basic consistency is handled earlier, designers can focus on user needs and product quality.