design-spec

Design Specification

Create comprehensive UI/UX specifications for implementation.

When to Use

• PBI needs design documentation
• Figma design ready for handoff
• Component specification required

Quick Reference

Workflow

1. Read source (PBI or Figma URL)
2. If Figma URL -> run /figma-extract first
3. Document component inventory
4. Define states and interactions
5. Extract design tokens
6. Create design spec artifact
7. Save to team-artifacts/design-specs/

Spec Structure

1. Overview: Feature summary
2. Component Inventory: List all UI components
3. States: Default, hover, active, disabled, error
4. Design Tokens: Colors, typography, spacing
5. Accessibility: ARIA, keyboard nav
6. Responsive: Breakpoints, adaptations

Output

• Path: team-artifacts/design-specs/{YYMMDD}-designspec-{feature}.md

Design Token Format

// Colors
$primary: #1976D2;
$error: #D32F2F;

// Typography
$heading: 24px/1.2 'Inter';

// Spacing
$gap-sm: 8px;
$gap-md: 16px;

Related

• Role Skill: ux-designer
• Command: /design-spec
• Helper: /figma-extract

Task Planning Notes

• Always plan and break many small todo tasks
• Always add a final review todo task to review the works done at the end to find any fix or enhancement needed