Code Library + Storybook - 6 teams & 24 agents

Client: Personal project
Type of project: AI + Design Systems
Role: AI Creative
Tool: Claude
Year: 2026

I built a production React component library and Storybook in 8 hours. Six agent teams, 24 agents, no code written by hand. This is normally months of work for a development team. I did it by working as a director, not a maker.

The challenge
A code library at this level takes a team of engineers and significant time. The question I wanted to answer was whether a single designer could produce the same result by working differently. Not writing code, but structuring the work so agents could execute it without constant input.

The constraint I set was real. No shortcuts. W3C design tokens, a React component library with TypeScript, and Storybook documentation built to the same architectural standards as Carbon and Polaris. If those standards were met, the process that produced it would prove something worth proving.

Solution
The build ran across three layers that never mixed.

Layer 1: I set strategic direction: what to build, in what order, what quality bar to hold.

Layer 2: Claude.ai shaped the architecture and wrote every agent team prompt.

Layer 3: Claude Code with agent teams executed everything.

Outcome
34 components. 252+ design tokens in W3C format. A full Storybook. Documentation structured for AI consumption. All of it production quality. All of it built in 8 hours by someone who cannot write a single line of code.

The quality pattern across phases tells the real story: 17 issues, 4 issues, 6 issues, 0 issues. Not because the work got simpler. Because the agents got better context each phase, and the QA mechanism caught problems at every boundary before they compounded into the next one.

My role was strategist. What AI removed was the execution bottleneck. What made it was knowing exactly what a production code library should look like, because without that the prompts would have been weaker, the QA criteria vaguer, and the output far less reliable. The domain knowledge was never replaceable. The execution finally was.

The diagram showing the agent team structure used to build the atom components of the Design System. A legend in the top left defines two line types: solid lines indicate task flow, dashed lines indicate communication and feedback.

At the top, a black box labeled "Team Lead" represents the main Claude Code session acting as orchestrator. Five solid lines branch downward from the Team Lead to five parallel worker agents displayed in a horizontal row: Typography Agent, Interactive Agent, Controls Agent, Feedback Agent, and Selection Agent. Each agent is shown as a gray rounded rectangle with a robot icon. Bidirectional dashed arrows connect each adjacent pair of worker agents, indicating they can communicate directly with one another.

Solid lines from all five worker agents converge downward to a white rounded rectangle at the bottom labeled "QA Agent." A dashed arrow runs from the QA Agent back up the right side of the diagram to the Team Lead, completing the feedback loop — representing the QA Agent reporting issues back for resolution before the phase is finalized.

34 components. 252+ design tokens in W3C format. A full Storybook.

Contact

Email: pierre@bremell.com
Phone: +46 709353902
LinkedIn: bremell