Case · Design systems · 2025 to 2026
Working code-first changes what you notice.
01 · The mismatch
Same button, two names.
I opened the Figma file and the code side by side. Figma said “Primary, Large”1. Storybook said variant: action, size: lg2.
Same component, different assumptions. A year of quiet drift3 had built up, and nobody noticed, because the system still looked right.
- Type
- Primary
- Size
- Large
- variant
- "action"
- size
- "lg"
2 of 2 properties named differently. Handoff has to guess.
02 · Starting from code
Read the code before touching Figma.
Most design-system work starts in Figma. This one started in code, written by the person who coined Atomic Design.
So I renamed Figma to match the props1, and before changing any colour I traced the whole token chain2. Understand why it is built that way before you propose anything.
| Figma | Code | Now |
|---|---|---|
| Type | variant | Renamed |
| Size · Large | size · lg | Renamed |
| Icon left | iconStart | Matched |
03 · AI in the loop
Ask the codebase, not a guess.
With Claude and MCP I could ask structural questions1 and get answers grounded in the actual code2. Hours of manual tracing became minutes.
The limits were useful too: judgement still needed a human3. The tool sped up the investigation. It did not replace the thinking.
- Which components use the action token?
- Button, Link and Tabs.
- Is action the right token for the delete button?
- That is a design decision. Flagged for Elleta.
04 · Same discipline, here
On the site you're reading.
This portfolio runs the same way: one token layer1, one component per job, and a gate that fails the build on drift2.
The table reads its values live from this page. Switch the theme and watch them change.
| Token | Value now |
|---|---|
| reading the stylesheet | … |
What changed
Aligned, documented, maintainable.
Figma and Storybook match across the system. The token chain is written down, primitive to semantic to component. MCP became part of how I investigate a system.
What I learned: reading code for design intent is a design skill. Drift is the default; alignment is a habit.