Design Still Derisks Dev
I built a design system in a weekend.
This is not one of those “I built a full design system in 5 minutes with AI” posts. That’s not what happened here, and that’s not what I set out to do.
This was about compounding. Taking everything I know about design systems, tokens, layout, and components, and seeing how far I could push it when AI enters the picture. Not by handing over control. Not by racing to some speed demo. By extending my own reach and learning where the new boundaries actually are.
Start with the fundamentals
My process started the old-fashioned way. Drawing pixels. Experimenting. Hand-picking my colour palette. No shortcuts.
I applied what I learned building enterprise-grade tokens at Intuit Design System: a proper set of 10-stop primitive colour tokens with semantic tokens layered on top, enabling light and dark mode out of the box. I formatted my screens with auto layout until I was happy with corner-to-corner token coverage. I created the first few components and page layouts by hand, in Figma, the way I’ve always done it.
None of this was fast. It wasn’t supposed to be. The whole point was to set up a foundation with enough structure and rigor that AI would have real signal to work with. Because what I’ve come to believe is this: AI doesn’t eliminate the need for good design foundations. It makes the quality of those foundations matter more than ever. Sloppy tokens and half-baked layouts don’t just slow down human developers anymore. They slow down AI too. Design debt is now AI debt.
The handoff
When I reached critical mass, enough structure and substance to actually stress-test what AI could do, I enabled Figma MCP, booted up Claude Code, and got started.
My plan was to build proper React components, load them into Storybook, and create a robust front door that would be the entry point to my system, pulling everything together.
Given how thoroughly my system was set up beforehand, it was pretty fast getting to a good spot. Claude Code spun up my Storybook and website quickly. I spent an entire weekend tweaking and iterating. The leverage curve here wasn’t linear. It was slow and deliberate during setup, then explosive once the AI had a strong foundation to build on. The better the inputs, the steeper the acceleration.
Letting go of parity
Initially, my process was keeping design and code in 1:1 parity. At the beginning this was doable. A handful of components and the core foundations. But I hit a moment where I believed the rules I had set were strong enough to let it loose. From 5 components, it grew to over 30.
Most design system discourse treats parity as sacred. My experience says it’s scaffolding. Useful during construction. Removable once the structural integrity is proven. The moment I trusted the token architecture and component patterns I’d established, strict parity became a bottleneck, not a safeguard.
My role shifted in that moment. I went from producing every component to governing a system that could scale without me designing each piece. Setting the rules tight enough that output stayed coherent. Knowing when to intervene and when to let it run. That’s the new job. Not production. Governance.
Where it broke
That is, until a few elements just would not turn out the way I wanted. Prompt after prompt. Close, but not quite.
This is where most people’s AI stories end with a shrug or a workaround. Mine went back to Figma. Design it right. Show, don’t tell. Back through Figma MCP, and boom, the results I wanted. I did this for several components.
There’s a bigger insight here about the limits of natural language as an interface for precision work. Prompting is lossy. You can describe what you want in a hundred different ways and still lose the nuance. A well-structured Figma frame is a high-fidelity specification. It carries more signal in one frame than a paragraph of instructions ever could. When words couldn’t get the AI where I needed it to go, the artifact itself became the interface. Show don’t tell doesn’t just work for human communication. It scales better for AI too.
The other day, Claude and Figma announced Claude-to-Figma. Wish I had this earlier. Could have saved me some time. But it reinforces the point. The tighter the loop between design artifact and code output, the better the results.
What this changes
What has shifted for me is that Figma is no longer end to end. I think it will evolve into three roles: the foundation, the up-front setup, and the finesse tool. Not the whole pipeline anymore. Code-to-Figma is a great addition that reinforces this shift. Design starts the process and rescues it when language falls short.
But nothing here changes the core economics. Design still derisks dev. Dev is expensive. Whether it’s a human or AI credits, you’re going to pay one way or the other. The difference now is that the ROI conversation for design systems has expanded. Good tokens, good layouts, good foundations aren’t just a craft concern. They’re an efficiency multiplier on your entire AI-assisted pipeline. Every hour spent getting the design right is an hour saved on prompting, iterating, and debugging downstream.
The real question
The goal of every designer is to design the right thing and build it the right way.
But the right thing may not be the legacy UX flow of the SaaS days. It might be a blank canvas that simply enables possibilities for your customer. And the right way to build it might not look like what we’re used to either. It might look like a designer who governs more than they produce, who knows when to let the system run and when to pull it back into Figma for the finishing touch.
The tools are changing. The leverage is changing. But the job is the same: reduce risk, increase clarity, and make sure what gets built is worth building.