Design to Code: Paper + Claude Code via MCP

Turn a Paper design into a live React + Tailwind site using Claude Code over MCP.

Introduction

⚡️ 30 Second Summary

Every design tool promises to bridge the gap between design and code, but most still rely on an export step that loses information along the way.

In this project, you will design an AI Skills Explorer dashboard in Paper, a canvas where every element is real HTML/CSS, and use Claude Code's MCP connection to turn that design into a working React and Tailwind project.

What You'll Build

An AI Skills Explorer dashboard designed on Paper's code-native canvas and generated into a live React + Tailwind site through Claude Code's MCP connection.

By the end of this project, you'll have:

📄 A Paper design file with a full dashboard layout built on a real HTML/CSS canvas.
🔌 A working MCP connection between Claude Code and Paper for bidirectional design-to-code communication.
📊 Your design populated with real, researched AI trend data written directly onto the canvas by Claude Code.
⚛️ A production-ready React + Tailwind project generated from your Paper design.
💎 Secret Mission: Give Claude Code a red pen, prompt it to act as a senior product designer, critique your layout, and modify your existing elements directly on the canvas.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Jon

Do I need to pay to do this project?

No. This project runs on Paper's free tier (100 MCP tool calls per week) plus your existing Claude Pro ($20/mo) or Max ($100/mo) subscription, which is already required to run Claude Code.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Install Paper Desktop and Create Your Design File

Before we can turn a design into real code, we need a design tool that speaks the same language as the code. That's Paper, a canvas where every frame, card, and text element is a real HTML node with real CSS properties.

In this step, you'll install Paper Desktop, create your AI Skills Explorer design file, and get a feel for how Paper's properties panel maps directly to CSS. This is the foundation that makes the rest of the project possible.

In this step, get ready to:

Download and install Paper Desktop on your machine.
Create your AI Skills Explorer design file.
Explore Paper's canvas and spot how its layout properties map to CSS.

Download and Install Paper Desktop

Paper comes in two flavors, a browser version you can open in any tab at paper.design, and Paper Desktop, a native app you install on your machine.

Both give you the same code-native canvas, but only Paper Desktop runs Paper's MCP server locally on your computer. The browser version does not include it, so you need the desktop app for Claude Code to communicate with your designs later.

⊗ I don't have Paper yet

Go to paper.design/downloads and download the installer for your operating system.

Run the installer and follow the prompts. Paper's welcome page shows the install checklist, plus a Sign up link in the top-right nav.

Click Sign up to create a free account, then sign in to Paper Desktop.

✔️ I already have Paper

Open Paper Desktop and make sure you're signed in.
Check your version from the menu bar, Paper → About Paper. The MCP server ships in Paper 0.1 and later.
If you're on an older version, update from paper.design/downloads.

Why a code-native canvas?

Most design tools like Figma use SVG-based or proprietary formats that need translation before they become code. Paper is different. Every element on its canvas is a real DOM node with CSS properties. When you place a box on the canvas, you're placing a real HTML element with real CSS styling. This is what lets AI agents read and write your design without any export step.

Create Your AI Skills Explorer File

In Paper Desktop, click New File to create a blank design file.

Name the file AI Skills Explorer so it's easy to identify later.

What just happened behind the scenes?

When a file is open in Paper Desktop, Paper's MCP server starts automatically in the background at http://127.0.0.1:29979/mcp. You don't need to interact with this URL directly, it's the endpoint Claude Code will use to communicate with your design. MCP (Model Context Protocol) is a standard that lets AI agents talk to external tools. Paper's MCP server exposes 24 tools that let agents read your design, create elements, update text, and more.

Explore the Paper Canvas

Before building the real layout, take a minute to see how Paper's canvas works. Every layout property you set in Paper is a real CSS property under the hood.

When you change a frame's padding to 24px, Paper writes padding: 24px into an actual HTML element. That's why the design-to-code translation later is so clean: there's nothing to translate.

How you'll actually verify this is real code

Keep an eye on the properties panel as you work (the panel on the right side of your canvas).

Every control you touch uses a real CSS property name (flex-direction, padding, gap, background-color), the same names you'd write in a <style> tag. Then in Step 2, you'll watch Claude Code write a real <div> onto this canvas from your terminal. That's the proof: no export step, no format conversion, the design IS the code.

Press F (or click the frame icon in the toolbar) and drag out a frame on the canvas. Any size works, you'll delete this test frame in a minute.

Drag the edges of the frame to resize it.

Press R (or click the rectangle icon in the toolbar) and draw a rectangle inside the frame.

Nice! Now add a second rectangle in the same frame (don't worry if they're not the same size)

Click the frame's name tag in the top-left corner of the frame to select the whole frame. You'll see a blue outline around the outside.

A flex layout is a layout mode where children stack in a row or column with consistent spacing, instead of floating at fixed coordinates. Switching the frame to flex gives you CSS properties (direction, padding, gap) that Claude Code can reason about later.

Click Add flex in the properties panel on the right (or press Shift+A) to turn on flex layout.

✔️ I see flex properties

Increase and decrease the Gap element - this is the space between children.

You should notice that the space between your rectangles increases and decreases.

Next is padding. This is the space inside the frame edges.

Look for the padding icons in your flex panel settings. See how they the padding on your canvas changes as you adjust them?

Quick terminology recap!

Flex direction controls whether children stack in a column or row.

Padding is the space inside the frame edges.
Gap is the space between children.

ⓧ Nothing happened when I pressed Shift+A

Confirm you've selected the parent frame by clicking its name tag in the top-left corner. Clicking a child rectangle won't enable flex on the frame itself.
You should see a blue outline around the whole frame when it's selected.
If Shift+A still does nothing, click the Add flex button in the properties panel directly instead of using the shortcut.
Still stuck? Help me enable flex layout on a Paper frame.

Still stuck?

Get help with your error or share your error with the NextWork community!

Option 3

Click each the rectangle and press Delete (or Backspace on Mac) to remove it.
Repeat for your frame - your canvas should be empty when you're done.

Don't worry! We'll add a lot more back in using Claude.

Design for the agent, not around it

Paper's docs recommend flex layouts over absolute positioning. Flex layouts give Claude Code clean, nested HTML that translates straight to code. Absolute positioning (where elements float freely on the canvas with no parent-child relationship) has no consistent structure for the agent to read, so it has to guess.

What you should have now

Awesome - we've got the basics set up:

Paper Desktop is installed and you're signed in.
Your AI Skills Explorer file is created and named.
You've turned on flex on a test frame and seen the properties panel show real CSS property names (flex-direction, padding, gap).
Your test elements are cleaned up and the canvas is empty, ready for the real build.

Top tip: Paper keyboard shortcuts

F = frame · R = rectangle · T = text · Shift+A = wrap in flex.

Hold Cmd (macOS) or Ctrl (Windows) and scroll to zoom.

Hold Shift and scroll to pan sideways.

Next up, we'll plug Claude Code into Paper through MCP so your terminal and your canvas can talk to each other!

Connect Claude Code to Paper via MCP

Paper is installed and your design file is open, now you need to wire Claude Code into the canvas. Without this connection, Paper is just a design tool. With it, your terminal becomes a way to read, write, and restructure the design in real time.

In this step, you'll install Paper's plugin in Claude Code, verify the MCP connection, and then prove it works by asking Claude Code to create something on your canvas.

In this step, get ready to:

Install the Paper MCP plugin in Claude Code.
Verify that Claude Code can see the Paper MCP server.
Test bidirectional communication by creating an element on your canvas from a prompt.

Install the Paper Plugin in Claude Code

Claude Code uses a plugin system to connect to external tools. Paper publishes its MCP plugin through a marketplace that you add first, then install the plugin from.

Open your terminal.

🍎 macOS / Linux

Press Cmd+Space to open Spotlight, type Terminal, and press Enter (macOS).
On Linux, press Ctrl+Alt+T or search for Terminal in your applications menu.
Run this command to create a project folder on your Desktop, then move into it:

mkdir -p ~/Desktop/ai-skills-explorer && cd ~/Desktop/ai-skills-explorer

🖼️ Windows

Press the Windows key, type Terminal, and press Enter to open Windows Terminal (or launch PowerShell from the Start menu).
Run this command to create a project folder on your Desktop, then move into it:

New-Item -ItemType Directory -Path "$HOME\Desktop\ai-skills-explorer" -Force | Out-Null; Set-Location "$HOME\Desktop\ai-skills-explorer"

Running Claude Code on Windows?

Claude Code runs best through WSL (Windows Subsystem for Linux). If you're using WSL, switch to the 🍎 macOS / Linux tab, the bash commands work the same.

✔️ I have Claude Code

