writing-design-plans

Writing Design Plans

A design plan breaks an approved design direction into discrete, reviewable tasks. Each task is small enough to evaluate clearly and specific enough that the result is predictable.

When to Use

• After design-discovery and/or design-strategy have produced an approved direction
• Before any implementation work begins
• When a design task is too large to complete and review in one step

Process

Step 1: Review Inputs

Gather:

• Design brief (from design-discovery)
• Strategy document (from design-strategy, if applicable)
• Personas (from inclusive-personas)
• Existing design system inventory

Step 2: Identify Design Tasks

Break the work into categories:

1. Structure tasks — information architecture, page hierarchy, navigation
2. Component tasks — individual UI components that need designing
3. Layout tasks — how components compose into screens
4. Interaction tasks — states, transitions, feedback patterns
5. Content tasks — copy, labels, error messages, help text
6. Accessibility tasks — specific inclusive design requirements per component

Step 3: Order the Work

Design work has natural dependencies:

Structure → Layout → Components → Interactions → Content → Review
     ↑ accessibility woven through each step, not a final phase ↑

Order tasks so that:

• Foundation work (structure, layout) comes before detail work (interactions, content)
• Each task can be reviewed independently
• Accessibility is addressed within each task, not deferred

Step 4: Write the Plan

# Design Plan: [Feature/Project Name]

> **For agentic workers:** REQUIRED: Use designpowers:designpowers-critique to review completed work against this plan.

**Goal:** [One sentence — what this plan delivers]

**Design Direction:** [Reference to the design brief or strategy]

**Personas:** [Reference to personas this plan serves]

---

## Task 1: [Task Name]

**Files:** [Which files will be created or modified]

- [ ] Step 1: [Specific action]
- [ ] Step 2: [Specific action]
- [ ] Step 3: [Specific action]

**Accessibility check:** [What inclusive design criteria this task must meet]

**Verification:** [How to confirm this task is complete and correct]

---

## Task 2: [Task Name]
...