UXPin Forge - Generate UI from your design system, not around it
by•
AI that generates UI your design system would approve.
Forge works inside UXPin with your real components—MUI, shadcn/ui, Ant Design, or your own—so you can iterate fast and ship clean JSX. No rebuilding, no workarounds.
Replies
UXPin Merge
Hey Product Hunt 👋
We've been building AI into UXPin for over a year now – AI Component Creator, AI Helper, and more.
These experiments taught us where AI works well, and where it breaks down.
The pattern we kept seeing:
AI can generate UI, but when you try to use it in your product, it doesn't match your components. You lose context. You rebuild everything.
We unified everything under Forge – the AI engine powering UXPin.
What Forge does:
🎨 Works with your design system – MUI, shadcn/ui, Ant Design, or your own components via Merge
🌐 Start from prompts, images, URLs, or existing code
🔄 Keeps context so you can refine instead of restart
✏️ Switch between AI and manual editing anytime
⚡ Outputs clean JSX
If you've been burned by AI tools that ignore your system – this is built for exactly that gap.
👉 Try Forge: https://www.uxpin.com/forge
Curious what you think 👀
@nat_lasica great work on the launch Nat!
Hey Product Hunt 👋
I'm Andrew, CEO of UXPin.
We've been building design tools for over a decade and Forge is the result of a question we kept asking: 'why does every AI design tool ignore the thing enterprise teams care about most - their component library?'.
Claude Design reads your codebase and approximates. Lovable and Bolt generate their own conventions. v0 locks you into shadcn.
None of them use your actual production components.
Forge does.
Your React library syncs via Git, or you can used a native global library we've already integrated for you.
The AI generates exclusively with those components - real props, real variants, real states. Then you can switch to professional design tools for refinement on the same canvas. No tokens burned on edits.
The export is production-ready JSX referencing your actual imports. Developers copy it and ship it. Nothing to interpret. Nothing to rebuild.
For teams without a custom library, Forge works out of the box with MUI, shadcn/ui, Ant Design, and Bootstrap.
We named it Forge because a forge doesn't replace the blacksmith - it gives them heat and speed. The craft still requires you.
Would love your honest feedback. We're here all day.
Andrew
UXPin Merge
Really glad we finally got this out into the world!
@robert_hilscher and you were a huge driver behind this release. Great work Rob, you should be extremely proud!
@robert_hilscher great job, man, you da best!
UXPin Merge
@robert_hilscher huge part in making this happen. Great work and I'm looking forward to future releases!
RankSpot
Congrats on the launch team, out of curiosity, how is your tool better than Claude Design?
UXPin Merge
@danshipit Thanks Daniil! Great question.
From what we've seen, it's great for quick drafts, but there are gaps when it comes to real workflows.
The biggest one is design systems. It approximates them rather than using actual components, which leads to drift in fonts, spacing, and colors. Also, every edit costs credits - even small tweaks like moving an element.
Forge works directly with your components, so what you generate stays consistent. And you can edit manually without burning tokens on trivial changes.
RankSpot
@nat_lasica Yeah, that makes sense!
@nat_lasica @danshipit you also wont burn your monthly allocation of tokens just trying to import a design system with UXPin 😉😂
Interested in how clean the JSX is in practice, anyone got some intel for me?
@chase_horn you could always start a trial, prompt something you want and then hit 'get code' and find out 😉
Here is an example output straight from a prototype;
import Button from ‘@mui/material/Button’;
import Card from ‘@mui/material/Card’;
import TextField from ‘@mui/material/TextField’;
import Typography from ‘@mui/material/Typography’;
<Card >
<CardContent>
<Typography variant=”h5″>Create Account</Typography>
<TextField label=”Full Name” variant=”outlined” fullWidth />
<TextField label=”Email Address” type=”email” fullWidth />
<Button variant=”contained” fullWidth>Sign Up</Button>
</CardContent>
</Card>
@mui @andrew_uxpin I did shortly after commenting this, this is some impressive s@%&, you guys will be hearing from my design team shortly.
UXPin Merge
@chase_horn VERY clean ...
@uxpinjack Thanks!
UXPin Merge
Hello PH!
What makes Forge different is not just that it generates UI. Most AI tools stop at visual approximation, but Forge understands how your UI is supposed to be built.
Forge goes further by grounding everything in your design system:
It knows your component APIs including props, variants, and states
It respects your design guidelines and patterns
It operates within your governance model, not outside of it
So what you generate is not just close enough. It is structurally aligned with how your team actually builds products and outputs production-ready code that references your real components.
One thing I’m personally excited about is the workflow shift.
You are not stuck in AI mode or design mode. With Forge, you can:
Generate a layout with AI
Jump into manual design to refine details
Go back to AI to expand or iterate
Repeat as needed
That loop is where it starts to feel real. Not a one-shot generation, but an actual design process.
It also opens up some interesting use cases:
Generate layouts from a URL or screenshot
Turn rough ideas like wireframes or hand-drawn sketches into high-fidelity UI
Rapidly explore variations while staying inside your system constraints
And because everything is tied to real components, you can also:
Override tokens, create themes or tweak the design language
Experiment without breaking system consistency
Instead of AI fighting your system, it works with it and produces code you can actually ship!
Let us know if you have any questions and what you think and feel free to reach out for a demo.
Jack
@uxpinjack some great example use cases for anyone keen to test it out!
Design tools keep getting closer to real product behavior… interesting to see how far that actually goes in practice.
UXPin Merge
@sonu38 Yeah, the gap is usually in implementation. Most tools get close visually but devs rebuild anyway. With Forge you start with real components instead of mockups.
Give it a try, curious to hear how it works for you!
@sonu38 i feel like we got really close to closing the gap way back when we released Merge. With Forge we are introducing AI and combining it with Merge technology to speed up the process.. all while ensuring the designers maintain complete control and can manually iterate whenever they want.
@nat_lasicaWe tried Claude Design but the output kept drifting from our brand. Does Forge have that problem?
@nat_lasica @abhiranjan_mehta Short answer: no, because the architecture prevents it.
Claude Design reads your codebase and generates new elements styled to match. That's approximation - and approximation drifts. Wrong fonts, incorrect colours, inconsistent spacing. We heard the same from dozens of people just this week.
Forge works differently. Your component library syncs from Git into UXPin meaning Forge can only use components that exist in your library. It can't generate a button variant you haven't defined. It can't invent a card style that isn't in your system. Off-brand output isn't something you catch in review, it's structurally impossible.
On top of that, you can set Design System Guidelines: plain-text rules that constrain all AI output. Things like "primary buttons only in the main CTA position" or "cards always use 16px padding." Every team member, every generation, same rules.
Try it with one of the built-in libraries (MUI, shadcn) and you'll see the difference in the first prompt.
Vocably (a language-learning tool)
Nice!
@sneas thanks Dimah! Looking forward to your feedback
Baremetrics
Can it build out my custom library from the beginning, like before I launch and am making design decisions?
UXPin Merge
@luke_marshall4 It not only helps with design decisions, but also helps teams move onto a real coded component foundation so they can start shipping faster.
With global libraries like MUI, shadcn/ui, or Ant Design, Forge maps your brand and design language onto existing production-grade components. From there, it generates layouts using those real components and outputs production-ready code out of the box.
@luke_marshall4 Jack nailed it with his response. You can also use the global libraries and create your own themes for different projects