The design-to-engineering handoff has a well-documented failure mode. A designer produces a high-fidelity mockup in a tool like Figma. An engineer receives it and manually reconstructs it in code — making judgment calls about spacing, layout logic, and component behavior along the way. The output drifts from the input. Teams compensate with review cycles, QA passes, and revision sprints.This challenge is familiar across the industry. While most teams address it as an organizational issue—focusing on communication, detailed specs, or tighter collaboration—Paper.design reframes it as a tooling issue, specifically the file format.
The Root Cause Argument
Figma, Sketch, and most design tools store designs in proprietary formats. A Figma file is not a web document. It's a representation of a web document — one that has to be interpreted and translated by a human engineer before it can run in a browser.This translation step causes fidelity loss. Designers’ intent must be re-expressed in HTML, CSS, and JavaScript by engineers who weren’t present for design decisions. Even with strong specs, some information is lost.Paper.design's founding thesis is that eliminating the proprietary format eliminates the need for translation. The tool uses HTML and CSS as its native canvas format — not as an export target, but as the underlying data model. Every element a designer places on the canvas, at the file level, is a real web element with real CSS properties. Flexbox layouts on the canvas use the actual Flexbox. Font rendering uses the browser's native font rendering. When you right-click a component and select Copy as React, the clipboard receives production-ready JSX because that's what the component already was.
What That Architecture Enables
No Conversion Step at Handoff
The most direct consequence is that handoff becomes a copy-paste operation rather than a reconstruction project. Designers and engineers can work from the same source file. There's no "developer handoff mode" to activate, no additional annotation layer to maintain. The design file and the codebase can, in principle, refer to the same components.Paper is developing a component system that matches code concepts, including props and slots used by frameworks like React. This means the component library exists once in Paper and is shared across design and engineering.
MCP Integration for AI Agents
Paper.design includes an MCP (Model Context Protocol) server—an interface for AI coding agents to read and write design data. Unlike built-in AI features, any agent—Cursor, Claude Code, or custom—can use this protocol.MCP operations include creating frames, updating styles, editing text, capturing screenshots, and retrieving JSX or Tailwind for any node. Agents can read context from the canvas or push generated designs back for review.Teams use MCP to sync design tokens, pull external content (e.g., Notion, Google Sheets), and generate layout variations. Bidirectionality is key—code and design update the same shared state, not via one-way export.
Designing with Live Data
With real data support, Paper lets designers connect frames to live APIs, databases, CMSs, or spreadsheets. Designs render with actual production content, letting designers see layouts react to variable input.This helps teams catch layout failures earlier. Issues like long strings breaking a layout or missing images can be identified at design time—before any engineering begins.
Shaders as Shipping Artifacts
Paper.design offers a GPU-accelerated shader library. Shaders export as production code—actual GPU programs, not videos or GIFs. This solves the problem of bringing motion design directly into the design-to-code process.With Paper's shader system, the designer's output is the implementation. The animated effect that lives on the canvas is the same artifact that runs in the browser.
Where the Tool Currently Stands
Paper is in open alpha. It was founded in 2024 by Stephen Haney, previously at Modulz (the company behind Radix UI), and recently closed a $4.2M seed round led by Accel. The team ships to production nearly daily and maintains a public build log and roadmap.The current feature set covers the core design primitives — text, shapes, frames, images, flex layouts — alongside the code-native and AI-integration capabilities described above. Items on the public roadmap include deeper Tailwind integration (in partnership with the Tailwind team), a component system with full props/slots support, live site import for editing real pages on the canvas, and expanded vector tooling.What it doesn't yet have: the depth of component library tooling and plugin ecosystem that Figma has built over a decade, mature prototyping and user flow features, and the organizational infrastructure that enterprise design teams rely on. The team is explicit that this is an early product, and the roadmap prioritizes code-native and AI-integration capabilities over feature parity with established tools.
We're Trying It
Uristocrat experiments with various tools and products as we product develop. We're going to spend time with the alpha and report back: whether the code-fidelity promise holds in practice, how the MCP integration actually feels in a real workflow, and where the rough edges are. If you're evaluating it yourself, we'd be curious to hear what you're finding.
The Bet
Paper.design is built on the hypothesis that the design-code gap is structural — baked into how existing tools represent designs — and that fixing it requires changing the underlying data model, not improving handoff documentation or adding AI features on top of a proprietary format.Whether that hypothesis holds depends partly on execution and partly on whether the broader shift toward AI-assisted development makes code-native design tools more or less valuable. If engineering teams increasingly use AI agents to generate and iterate on front-end code, a design canvas that those agents can read from and write to becomes a coordination layer rather than a handoff artifact. That's the version of the future Paper is building for.The free tier is available at paper.design. The MCP documentation and public roadmap are also on the site.
Comments