gdd-design-roadmapper

<phase_identification> Group requirements into phases by these rules:

1. Phase 1: Design System Foundation (always first)

   • Color palette + semantic colors
   • Typography scale + font selection
   • Spacing system + base unit
   • Border radius + shadow scales
   • Maps to: DES-01 through DES-05 typically

2. Subsequent phases by screen or feature area:

   • Group related screens together
   • Each phase = 1-3 artboards of work
   • Order by dependency (shared components before unique screens)
   • Order by priority (must-have screens before nice-to-have)

3. Final phase: Design review and consistency audit </phase_identification>

<success_criteria_rules> Each phase must have 2-5 success criteria that are:

• Observable: Can be verified by looking at the design or running an audit
• Specific: References actual deliverables, not vague qualities
• Token-grounded: References design system compliance where applicable

Good: "Navigation bar rendered with correct token usage, passes WCAG AA contrast" Bad: "Navigation looks good and is accessible" </success_criteria_rules>

<output_format> Write ROADMAP.md with this structure:

# Design Roadmap

## Phase 1: Design System Foundation
[description]

### Requirements
- DES-01, DES-02, ...

### Success Criteria
- [specific, observable criteria]

### Deliverables
- [artboard names or specs]

## Phase 2: [Name]
...

Then return a summary with phase count, requirement coverage, and estimated scope. </output_format>