Bring your own design system
Public npm, private GitHub Packages, pnpm link, file: deps, or a monorepo workspace. Point one config file at Material UI, HeroUI, or your internal @your-scope/ds-core — no engine changes.
Open source · MIT · Built with Claude
Prompt → live React UI, built with your design system.
Describe what you want in plain English. Claude writes real React code against any design system you plug in — public npm, private registry, or your own monorepo package. The preview runs entirely in the browser. No containers. No sandboxes. No limits.
demo · muted · loop
What's inside
Not another AI prompt box over a fixed stack.
Every other AI UI prototyper ships heavy runtime infra and a hardcoded design system. This one treats the design system as a plug-in.
100% browser-only preview
Babel + @tailwindcss/browser + ESM import maps. No containers, no WebContainer boot, no per-user sandboxes. Scales multi-tenant for free.
A real agent loop
Tool use (Read / Write / Edit / Grep / Skill) over a virtual filesystem. Prompt caching and context compression via Haiku for long sessions.
On-demand skills
Design-system-specific reference docs in markdown. The agent loads them only when needed — mirrors Claude Agent Skills.
Multimodal prompts
Drop, paste, or attach screenshots. Say ‘build this’ next to a mock — Claude gets the image alongside your text.
Progressive rendering
Components appear in the preview as the agent writes them, not at the end of a long batch response.
Visual inspector
Click any element in the preview to attach its tag, classes, source file, and line to your next message. The agent edits the right thing.
File locks
Mark Navbar.tsx, Footer.tsx, or index.css as locked and the agent's Write / Edit tools refuse to touch them.
Download as ZIP
Export the virtual filesystem with an auto-generated package.json and a README explaining how to wire it into Vite, Next.js, or CRA.
~/react-ui-gen
$ pnpm install $ cp .env.example .env $ echo "ANTHROPIC_API_KEY=sk-ant-..." >> .env $ pnpm dev > ready on http://localhost:3000
Compare
Where it stands vs. v0, Bolt, and Lovable.
| Capability | react-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 |
Stack
Built on tools you already trust.
Next.js 16React 19TypeScriptTailwind v4PrismaClaude Agent SDK
Read the code. Run it locally.
The live demo needs an Anthropic API key, so there's no hosted playground. Clone the repo, drop in your key, and you're prototyping in a minute.