Claude Code plugin

Builder

A tool that lets non-engineers produce front-end code that is production-ready and consistent with the design system. A PM or designer describes the interface change they want, and the plugin generates the matching code, ready for an engineer to review before merge.

The problem

PMs and designers are often the first to spot UX and UI problems, and the best placed to solve them. Today the fix goes through an engineer, or through a codegen tool that drifts fast and loses visual consistency. Builder hands that resolution back to the people whose value it is, without ever leaving the design system.

How it works

Builder scans the repo and extracts a token contract (DTCG, a standard format), validated by a human then frozen as the reference. Every change is then checked against that contract, line by line, before any commit.

Tiered by risk

T1 covers simple changes: a color, a spacing value, a label, a variant. T2 composes new UI from patterns already in the app. T3, anything involving logic, data or auth, stops with a clean handoff for the engineer. When in doubt, it always promotes a tier up, never down.

The architecture

Builder ships as a versioned Claude Code plugin (v0.2.1), installable from a marketplace, not a homemade script. Inside: one orchestrator, three agents, one validator. The orchestrator, the skill itself, takes the plain-language request, tiers it by risk and holds the gates. The three agents only run when needed: a setup agent extracts the contract from the repo and the design system, a context agent runs a narrow scan when a change calls for it, an executor agent applies the ratified plan on the heavier changes. At the end of the chain, a deterministic validator, code and not an agent, checks every diff: nothing off-token, project lint and typecheck green.

Builder architectureA natural-language request goes through the orchestrator, which tiers it into three risk levels, before a deterministic validator produces a diff ready for an engineer's review. Three agents and two human gates step in as needed.Natural-language requestOrchestratorthe skill · tiers by risk · holds the gatesTHREE RISK TIERSdoubt promotes a tier ↑T1Tokenscolor, spacing, label · direct, no agentT2Compositiona UI from existing patternsT3Logic · data · authSTOP → engineer handoffDeterministic validatorcode, not an agent · nothing off-token · lint · typecheckDiff ready for engineer reviewAgent · Setupextracts the token contract◆ contract ratified by a humanAgent · Contexttargeted scan, as neededAgent · Executionapplies the validated plan◆ human write gate