Paper

Paper is a design tool with an HTML and CSS canvas that connects to codebases, real data and AI agents, built for product designers and teams who ship with agents. Because the canvas uses web standards, a design is already code, and the Paper MCP server lets agents read and write on it. The pitch is a continuous loop from design to code and back, instead of a one-way handoff.

What is Paper used for?

Paper is used to design interfaces that stay in sync with the product being built, with agents doing the repetitive parts.

• Designing on a canvas whose layers are HTML and CSS, so work exports as code
• Connecting Claude Code, Cursor or other IDE and CLI agents through the Paper MCP server
• Syncing design tokens, styles and components between the codebase and the canvas
• Pulling real content from files, a CMS, databases or APIs instead of lorem ipsum
• Editing copy on the canvas and asking an agent to send it back into the codebase
• Handing responsive variants, style variations and consistency checks to agents

Who Paper is best for

Paper suits product designers who work closely with engineers, design engineers, and small teams already using AI coding agents who want design to sit inside that loop. It also fits teams that want a collaborative canvas without paying for every editor. Designers deep in a large Figma-based design system may want to test it on one project before switching.

Paper pricing

As of October 2026, Paper's free plan includes unlimited viewers and editors, 100 MCP tool calls per week, limited image generation and a 25 MB maximum image size. Pro costs $16 per editor per month on yearly billing, or $20 billed monthly, and adds 1 million MCP tool calls per week, 100 times more image generation, video export and a 100 MB image limit. The Organizations plan adds SAML and SSO, admin controls, custom contracts, dedicated support and priority onboarding, priced on request.

Limitations to keep in mind

• Some capabilities, such as parts of vector editing, are still listed on the roadmap
• The free plan's 100 weekly MCP calls limit heavy agent use
• Teams moving from another tool will need time to rebuild libraries
• Its value depends on working with code and agents, not static mockups only

Paper vs alternatives

Onlook also connects visual design to real React code and is a good match for teams who want to edit an existing app. v0 by Vercel is better for generating a new app from a prompt. Framer AI is the better choice for designing and publishing marketing websites. Cursor is an AI code editor that pairs with Paper over MCP rather than replacing it. Paper wins when you want a collaborative design canvas that is code from the start and open to any agent.

Tips for getting started with Paper

Install Paper Desktop if you want agents on your machine to reach local repositories and files. Connect one agent through MCP and ask it to import your design tokens first, so your canvas matches the codebase. Use paste from Figma or HTML to bring in existing screens rather than redrawing them. Replace placeholder text with real data early, since it exposes layout problems faster.

Paper FAQ

Is Paper free?

Yes, Paper has a free plan with unlimited editors and viewers, 100 MCP tool calls per week and limited image generation. Pro costs $16 per editor per month yearly.

What is Paper used for?

Paper is used to design user interfaces on an HTML and CSS canvas that connects to codebases, real data and AI agents through MCP.

Does Paper work with AI coding agents?

Yes, Paper's MCP server lets IDE and CLI agents read and write on the canvas and sync tokens, styles and components with your code.

What is the best alternative to Paper?

Onlook is a strong alternative for visual editing of React code, and Framer AI is better for publishing marketing websites.