BetaFor teams shipping in code

Skip Figma.
Design on your running app.

Stop drawing mockups. Prompt your agent to build; review every route live on one canvas.

Free during beta · We’ll email the link, open it on your Mac to install.

Any AI Agent

Claude Code, Cursor, Conductor — drive the canvas with MCP

Your agent drives the canvas from your editor. Claude Code, Cursor, Codex, Conductor — all work today. Add pages, capture screenshots, reorganise — from your terminal.

Claude
Cursor
Conductor
Lovable
v0
OpenAI Codex
DC

Multi-Viewport

Desktop, tablet, mobile — side-by-side

Render the same screen across every viewport at once. Catch the responsive break the AI missed before you ship.

Design Canvas showing desktop, tablet, and mobile viewports side-by-side

Share LinksComing soon

Share a link. Get feedback.

Your stakeholders don’t need to install anything. Share a link — they see every screen with full spatial context and can pin comments directly on them.

Mac users create. Everyone reviews.

designcanvas.app/share/abc123
Shared Design Canvas view with pinned comments
Szymon2m ago

Spacing on the pricing card feels tight at tablet width.

I built Design Canvas because I wanted a Figma-like infinite canvas for the apps I'm building. One view to visually iterate, compare every screen, and design and code faster with AI — without leaving my editor.

Charlie Ellington
Charlie Ellington
Design Engineer · Built Design Canvas

Agent Control

Your AI agent controls the canvas.

Claude Code, Cursor, Conductor — any MCP-compatible agent drives the canvas. Four tools your agent calls from your terminal.

~/design-canvas
$ npx design-canvas-mcp
 Connected to Design Canvas v2.1.67

> Tell Claude: "Add /settings and /billing to the canvas"

 list_routes        → 12 routes available
 add_route          → /settings at (1200, 400)
 add_route          → /billing  at (1600, 400)
 capture_canvas     → screenshot saved

How it works

See the canvas update as your agent changes the code

1.

Build your app

With any tools — Cursor, Claude Code, Bolt, your IDE.

2.

Run it locally

Start your dev server. Any framework, any port.

3.

Open Design Canvas

Every page appears as a frame on one infinite canvas.

Your AI agent controls the canvasvia MCP

Add routes, capture screenshots, compare viewports — all from Claude Code or Cursor.

Or do it all directly in the app.

FAQ

Questions we hear a lot

  • Do I prompt in Design Canvas?
    No. You prompt in your AI agent (Cursor, Claude Code, Lovable). DC renders what it builds.
  • Mac only?
    Yes, for now. Join the waitlist for Windows/Linux.

Ready to see your app?

Download Design Canvas. Point it at your dev server. Every page appears, live, on an infinite canvas.

Free during beta · We’ll email the link, open it on your Mac to install.

Design Canvas — every screen of your app on one infinite canvas
Not happy with Figma AI? Design in code, on a canvas.