Design to Code with Paper and Claude

Design an AI dashboard in Paper and generate React code via MCP.

Introduction

30 Second Summary

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

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

What You'll Build

An AI Skills Explorer dashboard designed in Paper's code-native canvas and brought to life as a React + Tailwind project through Claude Code's MCP connection.

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

  • A Paper design file containing the full AI Skills Explorer layout built on a real HTML/CSS canvas.
  • A working MCP connection between Claude Code and Paper for bidirectional design-to-code communication.
  • Real AI trend data researched and written directly into your design by Claude Code.
  • A production-ready React + Tailwind project generated from your Paper design.
  • Secret Mission: Let Claude Code handle the design work too, prompting it to create, populate, and style a 90-day learning path section directly on your canvas.

Are there any prerequisites?

You need Claude Code installed and authenticated with a Claude Pro or Max subscription. No prior experience with Paper or MCP is required.

Install Paper Desktop and Create Your Design File

Before you can design your AI Skills Explorer, you need a canvas to work on. Paper is a code-native design tool where every element on the canvas is real HTML/CSS. This means AI tools like Claude Code can read and write to your design natively, with no export or translation step required.

In this step, you will install Paper Desktop and create the design file that will serve as your project's visual source of truth.

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 understand how its layout properties map to CSS.
Download and Install Paper Desktop

Paper's MCP server only runs in the desktop app. The browser version of Paper does not include it. You need the desktop version for Claude Code to communicate with your designs.

  • Go to paper.design/downloads and download the installer for your operating system.
  • Run the installer and follow the prompts.
  • If you do not have a Paper account, click Sign Up and create a free account.
  • Launch Paper Desktop and sign in.

What is Paper?

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 are placing a real HTML element with real CSS styling.

This is what makes it possible for AI agents to read and write to your design without any export step.

Create Your AI Skills Explorer Design File
  • In Paper Desktop, click New File to create a blank design file.
  • Name the file AI Skills Explorer so it is easy to identify later.

When a file is open in Paper Desktop, the MCP server starts automatically in the background at http://127.0.0.1:29979/mcp. You do not need to interact with this URL directly. It is the endpoint that Claude Code will use to communicate with your design.

What is an MCP Server?

MCP (Model Context Protocol) is a standard that lets AI agents communicate with external tools. Paper's MCP server exposes 24 tools that allow agents to read your design, create elements, update text, and more. Think of it as a bridge between Claude Code and your canvas.

Explore the Paper Canvas

Before building the real layout, take a minute to understand how Paper's canvas works. The layout properties you see in Paper map directly to CSS properties, which is why the design-to-code translation is so seamless.

  • Click on the canvas to create a frame. This is Paper's version of an artboard.
  • Inside the frame, double-click to add a text element and type some placeholder text.
  • Add a rectangle shape to the frame.
  • Select your frame and look at the properties panel on the right side.

Notice the layout options like flex direction, padding, and gap. These map directly to CSS properties like flex-direction, padding, and gap. Every visual change you make in the properties panel is a real CSS change under the hood.

  • Delete the test elements when you are done exploring.

Pro tip: use flex layouts

Paper's documentation recommends using flexbox layouts and containers so that AI agents can easily understand your layout structure. Avoid absolute positioning or overlapping elements. These make it harder for the agent to interpret your design intent.

Your canvas is ready and your design file is open. Next up, you will connect Claude Code to Paper so the two tools can talk to each other through MCP.

Connect Claude Code to Paper via MCP

Your Paper design file is open and ready. Now you need to bridge the gap between your design canvas and your coding agent. MCP (Model Context Protocol) is the standard that makes this possible. It gives Claude Code 24 bidirectional tools to read and write elements directly on your Paper canvas. Once connected, Claude Code can see your design, create elements, update text, and extract code from it.

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 specific plugin from.

  • Open your terminal and start Claude Code.
  • Run the following command to add Paper's plugin marketplace:
/plugin marketplace add paper-design/agent-plugins
  • Run the next command to install the Paper Desktop plugin:
