A Guide to Paper and Claude Code for Designers
A step-by-step for designers who want to get into vibe-designing.
Hey there! This is a 🔒 subscriber-only edition of AI First Designer (by ADPList) 🔒, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks.
⭐️ NEWS: Introducing the World’s First Vibe-Coding School for Designers!
Friends,
I’m shocked at how few designers know about this workflow. But I’m certain, we’re looking at the future of design.
There’s a new kind of designing I call “vibe-designing”, where you fully give in to the vibes, describe what you want, and forget the canvas even exists.
It’s possible because Paper runs on HTML and CSS, and Claude Code speaks that natively. I connected them via MCP and just... talked. “Add a hero with a bold headline, premium feel.” It appeared. “More whitespace. Gradient button.” Done.
I never touched the canvas.
I ask for things like “this feels flat, fix it,” and it does. Sometimes I screenshot and say, “What’s wrong with this?” and it tells me. When something breaks visually, I just describe what I see, usually that fixes it.
The design grows beyond my usual process. But I stay in flow the whole time.
It’s not really designing, I just see stuff, say stuff, watch stuff change, and ship stuff. And it mostly works.
Claude Code and Paper can now create designs 10x easier... I skipped Figma and made a beautiful app design using Claude Code + Paper in just one prompt.
I opened Paper. I opened Claude Code. I prompted: “Create an iOS app design of a stock trading app that looks like Robinhood. It must be beautiful and have a simple experience.”
And watched it appear on my 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.”
This is vibe-designing. And it changes everything about how designers work.
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.
After trying this more than 100 times, here’s my step-by-step guide for you.
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.
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
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.
How to iterate on the design: