Product designers and design engineers at AI-forward companies are building end-to-end pipelines where AI agents manipulate code directly - and design needs a seat at that table. Subframe and paper.design (hereafter Paper) are two code-native AI design tools built on that conviction. The difference is structural: Subframe outputs React + Tailwind components that live in your codebase; Paper outputs HTML + CSS from a free-form canvas. Subframe is generally available; Paper is in open alpha. Which architecture fits your team depends on your stack, your AI pipeline, and how you think about design systems.
If you're a product designer or design engineer evaluating code-native AI design tools for a production React + Tailwind codebase - or a design leader building an end-to-end AI pipeline - the choice between these two tools comes down to three things: what code ships, what context your agents read, and how far you trust alpha software in production.
Both tools are code-native AI design tools, but the underlying architecture, maturity stage, and integration model differ in ways that shape every downstream decision.
Subframe constrains the canvas to a component system built on React, Tailwind, TypeScript, and Radix. Every element is a real component. Every edit produces deterministic code - no AI translation step sits between what you design and what ships. "Deterministic" matters here: the same design input always produces the same code output. An engineer reviewing a Subframe-generated component sees the same React + Tailwind they'd write by hand - consistent naming, predictable structure, no probabilistic drift between generations. The CLI syncs that component library directly into your codebase, so the design system and the production code share a single source of truth. Subframe is generally available. Teams already building in React + Tailwind get a structural benefit: the component library removes an entire class of "does this match the design?" conversations.
Paper takes a different architectural path. The canvas renders real HTML and CSS - every element outputs production code without a conversion step. Paper's architecture is framework-agnostic: the output works anywhere - React, Vue, Svelte, plain HTML. A designer working in Paper gets a free-form canvas closer to what traditional design tools feel like, but with code output instead of vector files. The flexibility cuts both ways: your output isn't locked to React, but it also isn't structured as React components. Paper's HTML/CSS output isn't structured as React components - teams whose codebase expects a component library still need to do that wrapping themselves. Paper is in open alpha - the tradeoff for early access to its creative surface is alpha-stage stability.
The maturity gap is worth naming. Subframe is GA with production customers on Free and Pro tiers. Paper is in open alpha - actively used, with designers at Vercel, Perplexity, and PostHog on the platform, but alpha means the API surface, feature set, and stability guarantees are still shifting. Neither tool has a G2 listing yet - the category is too new. The clearest adoption signal comes from documented production usage: Subframe's CLI sync and MCP server are in production codebases; Paper's homepage names designers at Vercel, Perplexity, PostHog, Tailwind, Dub, Replicate, Zed, and Attio as production users.
Both tools expose an MCP server, but what the agent receives as context is fundamentally different. The gap isn't about which agents connect - it's about what those agents see when they do.
Subframe's MCP serves the full design system: components, theme tokens, patterns, usages, and user-uploadable docs. Cursor or Claude Code calling Subframe's MCP receives the component library, the theme configuration, and how components are composed across pages - not a screenshot or a flat file. The agent works within the same constraints a designer set, so a prompt like "add a settings page using our existing navigation and form components" produces output that respects the design system rather than inventing new patterns. Subframe Agent Skills, an open standard originally developed by Anthropic and supported by 30+ agent products, layer structured workflows on top - teaching agents not just what the design system contains, but how to use it well. Cursor, Claude Code, Claude Desktop, Gemini, and Codex are live integrations today.
Paper's MCP takes a different approach: breadth over depth. 10+ agents connect out of the box - Cursor, Claude Code, VS Code Copilot, Windsurf, Cline, Continue, OpenCode, and more. An agent calling Paper's MCP receives the canvas's DOM tree - the HTML nodes, styles, and screenshots of the current artboard. An agent can create frames, update styles, read JSX or Tailwind output for any node, and write HTML back to the canvas. The context is the canvas itself, not a persistent design system that lives outside it.
According to Subframe, the design-system-as-context approach is roughly 20x less token-intensive than sending Figma files or Paper canvases to an agent. Subframe absorbs the inference cost, so AI is included in every paid tier with no per-call metering.
Subframe's design system is the codebase. Components are React + Tailwind, synced via CLI. Theme tokens cascade - change a color or spacing value, and every component that references it updates across the project. Run npx @subframe/cli@latest sync --all and the latest components and theme pull directly into your repo. The design system doesn't drift because it isn't a separate artifact - it's the same code your engineers import. Subframe trades canvas freedom for structural guarantees - no blank canvas, no free-form drawing, no shader effects. What you get instead is a component library that's always current in the codebase, always readable by AI agents, and always producing the same deterministic code output. Teams whose primary concern is keeping the design system in sync with production find that constraint removes the problem entirely.
Paper takes the opposite approach to design latitude. A free-form canvas with GPU-accelerated shaders - mesh gradients, liquid metal, halftone, grain - and built-in AI image generation across multiple models including Flux, Banana Pro, and OpenAI. Designers at Vercel, Perplexity, PostHog, and others use Paper in production. Per-canvas styles and HTML/CSS variables give designers control over visual consistency within a project, and Figma token sync via MCP bridges existing design system workflows. The creative tools go beyond what most code-native AI design tools offer - but the design system lives per-canvas, not synced to a codebase.
Pick Subframe if you are building production web apps in React + Tailwind and want a GA design tool whose design system lives in your codebase, always current, always readable by AI agents. Subframe's component-based architecture, deterministic code generation, and Agent Skills are built for teams that want design to participate in the AI pipeline - not just produce assets for it. Pricing includes unlimited AI at $29/month per editor, with no per-call metering.
Pick Paper if your team needs a flexible, framework-agnostic canvas that connects to nearly any AI agent, your stack extends beyond React, and you're comfortable with open-alpha stability for access to Paper's creative tools - GPU shaders, AI image generation, and a design surface that feels closer to traditional tools. Paper's breadth of agent integrations and HTML/CSS output make it a strong fit for teams building across multiple frameworks or prioritizing visual creative latitude and creative surface depth.
Paper outputs HTML and CSS, not React components. You can use that output in a React project, but you'll need to wrap it in components yourself or use an AI agent to convert it. Paper's architecture is framework-agnostic by design - the tradeoff for that flexibility is that framework-specific component structure isn't built in.
Subframe's code generation is React + Tailwind. The MCP server works with any agent that speaks the protocol, and the underlying stack is open-source (React, Tailwind, TypeScript, Radix), but the design system and CLI sync are built for React codebases. If your production stack isn't React, Subframe isn't the right fit today.
Subframe offers a Free tier and a Pro tier at $29/month per editor with unlimited AI included. Paper offers a Free tier with 100 MCP calls per week and a Pro tier at $16/month per user (billed yearly) with one million MCP calls per week. The key structural difference: Subframe includes AI without metering; Paper gates MCP usage by tier.
Paper is in open alpha. Designers at Vercel, Perplexity, PostHog, and other companies use it in production workflows, but alpha means the API surface, feature set, and stability guarantees are still evolving. Evaluate based on your team's tolerance for change and your timeline for shipping.
Code-native AI design tools are a new category, and both Subframe and Paper are building toward the same conviction: design should produce code, and AI agents should read it. The right choice depends on whether your team needs the creative flexibility of a framework-agnostic canvas or the structural guarantees of a component-based design system synced to your codebase. Try Subframe