Start Claude Code in the project folder:

claude

⊗ I need to install Claude Code

Install Claude Code from anthropic.com/claude-code using the instructions for your operating system.
Once installed, come back to this folder and run claude to start your first session.

Add Paper's plugin marketplace:

/plugin marketplace add paper-design/agent-plugins

What did the marketplace command do?

/plugin marketplace add registers Paper's plugin marketplace with Claude Code so it knows where to find Paper's plugins. It's a pointer, not an install. You still need the install command next to actually wire the plugin in.

You should see Successfully added marketplace: paper

Install the Paper Desktop plugin:

/plugin install paper-desktop@paper

Claude Code will ask where to install the plugin.
Use the arrow buttons on your keyboard to select Install for you (user scope).
This means the Paper plugin will be available across all your Claude Code sessions.

Press Enter

✔️ The plugin installed

You'll know the plugin installed correctly if Claude Code confirmed the Paper Desktop plugin was installed.

ⓧ I got an error

If you see a marketplace not found error, re-run /plugin marketplace add paper-design/agent-plugins. The install command needs the marketplace registered first.
If Claude Code asks you to confirm an install scope and you're unsure, pick Install for you (user scope) so the plugin works across all your sessions.
After a successful install, the plugin only becomes active once you restart Claude Code. You'll do that in the next sub-step.
Still stuck? Help me install the Paper Desktop plugin in Claude Code.

Still stuck?

Get help with your error or share your error with the NextWork community!

Verify the MCP Connection

The plugin is installed, but you need to confirm Claude Code can actually see Paper's MCP server. The server only runs when a design file is open in Paper Desktop, so both apps need to be active at the same time.

Exit Claude Code with Ctrl+D (or type /exit) and restart it with claude, this registers the newly installed plugin with the current session.
Make sure Paper Desktop is open with your AI Skills Explorer file loaded.
Start up Claude Code again by running the following in your terminal:

claude

In Claude Code, run:

/mcp

Look for the Paper MCP server in the list of connected servers.

Why restart Claude Code?

Claude Code loads plugins at startup. A running session won't pick up newly installed MCP servers until you exit and start again. If /mcp doesn't show Paper yet, 99% of the time the fix is a restart.

✔️ Paper MCP is connected

Nice, Claude Code can see Paper's MCP server. That means every tool in Paper's MCP toolkit (all 24 of them) is now available to Claude Code.

You're ready to send your first prompt.

ⓧ I don't see Paper MCP

That's okay! Let's troubleshoot:

Confirm your design file is open in Paper Desktop. The MCP server only starts when a file is loaded.
Restart Claude Code completely, then run /mcp again. The most common cause of connection issues is a long-running agent session.
If you're using WSL on Windows, enable mirrored mode networking in your WSL settings so the local MCP server is reachable.
Still stuck? Help me troubleshoot my Paper MCP connection in Claude Code.

Still stuck?

Get help with your error or share your error with the NextWork community!

Test Bidirectional Communication

Seeing the server listed is one thing, watching Claude Code actually create something on your canvas is the real proof. This test confirms the connection works in the write direction, meaning Claude Code can push changes to your design.

In Claude Code, press esc to leave the Manage MCP Servers page.
Enter this prompt:

Create a red rectangle in Paper

You may have to approve Claude to access Paper multiple times.
Press Enter to select the Yes options for Claude to proceed.

Continue responding to any Claude requests in your terminal until you see this message:

Switch to your Paper Desktop window.

What just happened: the DOM is live

The DOM (Document Object Model) is the live tree of HTML elements your browser renders on a page. Every <div>, <button>, and <p> in a website is a DOM node with real CSS properties attached to it, and that tree is what ships to production.

Paper's canvas is literally that same DOM, running inside a design tool. So when Claude Code creates a red rectangle, it's not drawing a picture of one, it's inserting a real DOM node (a <div> with background-color: red) into the live tree on your canvas.

Compare that to Figma, where designs are stored as SVG-based shapes in a proprietary format. To turn a Figma design into code, someone has to translate shapes into HTML elements (either by hand or through a plugin), and detail gets lost on the way. Paper skips that entire step because the design was already a DOM tree, no export, no conversion, no format mismatch.

Delete the test rectangle from your canvas when you're done.
Delete your frame from your canvas as well.
We'll build more in the next step!

You now have a live, two-way bridge between Claude Code and your Paper file. Next up, you'll put it to work and build the real dashboard layout, header, skill cards, and all!

