Templates · since v1.0.0
Interactive prototypes with live preview
Every project renders on a real device stage — phone, tablet, desktop — while the agent writes it. A prototype here is running code from the first minute.
Interactive website · Devin · subagent · gate PASS · clay + beauty
Ferry & Wren — A two-person kayak workshop — editorial serif, a clay hull on the shop floor, and a 'strip the hull' reveal.
▸ the prompt that made it▾ the prompt that made it
“Add the scene: a clay-material kayak hull on a workshop floor, composed with the real headline at desktop and narrow widths. Give it one signature interaction, 'strip the hull' (peel layers back to show strip construction), with a button, keyboard keys, and a close that restores the camera. No orbit on the landing story.”
Why it matters
Click-through prototypes answer 'does the flow work' but dodge 'does it work for real'. Since the preview is the actual build — not a simulation of it — scrolling, state, hover and motion are all honest. Stakeholders poke the thing itself.
How it works
- 1Brief the interactionDescribe the flow — onboarding, checkout, a dashboard drilldown — and the interactive-website or app template drives the build.
- 2It runs while it's builtThe preview server serves the project folder live; every file the agent lands re-renders the stage.
- 3Test at real sizesSwitch viewports mid-run. The stage is a device frame with real dimensions — not a screenshot rescaled.
- 4Share the resultExport a single-file HTML or ZIP to hand around, or record a video of the prototype in motion straight from the export menu.
Capabilities
- Live preview re-renders on every file write — no refresh, no rebuild
- Viewport picker with real device dimensions for phone, tablet and desktop
- Interactive output: forms, states and animation all actually work
- Video export records the prototype in motion
- Compare mode re-renders edits at a second device or theme and verifies both
FAQ
How is this different from Figma prototypes?
Figma prototypes link static frames. Here the prototype is the build — the same files run in a browser, so transitions, state and responsiveness are real, not simulated.
Can I show it on my phone?
The preview runs on your machine; exports are portable files. Hand someone the exported HTML and it opens in any mobile browser.
Does it handle motion and animation?
Yes — the animation template and video export both assume motion is part of the output. prefers-reduced-motion is respected in the studio's own surfaces.
In the docs
Related features
Design with the agent you already have.
Free to try, buy once — the studio and your own coding CLIs do the rest.
Download