How Layout Compares

Claude Design is an Anthropic Labs product. Their own framing is “a way for non-designers to make visuals,” and it exports to Canva and PowerPoint. It’s a chat-surface design tool competing with Figma and Canva, not a context layer feeding AI coding agents. Anthropic structurally can’t be model-agnostic — their incentive is to make Claude the only agent that matters. Layout extracts your design system once and ships it as a portable bundle (layout.md + W3C DTCG tokens + .cursorrules + MCP) that Cursor, Copilot, Windsurf, Codex, Gemini CLI, and Claude Code all consume the same way. Different layer of the stack, different buyer. The right analogue is Cursor: same “won’t the model lab kill them?” objection 18 months ago, now a $9B company.

Where the bundle goes. Claude Design’s extracted design system stays inside Anthropic’s walled garden — it powers their canvas and the handoff to Claude Code only. Layout’s output is portable: tokens.css, tokens.json (W3C DTCG), CLAUDE.md, .cursor/rules, Windsurf rules, tailwind.config.js, plus an MCP server with 23 tools (compliance checking, drift detection, component lookup). It travels to every agent and every IDE the team uses. Layout also extracts from sources Claude Design doesn’t — live websites via Playwright, Storybook CSF3 stories, Chrome extension capture, and a native Figma plugin with bidirectional Variables sync.

Paper is a design canvas with MCP write access — agents create and modify designs inside Paper. Layout is the enforcement layer for your design system — agents consume your design system context and are gated to your tokens when writing code in your codebase. Paper replaces Figma. Layout works with Figma. Different tools, actually complementary.

They import your design system into their canvas. Layout exports it into your IDE. They generate prototypes you screenshot and hand off. Layout generates context that makes Claude Code, Cursor, Windsurf, Copilot, Codex, and Gemini CLI produce on-brand code directly in your codebase. No copy-paste. No handoff gap.

Figma’s MCP has grown to roughly 25 tools for accessing file-level design data: node trees, variables, screenshots, Code Connect mappings, and design generation. It’s excellent for implementing a specific screen, and it’s metered: free and view seats get 6 MCP calls a month. Layout solves a different problem: it extracts the design system itself (tokens, components, spacing rules, anti-patterns) from Figma or any website into files and an unmetered local MCP server, so your AI agent can build anything on-brand, and Layout Live gates the edits that land.

You could paste a colour palette. But LLMs also need typography scales, spacing grids, component naming conventions, border-radius rules, motion tokens, and anti-patterns. Layout extracts all of this automatically and keeps it updated. Manual prompts go stale on the first Figma change.

Variant generates new designs. Layout ensures your existing design system is faithfully reproduced by AI coding agents. If you’re building a product with an established brand, you need consistency, not novelty. They solve different problems.

Pencil is an IDE-native design canvas — you design inside VS Code. Layout doesn’t ask anyone to change tools. Designers stay in Figma, developers stay in their terminal. Layout is invisible infrastructure between them.

They can — until your brand uses a custom typeface. Most design-to-code tools ignore fonts entirely, leaving AI agents to guess or fall back to system-ui. Layout extracts font declarations, lets you upload custom font files (.woff2, .ttf), and bundles them in the export. Your AI agent gets the actual font files alongside the design tokens, so generated components render with the right typeface from the start.

Great for humans. Not built for LLMs. Storybook serves rendered component previews. Zeroheight serves prose documentation. Neither produces structured, token-level context that AI coding agents can consume. Layout bridges that gap.

Figma’s API gives raw file data. Layout interprets it — resolving style references to actual values, grouping tokens by semantic role, generating spacing scales, identifying component patterns, and synthesising everything into a 9-section context file optimised for LLM consumption. Extraction + synthesis, not a passthrough.