13/13.
Audits green on every push. The same gate runs on this site. Nothing merges red.
Design System Collaboration · 2024-2025
Working code-first changes what you pay attention to.
What building Brad Frost's component system in reverse taught me about design, and why working code-first changes everything you pay attention to.
01 · The mismatch
The card didn't match the code.
Same component. Different names. Different assumptions.
I opened the Figma file and the code side by side.
Somewhere in the gap between those two descriptions, a year of quiet drift had accumulated, and nobody had noticed because the system still looked right, even though it no longer said the same thing in both places.
The demos run on BELLA, my own system, demonstrating the same method deployed in the client's library. Client code stays the client's.
Data Dashboard · 2025
Operational Clarity
One system, six operational domains, unified in an 8-week contract.
Design TokensOn system: both sides carry the same token names.
02 · The AI-enabled workflow
So I asked the codebase directly.
MCP let the model read the actual code, so the answers came from the system, not a guess.
The most novel part of the project was using Claude's Model Context Protocol to assist with system investigation.
MCP allows Claude to interact directly with local files and project structure, which made it possible to ask structural questions about the codebase, "what components use this token?", "where is this variant defined?", and get answers grounded in the actual code rather than hallucinated from training data.
The system is built so an agent can work with it safely. Same discipline, every layer, gated on every push.
Agents read the components too, not just the tokens: the same contract the system is built on, served machine-readable.
Layer 6 of 7
THE GATE
Audit and evals. Nothing ships without review.
structurefontstokenscontrastvisual
→ fixed at source: --color-border-soft
Data Dashboard · 2025
Operational Clarity
One system, six operational domains, unified in an 8-week contract.
Design TokensTJ Pitre runs a live audit over Console MCP, pushing changes into the Figma library from the console and using his design-system MCP to surface where the system was lacking, naming conventions, gaps, drift. With Brad Frost.
Watch the session on YouTube"The best use of AI in design system work isn't generating components, it's accelerating the investigation that good system decisions depend on."
03 · The gate
Now the system checks itself.
The portfolio you are reading runs on the same code-first discipline: a token layer, one component per job, and a governance gate that fails the build on drift.
Data Dashboard · 2025
Operational Clarity
One system, six operational domains, unified in an 8-week contract.
Design Tokensidle · 13 audits waiting
structurefontstokenscopyreusendacontrolsparityagentscontrastaxetypevisual
04 · The takeaway
What the work walked away with.
The highest-value work isn't in the Figma file, it's in the alignment between design intent and implementation reality.
This project shifted my intuition about where design system work actually happens. That alignment requires a designer who can read code, trace decisions, and understand a system on its own terms before proposing changes to it.
The highest-value work wasn't in the Figma file.
It was in the alignment between design intent and what actually ships.
Parity isn't a diff you check once.
It's a discipline: read the code, trace the decision, then change the system.
No invented numbers.