Protovibe Studio is an open-source tool for UX/UI designers who love the power of vibe-coding but still want to design like a human. It's a visual editor for React code, so you and your coding agent are finally on the same page.
We've tried to combine the best parts of Webflow, Figma and a pro design system. Hope you guys like it! Oh, and don't forget to send us your feedback.
Look, prompting an AI to hallucinate a UI is not designing. Design is a process where you move rectangles yourself and iterate. Protovibe Studio brings you back to the driver's seat.
AI chat is not a design tool. No undo. No sliders. No color picker. No way to quickly explore options. You can't feel design through a text box.
Protovibe has everything a designer expects — wired to code. Proper undo, a design sidebar, keyboard shortcuts, color sliders, autocomplete fields, and drag & drop.
AI site builders generate different styles with every prompt. Hardcoded #4F7CFF. Random border radius. Inconsistent font sizes.
Protovibe lets you set up all your design tokens: colors for light and dark mode, fonts, and spacing. The AI is simply instructed to use only these tokens.
With tools like Figma Make or Cursor, every damn change requires another prompt. You need to prompt "Add 4px margin" and wait. Then wait again. And again.
You can easily fix AI mistakes by hand. Just select an element, change its padding, and see results instantly. Reorder, change icons, colors — everything.
Maintaining a design system in Figma is painful and complex. You have to plan props manually and test hundreds of variants.
Protovibe has a robust built-in library of UI components that you can easily extend. It automatically generates a component preview matrix that shows you all possible variants. See a mistake? Just fix it by hand or ask AI. Need a new component? Just ask AI to turn your sketchpad into one.
Ah, the exploration phase... Before prototyping, you need to sketch some messy ideas. AI web builders make you skip this step and rely on text prompts.
Protovibe lets you sketch with drag & drop like in Figma, on an infinite canvas. But you're actually dragging real coded components — AI understands those better than screenshots.
Designs look pristine in Figma. But pixels, states, and edge cases get lost in translation.
Your design and your code are the same single source of truth, with a two‑way sync. We've also prepared a library of useful prompts for different situations.
Protovibe doesn't ship its own AI. It plugs into the coding agent you already use and trust. No lock-in, no new API key, no extra subscription — your agent runs locally, your prompts stay yours.
Cowork or Claude Code
Visual Studio Code
IDE
Terminal
CLI • Antigravity
Visual Studio Code
Here are some examples of interactions you can build in Protovibe that other tools can't.
We've prepared a single script that automatically installs the required terminal commands, so you don't have to mess with them manually. Once installed, you launch Protovibe by clicking an icon in your Applications folder (Mac) or on your desktop (Windows).
Create a new project and jump to "Tokens" to set up your colors, fonts, spacing, and shadows. Or just paste your colors into your coding agent and ask it to match them to Protovibe tokens.
Easily adjust every component variant to fit your design system. It might take a few hours to get right, but it's worth the effort.
Create a prototype URL on your own Cloudflare account with a single click. No manual deployment needed.