Paper’s Agent‑Native Design Demo: How AI Can Draw UI Live

Watch a live demo where AI agents like Claude Code edit a visual canvas in real time, generating thumbnails, decks, and sites on the fly.

Ever wondered how an AI can design a UI while you watch? In this live demo Andrew and Cathryn show Paper, a visual canvas that lets coding agents take control.

⚡ TL;DR: Paper lets AI coding agents like Claude Code edit a visual design canvas in real time, turning prompts into thumbnails, decks, and even websites. It’s a glimpse into agent‑native design workflows.

The Simple Version

Paper is a design app built for AI agents. Think of it as a digital whiteboard that listens to code and draws back.

How It Actually Works

MCP Connection

🎯 Think of it this way: MCP is like a USB cable that plugs an AI brain into a design tool.

Developers expose a Model Context Protocol endpoint, and Paper connects to it over the desktop app.

Agent‑Driven Editing

🎯 Think of it this way: Claude Code becomes a paintbrush that colors the canvas based on your prompt.

It parses natural language, selects components, and updates the layout instantly.

AI Thumbnail Generation

🎯 Think of it this way: The app uses built‑in diffusion to churn out thumbnail variations on demand.

You can tweak style, size, and text without leaving the editor.

Technical Deep Dive

Paper runs as a native desktop Electron app, which gives it low‑latency access to the screen and file system. The MCP layer streams JSON diffs of the canvas state to the agent, enabling real‑time feedback loops. When Claude Code receives a prompt like “create a sponsor deck with three slides about productivity,” it assembles a markdown outline, renders it with the built‑in AI, and pushes the result back as an image. The system also supports voice‑note inputs, converting speech to structured prompts via a speech‑to‑text pipeline.

Developers can extend Paper by writing custom MCP tools that fetch design assets from Mobbin or pull color palettes from Coolors, expanding the agent’s visual vocabulary.

Why This Matters

Agent‑native design collapses the gap between idea and implementation, letting creators prototype entire products in minutes. It also opens a new platform for AI startups to distribute software through visual workflows rather than pure code. For teams, this means faster iteration cycles and less context switching between design and development tools.

The demo shows that even non‑designers can generate polished assets, which could democratize UI creation for indie makers.

Key Takeaways

Agent‑first design lets AI control visual output directly.
MCP provides a low‑level bridge between code and canvas.
Built‑in AI generation speeds up thumbnail and deck creation.
Voice‑note prompts turn messy thoughts into structured designs.
Extensible tooling invites third‑party design data sources.
Desktop‑only runtime ensures low latency and offline capability.
Potential to reshape how SaaS products are prototyped.