Design System REBUILD REPAIR AND GOVERNANCE
Claude Code's Dynamic Workflow - Design System rebuilt from Ratehub codebase
Deployed an agentic workflow alongside Claude Code to reverse-engineer and rebuild the design system directly from the existing codebase. Operating as seamless peers, Claude handles multi-tasking, reasoning, and tool execution, while I curate the workflow via HITL to ensure a safe, trustworthy outcome.
Technology stack
At a Glance
When code and design drift for nine years, no team can afford to fix it by hand. I authored and led an agentic workflow where Claude Code reverse-engineers the design system directly from the production codebase — reading tokens, variables, and component logic, authoring his own skills, then writing them back into Figma over MCP.
I operated as the human-in-the-loop curator: every write gated, every drift caught, every decision documented.
Duration
PoC: 1 live session (~1 hr) · Full pipeline: March–May 2026
Role
Workflow architect · HITL curator · Design System owner
Scope
Codebase → Figma over MCP · Tokens, variables, styles · Full-state components · Skill authoring · Multi-agent orchestration
Scale & Impact
143 tokens in one session · Button: all sizes, states, props · 1:1 mirror of production
TL;DR
Context
9 years of drift left the same component living two realities — 25 structural flaws, unfixable by hand.
Insights
The trap is circular: fix code and design lags; fix design and mirroring costs too much. The way out is a new kind of executor, with the designer as governor.
Solution
Claude Code reads the codebase and rebuilds it in Figma over MCP: 143 tokens in one hour, then fully-stated components via a self-authored skill — every step HITL-gated.
Impact
1:1 mirror restored, drift caught and documented between runs, and the process evolved into a multi-agent workflow with near-zero drift — a repeatable pipeline, not a one-off rescue.
PROBLEM
Nine years of drift between code and design — plus 25 structural flaws in the foundation.
The same component looked one way in Figma and another in production. Underneath, the foundations had decayed — broken naming conventions, missing hue values, and components short on sizes, states, and variants.
Same component — Figma and production code no longer reflect each other.
A naming-convention crisis at the foundation level.
THE TRAP
You can’t fix the flaws until you fix the drift — and fixing the drift is its own trap.
Fix it in code and design falls behind. Fix it in design and mirroring every decision into code is too costly. So most teams do neither — and live in the maze.
“Why do I fix code and Figma, and you still don’t look like me?”
THE GOAL
Sync code and design into one single source of truth.
So we could remove the discrepancies first — and, eventually, repair the structural flaws underneath.
Code and client-facing product is the source of truth
THE WORKFLOW
Claude Code reads the codebase and rebuilds the design system in Figma — over MCP.
Operating as peers: Claude crawls the code for tokens, variables, component states and sizes, then writes them back into Figma as variables, styles, and fully-stated components. I curate every step through human-in-the-loop gates.
Case study deep dive
Self-sponsored Claude pro and proposal to get access to the code base
I didn't wait. I just moved.
I created a clear plan and documentation, sponsored myself the first Claude Pro account, asking for support to access the codebase and provisioned budget, because I genuinely knew how much this benefited the team and the company.
Below screenshot: Executive-level document, Claude API, Figma MCP server and Figma paid seat provisioned to make the project works.
Case study deep dive
Claude Code in action: Workflows & Working sessions
Claude Code reads the codebase, then writes structured variables and components into Figma via MCP.
SESSION 01
Workflow 1 : Design System recreation from code within 1 hour
Phase 1 & 2 — read codebase, then write foundation tokens, variables, and styles to Figma.
SESSION 02
Workflow 2 : Claude Code authored his own skill and used skill to create component
Skill-guided component generation — all sizes, states, and interactions, wired to the foundation.
EXECUTION & DEEP DIVE
1st session: Claude Code recovered the entire foundational token system from the codebase.
Claude Code reads codebase and writes in Figma, 143 tokens extracted in one live session — colors, typography, spacing, radius, opacity, breakpoints.
EXECUTION & DEEP DIVE
1st session: Tokens system fully restored in Figma
All tokens are restored: Border radius, colors, opacity, spacing, typography. Mirror code 1:1. Documented in Figma
EXECUTION & DEEP DIVE
Before & After: Tokens collections comparison
All tokens are restored: 6 collections (after) vs. 3 collections (before)!
EXECUTION & DEEP DIVE
1st session: Button components fully restored in Figma full props, sizes and states
Claude Code restored full variants, states and properties: Button component is fully restored!
EXECUTION & DEEP DIVE
1st session: Button components fully wired to tokens
Claude Code restored full variants, states and properties: Button component is fully restored!
REFLECTION
Drifts, and the automation ceiling.
The drifts are real — and expected. A token or property occasionally goes missing, and model tier matters: only a top-tier model reasons through this much structural complexity. So how do we push the ceiling higher?
We caught the drift between runs: The typo wasn't wired. Props overlapped in some cases
ITERATION
A dynamic agentic workflow — with human-in-the-loop gates.
The answer is orchestration. Sub-agents read, build, and cross-check in parallel; a repair agent fixes failures; and I hold the gate on every unhappy path.
Claude Code orchestration — parallel build and verify agents, with human-in-the-loop escalation.
Claude Code · Sub-Agent Workflow
Figma
via MCP
Claude Code
Codebase
Git · Storybook
3 Agents · Read Skill + Create Components
Parallel
1
Builder Agent
Read skill → Atoms & Tokens
DS Guidelines
2
Builder Agent
Read skill → Molecules & Patterns
DS Guidelines
3
Builder Agent
Read skill → Organisms & Templates
DS Guidelines
Retry
on mismatch → routes back to Builder Agent · 1×
2 Agents · Verify + Cross-Check
Review
4
Token Verifier
Tokens wired against checklist
Spacing · Color · Typography
5
Cross-Checker
Layers doubled · Props vs code
→ Repair panel if ×2 fail
Claude Code · Orchestrator
6
Claude Code
Report success / fail cases
Design System Owner
Reviews final report · Makes decision
Human
Escalation Path
← from Cross-Checker · fails ×2
Repair Agent
Diagnose + patch flagged component
Separate repair skill
↓ Escalate
Claude Code
↳ report success / fail cases
6 agents · Design System Owner · Happy + Unhappy paths
Design System Workflow
REFLECTION
Live dynamic agentic workflow — with human-in-the-loop gates.
By leveraging sub-agents, we can generate components with near-zero drift while automatically flagging system inconsistencies. In this specific case, when the builder generated a destructive token, Claude Code documented it in our report. This process is constantly evolving as we upgrade agent skills and scale our supporting templates and documentation.
Ultimately, Claude Code empowers Design System teams to automate the entire component pipeline—backed by automated QA, strategic human-in-the-loop oversight, and industry-leading success rates. This execution embodies my core thesis: a powerful symbiosis between Designers and AI, positioning the designer as the essential curator who guards the system against drift.
REFLECTION
Team celebration and shoutout
We proof-concepted the first session in March 26, I sent a shoutout to Josh in our Slack chat in May 4th. Special thanks to Josh, Claude AI - Finn, Claude Code - Nathan who made this project a huge success! This is where human and AI can collaborate seamlessly. Design can be fun, even from a terminal!
