A Design System with AI
How Far You Can Go When a Designer and Claude Build Together
I wanted to settle one thing that kept nagging me as a designer: where are the limits of AI today in work that's genuinely useful for designers - not in generating images, but in the systematic, structured design craft. I picked the hardest discipline I know to test it: building a complete design system.
This particular one is deliberately basic and universal - it serves as a starting point that I then evolve into other visual styles (you'll find a few examples at the end). Here's the story of how it came together, what didn't work, and where I eventually landed.
Why a design system, and what it actually involves
A design system can't be "generated" with a single command. It's built in layers and in a precise order - which is exactly why it was the ideal test of whether AI can handle a long, dependent, structured process rather than just an isolated task.
It starts from the foundations: defining the typeface, type sizes, color palettes, spacing, breakpoints, shadows, radii - all those quiet decisions the whole system rests on. From these foundations you build tokens (variables that hold the values in one place). Tokens feed into components - button, input, modal, icons. Components assemble into larger blocks, and those into full interface sections. Each layer depends on the one before it. If something's wrong at the bottom, it falls apart at the top.
Since building design systems is what I do, I knew exactly how it should look and in what order to proceed. That was my role in this experiment: to decide and to review. Claude was the implementer.
Where AI saved the most time
Tokens straight into Figma. The biggest aha moment: Claude could take my defined values - colors, type, spacing, breakpoints - and drop them directly into the file as Figma Variables. What would have taken me hours of clicking came together automatically and consistently. That alone is a huge time-saver for a designer.
From tokens to components, from components to sections. The defined variables were then used to build components with all their states, and those assembled into larger parts and on to finished sections. Exactly the layered logic a design system is built on - just sped up.
The fact that it wasn't easy is an important part of the story
I don't want this to sound like "I wrote a prompt and that was it." It wasn't. We went step by step and it took a lot of iterating - Claude wouldn't bind components to tokens correctly, or did it differently than I wanted. And because I know how it's supposed to be, I always caught what was off and sent it back for a fix. On top of that, some of the tool's limitations aren't documented anywhere - you only hit them when something breaks. A few things couldn't be automated at all and I had to finish them by hand.
It was step-by-step work with plenty of dead ends. But we pushed through them one at a time - and in the end, we got there.
The three goals the project had
1. A universal design tied to components that can be developed further. Not a one-off file, but a living foundation - components bound to tokens that can be adjusted, used to prototype wireframes, and carried forward for specific projects.
2. Online documentation that helps a developer at the start of a project. So the developer doesn't have to guess how things are defined in the project. In one place they see not just colors, type, and breakpoints, but also states and interactions - inputs, modals, buttons, icons, including dark mode. You can actually see it here: markdstest.netlify.app. I first assembled the system in Figma, and then this online version for developers grew out of it.
3. To verify whether AI can even handle a task this demanding. It could - even though it cost a lot of iterations, a lot of tokens, and the whole thing took about two weeks. But that was precisely the point: to find out the capabilities and the limits of AI, and how I can put them to use in design.
What's next
What I take away from it
In the hands of a designer who knows what they're doing, AI isn't a replacement - it's an amplifier. I decided on the visual language, the structure, and the quality, and I could tell when the output was wrong. Claude handled the implementation and the consistency across hundreds of elements, and saved me dozens of hours of mechanical work. And the most valuable skill in all of it wasn't any tool, but knowing exactly how to say what I want, recognizing when it's off, and not giving up when something doesn't work the first time. That's precisely the skill designers increasingly need today.
See the result live: markdstest.netlify.app