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]
...

Step 5: Task Sizing

Each task should be:

• 2-5 minutes of focused work — small enough to hold in your head
• Independently reviewable — someone can evaluate it without seeing everything else
• Specifically described — exact files, exact components, exact acceptance criteria
• Accessibility-inclusive — each task addresses its own inclusive design requirements

If a task takes longer than 5 minutes, break it down further.

Step 6: Save and Review

Save to: docs/designpowers/plans/YYYY-MM-DD-<feature>-plan.md

Present the plan to the user. Walk through:

• Does the task order make sense?
• Are any tasks missing?
• Are the accessibility checks appropriate for each task?
• Is the scope right, or should anything be deferred?

User must approve the plan before execution begins.

Integration

• Called by: design-discovery, design-strategy
• Calls: Implementation begins via the relevant design skills (ui-composition, interaction-design, etc.)
• Pairs with: designpowers-critique (reviews work against the plan)

Anti-Patterns