Membrane components + tokens only no raw values, no live DB
Voice-first design-to-code
Prototype in real code that can't escape your design system.
Membrane is a voice layer between your design system and your team. A designer describes a screen; Membrane builds it in real React using only your components and tokens. Engineers get a runnable handoff with the design-system and backend contracts already checked.
membrane · live build passing checks
Designer says
“Add a pricing card with our primary button.”
Membrane builds
The problem
The handoff is where design goes to die.
Friction between the mock and the running product is the silent killer of speed. A pixel-perfect Figma file is a promise that breaks at the implementation wall, and the cleanup is invisible until it's weeks of work.
drift
Components rebuilt from scratch
The design system erodes the moment an engineer recreates a button that already existed. Multiply by every screen.
debt
Contracts that don't match
When backend shapes don't line up with frontend assumptions, teams pay for integration debt that should never have existed.
gap
Promises that break
The mock says one thing, the build does another. Nobody decided to diverge, it just happens, one shortcut at a time.
How it works
One layer. Correct by construction.
Two membranes hold every prototype in place: one keeps it inside your design system, one checks it against your backend contract. Nothing reaches a live database, ever.
01 · Speak
A designer describes the change
Out loud, in plain language. No new file, no recreated component, you work at the speed of conversation.
02 · Generate within bounds
It builds, but can't break out
The generator writes type-safe React + Tailwind that can only reach for your components and tokens. A raw #hex can't get through; --color-primary can.
03 · Handoff, already checked
Engineers get runnable code
A critic runs at handoff. What lands in the repo already matches the design system and the backend contract.
No live database, ever. Membrane works against schema and mocks, so a prototype can be honest about data shape without touching anything real.
Privacy by design
Your audio never leaves the device.
Voice is transcribed in your browser. The only thing that crosses the wire is text intent: never the recording, never your data. Privacy is built into the architecture.
on device
Speech-to-text runs locally
In-browser Whisper turns voice into text on your own machine. The audio stays with you; only the intent travels onward.
no live db
Nothing touches real data
Membrane builds against schema and mocks. A prototype is honest about data shape without ever reaching a live database.
your perimeter
Self-host when you need to
Enterprise teams can run transcription server-side, inside their own network. The trust boundary is yours to draw.
Why this is possible now
Three things had to be true.
01
AI code finally clears the bar
Models now produce structured, type-safe React and Tailwind that holds up under strict linting.
02
Design systems are mature
Teams spent years codifying brand into tokens. Membrane treats those tokens as the laws of physics the generator can't violate.
03
Correct beats voluminous
Generic AI output is noise. Engineering leaders now want design-system adherence and correctness they can ship.
Who it's for
Built for teams with a design system.
If you have a Figma library and a React component library, Membrane is the bridge that keeps them from drifting apart. Move at the speed of conversation without compromising the integrity of your codebase.
See it first
We're onboarding a select group of design-led teams.
Early access is limited while we work closely with the first teams. Tell us about your design system and we'll be in touch.