majiayu000 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
- Read source (PBI or Figma URL)
- If Figma URL -> run
/figma-extractfirst - Document component inventory
- Define states and interactions
- Extract design tokens
- Create design spec artifact
- Save to
team-artifacts/design-specs/
Spec Structure
- Overview: Feature summary
- Component Inventory: List all UI components
- States: Default, hover, active, disabled, error
- Design Tokens: Colors, typography, spacing
- Accessibility: ARIA, keyboard nav
- 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