Build Your Dashboard Layout in Paper

Claude Code is wired into Paper and can push changes to your canvas on demand. Time to give it something real to work with, the full AI Skills Explorer dashboard layout.

In this step, you'll build the layout by hand using empty flex containers. The structure you create here is the exact HTML and CSS Claude Code will later read, populate with researched AI trend data, and turn into React + Tailwind code.

In this step, get ready to:

Create the main artboard with a header section using a flex layout.
Build three skill category cards arranged in a horizontal row.
Build the Trending AI Tools section by duplicating the header title and the skill cards row.

Why design structure matters here

Since Paper renders real HTML and CSS under the hood, every frame and text element is a real DOM node. Paper's docs recommend using flex layouts and containers so the agent can easily understand your layout structure. This is what makes the design-to-code step later so accurate, avoid absolute positioning or overlapping elements.

Create the Main Artboard and Header

Press F (or click the frame icon in the toolbar) - don't create a frame yet!
Can you see the Frame section in the properties panel on the right?

Expand Desktop, and select MacBook Pro 14″.
Paper sets the dimensions to 1512x982 automatically, so you don't need to type anything in.

With the frame selected, click Add flex in the properties panel (or press Shift+A) to turn on flex layout.
Look for Layout in the section on the right pannel

Select the dropdown for W (width) and select Fixed.

Repeat for H (height)

In the Flex section, make sure that the direction is set to Column (down arrow). If it shows Row, click the Column option in the Flex section.

What does Direction mean within a Flex Box?

In flexbox, flex-direction controls which axis your items flow along - basically, whether they stack horizontally or vertically.

row (the default): items line up left to right, like words in a sentence. The main axis runs horizontally.
column: items stack top to bottom, like a list. The main axis runs vertically.

In the Flex section of the properties panel, set Padding to 24px

Padding vs gap: which icon is which?