/plugin install paper-desktop@paper

What do these commands do?

The first command registers Paper's plugin marketplace so Claude Code knows where to find Paper's plugins. The second command installs the specific plugin that connects Claude Code to your local Paper Desktop app. This plugin tells Claude Code how to communicate with Paper's MCP server, which runs locally at http://127.0.0.1:29979/mcp whenever a file is open in Paper Desktop.

Verify the MCP Connection

The plugin is installed, but you need to confirm that 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.

  • Make sure Paper Desktop is open with your AI Skills Explorer design file loaded.
  • In Claude Code, run the following command:
/mcp

What should I see?

You should see the Paper MCP server listed among your connected servers. This confirms Claude Code can reach Paper's local MCP endpoint and has access to all 24 read and write tools.

I see Paper listed

You are all set. Claude Code has a live connection to your Paper canvas.

Paper is not listed

Try these fixes in order:

  • 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 are using WSL on Windows, enable mirrored mode networking in your WSL settings so the local MCP server is accessible.

Still not connecting?

If none of the above fixes work, help me troubleshoot my Paper MCP connection in Claude Code.

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 that the MCP connection works in the write direction, meaning Claude Code can push changes to your design.

  • Type the following prompt in Claude Code:
Create a red rectangle in Paper
  • Switch to your Paper Desktop window.

A red rectangle should appear on your canvas. Claude Code used the write_html MCP tool to create a real HTML element with CSS styling directly in your design file.

Why is this different from other design tools?

In tools like Figma, designs are SVG-based and require a translation step to become code. Paper's canvas is real HTML and CSS. When Claude Code writes a red rectangle, it is writing an actual DOM node with CSS properties. There is no export, no conversion, and no format mismatch. The design IS the code.

  • Delete the test rectangle from your canvas when you are done.

Your design tool and coding agent are now connected. Next up, you will use Paper's canvas to build the full layout of your AI Skills Explorer dashboard.

Design the AI Skills Explorer Layout in Paper

Your Paper canvas is connected to Claude Code and ready for action. Now it is time to build the actual layout of your AI Skills Explorer dashboard.

Since Paper renders real HTML/CSS under the hood, every frame and text element you place 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.

In This Step, Get Ready To:
  • Create the main artboard with a header section using flexbox layout.
  • Build three skill category cards arranged in a horizontal row.
  • Add a Trending AI Tools section with four smaller tool cards.
Create the Main Artboard and Header

Every Paper design starts with a frame, which is Paper's version of an artboard. This frame acts as the root container for your entire dashboard. You will set it up with a vertical flex layout so each section stacks cleanly from top to bottom.

  • Click on the canvas to create a new frame.
  • In the properties panel on the right, resize the frame to 1280x900 pixels.
  • Set the layout to flex with a vertical (column) direction.
  • Set the padding to 24px and the gap to 24px.
  • Set the background color to a light gray like #F3F4F6.

Your artboard is the root container. Now add the header inside it.

  • Inside the artboard, create a new frame for the header section.
  • Double-click inside the header frame and add a title text element with the text "AI Skills Explorer 2026" at 32px bold.
  • Add a subtitle text element below it in a smaller size and lighter color.

Why flex layouts instead of 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

