Design a Landing Page with Paper

Build a React/Tailwind landing page from a Paper Desktop design via MCP.

Introduction

30 Second Summary

Every time a designer hands off a mockup to a developer, details get lost in translation. What if your design tool and your code editor could talk directly through an AI agent instead?

In this project, you will design a landing page in Paper Desktop and use Claude Code to generate a working React/Tailwind CSS website from it. The connection runs through MCP, keeping your design canvas and your codebase in sync.

What You'll Build

A multi-section landing page for a fictional product, designed on Paper Desktop's HTML/CSS canvas and converted into a live website by Claude Code through the Paper MCP server.

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

A multi-section landing page design in Paper Desktop with hero, features, and CTA sections.
A working MCP connection between Paper Desktop and Claude Code that enables bidirectional design-to-code flow.
A React/Tailwind website generated from your Paper design by an AI agent.
A live data integration that pulls real API content into both your design and your website (secret mission).

Are there any prerequisites?

This project assumes you have design experience with a tool like Figma or similar. You should be comfortable running terminal commands. You also need Claude Code already installed and working on your machine.

Install Paper Desktop and Node.js

In this project, you'll design a landing page on Paper Desktop's canvas and use Claude Code to turn it into a working React/Tailwind CSS website.

Before you start designing, you need Paper Desktop installed and a few developer tools ready. This step gets everything set up.

In this step, get ready to:

Install Paper Desktop and create your account.
Install Node.js for running your website locally.
Verify Claude Code and Git are ready.

Download and install Paper Desktop

Paper Desktop is the design tool you'll use throughout this project. Unlike traditional design tools that use vector graphics, Paper's canvas is built on HTML/CSS, which means AI agents can read and write to your designs directly.

Open the Paper Desktop download page in your browser.
Under Paper Desktop, click the download button for macOS (v0.1.13).
Open the downloaded .dmg file.
Drag Paper into your Applications folder.

Now launch Paper Desktop and set up your account.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type Paper and press Enter to open it.
Create a free account, or sign in if you already have one.

What is Paper Desktop?

Paper is a design tool built on web standards. Its canvas uses real HTML and CSS instead of vector graphics like Figma or Sketch.

This means AI agents can read the DOM structure of your designs and write code back to the canvas. That bidirectional access is what makes the agentic design workflow possible.

Can't find Paper after installing?

Make sure you dragged Paper into your Applications folder from the DMG window. If you ran it directly from the DMG, it won't persist after you eject the disk image.

help me troubleshoot installing Paper Desktop

Install Node.js

Your landing page website needs Node.js to run locally. It powers the development server that lets you preview your site in a browser as you build it.

Check if Node.js is already installed by running this command in your terminal:

node --version

I see a version number

Node.js is already installed. You're good to go.

Command not found

Node.js isn't installed yet. Follow these steps to install it.

Open the Node.js download page in your browser.
Download the v24 LTS version for your operating system.
Run the installer and accept the default settings.
Close and reopen your terminal, then verify the installation by running:

node --version

You should see a version number starting with v24.

