Describe what you want in plain English. Claude writes real React against any design system you plug in — public npm, private registry, or your own monorepo package. The preview renders in your browser as the agent types. No servers to spin up, no WebContainers to boot, no infra to maintain.
Live demo · Plug in your design system · Design gallery · Report a bug
React UI Gen is a prototyping surface, not an IDE. You open it, pick a template, and describe the UI you want. Claude writes real React against your design system — the one your team actually uses, even if it lives on a private registry. The preview renders live in your browser as the agent writes.
You're not running your production app here. You're iterating on components — fast, in isolation, against the real design-system contract.
Every other AI UI prototyper ships heavy runtime infra and a fixed stack. UI Gen does the opposite.
| UI Gen | v0 | Bolt.new | Lovable | |
|---|---|---|---|---|
| Your own design system? | ✅ Yes | shadcn only (beta) | ❌ No | ❌ No |
| Preview compute | 🌐 Browser | ☁️ Server | 🐳 WebContainer | ☁️ Server |
| Open source | 📖 MIT | ❌ No | Partial | ❌ No |
| Private registry support | 🔒 Yes | ❌ No | ❌ No | ❌ No |
The design system is a plug-in, not a hardcode. Point src/config/uigen.config.ts at Material UI, HeroUI, a private @your-scope/ds-core, or a monorepo workspace — no engine changes, no rebuild.
Babel standalone + @tailwindcss/browser + ESM import maps, rendered inside a srcdoc iframe. No per-user container, no WebContainer, no server-side preview compute. A hosted instance serves 1 user or 10,000 with the same footprint.
One config file (src/config/uigen.config.ts) points the engine at any DS — public npm, GitHub Packages, file: deps, pnpm link, or a monorepo workspace. Swap Material UI for HeroUI for @your-scope/ds-core without touching engine code.
Every session starts from an isolated template — not a blank create-next-app. The agent only sees the DS contract and the canvas, not 10k files of boilerplate. Every token goes into your components instead of Claude re-scaffolding Next.js on every turn. Short context, cheap sessions, fast iteration.
Tool use writes to an in-memory virtual filesystem, not your disk. The preview runs inside a browser iframe, not on your host. Private packages resolve inside that sandbox — nothing ever lands in your node_modules. A malicious skill or a prompt injection has no shell, no filesystem, nowhere to go.
Tool use (Read / Write / Edit / Grep / Skill) over the virtual filesystem. Prompt caching trims long sessions; context compression via Haiku keeps them alive past the usual wall. DS-specific docs load on-demand through Skill, so the system prompt stays short.
- 🖼️ Multimodal chat. Drop a screenshot, paste from clipboard, or attach from disk. Say "build this" next to a mock — Claude gets the image alongside your text, in the same turn.
- 🎯 Visual inspector. Click any element in the preview. Its tag, classes, source file, and line attach to your next message — the agent edits the right thing, not the closest thing.
- 🔐 File locks. Mark
Navbar.tsx,Footer.tsx, orindex.cssas locked. The agent'sWrite/Edittools refuse to touch them. - ⚡ Progressive rendering. Components appear in the preview as the agent writes them, not at the end of a batch response.
- 🧩 Templates + project switcher. Start from Homepage, Dashboard, Profile, or a blank canvas seeded with your DS entry files. Jump between experiments from the header.
- 🔗 Share links. Publish a read-only
/share/[projectId]URL for design review — full-screen preview with an "Open in editor" handoff. - 📦 Download as ZIP. Export the virtual filesystem with a generated
package.jsonand a README explaining how to wire into Vite / Next.js / CRA. - ✂️ Split editor. Resizable three-panel layout — chat on the left, Preview ⇄ Code tabs on the right with a file tree and syntax highlighting.
- 🧪 Mock fallback. Works without an API key — canned responses for demos and CI.
Ships preloaded with a HeroUI + Netflix design system so you can prototype immediately.
pnpm installCopy .env.example to .env and paste your Anthropic API key:
ANTHROPIC_API_KEY=sk-ant-...🔑 Get a key at console.anthropic.com. No key? The app falls back to a mock provider so you can still click around.
pnpm devOpen http://localhost:3000. That's it.
👉 Want to plug in your own design system? Read Prototype with your design system → for the full tutorial (public npm, private registry, monorepo).
Five ready-to-use configs live in src/config-examples/. Swap between them with a single cp -r.
HeroUI — Netflix ✨ cinematic dark + red |
HeroUI — Airbnb coral, warm neutrals |
HeroUI — Uber monochrome, clean |
|
Material UI
public npm, CSS-in-JS |
Vanilla Tailwind
React + Tailwind, no DS |
Want to peek under the hood? Start here.
- 🧠 How it works — the pipeline from prompt to live preview, in one page.
- 🤖 The AI agent — tool use, skills, prompt caching, context compression.
- 🖼️ Browser preview engine — Babel, Tailwind, import maps, and the iframe.
- 🔐 API key security — where your key lives and who can see it.
- 🎨 Prototype with your design system — the full BYODS tutorial.
- ⚙️ Environment variables — every env var explained.
- 📜 Scripts reference — every
pnpmcommand explained.
Contributions welcome — especially new design-system configs in src/config-examples/. See CONTRIBUTING.md for setup and PR workflow.
Built by Kevin Riveros — GitHub · LinkedIn
MIT © Kevin Riveros. See LICENSE.