Step 4: The Implementation Plan

What your agent does

Creates three documents that together form the complete build blueprint:

1. Implementation plan — detailed steps per phase, files to create, dependencies

2. Design system — colours, typography, spacing, component patterns

3. Page specs — one file per page with components, data requirements, and interactions

Why this matters

This is the last step before code. After this, the agent has everything it needs to build autonomously — no guessing, no "what should this page look like?" moments.

The implementation plan is also the agent's recovery document. If it loses context mid-build (which happens), it reads this file and knows exactly where it left off and what to do next.

What the output looks like

Implementation plan (docs/implementation-plan.md)

For each phase:

• Branch name

• Which user stories it delivers

• Numbered steps with specific files to create

• Dependencies on other phases

• Whether it's sequential or parallelisable

Design system (docs/design-system.md)

• Colour palette with exact hex values

• Typography (fonts, sizes, weights)

• Spacing scale

• Component patterns (cards, buttons, forms, tables)

• Responsive breakpoints

• Dark mode tokens (if applicable)

Page specs (docs/pages/*.md)

One file per page:

• Route path

• Components needed

• Data requirements (which API endpoints)

• Interactions (click, submit, navigate)

• States (loading, empty, error, populated)

Your role

Review. This is your last chance to course-correct before code starts. Check:

• Does Phase 1 cover the minimum viable product?

• Does the design system match your brand/preferences?

• Do the page specs describe what you actually want to see?

Next: The build begins →