Paper Desktop

Paper Desktop

Description

Paper connects your designs, agents, code, and data on a single canvas built on web standards. Because Paper is based on web technology and LLMs are fluent in HTML/CSS, Claude can read and write to your design files with high fidelity — turning your canvas into a live collaboration surface between you and your agent.

Features

• Read designs: Inspect artboard structure, screenshots, computed styles, JSX output, and text content directly from Paper.
• Write to the canvas: Create artboards, add or replace HTML nodes, update styles, set text, and duplicate elements — all from a prompt.
• Cross-tool workflows: Combine with other MCP servers (Figma, Notion, etc.) to sync tokens, pull real content, or translate designs across tools.
• Design-to-code: Turn Paper designs into production code by reading the canvas structure and generating components in your framework of choice.
• Code-to-design: Use your codebase (tokens, styles, components) as context to generate new designs on the canvas.

Prerequisites

Paper Desktop must be running with a file open for the MCP server to be available. Download it at paper.design/downloads.

Examples

Example 1: Design from your codebase

User prompt: "Use the CSS styles from my repo and design a settings page in Paper"

Expected behavior:

• Claude reads your project's stylesheets, tokens, or theme files to understand your existing design language.
• Creates a new artboard in Paper and builds a settings page that matches your codebase's visual style.
• Uses your actual colors, typography, spacing, and component patterns — not generic defaults.

Example 2: Turn a design into code

User prompt: "Implement my design from Paper in my codebase, using my code conventions"

Expected behavior:

• Claude reads the selected frame in Paper — structure, styles, text content, and images.
• Generates production-ready components in your project's framework and coding style.
• Matches the design's layout, spacing, typography, and colors using your existing conventions (e.g. Tailwind classes, CSS modules, styled-components).

Example 3: Sync tokens from Figma into Paper

User prompt: "Grab my tokens from Figma and create a design system on the canvas in Paper"

Expected behavior:

• Claude reads color variables, text styles, and spacing tokens from your open Figma file via the Figma MCP server.
• Creates a design system sticker sheet on the Paper canvas with swatches, type scales, and spacing references.
• Note: requires the Figma MCP server to also be connected.

Privacy Policy

See: paper.design/privacy

Support

• Documentation: paper.design/docs/mcp
• For issues or questions: team@paper.design