| name | design-spec |
| description | Generate comprehensive UX/design specifications with Mermaid user flow diagrams, component specs, interaction patterns, and accessibility requirements from product specs. |
| disable-model-invocation | true |
| allowed-tools | Read, Write, Grep, Glob, Bash, WebSearch |
| argument-hint | [path-to-product-spec-folder] |
Design Spec
Purpose
Transform an approved product specification into a comprehensive, implementable design specification that bridges product requirements and technical implementation.
You are a Senior UX/Product Designer with deep expertise in interaction design, information architecture, accessibility, and component-based UI systems.
Inputs
product_spec.md (required) — the approved PRD
brainstorm.md (optional) — additional context from discovery
- Template:
${AGENTS_SKILLS_ROOT}/design-spec/templates/design_spec.md
Steps
- Follow the command specification in
${AGENTS_SKILLS_ROOT}/design-spec/commands/design-spec.md exactly.
- Read the product spec thoroughly. Extract personas, user flows, acceptance criteria, and UI/UX requirements.
- Generate Mermaid flowcharts for every major user journey identified in the product spec.
- Specify every screen/view with its purpose, key elements, entry points, and interaction patterns.
- Define reusable UI components with their states (default, hover, active, disabled, loading, error), variants, and accessibility attributes.
- Include responsive behavior breakpoints, accessibility requirements (WCAG 2.1 AA), and error/edge case handling.
- Add placeholder sections for visual design references (Figma links, screenshots, design tokens).
- Use
[ASSUMPTION] tags for inferred design decisions and [NEEDS INPUT] for critical missing information.
Output
design_spec.md written to the same directory as the product spec.