Confirm npm (Node's package manager) is also available by running:

npm --version

You should see a version number printed in the terminal.

Still seeing command not found after installing?

Make sure you closed and reopened your terminal after installation. The terminal needs a fresh session to pick up the new node command.

help me troubleshoot my Node.js installation

Verify your tools are ready

You also need Claude Code and Git for this project. Claude Code is the AI agent that reads your designs and generates code. Git tracks your changes so you can create checkpoints.

Confirm Claude Code is working by running this command:

claude --version

I see a version number

Claude Code is ready.

Command not found

Claude Code is a prerequisite for this project. Follow the Claude Code installation guide to install it before continuing.

Confirm Git is available by running this command:

git --version

I see a version number

Git is ready.

Command not found

Git is not installed yet. Download it from the official Git website and run the installer for your operating system.

After installing, close and reopen your terminal.
Run git --version again to confirm it works.

You should now have four tools ready: Paper Desktop running with your account, Node.js installed, Claude Code working, and Git available.

Your environment is ready. Next up, you'll connect Claude Code to Paper Desktop through MCP so the two tools can talk to each other.

Connect Claude Code to Paper via MCP

In the previous step, you installed Paper Desktop, confirmed Node.js is ready, and verified Claude Code is working. Right now, though, these tools are completely isolated from each other.

The bridge between them is MCP (Model Context Protocol). MCP gives Claude Code direct access to your Paper canvas so it can read your designs and modify them in real time. In this step, you'll install the Paper plugin and verify the connection is live.

In this step, get ready to:

Install the Paper MCP plugin in Claude Code.
Verify the connection between Claude Code and your Paper canvas.
Explore the read and write tools that MCP exposes.

Add the Paper plugin to Claude Code

Paper's MCP integration is available as a plugin you install directly inside Claude Code. You'll register Paper's plugin marketplace first, then install the Paper Desktop plugin from it.

Open your terminal and start Claude Code by running:

claude

You're now inside Claude Code's interactive session. The next two commands are slash commands you type directly in this session.

Add the Paper plugin marketplace by running this command inside Claude Code:

/plugin marketplace add paper-design/agent-plugins

Install the Paper Desktop plugin by running:

/plugin install paper-desktop@paper

What do these commands do?

/plugin marketplace add registers Paper's plugin marketplace with Claude Code. Think of it like adding a new app store. You only need to do this once.
/plugin install installs the specific plugin that lets Claude Code communicate with Paper Desktop's MCP server. The plugin handles all the connection details automatically.

Plugin command not working?

Make sure you're typing the commands inside Claude Code's interactive session, not in a raw terminal prompt. You should see Claude Code's interface, not a standard terminal cursor.
Check that the slash / is included at the start of each command. Without it, Claude Code treats the text as a natural language prompt.
If you see a network error, check your internet connection and try again.

Help me troubleshoot the Paper plugin installation in Claude Code

Verify the MCP connection

The Paper MCP server starts automatically when you have a file open in Paper Desktop. No manual server setup needed.

Switch to Paper Desktop.
Create a new file by clicking New File (or open an existing one).

Why do I need a file open?

The MCP server at http://127.0.0.1:29979/mcp only starts when a file is open in Paper Desktop. Without an open file, Claude Code has nothing to connect to.

Switch back to Claude Code in your terminal.
Check that the Paper MCP server appears by running:

/mcp

You should see the Paper MCP server listed in the output. This confirms Claude Code knows how to reach your Paper canvas.

Test the connection by typing this prompt in Claude Code:

Create a red rectangle in Paper

Switch to Paper Desktop. You should see a red rectangle on your canvas.

Don't see the rectangle?

Make sure you have a file open in Paper Desktop. The MCP server only runs when a file is open.
If /mcp does not show the Paper server, exit Claude Code and start it again with claude. Long-running sessions can sometimes drop the MCP connection.
Check that you ran both plugin commands earlier. Run /plugin install paper-desktop@paper again to be sure.

Help me debug the MCP connection between Claude Code and Paper Desktop

Explore the tools MCP exposes

That red rectangle appeared because Claude Code used one of 24 tools that the Paper MCP server exposes. These tools fall into two categories.

What tools does the Paper MCP server expose?

Read tools let Claude Code inspect your design. These include:

get_selection to see what you've selected on the canvas.
get_jsx to read the structure of your design as JSX.
get_screenshot to capture a visual snapshot of the canvas.
get_computed_styles to read exact CSS values from any element.

Write tools let Claude Code modify your canvas. These include:

create_artboard to add new artboards to the canvas.
write_html to create or replace elements on the canvas.
set_text_content to change text inside any element.
update_styles to adjust CSS styles on any element.

This bidirectional access is what powers the agentic design workflow. Claude Code reads your design structure and writes changes back to your canvas through the same connection. You design, the agent builds, and updates flow in both directions.

Why bidirectional instead of read-only?

Many design tool integrations only let AI agents read from the design file. Paper's MCP gives Claude Code both read and write access. This means the agent can push code changes back into your canvas, keeping your design and code in sync without manual copying.

Your connection is live and working. Next up, you'll design a multi-section landing page on the Paper canvas that Claude Code will turn into a real website.

Design Your Landing Page in Paper

Your Paper Desktop canvas is now connected to Claude Code through MCP. Every element you design can be read, interpreted, and acted on by the agent.

In this step, you'll design the landing page directly on Paper's canvas. Because the canvas is built on HTML and CSS, the layout structure you create maps directly to code.

In this step, get ready to:

Create a hero section artboard with a headline, subtitle, and call-to-action button.
Build a features section with a 3-column card layout.
Add a CTA section to complete the landing page design.

Create the hero section artboard

The hero section is the first thing visitors see on a landing page. You'll design it on its own artboard so the agent can inspect and build it independently from the other sections.

In Paper Desktop, click anywhere on the empty canvas to deselect everything.
Create a new artboard by clicking the Artboard tool in the toolbar (or pressing A on your keyboard).
Set the artboard width to 1440px and height to 900px in the properties panel on the right.
Name the artboard Hero by double-clicking its name in the layers panel.

Now add the content elements that make up a hero section.

Add a container inside the artboard to hold your content. Use a flex layout on the container so elements stack vertically with consistent spacing.
Add a text element for the headline. Type something bold like Design at the Speed of Thought. Set the font size to something large and impactful (48px or above).
Add a second text element for the subtitle. Use a smaller font size and a muted color to create visual hierarchy.
Add a button element for the call-to-action. Give it a background color, padding, and text like Get Started.

Why does design structure matter for agents?

You get the best results when your design is structured like code. Using flex layouts and containers means the agent can understand your layout hierarchy directly from the DOM.

A messy design with absolutely-positioned elements forces the agent to guess at relationships between elements. Clean structure removes that guesswork.

Now add a GPU shader effect to give the hero section visual depth.

Open the Shaders panel in Paper Desktop.
Browse the available effects. Good options for a hero background include Grain Gradient (available in 7 animated shapes like wave, blob, and sphere) or Mesh Gradient.
Click or drag your chosen shader onto the artboard background.
Adjust the shader's parameters (colors, softness, intensity) using the controls in the right panel until you are happy with the look.

Pro tip: shader options

Paper includes GPU-accelerated shaders like Grain Gradient, Halftone CMYK, Liquid Metal, and God Rays. These are native to the canvas. The AI agent can read and manipulate shader parameters through MCP, so your visual effects carry through to the code generation step.

Your hero section should now have a headline, subtitle, CTA button, and a shader background. Make sure it looks polished before moving on.

Create the features section

The features section showcases what your product offers. You'll design it as a 3-column grid, which is a common layout pattern that agents handle well.

Create a second artboard on the canvas.
Set the width to 1440px and the height to 600px.
Name the artboard Features.

Now build the 3-column card layout inside this artboard.

Add a flex container that arranges 3 child containers in a row (horizontal flex).
In each child container, add an icon placeholder (a small shape or emoji), a feature title, and a short description.
Use consistent spacing, font sizes, and colors across all three cards.

Layer naming is critical for agent quality. The agent reads your layer names semantically to understand each element's purpose.

Double-click each layer name in the layers panel and rename them descriptively.
Use names like feature-card-1, feature-title, and feature-description so the agent knows what each element represents.

Why name your layers?

When the agent calls tools like get_selection or get_tree_summary, it sees your layer names in the response. A layer called feature-card-1 tells the agent this is a feature card component. A layer called Frame 47 tells it nothing.

In agentic design, your naming conventions become machine-readable instructions.

Create the CTA section

The final section is a call-to-action that closes out the landing page. Keep it simple and direct.

Create a third artboard on the canvas.
Set the width to 1440px and the height to 400px.
Name the artboard CTA.

Add a bold heading inside a flex container. Something like Ready to Get Started? works well.
Add a short paragraph below it with a supporting message.
Add a prominent button with text like Start Free Trial. Give it a contrasting background color so it stands out.
Name your layers descriptively, just like you did for the features section (e.g., cta-heading, cta-button).

You now have a three-section landing page design across three artboards: Hero, Features, and CTA. Each one uses flex layouts, descriptive layer names, and clean structure.

Design not looking right?

If elements are overlapping instead of stacking, make sure you are using a flex container as the parent. Select the container and set its layout to flex in the properties panel.

If your shader background is covering your text, check the layer order. The shader should sit behind the content container in the layers panel.

Help me fix my Paper Desktop layout.

Your landing page design is complete. Next up, you'll hand this design to Claude Code and watch it generate a working React/Tailwind CSS website directly from what you just designed.

Generate a React/Tailwind Website from Your Design

Your landing page design is complete in Paper Desktop. Three artboards with a hero section, a features grid, and a CTA are structured and ready for an agent to read.

In this step, you'll point Claude Code at your design through the MCP connection. The agent reads your canvas, extracts layout and styles, and generates a working React and Tailwind CSS website from what it finds.

In this step, get ready to:

Create a project folder for your website code.
Direct Claude Code to read your Paper design and scaffold a React/Tailwind project.
Run the development server and see your design as a live website.

Set up your project folder

Open a new terminal window.
Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder and move into it by running these commands:

mkdir paper-landing
cd paper-landing

Confirm you're in the right folder by running:

pwd

You should see a path ending in paper-landing.

Start Claude Code in this folder by running:

claude

Claude Code opens in your terminal with a prompt ready for input.

Seeing a 'File exists' error?

If paper-landing already exists from a previous attempt, delete it first and start fresh.

Delete the old folder by running:

rm -rf ~/Desktop/paper-landing

Then re-run the mkdir and cd commands above.

Help me troubleshoot creating my project folder.

Ask Claude Code to build the site from your design

Claude Code needs to see your design before it can build anything. By selecting an artboard in Paper, you tell the agent exactly which part of your design to start with.

In Paper Desktop, click on the Hero artboard to select it.
Switch to your Claude Code terminal and enter this prompt:

I'd like you to build a website in this folder using the sections I have in Paper. Start with the hero section I have selected. Use React and Tailwind for the styling.

What happens next?

Claude Code uses the Paper MCP tools to inspect your selected artboard. Here's what it does behind the scenes:

Calls tools like get_screenshot, get_jsx, and get_computed_styles to understand your layout, colors, and typography.
Scaffolds a React/Tailwind project with package.json, source files, and dependencies.
Translates your design into React components with Tailwind utility classes.

Claude Code asks for permission to use the Paper MCP read tools. These are safe to always allow.
Grant permission when prompted by selecting Always allow.

Watch as Claude Code scaffolds the project and generates your hero section component. You'll see it creating files, installing dependencies, and writing React code in your terminal.

Once Claude Code finishes, confirm the project files exist by running this in a separate terminal tab:

ls ~/Desktop/paper-landing

You should see project files including src/, package.json, and index.html.

Agent not reading your design?

Make sure the Hero artboard is selected (clicked) in Paper Desktop, not just visible.
Confirm you have a file open in Paper Desktop. The MCP server only runs when a file is open.
Run /mcp in Claude Code to check the Paper MCP server is still connected. If it dropped, restart Claude Code and try again.

Claude Code isn't reading my Paper design through MCP. Help me debug the connection.

Build out all sections

The hero section is built. Now you'll repeat the same process for the Features and CTA sections to complete the full landing page.

In Paper Desktop, select the Features artboard.
In Claude Code, enter this prompt to add the features section:

I've selected the Features section in Paper. Please add this section to the website below the hero.

Once the features section is generated, select the CTA artboard in Paper Desktop.
Enter this prompt in Claude Code:

I've selected the CTA section in Paper. Please add this as the final section of the website.

Pro tip: one section at a time

Building section by section gives the agent smaller, clearer tasks. Larger designs with deeply nested layers are more likely to produce agent errors. Starting small and building up is the recommended approach from Paper's documentation.

All three sections are now in your codebase. Time to see the result in a browser.

Start the development server by running this command in Claude Code:

Please start the development server so I can preview the site.

What URL should I open?

Claude Code runs the dev server for you. The URL is typically http://localhost:5173 or http://localhost:3000. Check the terminal output for the exact address.

Open the URL shown in your terminal in a web browser.
Place your browser window and Paper Desktop side by side to compare your design with the live website.

You should see a working landing page with all three sections: the hero, the features grid, and the CTA. The layout, colors, and typography from your Paper design have been translated into React components with Tailwind CSS styling.

Site not loading in the browser?

Make sure the development server is still running. Look for a URL in your terminal output.
If Claude Code finished but no server started, ask it: "Please run the dev server for me."
If the MCP connection dropped during a long session, restart Claude Code by exiting with /exit and running claude again.

My development server isn't working. Help me troubleshoot.

What if the site doesn't match my design exactly?

The agent translates your design as closely as it can, but LLM-generated code isn't pixel-perfect. Spacing, font weights, or colors might be slightly off. This is normal. In the next step, you'll learn how to iterate between Paper and code to refine these details.

Your design is now a live website. Next, you'll close the bidirectional loop by pushing code changes back to Paper and syncing canvas updates to your codebase.

Complete the Bidirectional Loop

In the last step, you generated a working React/Tailwind website from your Paper Desktop design. Claude Code read your canvas structure and turned it into production-ready code.

So far, the flow has been one-directional. Design goes in, code comes out. In this step, you'll close the loop by pushing changes in both directions through MCP.

In this step, get ready to:

Push a code-side change back to your Paper canvas.
Sync a canvas-side change to your React codebase.
Commit your project with Git.

Push code changes back to Paper

When you update your code, the Paper canvas should reflect it too. Claude Code can use MCP write tools like set_text_content and write_html to modify your canvas directly from the code side.

Make sure your Paper Desktop file is open with the Hero artboard visible.
Switch to Claude Code in your terminal.
Enter the following prompt:

Change the hero headline to 'Ship Faster with Agentic Design' and update the Paper canvas to match.

Claude Code makes the text change in your code and then calls MCP write tools to push the update to your Paper canvas.

Switch to Paper Desktop and check your Hero artboard.
The headline should now read "Ship Faster with Agentic Design."

What just happened?

Claude Code used the set_text_content MCP tool to modify your Paper canvas directly. The change flowed from code to design. This is the reverse of your earlier workflow, where design flowed into code.

Don't see the change on your canvas?

Make sure your Paper Desktop file is still open. The MCP server only runs when a file is open.
Try clicking on your Hero artboard to refresh the view.
If the MCP connection dropped, restart Claude Code and run /mcp to verify the connection is active.
Why isn't my Paper canvas updating when Claude Code makes changes?

Iterate from the canvas side

The loop works in both directions. You can also make changes directly on your Paper canvas and ask Claude Code to pick them up.

Switch to Paper Desktop.
Select your CTA artboard.
Manually change the CTA button text to something new. For example, change it to "Get Started Free."
Select the updated button element on the canvas.
Switch back to Claude Code and enter the following prompt:

I've updated the CTA button in Paper. Sync this change to the codebase.

What does the agent do here?

Claude Code uses MCP read tools like get_selection and get_computed_styles to inspect your updated design on the canvas.
It then modifies your React component file to match the new button text you set in Paper.

Check your browser at the development server URL (typically http://localhost:5173 or http://localhost:3000).
The CTA section should now reflect your canvas change.
Compare your Paper canvas with the live site side by side. Both should show the same updated button.

Why does this matter?

This bidirectional flow eliminates the traditional design handoff. Designers iterate on the canvas while the agent keeps the code in sync. Neither side falls out of date.

Browser not showing the change?

Make sure your development server is still running. If it stopped, run npm run dev in a separate terminal window inside your paper-landing folder.
Try a hard refresh in your browser with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows).
If Claude Code didn't modify the right component, try selecting the specific button element on the canvas before sending the prompt. This gives the agent a clearer target.
My CTA button change in Paper isn't syncing to my React code. How do I fix this?

Commit your work

Git creates a checkpoint you can revert to if future changes break something. This is especially useful in agentic workflows where the AI makes broad edits across multiple files.

In Claude Code, enter the following prompt:

Add git to this folder and commit the changes we've made so far.

Claude Code initializes a Git repository in your paper-landing folder and commits all current files.

Confirm that Claude Code reports a successful commit. You should see a message mentioning the commit hash and the number of files committed.

Seeing a Git error?

Confirm Git is installed by running git --version in a separate terminal window.
If Claude Code says a Git repository already exists, that is fine. It means your project was already initialized during scaffolding.
Why is Claude Code failing to initialize Git in my project folder?

Your landing page is live and your design-to-code loop is fully connected. Ready for a challenge? Up next, you'll push this workflow even further by bringing real data into the mix.

Secret mission

Pull Live Data into Your Design

You have been using placeholder content throughout the project. The real power of MCP-connected design is using real data. Your mission: use Claude Code to pull content from an external API directly into your Paper design, then sync that live data to your React website.

Before you go

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely on local tools and Paper's free tier, so there are no ongoing cloud costs.

Resources you used:

Paper Desktop app and your free account.
Paper design file with Hero, Features, and CTA artboards.
The paper-landing project folder containing your React/Tailwind site and Git repository.
Claude Code Paper MCP plugin.
Node.js and npm (installed globally).
Local development server (if still running).

Keep everything running

No action needed. Choose this if you are still actively building or want to keep iterating on your design and code.

Your Paper design file stays in Paper Desktop and is accessible anytime you open the app.
Your paper-landing folder stays on disk with your React/Tailwind code and Git history.
The Claude Code Paper plugin remains installed for future sessions.
Paper's free tier gives you 100 MCP calls per week, which resets weekly.

Pause - I'll come back to this later

Shut down running processes to free up memory, but keep your files and configuration intact.

Stop the development server if it is still running by pressing Ctrl + C in the terminal where you started it.
Close Paper Desktop. The MCP server shuts down automatically when no file is open.
Your design file, project folder, Git history, and Claude Code plugin all persist. You can pick up right where you left off by reopening Paper Desktop and running claude in your project folder.

Delete - I don't want to use this again

Remove all project resources and start fresh.

Stop the development server if it is still running by pressing Ctrl + C in the terminal.
Delete the project folder by running rm -rf paper-landing from the parent directory.
Delete your design file in Paper Desktop by right-clicking it and selecting Delete.
Uninstall the Paper plugin from Claude Code by running /plugin uninstall paper-desktop@paper inside a Claude Code session.
Optionally uninstall Paper Desktop by dragging it from your Applications folder to the Trash.
Keep Node.js installed. You will likely need it for other projects.

Mission accomplished

Nice Work

You just designed a landing page in Paper Desktop and brought it to life as a working React/Tailwind website using Claude Code and the Paper MCP server. That is the agentic design-to-code workflow in action.

Here's what you learned:

Connected Paper Desktop to Claude Code via MCP and used 24 bidirectional tools to read and write design files from an AI agent.
Designed a multi-section landing page on Paper's HTML/CSS canvas and had Claude Code generate a working React/Tailwind website directly from your design structure.
Completed the bidirectional loop by pushing changes from code back to the canvas and syncing canvas edits into your codebase.
Pulled live API data into both your Paper design and your website, using Claude Code as the bridge between real content and your design system.

Ready to quiz yourself?