AI can build interfaces incredibly fast now. You describe a product, get a few screens, iterate on the design, and eventually export the result to React.
At first, it feels like design-to-code has solved the old handoff problem.
But after the export, the real work often starts.
The generated Button needs to be replaced with the one already used in the project. Colors need to map to design tokens. Similar components need to be consolidated. Variants need to be added. Everything has to fit the existing UI Kit and Design System.
You end up in a strange place: the design is finished, there is already code, but the product still needs to be built.
What if you designed the actual React product instead?
Imagine I need a billing page.
I tell AI:
Build a page with plans, payment history, and payment methods.
From there, I want to think about the product itself. Are the plans easy to compare? Where should an overdue invoice appear? Should I change the layout? Do I need another page?
I don’t want to think at the same time about whether a new Button should be created, whether a suitable Badge already exists, what a new variant should be called, or where a new token belongs.
If the right component already exists, reuse it.
If it almost fits, extend it.
If the product introduces a genuinely new reusable pattern, add it to the UI Kit.
The same applies to design tokens: reuse what already exists and extend the system only when the product actually needs something new.
That means the UI Kit and Design System evolve alongside the product while you design it.
Not afterwards. Not as a separate cleanup phase.
At the same time.
That changes the workflow
A typical flow still looks something like this:
Idea
→ AI design
→ export to React
→ clean up generated code
→ rebuild components
→ align UI Kit and Design System
→ add business logic
The workflow I’m more interested in looks like this:
Idea
→ design the actual React product
→ components + UI Kit + Design System grow with it
→ add business logic
The result is not just a mockup or a collection of HTML elements that still need to be turned into a proper product.
You already have working React UI, reusable components, variants, design tokens, and a UI Kit that the product itself uses.
This workflow is what led me to build Varelyo
Varelyo is a local-first tool that works directly with a React project through Claude Code and Codex.
The idea is simple: while you focus on the product, the existing components, variants, tokens, and UI Kit are reused and extended along with it.
When the UI is ready, there isn’t another step where the design has to be turned into an application. You can stay in the same project and move on to APIs, state, permissions, data, and business logic.
That’s why I’m becoming less interested in the term design-to-code.
If the design still has to be translated into the real product afterwards, the handoff is still there.
A more interesting direction is to remove that step entirely: design the React product itself while the code, UI Kit, and Design System grow with it.
Top comments (1)
The post-export refactoring loop is exactly why most AI design-to-code tools fall flat for real teams. Spitting out raw hex codes and detached components just creates technical debt disguised as velocity. I started using a Figma plugin called DS Sync recently that tackles this gap nicely, as its code gen actually outputs the mapped CSS variables and respects existing component variants instead of guessing from scratch. Have you found any other workflows that successfully force AI to consume your existing UI kit before generating the page?