Skip to main content
AI WORKSPACE

Design to Code: Paper + Claude Code via MCP

Turn a Paper design into a live React and Tailwind site through Claude Code over MCP.

Build it
Design to Code: Paper + Claude Code via MCP project preview
Paper
Claude Code

Difficulty

Mildly spicy

Time to complete

90 minutes

Availability

Free

BUILD

What you'll build

Design an AI Skills Explorer dashboard in Paper, connect Claude Code through MCP, and generate a production-ready React and Tailwind site directly from your canvas.

1. Install Paper Desktop

Download Paper Desktop, create your AI Skills Explorer file, and explore the code-native canvas.

2. Connect Claude Code via MCP

Install the Paper plugin in Claude Code and verify bidirectional MCP communication.

3. Build the Dashboard Layout

Create the artboard, header, skill cards, and a Trending AI Tools row.

4. Populate Design With Real Data

Prompt Claude Code to research AI trends and write findings onto your canvas.

5. Generate React and Tailwind Code

Select your artboard and prompt Claude Code to scaffold a React project locally.

Your portfolio builds as you work.

Every project documents itself as you go. Finish the work, and your proof is ready to share.

PROJECT

Real world application

Skills you'll learn

  • Code-Native Design

    Build dashboards on a real HTML and CSS canvas.

  • MCP Integration

    Wire Claude Code into Paper Desktop for two-way communication.

  • Agent Prompting

    Direct Claude Code to read and refactor designs through MCP.

  • Live Data Research

    Have Claude Code research trends and write findings onto your canvas.

  • React Scaffolding

    Generate a working React and Tailwind project from your artboard.

  • AI Design Critique

    Hand Claude Code a red pen to modify your layout.

Tech stack

  • Paper logo

    Paper

    Code-native design tool where every frame is a real HTML and CSS DOM node.

  • Claude Code logo

    Claude Code

    AI coding agent that reads your Paper canvas and writes React code through MCP.

Claude Code is the future of programming.

Waleed

Principal Engineer

OUTCOME

Where this leads.

Relevant Jobs

Roles where these skills matter:

  • Design Engineer
  • Frontend Developer
  • AI Engineer
  • Product Designer

Claude Code Pathway

This project is your entry into the Claude Code Pathway at NextWork — combining Paper, MCP, and Claude Code, with more projects shipping soon.

Claude Code Pathway

Continue the Journey

FAQs

Everything you need to know

Paper is a code-native design tool where every frame, card, and text element on the canvas is a real HTML node with real CSS properties. Figma stores designs as SVG-based shapes in a proprietary format that needs translation before they become code. Paper skips that translation step entirely. NextWork's design-to-code project uses Paper Desktop because it ships a local MCP server that lets Claude Code read and write your design directly.

Claude Code connects to Paper Desktop through the Paper Desktop plugin from the paper-design/agent-plugins marketplace. When a Paper file is open, Paper Desktop runs an MCP server locally at http://127.0.0.1:29979/mcp that exposes 24 design tools to Claude Code. You install the plugin with /plugin install paper-desktop@paper, restart Claude Code, then run /mcp to verify the connection. NextWork's tutorial walks through every step in approximately 90 minutes.

This project runs on Paper's free tier plus your existing Claude Code subscription, so total additional cost is $0. Paper free includes 100 MCP tool calls per week, which is enough to design a dashboard, populate it with research, and generate React code in one session. Claude Code requires a Claude Pro plan ($20 per month) or Claude Max plan ($100 per month). The full NextWork project takes about 90 minutes and uses 30 to 60 MCP tool calls.

Paper's official documentation recommends React and Tailwind because Paper's get_jsx MCP tool outputs your design in Tailwind utility classes directly. The conversion from canvas to code is one-to-one. Flex layouts in Paper map straight to flex utilities in Tailwind, padding values become p-* classes, and gap values become gap-* classes. Claude Code also has extensive training data on React component patterns, so the generated code closely matches your design's structure.

After completing this design-to-code project, you can move into more advanced Claude Code workflows. NextWork offers related projects on the same roadmap: - Get Started with Claude Code - Build a portfolio site with Claude Code as your AI copilot - Build Claude Code Skills from Scratch - Automate your dev workflow with custom skills and hooks - Build Docker Infrastructure with AI - Control Docker containers through natural language using MCP These projects build on the MCP and Claude Code skills you learn in this tutorial.

One Project. Real Skills.

90 minutes from now, you'll have completed Design to Code: Paper + Claude Code via MCP. No prior experience needed. Just step-by-step guidance and a real project for your portfolio.

Let's Build This

Mildly spicy level