Systems · Claude Code · Figma MCP
Closing the gap between design and code
Building a pipeline that keeps Figma, Storybook, and production in sync — and makes AI-assisted design more reliable
Flink Hub App · 2024–2025 · Senior Product Designer
One designer, 150+ warehouses
Flink operates 150+ warehouses across Germany and the Netherlands. The internal Hub App runs on Android Zebra devices and is used daily by warehouse workers to manage inventory, order picking, inbound, and fleet operations.
As the sole designer on the product, I was responsible for both the design of new features and the health of the component library that powered them.
A design system in name only
When I joined, the component library had around 50 components in a single Figma file — a flat list of assets with duplicated items, inconsistent naming, and components built with outdated Figma practices.
But the deeper problem wasn’t the library itself. It was what happened in the gap between design and code.
The previous handoff workflow was simple: attach a Figma Dev Tools link to the Jira ticket, and the frontend developer would implement from there. No shared vocabulary, no sync process, no way to know if what was built matched what was designed.
Over time, this created a silent drift. If a component didn’t match exactly what existed, a new one was created — no conversation, no negotiation. The codebase quietly filled with partially duplicated components, each slightly different from its Figma counterpart. The result was a design system in name only. Figma, Storybook, and the production codebase had drifted so far apart that neither side could trust the other.
A pipeline problem
The problem wasn’t a design problem or an engineering problem. It was a pipeline problem.
There was no shared source of truth, no process for keeping the three systems in sync, and no incentive for either side to invest in alignment. Fixing the library in isolation wouldn’t solve anything — we needed to eliminate the gap itself.
There was also a second reason to invest in this: I had started using Claude Code to generate early-stage prototypes and screens directly in Figma. The better the library, the more accurate and useful those outputs became. A synchronized component system wasn’t just about code quality — it was infrastructure for faster, more faithful AI-assisted design.
Phase 1 — Restructuring the library
~2–3 weeks, alongside daily work
Before tackling the code-design gap, I restructured the Figma library from scratch. I separated components into atoms and molecules, removed duplicates, modernized the component architecture, and established consistent naming conventions.
This phase created a clean foundation — but more importantly, it gave us a shared vocabulary to use in the audit that followed.
Phase 2 — The audit
~1 week, alongside daily work
When a new frontend developer joined the team, we saw an opportunity to reset the relationship between design and code. The initiative came from both sides: we had both noticed missing and inconsistent components, and together we designed the plan — using Storybook as the source of truth and building a pipeline to keep everything in sync.
We started with a triple audit comparing every component across three systems: Figma, Storybook, and the production codebase.
What we found:
Only in Figma: Bottom sheets — fully designed, never implemented
Only in Code: Legacy product cards — removed from Figma but still living in the codebase
In both, but diverged: Primary button — different variants on each side, with no single correct definition
The audit gave us a precise map of where the gaps were and what the pipeline needed to close them.
Image placeholder — design_system_audit.svg (Venn diagram of the three systems)
Phase 3 — Building the pipeline
~3 months, alongside daily work
We established Storybook as the single source of truth — the only place where a component was considered “done.” From there, we built a workflow that made alignment the path of least resistance:
I used Claude Code with the Figma MCP to recreate missing components and all their variants directly inside Figma, referencing the real production code.
I reviewed and adjusted each component manually for craft and accuracy.
Once ready, I opened a Pull Request directly using the Figma-to-Code MCP — no handoff, no waiting.
The frontend developer reviewed, updated the real component, and published it to Storybook.
We closed each loop with a quick QA round in the live app.
Because the components in Figma were now 1:1 with the codebase, Claude Code could generate screens that used real production components accurately. The synchronized library didn’t just reduce drift — it made AI-assisted prototyping significantly more reliable and useful.
Image placeholder — design_system_pipeline.svg (circular pipeline diagram)
One loop per component
Over five months — always running alongside the product work of the day — we established and validated the full pipeline end-to-end.
The PM and design lead both noted how the optimized library had accelerated the ideation process. For the first time, a designer could open a PR. For the first time, Storybook reflected what Figma showed. The gap that had been growing quietly for years had a system to close it — and that system also made every future feature faster to explore.
The project was paused when both the frontend developer and I were let go. But the pipeline was live, proven, and ready to scale.