## Design & Prototype

From concept to interactive prototype

/designProduct Designer

Explores live products, captures existing pages, and builds interactive prototypes grounded in your design system. The core creative engine of the Workbench.

## How it works

1. **Capture the starting point**  
   Point at a live product page or describe what you want to build. The agent captures the current state and understands your design system.

2. **Build the prototype**  
   The agent creates an interactive prototype with real components, states, and transitions — not static wireframes.

3. **Iterate and refine**  
   Review the prototype, request changes, and iterate until the experience matches your vision.

## Why use Design & Prototype

### Interactive from day one  
   Prototypes are clickable and stateful — stakeholders experience the flow, not a slideshow.

### Grounded in your system  
   Uses your actual design tokens, components, and patterns so prototypes feel like your product.

### Capture and remix  
   Start from any live product page. Capture it, then redesign it with your own design language.

### Rapid iteration  
   Make changes in natural language. "Add a confirmation step" or "Make the header sticky" — and see results immediately.

## When to use Design & Prototype

### Redesign an existing flow  
   You want to improve a specific user flow in your product.
   Capture our current settings page and prototype a redesign that groups settings by category with a sidebar navigation.

### Explore a new feature  
   You have a feature idea and want to see it before committing to implementation.
   Build a prototype for an AI assistant sidebar that helps users write better search queries.

### Clone and customize  
   You admire a competitor's approach and want to adapt it for your product.
   Capture Notion's database view and prototype a version that uses our design system and data model.

## More from your Product Designer

- [**Design Spec**](/content/skills/design-spec/index.html)  
- [**Design System**](/content/skills/design-system/index.html)  
- [**Live Preview**](/content/skills/live-preview/index.html)  
- [**Design Critique**](/content/skills/design-critique/index.html)  
- [**Video Walkthrough**](/content/skills/video-walkthrough/index.html)

## See Design & Prototype in action

See how Design & Prototype turns concepts into interactive experiences in minutes.