In the properties panel, the padding icon has four inward-facing arrows (the space inside the frame's edges). The gap icon looks like two parallel dashes with space between them (the space between children).

Set the Gap to 24px.

Make sure the Grid Alignment is set to the top left (the six dots)

In the Fill section of the properties panel, click the colour swatch and enter #F3F4F6 to apply a light gray background.

Press T (or click the text icon in the toolbar), then click inside the artboard to place the cursor.
Type AI Skills Explorer 2026.

With the text still selected, use the properties panel to set the text size to 32px and the weight to Bold.

Click Wrap in flex in the properties panel (or press Shift+A).
Paper wraps the text in a new flex frame - this becomes your header section.

Notice in the left pannel, that you now have two frames:

Select the new header frame that your text lives in (click its name tag at the top-left corner).
In the Layout section of the properties panel, make sure that the H and W input is selected as Fit.
This means our Header Frame auto-sizes around the title.

Flex vs absolute positioning

Paper's docs emphasize that you get the best results when your design structure is optimized for code. Flex layouts and containers make it easy for the agent to understand your layout. Absolute positioning or overlapping elements make it much harder for the agent to understand your intent during code generation.

Build the Skill Category Cards

Press F and drag a new frame directly below the header frame, inside the main artboard. This becomes the row container for your three skill cards.

Click Add flex on the row frame, set Direction to Row in the Flex section, and set Gap to 16px.

Press F again and drag a smaller frame inside the row. This is your first card.
Don't worry about being exact with the dimenstions! We'll get Claude Code to clean it up for us later.
The important thing is having the components on the canvas.

Select the card.
In the Size section of the properties panel, click the W input and choose Fill container.
This means the card fills the row's available width equally with the other cards you'll add.

With the card still selected, click Add flex and set Direction to Column.

In the Flex section, set Padding to 16px all around.
In the Radius section of the properties panel, set the card's border radius to 24px.

In the Fill section, set the background colour to white (#FFFFFF).
Leave the card empty, as Claude Code populates it with real data in Step 4.

Select the card and press Cmd+D (macOS) or Ctrl+D (Windows) twice to duplicate it. You should end up with three empty cards sitting side by side in the row.
Don't worry if your dimensions look different to the screenshots!

Why duplicate?

Building one card and duplicating it is faster than creating three from scratch. It also keeps padding and spacing consistent across every card. Claude Code populates every card with real data in Step 4.

Add the Trending AI Tools Section

Instead of building the next section from scratch, you'll duplicate two things you already have; the header title and the skill cards row.

Then we'll let Paper's AutoFlex stack them below the cards row. This will create a new Trending section. This is the component-reuse workflow Paper is built for, and the same trick Claude Code will rely on when generating code later.

Select the AI Skills Explorer 2026 title at the top of your artboard.
Press Cmd+D (macOS) or Ctrl+D (Windows) to duplicate it.

Press the down arrow key to drop the duplicate below the skill cards row. Paper's AutoFlex places it as the next child in the main artboard's flex column.

Change the text to Trending AI Tools and resize it from 32px to 24px bold.

Select the skill cards row frame above.

Press Cmd+D (macOS) or Ctrl+D (Windows) to duplicate the frame. The duplicate appears directly on top of the original.

Press the down arrow key to drop the duplicated row below the Trending AI Tools title. AutoFlex snaps it in as the next child of the main artboard.

Duplicate one tool card once more so you have four cards total.

Feel free to re-size your cards as you like! You can also just leave them as is, and trust in Claude to update the formatting later on.

Review your full layout to confirm three sections stacked vertically: the header, the skill cards row, and the Trending AI Tools row.

What your canvas should look like now

Your Paper canvas should show a clean dashboard with a light gray background. At the top is the AI Skills Explorer 2026 header. Below that, three equally-sized white cards sit in a horizontal row. Below those, a Trending AI Tools row with four smaller cards. Every bit of text is placeholder content for now, that's the whole point. Don't worry if it doesn't look perfect!

✔️ My layout looks right

Nice work! Your canvas is structured and ready for real content. Every frame, every gap, every padding value is live HTML and CSS that Claude Code will read in the next step.

ⓧ My cards are stacked vertically

That's okay! Let's troubleshoot:

Make sure the parent container frame is set to flex with a row (horizontal) direction, not column. Select the container frame and check the flex direction in the properties panel.
Confirm that the cards are direct children of the row container, not nested inside extra frames.
Check that each card's width is set to fill the available space, not a fixed width that exceeds the row.
Still stuck? help me fix my Paper layout.

Still stuck?

Get help with your error or share your error with the NextWork community!

Your layout is built and ready. Next up, you'll hand the canvas back to Claude Code and let it research the latest AI trends, then watch it write real data into your cards live!

Populate Your Design With Researched AI Trend Data

Your dashboard's skeleton is on the canvas, header, three empty skill cards, and a Trending AI Tools row. Now it's time to fill them with real data.

In this step, you'll hand Claude Code the wheel. It will read your layout through MCP, research the latest AI trends, and write real data directly onto your canvas using tools like set_text_content and write_html. No exporting, no copy-pasting, no manual typing.

In this step, get ready to:

Populate skill cards with researched AI skill names, demand levels, and salary ranges.
Fill the Trending AI Tools section with real tool names, descriptions, and categories.
Review and polish the data-populated design for visual consistency.

Populate Skill Cards With Researched Data

Claude Code can research information and use MCP tools to update your Paper canvas in real time. Instead of manually typing data into each card, you'll give Claude Code a single prompt and watch it fill in all three skill cards.

Make sure Paper Desktop is open with your AI Skills Explorer design file loaded.
Switch to Claude Code in your terminal.
Enter the following prompt:

Look at my Paper design. Research the top 3 in-demand AI skills for 2026 and update the skill cards with real data including skill names, demand levels, and salary ranges.

Keep an eye on your terminal to approve Claude when prompted.

Switch to your Paper Desktop window and watch the canvas update.

Claude Code reads the structure of your design through MCP, identifies the three empty skill cards, and uses tools like set_text_content to write real skill names, salary figures, and demand indicators into each one.

What your cards should show

Each of your three skill cards should now display a real AI skill name (such as prompt engineering, machine learning, or AI agent development), a demand level, and a salary range. The exact data depends on what Claude Code researches, so your results may differ from someone else's, that's expected.

Mind your MCP tool call budget

Paper's free tier includes 100 MCP tool calls per week. Each action Claude Code takes on the canvas counts as one or more calls. A typical data population prompt uses 5-15 calls, so avoid running the same prompt repeatedly.

Populate the Trending AI Tools Section

Enter the following prompt in Claude Code:

Research the most popular AI tools right now and update the Trending AI Tools section in my Paper design with real tool names, descriptions, and categories.

Same deal! Approve Claude as needed, and watch the magic happen.
Switch to Paper Desktop and verify that all four tool cards now display real tool names and descriptions.

But mine looks different!

That's totally okay! It's one of the joys of working with Claude Code and writing your own unique app. Lean in, and make it your own.

If the descriptions feel too generic, follow up with a refinement prompt:

The tool descriptions are too generic. Update each tool card in my Paper design with more specific descriptions including what each tool is best used for and who uses it.

The magic of a real HTML canvas

Paper's canvas is made of real HTML and CSS. Every text element, card, and container is a DOM node. When Claude Code calls set_text_content or write_html, it's directly modifying real HTML elements on your canvas. There's no export step, no format conversion, and no translation layer.

Review and Polish

Placeholder text is predictable in length. Real data is not. Skill names, salary ranges, and tool descriptions all vary in length, which can throw off your layout. This is the design polish step where you make everything look intentional.

Check each skill card for text overflow or awkward line breaks.
Resize cards or text areas that look cramped with real content.
Adjust padding, gap, or font sizes if the real data changed the visual balance of any section.
Ask Claude Code to help with adjustments through the MCP connection. For example:

The third skill card looks too tall compared to the others. Make all three cards the same height in my Paper design.

✔️ My cards look great

Ayo, your design is now a live, data-populated dashboard that reflects what's actually happening in the AI industry right now. Every bit of text on that canvas is a real DOM node, which is exactly what the next step needs.

ⓧ MCP connection dropped mid-session

That's okay! The most common cause of MCP issues is a long-running agent session. Let's troubleshoot:

Restart Claude Code completely and run /mcp again to re-establish the connection.
Confirm that Paper Desktop is open with your design file loaded. The MCP server only runs when a file is open.
If you're on a Pro/Max plan and hit a usage limit, wait for your window to reset before retrying.
Still stuck? Help me troubleshoot my Paper MCP connection.

Still stuck?

Get help with your error or share your error with the NextWork community!

Your design is now stuffed with real, researched data, skill cards, tool cards, and a polished layout. Next up, the real payoff: Claude Code will read this exact canvas and generate a production-ready React + Tailwind project from it!

Generate a React + Tailwind Project From Your Design

Your Paper canvas is a data-populated, real HTML and CSS version of the AI Skills Explorer dashboard. Every frame is a DOM node. Every padding value is a real CSS property. This is the moment where "design-to-code" stops being a marketing line and becomes a single prompt.

In this step, you'll create a project folder, select your full artboard in Paper, and ask Claude Code to generate a React + Tailwind project from it. Then you'll run it in the browser and compare it to the design side by side.

In this step, get ready to:

Select your main artboard in Paper and confirm your project folder is ready in the terminal.
Prompt Claude Code to generate a React + Tailwind project from your design.
Run the dev server and compare your live site against your Paper design.

Select Your Artboard and Check Your Folder

Before Claude Code can generate anything, it needs to know what to read from Paper and where to write the project on your machine. Both of those signals come from state the learner sets up: the selected artboard in Paper, and the working folder in the terminal.

In Paper Desktop, click the name tag in the top-left corner of your main 1512x982 artboard to select the entire design. You should see a blue outline around the whole thing.

Switch to your terminal and confirm you're still inside ~/Desktop/ai-skills-explorer (from Step 2). If you're not, run cd ~/Desktop/ai-skills-explorer to move back in.
Make sure Claude Code is running (claude) inside that folder.

Why React + Tailwind?

Paper's official documentation explicitly recommends React and Tailwind as the tech stack for code generation. Paper's get_jsx MCP tool can output your design in Tailwind format, so the conversion from canvas to code is direct. Claude Code also has extensive training data on React component patterns and Tailwind utility classes, which means it can generate well-structured components that closely match your design.

Generate the Project

In Claude Code, enter the following prompt:

Build a website in this folder using the AI Skills Explorer design I have selected in Paper. Use React and Tailwind for the styling.

Claude Code examines your selected artboard through the MCP connection. It reads the HTML and CSS structure, text content, colors, spacing, and layout of every element. It then scaffolds a full React project with Tailwind classes that match your design's visual properties.

Accept each file change when Claude Code asks for permission to create files.

Conserve your MCP budget

Paper's free tier includes 100 MCP tool calls per week. A full code generation session can use a significant number of calls. Avoid running the same prompt repeatedly, if something doesn't look right, use a targeted follow-up prompt to fix the specific issue instead of regenerating the entire project.

Run the Dev Server and Compare Results

Look for a URL in Claude Code's output. This is usually http://localhost:5173 (Vite) or http://localhost:3000.
Open that URL in your browser.
Place your browser window side by side with your Paper design and compare the layout, colors, and content.

The mapping from design to code

Each major section of your Paper design (header, skill cards, trending tools) typically becomes its own React component file. The flex layouts, padding, gap, and border-radius values from your Paper frames translate into Tailwind classes like flex, gap-4, p-6, and rounded-xl. This is the payoff of designing in a code-native tool, there's no translation step because the design was always real code.

✔️ My site is running

Beautiful! You just took a design from canvas to live code in a single prompt. Every skill card, every tool card, every colour value you see in the browser came straight out of your Paper file.

ⓧ The dev server won't start

That's okay! Let's troubleshoot:

Check the package.json file in your project folder for the correct start command. Common commands are npm run dev or npm start.
Ask Claude Code directly: Start the dev server for this project.
If the MCP connection dropped during generation, restart Claude Code, reopen Paper Desktop, and try the generation prompt again.
If dependencies didn't install, ask Claude Code: Run npm install in this project, then start the dev server.
Still stuck? Help me troubleshoot my dev server.

Still stuck?

Get help with your error or share your error with the NextWork community!

You've just completed a full design-to-code workflow powered by MCP, something that would've taken a hand-off, an export, and hours of translation in any other tool. Next up, a little stretch goal: hand Claude Code a red pen and see what it does with your design choices!

Secret mission

You've been directing Claude Code the whole time, telling it what to build, what to populate, what to fix.

Flip the dynamic.

In this secret mission, you'll hand Claude Code your finished design and ask it to critique it, then watch it modify your canvas without asking permission first. The real test isn't whether the agent can make changes. It's whether you can evaluate its design calls on the merits.

Give Claude Code a Red Pen

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs on Paper's free tier and your existing Claude Pro or Max subscription, so there are no additional ongoing costs.

Resources you used:

Paper Desktop app with your AI Skills Explorer design file.
Claude Code with the Paper MCP plugin installed.
React + Tailwind project folder generated from your design.
Paper free tier MCP tool calls (100 per week, resets automatically).

✔️ Keep everything running

No action needed. Choose this if you are still actively building or want to iterate on your design.

Keep Paper Desktop installed and your design file saved.
Keep the Paper MCP plugin installed in Claude Code.
Keep your React + Tailwind project folder for further development.

Watch your MCP budget

The Paper free tier includes 100 MCP tool calls per week. Iteration is cheap but not free, spend the window on the most important changes.

✋ Pause - I'll come back to this later

Shut down running processes to free up memory, but keep all your files and data so you can pick up where you left off.

Stop the React dev server if it is still running by pressing Ctrl+C in the terminal.
Close Paper Desktop. The MCP server shuts down automatically when no file is open.
Exit Claude Code by typing /exit.
Keep your design file and project folder saved on your computer.

ⓧ Delete - I don't want to use this again

Remove all project resources and start fresh if you ever want to rebuild.

Delete your React + Tailwind project folder (ai-skills-explorer).
Delete your AI Skills Explorer design file from within Paper Desktop.
Uninstall the Paper MCP plugin from Claude Code if you no longer need it.
Optionally uninstall Paper Desktop if you do not plan to use it again.

Uninstalling Claude Code?

The Paper MCP plugin is specific to this workflow, but Claude Code itself is a general-purpose tool. We recommend keeping Claude Code installed even if you delete this project.

That's a wrap!

Nice work! 🚀 You've just designed a complete AI Skills Explorer dashboard in Paper and turned it into a working React + Tailwind project, all by connecting two cutting-edge tools through MCP.

You've learned how to:

📄 Set up Paper Desktop and design a multi-section dashboard layout on its code-native HTML/CSS canvas using flexbox containers, cards, and responsive spacing.
🔌 Connect Claude Code to Paper via the MCP plugin and use bidirectional communication to read and write design elements directly on your canvas.
⚛️ Populate your design with real, researched AI trend data and generate a production-ready React + Tailwind project directly from your Paper design, proving a complete design-to-code workflow powered by MCP.
💎 Hand Claude Code a red pen, prompt it to act as a senior product designer, critique your layout, and modify existing elements on the canvas, then evaluate its design reasoning against your own (Secret Mission).

Ready to quiz yourself? 💪

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!