## Design Spec

UX specs before code, grounded in your product

/design-spec-writerProduct Designer

Generates comprehensive UX specifications covering flows, states, edge cases, and interaction details — grounded in your existing product and design system.

## How it works

1. ### Describe the feature
   Share what you want to build. The agent reads your codebase and design system to understand the existing context.

2. ### Generate the spec
   The agent produces a detailed UX specification covering user flows, component states, edge cases, and interaction patterns.

3. ### Refine and align
   Review and iterate on the spec with the agent until it fully captures the intended experience.

## Why use Design Spec

### Grounded in your product
Specs reference your actual components, patterns, and conventions — not generic templates.

### Edge cases covered
The agent systematically identifies empty states, error states, loading states, and boundary conditions.

### Faster alignment
A comprehensive spec reduces back-and-forth between design and engineering during implementation.

### Living documentation
Specs stay in your codebase and evolve with your product rather than rotting in a wiki.

## When to use Design Spec

### New feature specification
You need to spec out a new feature before prototyping begins.

### Redesign documentation
You are redesigning an existing flow and need to document every state and transition.

### Cross-platform consistency
You need to ensure a feature works consistently across web and mobile.

## More from your Product Designer

- [**Design System**](/content/skills/design-system/index.html)
- [**Design & Prototype**](/content/skills/design-prototype/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 Spec in action

See how Design Spec produces comprehensive UX documentation grounded in your product.