Design Systems
Ignite
Somewhere between Figma and the codebase, a design system started telling two different stories.
The setup
Our Figma design system and the components in our GitLab codebase fell out of sync. Naming conventions didn't match, some components existed only in code, and others existed only in Figma with no counterpart. Handoff leaned on that fragile parity, so developers rebuilt from interpretation and accuracy suffered. The goal was to get the design system Code Connect ready, so a designer could pull a real component and give engineering an accurate starting point. I evangelized the need to have design and code to be in sync by orchestrating the communication between the two teams, while a colleague led most of the execution. Our system follows atomic design across three files: Core Components, Patterns, and UI Kits.
Auditing with Claude, not by hand
A manual audit across three atomic design files would have been slow and inconsistent. Instead I guided the direction to my design colleagues to run in Claude's Cowork mode, connecting a copy of the codebase to our Figma enterprise system through MCP. Claude surfaced every mismatch, from naming differences to components that lived only in code or only in Figma. That gave us a shared, evidence based map of what was misaligned and which fixes belonged on the design side.
Scoping to what would ship
We could not align everything at once, so I focused the effort where it mattered most. We prioritized the app, where our customers are most active, and connected two of the three files. The third, our UI Kits, carried more complexity, so I made the call to defer it rather than slow the whole program. Narrowing scope kept the work honest and moving.
Code Connect as the handoff contract
With the aligned components mapped, we used Code Connect to pass real component references and sample prompts straight into the developers' code editor. That turned handoff from interpretation into something closer to a contract, giving engineering an accurate starting point instead of a screenshot to rebuild.
Selected scenes
The premiere
By the end of three months, 43% of the design system was aligned and wired through Code Connect. Across repeated handoff experiments, developer builds came out about 80% accurate to the design. The governance side, making this the default way the design and development teams operate, is still in progress. It was a deliberate first slice rather than a finished system, and it proved the model works.