design-spec

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

1. Follow the command specification in ${AGENTS_SKILLS_ROOT}/design-spec/commands/design-spec.md exactly.
2. Read the product spec thoroughly. Extract personas, user flows, acceptance criteria, and UI/UX requirements.
3. Generate Mermaid flowcharts for every major user journey identified in the product spec.
4. Specify every screen/view with its purpose, key elements, entry points, and interaction patterns.
5. Define reusable UI components with their states (default, hover, active, disabled, loading, error), variants, and accessibility attributes.
6. Include responsive behavior breakpoints, accessibility requirements (WCAG 2.1 AA), and error/edge case handling.
7. Add placeholder sections for visual design references (Figma links, screenshots, design tokens).
8. 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.