The skill cards are the centerpiece of your dashboard. You will create three cards arranged in a horizontal row, each displaying a skill name, demand level, salary range, and a call-to-action button.

  • Below the header frame, create a new frame for the card row.
  • Set this row frame's layout to flex with a horizontal (row) direction and 16px gap.
  • Inside the row, create the first card frame.
  • Set the card to flex column direction, 16px to 24px padding, 12px border-radius, and a white background.
  • Add placeholder text elements inside the card for a skill name, demand level, salary range, and a brief description.
  • Add a "Learn More" button by creating a small frame with a blue background (#3B82F6), rounded corners, and white text inside.
  • Set the card's width to fill the available space equally in the row.
  • Duplicate the card two more times so you have three cards total in the row.

Pro tip: duplicate to stay consistent

Building one card and duplicating it is faster than creating three from scratch. It also ensures consistent padding, font sizes, and spacing across all cards. You will swap out the placeholder text later when Claude Code populates real data.

Add the Trending AI Tools Section

The final section of your dashboard showcases trending AI tools. These cards are slightly smaller than the skill cards and arranged in a row of four.

  • Below the skill cards row, create a new flex column frame.
  • Add a section title text element with the text "Trending AI Tools" at 24px bold.
  • Inside this frame, create a flex row container with 12px to 16px gap.
  • Build one tool card inside the row. Make it slightly smaller than the skill cards, with a tool name, a short description, and a category label.
  • Duplicate the tool card three more times so you have four cards total.

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

What should I see?

Your Paper canvas should show a clean dashboard layout with a light gray background. At the top is a header with the title and subtitle. Below that, three equally-sized white cards sit in a horizontal row. Below those, a "Trending AI Tools" heading leads into a row of four smaller cards. All text is placeholder content for now.

Cards stacking vertically instead of sitting in a row?

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. Also confirm that the cards are direct children of the row container, not nested inside extra frames.

If you are still having trouble, help me fix my Paper layout.

Your dashboard layout is complete. Every frame, card, and text element you placed is a real HTML/CSS node on Paper's canvas. Next up, you will use Claude Code's MCP connection to research live AI trends and write real data directly into these placeholder cards.

Populate Your Design with Real AI Trend Data

Your AI Skills Explorer has a clean layout with three skill cards and four tool cards, but every card is filled with placeholder text. The whole point of connecting Claude Code to Paper through MCP is that Claude Code can read your design, research real data, and write it directly into your canvas. In this step, you will use that bidirectional connection to replace every placeholder with real AI trend data.

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 like set_text_content and write_html to update your Paper canvas in real time. Instead of manually typing data into each card, you will 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.
  • Switch to your Paper Desktop window and watch the canvas update.

Claude Code reads the structure of your design through MCP, identifies the three skill cards, and uses tools like set_text_content to replace placeholder text with real skill names, salary figures, and demand indicators.

What Should I See?

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.

Pro tip: watch your MCP 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. Avoid running the same prompt repeatedly to conserve your budget.

Populate the Trending AI Tools Section

Your four tool cards in the Trending AI Tools section still have placeholder content. You will use the same approach to fill them with real tool data.

  • 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.
  • Switch to Paper Desktop and verify that all four tool cards now display real tool names and descriptions.

If Claude Code populates generic descriptions that feel vague, try a follow-up prompt asking for more specific details.

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.

What does this prompt do?

This follow-up prompt tells Claude Code to re-read the tool cards it just populated and replace the descriptions with richer content. Claude Code uses the same set_text_content MCP tool to overwrite the text nodes on your canvas. Each update counts toward your weekly MCP call budget, so only use follow-up prompts when the initial result needs improvement.

Why Does This Work So Smoothly?

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

Review and Polish Your Data-Populated Design

Placeholder text is predictable in length. Real data is not. Skill names, salary ranges, and tool descriptions 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.

You can also 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.

What does this prompt do?

This prompt tells Claude Code to read the current dimensions of all three skill cards, identify the inconsistency, and use MCP tools like update_styles to adjust their CSS properties until they match. You are using natural language to make CSS changes on a live design canvas.

Claude Code Not Updating Your Canvas?

The most common cause of MCP issues is a long-running agent session. Restart Claude Code completely and run /mcp to re-establish the connection. Also confirm that Paper Desktop is open with your design file loaded. The MCP server only runs when a file is open.

Still stuck? Help me troubleshoot my Paper MCP connection.

Your design is now populated with real, researched AI trend data. Next up, you will turn this polished design into a working React + Tailwind project that runs in your browser.

Generate a React + Tailwind Project from Your Design

Your Paper canvas now holds a polished, data-rich AI Skills Explorer design. Every frame, card, and text element on that canvas is a real HTML/CSS DOM node. Claude Code can read that structure through the MCP connection, extract the layout and content, and scaffold a working codebase from it. In this step, you will turn your design into a live React + Tailwind CSS project you can open in your browser.

In This Step, Get Ready To:
  • Create a project folder and select your full design in Paper.
  • 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.
Prepare Your Project Folder and Select Your Design

Claude Code needs an empty folder to scaffold the project into. You also need to select the artboard in Paper so Claude Code knows which design to read through the MCP connection.

  • Open your terminal and create a new empty folder for the code project.
  • Navigate into the folder and start Claude Code.
mkdir ai-skills-explorer
cd ai-skills-explorer
claude
  • Switch to Paper Desktop.
  • Click on the main artboard (the 1280x900 frame) to select the entire design.

Selecting the artboard tells the MCP server which part of the canvas Claude Code should read. The get_jsx tool supports Tailwind output format natively, so the translation from Paper's HTML/CSS canvas to Tailwind utility classes is accurate.

Generate the React + Tailwind Project

Paper's official documentation explicitly recommends React and Tailwind as the tech stack for code generation. These are technologies the agent is deeply familiar with, which means the output quality is higher than a generic HTML export.

Why React and Tailwind?

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.

  • 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.

What Does This Prompt Do?

Claude Code examines your selected artboard through the MCP connection. It reads the HTML/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.

This process may take a minute or two as Claude Code reads your design, creates the project structure, installs dependencies, and generates components. You will see Claude Code working through each step in the terminal output.

Pro tip: watch 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 does not 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

Claude Code typically starts the dev server automatically after scaffolding the project. If it does not, you can start it manually.

  • 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.

What Should I See?

Your browser should display the AI Skills Explorer dashboard with the same three sections you designed in Paper: the header, the skill category cards row, and the Trending AI Tools section. The colors, font sizes, spacing, and card content should closely match your Paper design.

If parts of the layout do not match your design, you can ask Claude Code to fix specific differences.

  • Try a targeted fix prompt if needed, for example: "The skill cards should be in a horizontal row, not stacked vertically. Fix the layout to match my Paper design."
  • Explore the src folder in your project directory to see how each section of your design maps to its own React component with Tailwind utility classes.

How Does the Design Map to Components?

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 is no translation step because the design was always real code.

Dev Server Not Starting?

If Claude Code did not start the dev server automatically, check the package.json file in your project folder for the correct start command. You can also ask Claude Code: "Start the dev server for this project." If the MCP connection dropped during generation, restart Claude Code and try again. Help me troubleshoot my dev server.

You now have a complete design-to-code pipeline. Your Paper design is the visual source of truth, and Claude Code turns it into production-ready React components through MCP. Next up, take this workflow even further by letting Claude Code handle the design work too.

Secret mission

Let Claude Code Design for You

In the main steps, you designed the layout by hand and used Claude Code to populate data and generate code. Now flip the script. Let Claude Code handle the design work too, creating a brand-new learning path section directly on your Paper canvas from a single prompt, then regenerating your live site to include it.

Before you go

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/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.

Pause - I'll come back to this later

Shut down running processes to free up memory while keeping your files saved for later.

  • 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.

  • Delete your React + Tailwind project folder (ai-skills-explorer).
  • Delete your Paper 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.

Mission accomplished

Nice work! You 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.

Here's what you learned:

  • Set up Paper Desktop and designed a multi-section dashboard layout on its code-native HTML/CSS canvas using flexbox containers, cards, and responsive spacing.
  • Connected Claude Code to Paper via the MCP plugin and used bidirectional communication to read and write design elements directly on your canvas.
  • Populated your design with real, researched AI trend data and generated a production-ready React + Tailwind project directly from your Paper design, proving a complete design-to-code workflow powered by MCP.
  • Let Claude Code handle the design work too, prompting it to create, populate, and style a 90-day learning path section directly on your canvas, then regenerated the live site to include it.

Ready to quiz yourself?