AI-Driven Product Design: From Brief to Interactive Prototype
How I built Prototype Machine – a structured Claude Code workflow that streamlines Discovery and Prototyping from days to hours. Instead of relying on random AI outputs, it runs every project through a strict 6-stage process, delivering production-ready screens and shareable prototypes.
1 Month • 3 Machine Iterations • 3 Test Products
1 Month • 3 Machine Iterations •
3 Test Products
The Core Idea
Starting a new product from scratch takes days of repetitive labor: market research, manual wireframing, screen assembly, and building interactive prototypes for presentation and testing.
I built Prototype Machine – an AI-native design system running entirely inside Claude Code. It allows a single designer to take a product idea in any domain and turn it into a production-grade, interactive prototype.
The 6-Stage Workflow
This workflow is the result of weeks of continuous refinement, three distinct iterations of the machine, and test runs on several products in different business domains.
None of these stages represent out-of-the-box Claude capabilities – they are the direct outcome of meticulous engineering, strict rule framing, and deliberate training to make the process completely predictable.
To demonstrate the pipeline, I used a test carsharing app called Ride, using Bolt as a stylistic reference. Every stage below includes a direct link to its generated output.
02
Market Pattern Extraction
At this stage, we use Mobbin and web research to study proven design patterns from industry leaders, translating their best UX solutions into clear, actionable rules for our product.
Input:
Mobbin/Web
Output:
UX Patterns
03
Flow Spec
Here, the system generates initial wireframes to lock down screen layouts, information hierarchy, and user transitions before any visual design is applied.
Input:
UX Patterns + PRD
Output:
Wireframes
04
Decomposition of Style
This module analyzes screenshots of the reference app and deconstructs its visual style into design tokens, color ramps, component states, and spacing scales that form our base Design System. This is also where dark mode can be baked in right from the start.
Input:
Reference + Wireframes
Output:
Base Design System
05
Screen Assembly
Here, the system brings together the outputs from all four previous stages, combining structural foundations and design rules to generate clean, fully formatted screens.
Input:
Flow + DS
Output:
Sceens
06
Interactive Prototyping
This is where the magic really happens. The machine turns fully assembled screens into interactive, high-fidelity prototypes with refined details and smooth flows. All generated screens and prototypes are then packaged into a clean presentation and published as a web page that can easily be shared with stakeholders.
Input:
Screens
Output:
Prototype + Presentation
Once stakeholders approve the presentation and give the green light, the machine transfers the Design System and rebuilds all screens directly inside Figma via pre-built Claude Figma skills.
Key Metrics & Business Impact
Hours,
Not Weeks
Complete Discovery & Prototyping sprint executed in a single day.
100% Systemic Consistency
Strict Single Source of Truth (SSOT) architecture eliminates visual drift.
-80% Time-to-Market for Hypotheses
Stakeholders get a clickable prototype, not static decks or text specs.
Drastic Overhead Reduction
Validate 5 full product concepts per week with a single Product Designer.
System Architecture
To eliminate random AI outputs, the pipeline operates on three strict rules:
1
File-Based Memory
Context is saved to local repository files rather than held in chat memory. Agents read the current state, perform a single task, update the files, and exit—guaranteeing strict consistency across all screens.
2
Single Source of Truth
All tokens, spacing scales, and visual rules live in a central file. Using a raw HEX code or arbitrary spacing is flagged as a system build error.
3
Upstream Change Tracking
Stages maintain strict dependency snapshots. Changing a core requirement in the brief flags affected downstream screens and triggers an automated rebuild.
The Core Idea
Starting a new product from scratch takes days of repetitive labor: market research, manual wireframing, screen assembly, and building interactive prototypes for presentation and testing.
I built Prototype Machine – an AI-native design system running entirely inside Claude Code. It allows a single designer to take a product idea in any domain and turn it into a production-grade, interactive prototype.
The 6-Stage Workflow
This workflow is the result of weeks of continuous refinement, three distinct iterations of the machine, and test runs on several products in different business domains.
None of these stages represent out-of-the-box Claude capabilities – they are the direct outcome of meticulous engineering, strict rule framing, and deliberate training to make the process completely predictable.
To demonstrate the pipeline, I used a test carsharing app called Ride, using Bolt as a stylistic reference. Every stage below includes a direct link to its generated output.
02
Market Pattern Extraction
At this stage, we use Mobbin and web research to study proven design patterns from industry leaders, translating their best UX solutions into clear, actionable rules for our product.
Input:
Mobbin/Web
Output:
UX Patterns
03
Flow Spec
Here, the system generates initial wireframes to lock down screen layouts, information hierarchy, and user transitions before any visual design is applied.
Input:
UX Patterns + PRD
Output:
Wireframes
04
Decomposition of Style
This module analyzes screenshots of the reference app and deconstructs its visual style into design tokens, color ramps, component states, and spacing scales that form our base Design System. This is also where dark mode can be baked in right from the start.
Input:
Reference + Wireframes
Output:
Base Design System
05
Screen Assembly
Here, the system brings together the outputs from all four previous stages, combining structural foundations and design rules to generate clean, fully formatted screens.
Input:
Flow + DS
Output:
Sceens
06
Interactive Prototyping
This is where the magic really happens. The machine turns fully assembled screens into interactive, high-fidelity prototypes with refined details and smooth flows. All generated screens and prototypes are then packaged into a clean presentation and published as a web page that can easily be shared with stakeholders.
Input:
Screens
Output:
Prototype + Presentation
Once stakeholders approve the presentation and give the green light, the machine transfers the Design System and rebuilds all screens directly inside Figma via pre-built Claude Figma skills.
Key Metrics & Business Impact
Hours,
Not Weeks
Complete Discovery & Prototyping sprint executed in a single day.
100% Systemic Consistency
Strict Single Source of Truth (SSOT) architecture eliminates visual drift.
-80% Time-to-Market for Hypotheses
Stakeholders get a clickable prototype, not static decks or text specs.
Drastic Overhead Reduction
Validate 5 full product concepts per week with a single Product Designer.
System Architecture
To eliminate random AI outputs, the pipeline operates on three strict rules:
1
File-Based Memory
Context is saved to local repository files rather than held in chat memory. Agents read the current state, perform a single task, update the files, and exit—guaranteeing strict consistency across all screens.
2
Single Source of Truth
All tokens, spacing scales, and visual rules live in a central file. Using a raw HEX code or arbitrary spacing is flagged as a system build error.
3
Upstream Change Tracking
Stages maintain strict dependency snapshots. Changing a core requirement in the brief flags affected downstream screens and triggers an automated rebuild.
Outcome & Efficiency
Beyond output quality, this architecture brings a practical bonus: drastic token savings. Because each agent runs independently against local files and terminates, you avoid bloated context windows in Claude Code—delivering maximum speed and minimal cost for every sprint.
For me, this project was a turning point. Shifting from conversational prompts to a structured, file-based pipeline turned out to be the only truly effective way to handle complex product tasks with AI. While the system is already fully functional, I continue to tweak and evolve it to unlock even better efficiency and results.