A Figma-style canvas.
Driven by Cursor.
Every route of your running app, side by side. No drag-drop — Cursor edits in your terminal, the canvas shows it live.
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.
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.
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.
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.
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.
$ 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 savedThe Cursor + Design Canvas loop
See the canvas update as your agent changes the code
Cursor writes the code
Unchanged workflow. Your agent ships routes the way it always has.
Design Canvas renders every route
Your dev server is rendered live on an infinite canvas. Pan, zoom, review.
Cursor sees the canvas via MCP
Four tools: list_routes, capture_canvas, add_route, remove_route. You flag drift; Cursor fixes it.
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
Does it replace Cursor's preview?
No — it augments. Cursor shows one page. DC shows every route.How do I configure MCP?
One command:npx design-canvas-mcp. DC auto-adds itself to your Cursor settings.Mac only?
Yes. 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.