I built a pipeline that returns working components

An agency sat between the design and the shipped UI. Every decision made a round trip through a handoff doc. I replaced the doc with a pipeline: Paper to Claude Code to React, Tailwind and Storybook, with the design system deciding what could be built. Reviews moved onto running components.

96

React components

51

Storybook stories

19

deployed applications

6

rounds of review on running software

The design system

The pipeline is a document. It is an operating spec that lets an agent build inside a real codebase on its own: project boundaries, a command filter, secrets handling, and a list of what it can do without asking. It decides what is allowed to exist.

## Operating Context

The user is a designer,
not a security engineer.

The user cannot reliably evaluate
terminal permissions or low-level
commands.

Therefore:

Claude must self-enforce safety rules
rather than relying on the user
to detect problems.

Claude should behave like:

> a careful senior builder working
> inside a small controlled workshop.

## Autonomous QA Checklist — item 13

Vertical lane alignment across
sections. Trace vertical lanes through
the full page. Do labels, values, and
indicators fall on shared column lines?

A structural mismatch is a layout bug
even if every individual property
within each section is correct.

> Vertical alignment is foundational —
> it is one of the dominant markers of
> a well-designed page.

How it worked

Paper, not Figma — because one returns code

Paper's MCP returns real JSX and Tailwind, not a description of a design to translate. Figma stayed on to read legacy files, nothing more. That one swap removes the step where most design-to-code fidelity gets lost.

So the rule is: every component starts as a literal copy of what the design tool returned. No turning absolute positioning into flex, no swapping exact offsets for spacing utilities. You can abstract it after the literal version passes review, not before.

The token system is the palette

Every colour, weight, radius and spacing value has to come from the project's token page. If the tokens do not cover the request, the agent says so and waits instead of inventing one. And if a component never appeared in a design, it does not go in the library.

96 components stayed consistent without a second designer reviewing every commit.

Options were built, not described

I had three directions for the intelligence layer built and deployed to three separate links, so we chose against running software instead of a deck. The ops screen went through six rounds, each one reviewed against a live build.

Nineteen deployments in 90 days: six rounds of one screen, three parallel directions for another, the component library on its own link, and the decision tools I used to run the engagement.

What the engagement produced

A working pipeline and a v0 of the system it generates from — not a finished design system, and not the plan's targets restated as results. What can be checked is what is still running: the product, its component library, and the plan itself, all three at their own URLs and all three built inside the engagement.