Lesson 5.20: Paper Design for Claude Code

🎨 1. What Is Paper Design?

Paper is a professional design tool — a 2D canvas where you compose interfaces, like Figma. The difference: Claude Code can read what's on the canvas AND write designs back into it. Design and code live in the same room.

PAPER · design canvas

Your designer is Claude.

Open a blank artboard. Tell Claude Code what you want. It reads your canvas, writes the HTML directly into it, and takes a screenshot. You iterate in natural language until it ships.

2D canvas

MCP native

HTML output

JSX export

📐

⚠️ 2. The Design Bottleneck

Every agency owner has the same problem: you close a client, you need a landing page or ad creative, and now you're stuck. Either hire a designer (slow + expensive) or DIY in Canva (looks amateur).

⚠ The Old Way

Brief a designer (30 min)
Wait 3-5 days for the first draft
Client feedback → 2 more rounds
$400-800 per landing page
Static image → dev builds it (another 2-3 days)
2 weeks + $800 for one page

✓ The Paper + Claude Way

Open a Paper artboard (10 sec)
Describe what you want to Claude (2 min)
Watch it render live in the canvas (30 sec)
Iterate in natural language (5 min)
Export production HTML/JSX directly
10 minutes + $0 for one page

🛠️ 3. What Claude Code Can Do in Paper

Paper exposes tools to Claude via MCP. Claude uses them to see and edit your canvas the same way you would — but at AI speed.

👁️

Read

See your canvas

Claude reads the current design — artboards, layers, what you have selected, what fonts are already in use.

get_basic_info · get_selection · get_tree_summary

✍️

Write

Design in HTML directly

Claude writes visual groups (hero, cards, nav, forms) as HTML that renders as real design nodes on your canvas.

write_html · create_artboard · create_page

🎨

Edit

Surgical updates

Change text or styles on existing nodes without rebuilding. Duplicate a card, tweak the copy, move it around.

set_text_content · update_styles · duplicate_nodes

📸

Verify

Screenshot & review

Claude can grab a screenshot of what it just made to verify it looks right before handing off. Real self-check, no guessing.

get_screenshot

📦

Export

Ship to production

Once the design is right, export as JSX with real computed styles + fill images. Drop straight into your Next.js / Vercel project.

get_jsx · get_computed_styles · get_fill_image

💬

Iterate

Natural language edits

"Make it more urgent." "Add a countdown timer." "Match this brand color." "Add trust badges." Claude executes on your canvas.

any tool + your words

🔁 4. The Workflow (Design → Code → Ship)

Step 1

📄

Open a blank artboard

New Paper file, set canvas size (e.g. 1440×900 for desktop hero).

Step 2

💬

Prompt Claude Code

Describe what you want with context, brand, constraints.

Step 3

🎨

Watch it render

HTML written into the canvas. Screenshot for review.

Step 4

🚀

Export + deploy

Grab the JSX, drop into your repo, ship on Vercel.

🎬 5. Live Class — Build a Roofing Landing Page Hero (Together)

In class we're going to open Paper, spin up a blank artboard, and build a real client landing page hero from scratch — live. Follow along on your own screen if you can. If not, watch closely because this is exactly the process you'll reuse.

0:00 · 1 min

📄 Open Paper + create a blank artboard

New file → new artboard at 1440×900 (desktop hero size). Leave it empty.

1:00 · 2 min

💬 Paste the first prompt into Claude Code

The full prompt is in Section 7 below. It has context, goal, constraints, brand system, and evaluation criteria — the 7-part structure from Lesson 5.0.

→ Copy the prompt block below and paste into Claude Code

3:00 · 1 min

🎨 Watch Claude write the hero into the canvas

Claude calls get_basic_info + get_font_family_info first (as its guide instructs), then write_html to lay down the hero section as a visual group. Screenshots it. Verifies.

4:00 · 2 min

💬 Iterate #1 — "Make it more urgent"

Ask Claude to add a countdown timer (48-hour storm window offer). Watch it update the hero on-canvas surgically instead of rebuilding.

6:00 · 2 min

💬 Iterate #2 — "Add trust signals + lead form"

"Add a row of trust badges (Licensed · Insured · 300+ Roofs Done) and a 4-field lead form (Name, Phone, Address, Roof Age) below the CTA."

8:00 · 2 min

📦 Export as JSX + copy computed styles

Claude calls get_jsx and get_computed_styles. We copy that output into a new Next.js page in the ai-advertiser-hq project.

10:00 · 2 min

🚀 Deploy to Vercel + show live URL

Push to Vercel, share the live URL in class chat. Total time from blank artboard to live client landing page: ~12 min.

🏆 What we're proving: A landing page that would cost $800 and take 2 weeks — done in 12 min, for free, with only YOU in the room. That's the leverage.

💼 6. Real Use Cases for Agency Owners

🏠

Client landing pages

Every new client needs one. Now 10 min instead of 3 hours.

Highest ROI

🖼️

Ad creative variations

