Docs

Agents

Paper

Put your brand's tokens and components into a Paper file with an agent that has both Paper's MCP server and your brand's.

Paper is a design tool whose canvas is HTML and CSS. Its MCP server lets an agent read and write the file you have open. Give one agent Paper's server and your brand's, and it can put your tokens into a Paper file as Paper tokens and draw your components on the canvas, bound to those tokens.

There is nothing to connect between Archetype and Paper. Paper's MCP server runs inside the Paper Desktop app on your own computer, so the agent does the work. That means it has to be an agent that runs on your computer too: Claude Code, Cursor, Codex, the Claude desktop app, or another local MCP client. ChatGPT on the web, v0 and Lovable can't reach Paper.

Set it up

Open Settings → Integrations and click Set up on the Paper card. Pick your agent and follow its four steps.

  1. 1

    Open Paper Desktop

    Download it if you don't have it, and open the file you want the brand in. Paper's agent tools only work while the app is open with a file loaded.

  2. 2

    Add Paper to your agent

    Each agent adds it differently. The drawer shows the right command for the one you picked.

  3. 3

    Add your brand to the same agent

    This is the step from Connect an agent. Skip it if your brand is already there.

  4. 4

    Ask for it

    Paste the prompt from the drawer. It asks for the tokens first, then for the components you name.

For Claude Code, Paper's plugin installs with:

Terminal
claude plugin marketplace add paper-design/agent-plugins
claude plugin install paper-desktop@paper

What the agent does

Two reads from your brand do the work, both with format set to paper:

CallWhat comes back
get_brand {"domain": "tokens", "format": "paper"}Your tokens as entries for Paper's create_tokens: colors, radius, spacing, font families, and each text style's size, weight, line height and letter spacing. Shadows and gradients come back as plain values, because Paper has no token type for them.
get_brand {"domain": "components", "handle": "button", "format": "paper"}The component's examples, as they always come, with the rules for writing them into Paper.

Each token keeps the name your components already use, such as --color-brand-blue-500 or --radius-md. When the agent draws a component with its var(--…) references kept, Paper binds each one to the token of the same name. Change the token in Paper and the component follows.

Paper keeps inline styles only: it drops class names and style sheets, and has no grid or margin. So the agent restates each example's CSS as inline styles, turns a grid into rows and columns with gaps, and draws ::before and ::after as real layers. Hover and other states are separate examples in Archetype, so it draws the ones you ask for.

Good to know

  • Paper's free plan allows 100 MCP calls a week, and drawing one example takes several. That's why the prompt asks which components you want rather than drawing every one. Paper Pro allows far more.
  • Paper has no modes yet. Tokens go in as your default mode's values. Ask the agent for another mode and it reads them with mode set, such as dark.
  • Fonts. Paper sets type in Google Fonts and in fonts installed on your computer. If your brand uses its own uploaded font, the agent gives you the files to install.
  • Artifacts don't run in Paper. Where a component holds one of your artifacts, the agent leaves its box empty and tells you.
  • It's a copy. Tokens in Paper don't follow later changes in Archetype. Ask the agent again to bring them up to date.
  • Bring it back. Copy layers or tokens in Paper and press ⌘V in Archetype. See From Paper.
  • Check the result. The agent can read what it drew back as code with Paper's get_jsx and pass it to check_against_brand.

Something missing or wrong on this page? Write to support@heyarchetype.com.