Tools

The tools that run the flow. Each one maps to one or more stages.

The tools at a glance

The stage numbers are the stages of the flow, from 1 (Frame) to 8 (Capture). Select a name for the detail on that tool.

Each tool, what it does, the stages it covers, and its cost.
Tool	What it does	Stages	Cost
Compound Engineering	A plugin for Claude Code and Codex for the full flow. It has brainstorm, plan, build, review, compound, and product-pulse. It is the only tool with an explicit Stage 8.	1–8	Token cost per agent
Interface Craft	Design critique, animation control, and step-by-step refinement. A six-step method that ranks each finding by severity.	6	One-time licence
Chrome DevTools MCP	Browser automation for Claude Code. Screenshots at more than one viewport, Lighthouse audits, the accessibility tree, and the console and network records.	6, 7	Free
Playwright	End-to-end browser tests. It fills the forms, verifies the flows, and checks for regressions across browsers.	7	Free
GitHub Spec Kit	Spec-driven development for more than one editor. It runs specify, plan, tasks, and implement.	3–5	Free
Figma plugin	A live comparison between the Figma designs and the built implementation. Nine skills that keep the design and the code in step.	6	Marketplace
Amplitude replay-ux-audit	A UX audit over the replays of real user sessions. It is the only tool that studies user behaviour and not the built artifact.	Post-launch	Subscription

The detail on each tool

Each card gives you what the tool does, when to use it, what it does not do, and the stages it covers.

Compound Engineering

What it does: A plugin for Claude Code and Codex that covers the full development flow. It has skills that brainstorm, plan, build, review the code, and capture knowledge. The code review runs persona agents with more than one lens. It gates each finding by confidence and it removes the duplicates. The compound skill writes solution documents that a reader can search, and a refresh pass updates the stale ones.
When to use it: Use it when you want the full flow in one tool, and your team works in Claude Code or Codex.
What it does not do: It does not work outside Claude Code and Codex. It does not support Copilot, Cursor, or the other editors.
Stages: 1 (Frame) to 8 (Capture). It is the only mainstream tool with an explicit capture stage.

Interface Craft

What it does: A design review plugin by Josh Puckett. It runs a six-step critique: context, first impressions, visual design, interface design, consistency, and user context. It ranks each finding as structural, behavioural, or visual. It also has a storyboard animation DSL and live control panels that set the values.
When to use it: Use it when you want an expert design critique of a screen or a component.
What it does not do: It does not run automatic checks. It gives you a qualitative critique, not a test suite.
Stages: Stage 6 (Review), as a design lens.

Chrome DevTools MCP

What it does: An MCP server that gives Claude Code direct control of the browser. It opens a page and takes screenshots at different viewport sizes. It runs Lighthouse audits for performance, accessibility, and best practice. It also reads the accessibility tree, the console messages, and the network requests.
When to use it: Use it to verify that a built feature works at every viewport, passes the accessibility checks, and has no console errors.
What it does not do: It does not replace an end-to-end test suite. It checks one page at a time, not a full flow.
Stages: Stage 6 (Review) for a review from screenshots, and Stage 7 (Fix & Verify) for the verification checks.

Playwright

What it does: A browser automation framework for end-to-end tests. It drives Chrome, Firefox, and WebKit. Claude can write and run the Playwright tests. The tests fill the forms, step through the flows, and check that each page and each button works as you expect.
When to use it: Use it to run the full user-flow tests after the build, or to verify that a fix did not break the other flows.
What it does not do: It does not do design review or accessibility audits. Use Chrome DevTools MCP for those.
Stages: Stage 7 (Fix & Verify) for regression tests and flow verification.

GitHub Spec Kit

What it does: A spec-driven development tool that works across more than one editor: Claude Code, Copilot, Cursor, Gemini, and Q. It takes a specification through four steps: specify, plan, tasks, and implement.
When to use it: Use it when your team is not on Claude Code, or when you want a lighter flow from the specification to the code.
What it does not do: It does not cover review (Stage 6) or capture (Stage 8). It stops at the implementation.
Stages: Stage 3 (Spec) to Stage 5 (Build).

Figma plugin

What it does: A Claude Code marketplace plugin with nine skills. The skills compare the Figma designs against the built implementation. The plugin finds the visual differences and helps you correct them.
When to use it: Use it when you have Figma designs, and you want to check that the implementation agrees with them.
What it does not do: It does not work without Figma. It compares the code against a design file, not against general usability standards.
Stages: Stage 6 (Review), as a lens on design fidelity.

Amplitude replay-ux-audit

What it does: A UX audit tool that works over the replays of real user sessions. It is the only tool in this list that studies how real users behave. The other tools look only at the built artifact.
When to use it: Use it after the launch, when you have real replay data and you want to find where the users stop.
What it does not do: It does not work before the launch. It needs real user sessions to audit.
Stages: Post-launch. It maps to the Launch and Learn page of the product playbook.

How this page relates to the flow

The flow page carries a comparison table for three ways to run the flow: by hand, GitHub Spec Kit, and Compound Engineering. That table shows which stages each approach covers. This page gives you the detail on each tool.