One brief → 5 static ad variations laid out on one artboard.

Scale creative

📊

Client pitch decks

Polished sales decks without hiring a designer. Export to PDF.

Close deals

🎯

Onboarding portals

Branded client onboarding forms designed + deployed same day.

Look pro

📱

Social post templates

Reusable Instagram/LinkedIn templates for content batching.

Personal brand

🧪

A/B test variants

3 hero variations in one artboard, screenshot, run as split test.

Data-driven

📋 7. The Live-Class Prompt (Paste into Claude Code)

This is the exact prompt for the live build. Structured in the 7-part Playbook anatomy from Lesson 5.0.

COPY ALLROLE / CONTEXT: You're helping me design a client landing page hero in Paper. The client is a residential roofing company in Tampa, FL, offering free drone inspections + insurance-covered replacements. Their target: homeowners after recent storm damage. Tone: urgent but trustworthy. Read the current Paper artboard first with get_basic_info, then get_font_family_info before any typography. GOAL: Design a landing page hero section as a single visual group written into the current empty artboard. Above the fold on a 1440×900 canvas. CONSTRAINTS: - No em dashes anywhere - No "unlock / empower / leverage / dive in" - No fake stats — only credible numbers like "300+ roofs done in Tampa" - Fits above the fold (all content within 900px height) - Single visual group so I can duplicate/move it as one unit - Use system fonts already in the file if any exist; otherwise Inter INPUTS: Brand system: - Dark navy background: #0A2540 - Orange accent (for CTA + urgency): #FF6B35 - White primary text: #FFFFFF - Muted secondary text: #B8C5D6 - Generous whitespace (min 80px vertical padding) Content: - Eyebrow: "STORM DAMAGE · TAMPA HOMEOWNERS" - Headline: "Your Insurance May Cover a Brand New Roof." - Subhead: "Free drone inspection this week. We handle the claim." - Trust badges row: Licensed · Insured · 300+ Roofs Done · Lifetime Warranty - CTA: "Get Free Inspection" (orange button, large) - Below CTA: "5-star rated on Google · Same-week appointments" OUTPUT FORMAT: Write a single HTML block via write_html into the current artboard. Semantic tags. Inline styles only. Wrap as one visual group. Then get_screenshot to verify. Then finish_working_on_nodes. EXAMPLES: Visual style: dark, high-contrast, urgent but professional (think GEICO's clarity crossed with a modern SaaS hero). Not corporate-photo cheesy. EVALUATION: Before finishing, confirm: 1. Hero fits within 900px height 2. Accent color is #FF6B35 on the CTA 3. No em dashes in any copy 4. Trust badges visible in the hero, not scrolled below 5. CTA button is high-contrast and impossible to miss 6. Screenshot looks polished, not amateur

💡 The follow-up prompts (paste one at a time, in order):

Iterate #1: "Add a countdown timer above the headline — 48-hour storm inspection window. Match the accent color."

Iterate #2: "Add a lead form below the CTA with 4 fields: Name, Phone, Address, Age of Roof. Make it match the hero's dark theme with white input backgrounds."

Export: "Now give me the JSX for the whole hero, plus computed styles. I'm dropping it into a Next.js page."

⚙️ 8. One-Time Setup (5 min)

Do this before class if you can. If not, we'll walk through it live.

Sign up for Paper at paper.design — free tier is enough to follow along.
Install the Paper MCP — in Claude Code, add the Paper MCP server (they publish a one-liner installer).
Fully quit VS Code + reopen — MCP servers only load on restart.
Verify — type /mcp in Claude Code, confirm "paper" shows connected.
Open a test Paper file — create a new file with one artboard. Claude Code will now be able to see it.

🚨 If /mcp shows "paper" but with an auth error: known Meta-MCP style OAuth bug in some Claude Code versions. Fix: authenticate Paper in the browser first, then reopen VS Code. Same fix pattern as the Meta Ads MCP situation in 5.3.

✅ 9. Homework

Progress 0 / 0 complete

Signed up for Paper + connected the MCP paper.design → install MCP → /mcp shows connected. 5 min.
Re-ran today's live prompt on your own machine Same roofing hero. Same 3 iterations. Prove the workflow works for you.
Designed 1 landing page hero for a REAL client (or prospect) Not roofing. Your actual niche. Their real offer. Your real brand palette.
Exported the JSX and deployed the page to Vercel End-to-end: Paper → JSX → Vercel URL. This is the proof it works.
Sent the URL to the client / prospect The point of the class isn't the design. It's the CLOSE. Send it, get feedback.
Posted the URL + a screenshot in #wins Cohort accountability + inspiration for the students still stuck on Canva.

🏆 The unlock

Every client asks for landing pages, mockups, and creative variations. The agencies that can't deliver fast lose the deal to the ones that can. Paper + Claude turns you from "I need to find a designer" into "here's the mockup 10 min after our call." That speed IS the differentiator.

🏷️ Tags

paperdesignclaude-codemcplanding-pagesad-creativeno-designer