Code to Design to Code: The 2-Way MCP Workflow with Paper & Claude Code

I've been experimenting with a new workflow, connecting Paper's design tools directly to Claude Code via their Model Context Protocol (MCP). Unlike my earlier experimentation with Figma's read-only MCP(As of March 2026), Paper offers a full 2-way design/code integration.

The results are nothing short of incredible, and I believe this will redefine how we approach design-to-engineering workflows.

The Problem with Traditional Workflows

Traditional handovers between design and engineering often feel disjointed. Even with improved design tools and systems, there's always a gap. The developer has to translate a static or semi-interactive design into code, manage edge cases, handle styling, and hook it up to components. If the code changes and impacts the UI, the design file becomes outdated, requiring manual reconciliation.

The 2-Way Magic of Paper and Claude Code

By connecting Paper's 2-way MCP to Claude Code, we aren't just reading designs—we are actively interacting with them. Let's look at the entire lifecycle.

1. From Prompt...

Everything starts with a prompt. You describe what you need to Claude, such as "a new complex data table for the user settings page."

2. ...To Design...

Claude understands your intent, processes the context, and uses Paper's MCP to synthesize or update the visual structure. Because Paper is built for modern digital product development, the design output consists of structured components, not just generic shapes and text layers. This instantly gives us a visual artifact we can inspect, iterate on, and validate visually.

3. ...To Code

When you're happy with the design in Paper, Claude automatically translates the design into your repository's actual code, mapping layers to your existing UI components, design tokens, and styling conventions. It generates production-ready code. You're not just getting a visual translation; you're getting robust, integrated logic.

4. ...And Back to Design

Here is where the magic really happens. With a true 2-way connection, if you or an engineer make a tweak to the code—updating a padding value, tweaking a border radius, or modifying a component state—Paper reads those updates and reflects them directly back in the design file.

The typical drift between "what the designer made" and "what the engineer shipped" completely vanishes. Your design is always the source of truth, and your code is always the source of truth. They are perfectly synced.

Shipping Faster

This entire lifecycle significantly reduces context switching. Instead of designing, handing off, reviewing, rewriting, and testing manually, you fluidly traverse the loop.

Prototyping rapidly, seeing changes in design and code simultaneously, and maintaining symmetry across both domains gives you the speed and confidence to iterate without fear. It accelerates the path from ideation to production, fundamentally helping you ship better features, faster.

The gap between design and development isn't just closing—with workflows like this, it's finally bridging completely.