FORGE

Your components. Your rules.
AI that actually follows both.

Forge designs with your real React components – not generic pixels. Refine it and export production-ready code. Start with a built-in library or connect your own.

shadcn logo

Shadcn/ui

mui logo

MUI

ant design logo

Ant Design

bootstrap logo

Bootstrap

uxpin classic logo

UXPin Classic

Generating
Continue in the app and bring your idea to life.

Sign up free with your email and jump straight into the editor.

shadcn logo

Shadcn/ui

Themeable UI framework

See more
mui logo

MUI

Google's Material Design system

See more
ant design logo

Ant Design

Enterprise-class UI design language

See more
bootstrap logo

Bootstrap

Popular CSS framework

See more
git logo

Custom

Bring your own UI library

Book a demo

One canvas. Three superpowers.

Generate UI with your production components

Generate UI with your production components

Forge generates UI using the same components your team ships in production. Every element comes from your React library – with real props, variants, and states.

Refine the generated UI

Refine the generated UI

Start with AI. Refine with manual edits. Adjust layout, edit props, and add interactions. All on the same code-backed components. No need to switch tools.

Export code you can ship

Export code you can ship

Production-ready JSX from your component library. What you see is what developers get. No specs or rebuilds. Copy it, open in CodeSandbox, or export it.

Larry Sawyer

Larry Sawyer

Lead UX Designer

“When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers.”
Erica Rider

Erica Rider

UX Architect @ BackBlaze

“We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers.”

From prompt to production in one tool

Pick your components — Choose a built-in library or connect your own via Git.

Prompt or design manually — Describe the UI you need, upload a screenshot for context, or design manually with real components. Switch between AI and manual editing at any point.

Refine visually — Adjust layout, tweak props, and add interactions. Your prototype behaves like the real product.

Iterate with AI — Use follow-up prompts to  modify the design in place. Forge updates the components using the correct props and variants.

Export and ship — Export production-ready JSX from your selected component library. Open in CodeSandbox, copy to clipboard, or export to your project.

Try for free Book a demo

Choose your building blocks

Use open-source React libraries, your own design system via Git, or templates built with real components. AI follows your design rules to create production-ready layouts and saves the time you'd normally spend coding components into a system.

Try it out arrow

Choose your building blocks
Built-in libraries.

Built-in libraries.

Design with interactive components from popular React libraries. Includes shadcn/ui and MUI. Everything is responsive and based on real code. No setup required.

Your own design system.

Your own design system.

Connect your component library with Git and design with the same components used in production. Forge generates UI based on your system.

Templates.

Templates.

Ready-made layouts for dashboards, forms, and app screens. Built with real components, so you can customize and extend without rebuilding.

AI that follows your design system

Real components, not shapes

Real components, not shapes

Forge uses your real React components with the same props, variants, and states as in production.

Your design system sets rules

Your design system sets rules

Generate UI with React components from your library, following your design system rules.

Conversational iteration

Conversational iteration

Forge remembers context, so each prompt builds on the previous one as you refine the same design.

Multiple AI models

Multiple AI models

Choose between OpenAI and Claude, switch anytime, or use your own API key for billing and compliance.

Image-to-UI

Image-to-UI

Upload a screenshot, wireframe, or sketch, and recreate the UI with your components.

AI or manual edits

AI or manual edits

Generate a starting point and refine it with AI or manual edits at any stage.

How Forge compares

Forge vs. Figma’s AI

Figma generates vectors that represent UI, not real components. They can match your design system visually but aren’t connected to code. Developers still need to rebuild the UI. Forge generates UI with real React components, so the result is production-ready.

Forge vs. Figma’s AI

Forge vs. Lovable / Bolt

Lovable and Bolt are useful for MVPs without a design system. They generate UI using their own components and patterns. As projects grow, consistency becomes harder to maintain. Forge works with your component library and design rules, so UI stays consistent as you scale.

Forge vs. Lovable / Bolt

Forge vs. v0

v0 generates code based on shadcn. It works well within that setup. It is optimized for a specific component stack. Forge works with any React component library, built-in or custom. You can also refine UI with design tools, not just edit code. This gives teams more control over how UI is built.

Forge vs. v0

Built for teams with design systems to protect

See how Forge works with custom design systems arrow
Design system guidelines

Design system guidelines

Define rules in plain text that constrain all Forge output across the projects.

Git integration

Git integration

Sync your custom component library. Updates in code reflect in design automatically

Version control

Version control

Work with the right version of your coded library in projects. Choose a branch or tag to control updates.

Per-project chat history

Per-project chat history

Chat history saved per user and project so you can continue where you left off.

Bring your own API key

Bring your own API key

Use your own OpenAI or Anthropic account for billing and compliance. Stay in control of usage and costs.

Component documentation

Component documentation

Generated directly from your synced library. Always up to date with your components and their props.

Frequently Asked Questions
Forge is the AI system in UXPin. It generates, edits, and reviews UI using real React components from your library. The output is production-ready JSX that developers can ship directly.
Built-in: MUI, shadcn/ui, Ant Design, and Bootstrap — ready to use immediately. Custom: any React component library synced via Git.
Forge supports multiple AI models, including Claude Sonnet, Claude Opus, Claude Haiku, and GPT models such as GPT Standard and GPT Mini. You can also bring your own OpenAI or Anthropic API key for billing flexibility and organizational compliance.
Figma's AI generates vectors — visual representations that engineers rebuild from scratch using your actual component library. UXPin Forge generates UI, using your real React components with real props. The exported code references the same library your developers use. There is no translation step.
Lovable and Bolt are great for building from scratch. But they generate to their own conventions and ignore your existing design system. Forge generates using your components, following your rules.
Yes. Teams can control how closely AI output follows their design system. Forge prioritizes the components connected to your project and generates UI using your library. If your library has gaps, the AI can still generate UI that follows your patterns and tokens. You can also define plain-text design system guidelines that persist across the project and apply to every team member's AI output.
Production-ready JSX referencing components from your library. The same imports, component names, and prop values your developers already use. They can integrate directly into the codebase.
Yes. Same canvas, same components. Use Forge to generate the UI, then switch to manual design tools for refinement, interactions, and states. Switch back to AI anytime.
Yes. Sign up free, pick a built-in library, and start designing immediately. No credit card required. Custom Git integration is available on Enterprise plans.

See what AI design looks like when it actually works

Pick a library. Describe what you want. Watch Forge build it with real components.

Try it free Book a demo

Enterprise plans include Git integration, custom AI credit limits, dedicated onboarding, and priority support. Contact for pricing.

See what AI design looks like when it actually works