Prototyper is an AI prototyping tool for the visual field, whose core positioning is to let AI agents build real, runnable product prototypes on a shared canvas. Everything on the canvas is real, and the prototype is the product.
Purpose
Prototyper is used to turn design ideas directly into runnable apps, wireframes, and slide presentations. It is aimed at scenarios that require rapidly designing and delivering products, letting designers, engineers, and AI agents collaborate on the same canvas, from the first sketch all the way to production.
Main Capabilities
- Agent collaboration: Supports Claude Code, Codex, Cursor, or other MCP clients. Agents can read files, write real React code, and submit PRs, with the results appearing in real time alongside the canvas. The built-in agent is equally usable.
- Two-way sync between canvas and code: Move a shape, and the code updates with it; edit the code, and the canvas changes in sync. Design and code are the same artifact.
- Multiple agents in parallel: You can direct multiple agents at the same time, for example one handling UI, one handling testing, and one handling copywriting, working in parallel on the same canvas.
- Design-rule driven: Based on real design rules written to counter telltale AI-generated artifacts, the generated results look chosen rather than machine-generated.
- Three types of output: runnable apps (real React, clickable by the team), wireframes, and presentation-mode slides (with speaker notes).
- Brand consistency: Supports applying design tokens to every render.
- Instant preview: No build step is needed, and the running result is immediately visible.
- Built-in component library: Provides 50+ typed, accessible, out-of-the-box base components.
- Integration with existing toolchains: Supports GitHub, Drive, Linear, Notion, Figma, MCP servers, CI, and even in-house tools, all readable from the canvas.
- Team collaboration visibility: Humans have cursors, agents have a robot indicator, so you can see who is doing what and jointly deliver the same running product.
- Unified view of files, apps, and agents: See all work in progress in one interface.
How to Use
Method one: Open Claude Code and paste a one-line install command to let the agent work on the canvas. Method two: Use Claude Code, Codex, Cursor, or another MCP client; after pasting the install command, the agent can read files in the terminal, write apps, and submit real PRs, syncing to the Prototyper canvas in real time. Supports in the terminalOr work through MCP in an editor, or mount Prototyper into Cursor or VS Code. Once done, send the link so reviewers can see the running prototype.
Use cases
- Independent developers, designers, and product teams quickly turn initial sketches into a working product.
- Designers design and deliver without writing code.
- Teams experiment with multiple design variants in parallel on the same canvas and choose the best option.
- Teams that need to keep the design system, component library, and brand tokens consistent with the actual code product.
- Developers who want to connect directly through an existing AI subscription (Claude Code or Codex).
Limitations
Official materials explicitly mention: free to start, paid upgrades unlock code export, collaboration, and advanced features. In paid plans, the agent can export real code to your own repository. Supports canceling at any time and keeping your work. Regarding specific pricing, the scope of free-version features, and detailed differences between plans, the official text provides links but does not elaborate on specific terms, and no more detailed explanation is currently available. Some common questions (such as whether you can bring your own Claude Code or Codex subscription, whether you can keep design tokens and component libraries, whether you can read GitHub repositories, etc.) are listed in question form, and the official text does not give corresponding answers, so no clear conclusions are currently available.
