Skip to main content
01 / THE INTERFACE ENGINE

Built for designers and engineers who treat the canvas and the codebase as a single medium.

Where visual craft meets production-grade code.

Paper unifies direct 2D canvas manipulation, native CSS flexbox layout, and real-time AI agent collaboration—so every frame you design is already clean, shippable markup.

Launch Paper Studio
trusty-glow.paper
MCP CONNECTED · 0ms
NODE #1G-0 · HERO SECTION 1296×376 · gap: 32px · padding: 72px
01 / THE INTERFACE ENGINE

Where visual craft meets production-grade code.

Every layer on the 2D stage maps 1:1 to standard flexbox containers and CSS design tokens.

display: flex --color-cobalt: #1434F0
paper-mcp · get_jsx
02 / CORE ARCHITECTURE

Three foundational primitives that eliminate handoff translation.

Engineered from the ground up around the box model.

Most design tools simulate layout with proprietary math and export brittle CSS. Paper runs on native flexbox, semantic CSS custom properties, and inspectable DOM primitives.

02.1 · STREAMING CANVAS

Real-time agent & designer canvas.

Watch frames, typography, and layout systems build incrementally on an infinite 2D canvas. Direct manipulation and AI tool calls operate on the exact same node tree.

write_html · update_styles LIVE SYNC
02.2 · TOKEN ENGINE

Zero-drift CSS design tokens.

Define semantic color, spacing, radius, and typography scales once. Reference tokens natively via var(--token) and export directly to CSS :root or Tailwind v4 @theme.

var(--color-cobalt) TAILWIND V4
02.3 · PRODUCTION EXPORT

Lossless JSX & computed CSS.

Pull exact JSX subtrees, computed CSS properties, and optimized image assets straight into your repository without ever guessing pixel dimensions from screenshots.

get_jsx · get_computed_styles 1:1 DOM
03 / TELEMETRY

Measured across production design-to-engineering sprints.

10× Faster UI Iteration

Four deterministic stages from brief to shippable component.

  1. STEP 01

    Design Brief & Tokens

    Establish mood, semantic color palette, and verified typographic scale before creating nodes.

    < 50ms
  2. STEP 02

    Incremental Canvas Build

    Compose sections piece-by-piece on the live 2D surface with native flexbox and padding rules.

    REAL-TIME
  3. STEP 03

    Visual Critique Loop

    Verify rhythm, contrast, and vertical lane alignment via instant artboard screenshots.

    1X / 2X DPI
  4. STEP 04

    Direct Codebase Export

    Extract portable JSX and exact computed styles directly into your application repository.

    CLEAN JSX
04 / LICENSING & PLANS

Predictable per-seat licensing. Viewer and developer seats are always free.

Start free on personal drafts. Scale with your design system.

Every plan includes full access to the Paper 2D canvas, local & Google Font libraries, and lossless JSX/CSS inspection.

Craftsman

SOLO
$0 / forever

For individual designers and developers exploring AI-assisted UI craft.

  • Unlimited personal draft files
  • Local & Google Fonts integration
  • Tailwind & inline CSS JSX export
Download Desktop App

Studio Pro

MOST POPULAR
$24 / editor / month

For product teams shipping shared design systems and MCP agent workflows.

  • Unlimited shared team files & pages
  • Full Paper MCP server & agent sync
  • Shared semantic token libraries
  • Free unlimited developer inspect seats
Start 14-Day Studio Trial

Enterprise

ORG SCALE
$79 / editor / month

For multi-brand organizations requiring custom token pipelines and security controls.

  • Automated GitHub PR token sync
  • SAML SSO, SCIM & audit logs
  • Dedicated design systems architect
Contact Architecture Team
05 / GET STARTED

Available for macOS, Web, and MCP-compatible coding harnesses.

Ready to design directly in the medium of the web?

Open a canvas, connect your coding agent, and ship your next interface without a single handoff ticket.

Open Paper Studio