Most AI design tools have a fundamental problem: they generate pixels, not components.
You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It’s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library.
We built something different. Forge is an AI assistant that works with real, production React components — the same ones your engineers ship with. Designers work visually, but the output is exportable as production-ready React code.
The problem with AI-generated UI
Here’s what typically happens:
- Designer uses AI tool to generate a dashboard
- AI produces a static mockup — shapes, colors, text
- Designer hands off to engineering
- Engineer looks at it, opens the codebase, rebuilds it using actual components
- Designer notices differences, files tickets
- Repeat
The AI-generated design was never real. It was a picture of a UI, not a UI.
This isn’t a minor inefficiency. It’s the entire design-to-dev handoff problem that AI was supposed to solve — except most AI tools just moved the problem earlier in the process.
What if AI worked with real components?
UXPin Merge syncs your production React component library directly into the design tool. Not recreations. Not imported SVGs. The actual components, rendered in the browser.
Designers drag in real <Button>, <Card>, <DataTable> components. They configure real props. They see real states — hover, disabled, loading, error. What’s on canvas is what exists in your codebase.
Forge builds on this. When you ask Forge to generate or edit UI, it’s not drawing shapes — it’s placing and configuring actual components from your library.
How it works technically
Component sync
Merge connects to your production React component library via CLI or CI integration. Components render in an iframe inside the editor — designers see and use your actual code running in the browser.
We support:
- React (primary focus)
- Storybook integration
- npm packages
- Git sync for continuous updates
When your library updates, the design tool updates. No manual re-sync. No version drift.
Visual editing, real components
Designers work visually — dragging components onto a canvas, not writing code. But what they’re placing are real React components with full fidelity:
- All props are exposed and configurable in the UI
- Component states (hover, active, disabled, loading) are built-in
- Variants work exactly as defined in your library
- Responsive behavior matches production
When a designer configures a <Button variant="primary" disabled>, that’s not a style applied to a rectangle. It’s the actual prop being set on your actual component.
AI generation with Forge
When Forge generates or modifies UI, it works with these real components. It knows what’s available in your library, what props each component accepts, and what variants exist.
The output is a visual design on canvas — but every element is a real component with real configuration. No fake buttons. No approximated cards. No “objects that kind of look like your design system.”
Forge also maintains conversation context. You can iterate:
- “Add a cancel button next to save”
- “Make this the compact variant”
- “Switch to a horizontal layout”
Each prompt modifies the existing design rather than regenerating from scratch. When you want to switch to manual editing, you just do — there’s no mode switch, no export. You’re already working with the real thing.
Export as code
When you’re ready to hand off, export the design as React code. The export reflects exactly what’s on canvas — same components, same props, same structure.
// Exported from UXPin
<Card padding="lg">
<Form>
<TextField label="Email" type="email" />
<Button variant="primary" size="lg">Save</Button>
</Form>
</Card>Engineers receive code that uses their own component library. Nothing to translate. Nothing to rebuild.
API access
Component data is also available via API — props, states, variants, structure. This opens up integrations with documentation tools, testing pipelines, or other parts of your workflow.
What this changes
For designers:
- Work visually, but with real components — not approximations
- All states and variants are built-in, not simulated with overlays
- Prototypes actually work — real interactions, real responsive behavior
- No learning a new tool; it’s still a design canvas
For engineers:
- Export gives you production-ready React code
- Uses your actual component library — nothing to translate or rebuild
- Props and structure match what was designed
- No more “that’s not how the component works” conversations
For teams:
- Single source of truth between design and code
- Design system adoption is enforced by the tool — designers can only use what exists
- AI can’t go off-brand if it only has access to your components
- Faster iteration because there’s no translation step
Limitations and trade-offs
Being honest about where this doesn’t work:
You need a component library (with a caveat). If your team isn’t working with coded React components yet, Forge doesn’t help much. It’s built for teams that have already invested in a design system. If you’re still in Figma pushing pixels without a coded library, this isn’t your tool — yet.
- Caveat: Lucky for you, UXPin Merge has already natively integrated a number of Global component libraries such as MUI, ShadCN, Bootstrap and more. This is a great starting place for those without a custom component library.
React-first. Merge has strong support for React. Vue, Angular, and Svelte support is limited or nonexistent. If your stack isn’t React, the value proposition breaks down.
AI is still AI. Complex layouts sometimes need manual adjustment. Forge is faster than starting from scratch, but it’s not a replacement for design judgment. It gets you 80% of the way quickly; you refine the rest with UXPin’s manual designs tools – all in one place.
Learning curve. Designers working with Merge need to understand props, variants, and component composition. It’s more technical than pushing pixels in traditional design tools. Not every designer wants this. For the ones who do — design engineers, technical designers, systems-thinkers — it’s a better way to work.
Why we built this
UXPin has been working on code-backed design tools for years. Merge launched in 2019. The hypothesis was always that the design-to-dev gap exists because designers and developers work in different mediums — pixels vs. code.
Most design tools try to bridge this with better handoff specs, more detailed exports, tighter integrations. But they’re still generating static artifacts that engineers have to translate.
AI made this worse before it made it better. Every AI design tool we saw was generating more static pixels for engineers to rebuild. Faster mockups, same translation problem.
Forge is our attempt to make AI useful for teams that have already solved the medium problem. If designers are already working with real components, AI should too. The output should be shippable, not just presentable.
The name
We called it Forge because a forge doesn’t replace the blacksmith — it gives them heat and speed. The craft still requires human judgment.
AI should work the same way. It accelerates the work without replacing the worker.
Try Forge AI Today
Forge is live now in UXPin. Available to all accounts with AI enabled and free trials.
Simply visit uxpin.com/sign-up to get started.
