Weblab is a visual design canvas that connects to your existing codebase. Design with your real components on an infinite canvas. AI is constrained to your design system — no brand drift, no throwaway code. Changes become mergeable pull requests.
Features
Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.
<button className="rounded-lg bg-fg px-4 py-2"> Continue </button>
A true developer tool for designers, helping you code without knowing anything about code.
AI Constrained to Your Design System
Reference images, designs, and docs in chat. AI sees what you see, with no more explaining from scratch. Outputs use your real components, colors, and tokens. No drift. No off-brand results.
Design on an Infinite Canvas
Drag, resize, and arrange elements directly on the canvas. See changes in real code instantly, with no switching between tools. Point at what you want. AI knows exactly what you mean.
Your Colors, Fonts, and Tokens
AI is constrained to your design system. Pick from your brand colors, use your typography scales, and style with your existing tokens. No drift. No off-brand outputs.
Familiar to Designers. Trusted by Engineers.
A canvas that feels intuitive, with real code underneath. Engineers can merge what you create directly, with no handoff and no rebuilding.
Design with what engineers built
Use the buttons, cards, and layouts your team already created. Not generic HTML, but your actual design system, ready to drag onto the canvas.
Real-time collaboration
Share your canvas. Leave spatial comments. Work together on designs that become real PRs. No more "now how do I share this?"
Changes become pull requests
Your changes become a real pull request. Engineers review and merge, with no handoff, no translation, and no rebuilding from specs.
Navigate your component tree
See your React component hierarchy in a visual layer panel. Click any layer to select it on the canvas. No more hunting through JSX.
Connect existing projects
Connect your existing React or Next.js project. No rebuilding. No migration. Start designing in minutes.
Never lose your progress
Weblab automatically saves project snapshots. Experiment with confidence, and roll back to any previous version with one click.
Feature comparison
Most tools generate new code from scratch. Weblab edits the codebase you already have — and keeps your design system intact.
| Feature | Weblab | Webflow | Framer | Lovable |
|---|---|---|---|---|
| Editing surface | ||||
| Works with your existing React codebase | ||||
| Edits your real components (not a simulation) | ||||
| Infinite visual canvas | ||||
| Designers can contribute without code | ||||
| Real-time live preview | ||||
| AI | ||||
| AI generates UI from natural language | ||||
| AI aware of your component library | ||||
| Output & workflow | ||||
| Output as a GitHub pull request | ||||
| Works with your CI pipeline | ||||
| Full code ownership | ||||
| Integrates with existing deployment | ||||
| Infrastructure & pricing | ||||
| Bring your own hosting | ||||
| Open source | ||||
Weblab is a visual design canvas that connects to your existing codebase. Designers drag real components onto an infinite canvas, make changes visually, and submit pull requests — no coding required.
Traditional design tools create static mockups that must be rebuilt in code. Weblab works with your real components — what you design IS the code. Changes become PRs, not handoff specs.
AI generators create new code from scratch. Weblab constrains AI to YOUR existing components, so outputs match your design system. No translation, no drift.
No. Designers use a visual canvas with familiar tools. Real code runs underneath — you don't need to touch it unless you want to.
Yes. Share your canvas, leave spatial comments, and work together in real-time. Changes sync to code and can be submitted as PRs for engineers to review.
React-based frameworks — Next.js, Vite, Remix, Astro, TanStack Start, and static HTML. Any CSS approach (Tailwind, CSS modules, styled-components, Emotion, SASS). Works with any React component library — shadcn/ui, Radix, Material UI, Mantine, Chakra UI, Ant Design.
Beyond chat: generate and edit images, search the web for context (Exa), read and write files in your project, scrape URLs, run typecheck and error checks, and switch between Ask, Build, and Plan modes. Plan mode drafts the work before any edits land so you can review before code changes.
Claude Opus 4.8, Sonnet 4.6, Haiku 4.5, GPT-5.5, Gemini 3.1 Pro/Flash, DeepSeek V4, Mistral Codestral, Moonshot Kimi, plus local models via Ollama. Switch any time. Dial reasoning effort from Fast to Deep.