04 Design Systems·2026·lilaquadrat

No
Handoff

Figma describes a product. Code is the product. A description drifts from the thing it describes unless something forces them back together, and on a team of one nothing does. So the design system, the rulebook and the shipped product are one artifact. Nothing to translate, nothing to drift.

Role
Product Designer · sole design owner
Product
Studio · B2B content platform
Built with
Vue · Less · Claude Code
Status
Shipped · in daily use
01The whole system

What the loop runs on.

THE REFERENCE VISIBLE Renders the real shipped partials what you see is what ships THE RULEBOOK ENFORCEABLE 21 patterns · 25 machine-checkable rules every rule restated so a machine can read it design against what ships the audit reads the rules DESIGNER Design in the product AGENT /design-check AGENT /design-push DEVELOPERS /design-review WHERE THE GAP CLOSES Every lap ends where it started, so nothing drifts between one pass and the next THE REFERENCE VISIBLE Renders the real shipped partials what you see is what ships THE RULEBOOK ENFORCEABLE 21 patterns · 25 machine-checkable rules every rule restated so a machine can read it design against what ships the audit reads the rules DESIGNER Design in the product AGENT /design-check AGENT /design-push DEVELOPERS /design-review WHERE THE GAP CLOSES Every lap ends where it started, so nothing drifts between one pass and the next
03The reference · visible

What you see is what ships.

Not a Storybook of isolated stories, not a hand-maintained copy. A route inside the product that mounts the real partials. Because it runs, it holds what a frame cannot: a row that opens its edit form inline, and the same component answering at phone width in the window beside it.

One partial, used live · desktop and phone, side by side
4,040 lines · one route · 113 tokens · 41 components · renders the shipped code
04The rulebook · enforceable

Written for a machine.

Every pattern carries a Check: line, the rule restated so a machine can verify it. That single constraint is what turns a reference into something enforceable.

### 3  Spacing — the page edge
The page edge is @page-inset — 20 px, one value at every
breakpoint. Three surfaces have to agree on it: the top nav's
content row, the sub-header, and the page body. They stack, so
any one of them using its own number shows as a misaligned
left edge down the whole screen.

Check: no hardcoded page-edge padding where @page-inset
belongs; no element other than .main-content declaring a
horizontal page inset.
22 patterns · 27 machine-checkable rules · updated in the same commit as the change
05Enforcement

A verdict, with line numbers.

This is what /design-check actually returns: every file in the change, audited against the rulebook, each violation handed back with the line and the rule it broke. I run it, developers run it, and the rulebook does not care whose code it is. Not an opinion about the work. A finding.

A real run at 4× · the sweep, then 5 findings · nothing staged
06The loop, in detail

The handoff is one command.

Branching, merging, conflict resolution, review packaging, cleanup, all of it carried by three skills I wrote. I never touch git; developers never reverse-engineer a mockup.

A real run at 4× · commit, merge, publish · git never touched by hand
146 review handoffs · 142 commits · 139 files · neither side waits on the other
07By the numbers

One designer, no team, and it can't drift.

Three months inside the product the system describes. Every number below is something the loop keeps true without anyone remembering to check.

113
Semantic tokens
41
Shared components
0
Hex in a component
21
Documented patterns
25
Machine-checkable rules
146
Review handoffs
3
Months
1
Designer