Most code-based AI design is linear. Every change overwrites the last. Protocanvas brings the canvas layer back, so every variant stays alive as a branch on an infinite canvas, interactive and never lost. Bring your own agent. Own your code.
The workflow runs on the protocanvas skill, the Claude-side context layer that powers all of this. Once it's loaded:
Ask your agent for multiple variants from a single prompt. Each lands on the canvas as a live React or HTML component in its own iframe card.
Branch any variant in any direction, anytime. Both branches stay alive on the canvas. Nothing overwrites. The thing you do on Figma naturally, that no text-to-code tool gives you back.
Element-level annotations, brought to you by Agentation. Point at the exact button you want changed instead of describing it.
Claude reads the annotations and lands a fresh branch on the canvas. Edges connect parent and child. Codex support coming next.
Every other tool in this category wants to own the stack. Your code lives in their product. Your agent is whichever one they offer. Your loop depends on their UI. Protocanvas is the opposite of all of that.
No proprietary model, no hosted endpoint, no lock-in. Your subscription, your context window, your choice.
Variants are real files you can open in any editor. There's no translation step and no export.
Runs on your laptop. No cloud, no auth. Everything is a Node process and a folder you control.
No paywalls, no gating, no premium tier. Fork it, extend it, build a product on top of it. The whole stack is open source.
Node.js 18+, Claude Code for the full workflow, and Xcode Command Line Tools on macOS for the native terminal addon.
# Clone the repo and install dependencies git clone https://github.com/adithyag99/protocanvas.git cd protocanvas npm install cd variant-renderer && npm install && cd .. # Build the canvas app npm run build
Pass the project directory, a component name, and the variants directory. The server picks a stable port derived from the component name.
node .protocanvas-server.mjs ./my-project "Dashboard Card" dashboard-card-variants # Output: # DESIGN_CANVAS_PORT=30047 # Canvas app: http://localhost:30047
I was designing Stock Unlock's charts, and moved the work out of Figma and into code because real data tells you things a static design can't. Where the design breaks when the volume is real, whether the axis labels actually fit. But working in code, I realized I missed Figma's canvas. I kept wanting to go sideways and couldn't, because every iteration overwrote the last. Protocanvas puts the canvas layer back.
— Adithya
Protocanvas is stable for daily use and works end to end for Claude-driven iteration. Codex support is the next planned integration. If you're comfortable working close to the implementation, you'll have a good time with it.