A Guide to Paper and Claude Code for Designers

Intro

Claude Code and Paper can now create designs 10x easier. You can skipp Figma and make a beautiful app design using Claude Code + Paper in just one prompt.

Open Paper. Open Claude Code. Use this prompt: “Create an iOS app design of a stock trading app that looks like Robinhood. It must be beautiful and have a simple experience.”

Then watch it appear on your canvas. In real time. No clicking. No dragging. No pixel-pushing.

I iterated: “Make me the stock screen and change the colors.”

Basically, it’s “Figma for AI Agents.”

What is Paper and Claude Code?

Paper is a design tool built for AI agents. Unlike Figma, everything you design in Paper can be done through your agents (Claude Code, Cursor, etc). And the output is great, you don’t have to touch it yourself.

Claude Code is an AI coding agent that takes plain-language instructions and executes them.

Connect them via MCP (Model Context Protocol), and Claude Code can read + write directly to your Paper canvas.

The result: you describe what you want, and it appears. You critique it, and it changes. You never touch the interface.

This IS NOT a plugin. It’s not autocomplete. It’s a bidirectional connection; the AI sees your design and manipulates it in real time.

Why this matters

Traditional design tools require you to:

Click to create elements
Drag to position them
Navigate menus to change properties
Manually adjust spacing, colors, typography

With Paper + Claude Code:

You describe what you want
It appears
You refine through conversation

The interface disappears. You stay in creative flow. And because Paper is built on web technology, LLMs understand it natively. They’re trained on HTML and CSS. The DOM is their native language.

Step 1: Install Paper Desktop

Go to: https://paper.design/downloads

Download and install Paper Desktop for Mac. Opening any file in Paper Desktop automatically starts the MCP server in the background. No configuration needed.

You should find this on the Paper website

Step 2: Connect Claude Code to Paper

Open your terminal and run:

claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user

check via /mcp on claude code to see if its installed properly

Once connected, you should see the Paper MCP server in the list of available MCPs when you run the /mcp command.

Troubleshooting (if the connection doesn’t work):

Make sure Paper Desktop is open with a file loaded
Restart Claude Code
Run /mcp again

Step 3: Start designing with prompts… This is the ‘aha’ moment

Open a new file in Paper. Open Claude Code. Start prompting.

How to create from scratch:

Create an artboard called "Hero Section" that's 1440x900px. Add a centered headline that says "Design Without Limits", a subtitle below it, and a primary CTA button.

If you want to learn more go to ADPList https://adplist.substack.com. This content is credit to Felix Lee.

UX Pathways