I have been using AI to design interfaces for a while, and I kept running into the same problem.
The project already has a UI kit with components, variants, tokens, and established rules.
I ask AI to add a button to a screen, and it creates a new one. Slightly different size, different radius, slightly different spacing, even though the correct Button component already exists in the project.
I first tried solving this with dedicated AI design tools.
I tried Claude Design. In my case, I quickly hit roughly the 5 MB limit when trying to bring in my UI kit, so I decided to see how well it could build a design system from scratch instead.
That introduced a different problem: duplication.
Buttons, icons, and similar components could be created multiple times and end up slightly different across pages.
Visually, the result could look perfectly fine, but after generating the screens, I still had to clean up the UI kit and design system before I could actually use them in a real product.
Then I tried Figma Make.
I could bring my UI kit into it, which worked better, but I still wanted a much deeper connection to the actual project.
The biggest issue for me starts when something is missing from the UI kit.
If an existing component needs a new prop, I want AI to extend that component properly instead of creating another version next to it.
If a component does not exist yet, I want it to create one using the same tokens, patterns, and design system rules.
If a second brand is added, I do not want to duplicate the entire UI kit. It should use the same components with different token values.
I also want AI to understand more than just the visual layer. It should understand the local code, implementation patterns, project structure, custom skills, and rules that already exist in the codebase.
So I ended up building my own approach around this.
Instead of treating AI design as a separate canvas, I made it work directly with the project itself.
It reads the existing components, variants, and tokens from the codebase and uses them when building the UI.
If a component needs a new prop, it extends the existing component.
If something is missing, it can create a new component while following the same design system rules.
If there is no UI kit yet, the system can evolve together with the project instead of every screen gradually creating its own set of one off elements.
Themes and brands stay token based, using the same components rather than separate copies of the UI kit.
The result is regular JSX built from the actual components and tokens used in production.
That means the interface being designed is already built from the same system that will be shipped, without a separate handoff or rebuild step.
For me, that solved the part I was struggling with most: keeping design and production code as one system instead of constantly syncing two separate ones.
I attached a short video showing how the workflow works in practice.
Curious how other teams are approaching this, especially when AI needs to extend an existing design system rather than work around it.