What is Layout?

Layout enforces your design system in every AI coding agent. It extracts your tokens, components, and visual patterns from Figma or a live website, serves them to your coding agent via an unmetered local MCP server, and gates every AI edit to on-token values with Layout Live. Designers stay in control of the system. AI is held to it.

Quick Start

Get your AI agent reading your design system in 60 seconds:

npx @layoutdesign/context install

Auto-detects Claude Code, Cursor, Windsurf, Copilot, Codex, and Gemini CLI. Three free starter kits included. Full CLI guide →

Core Capabilities

Extract

Pull design tokens, components, fonts, and screenshots from Figma files or live websites. Layout resolves actual style values automatically with no manual mapping.

Studio

Browse extracted tokens on the left, edit layout.md in the editor with an AI edit bar, check code against your design system in the Quality tab, and follow the golden-path checklist from extraction to enforcement.

Design System hub

Curate raw tokens into canonical roles, upload brand logos and custom fonts, attach brand voice and copy guidelines, and manage snapshots with rollback. Or start from a blank kit if you don't have a Figma or URL source.

CLI & MCP Server

Run npx @layoutdesign/context install and your AI agent gets 23 MCP tools: fetch design tokens, check compliance, preview components, and push to Figma. Works with Claude Code, Cursor, Windsurf, Copilot, Codex, and Gemini CLI. Three free starter kits bundled.

Layout Live

A desktop app that turns your running React app into a direct-manipulation canvas. Click an element, scrub padding, swap a token, and a deterministic edit gated to your design system writes straight back to your source. Stop prompting for padding.

Explorer

An optional exploration utility: generate component variants from a prompt when you need them, compare output with and without design context, and push results to Figma as real auto-layout frames.

Chrome Extension

Extract design tokens from any webpage, inspect elements against your design system, check compliance scores, capture screenshots, and push pages to Figma. All from a browser sidebar.

Export

Download a ZIP bundle with layout.md, tokens.css, tokens.json, tailwind.config.js, CLAUDE.md, AGENTS.md, Cursor rules, DESIGN.md, a Codex skill, and custom font files. Or skip the export entirely and use MCP.

How It Works

1
Extract: Paste a Figma URL or website URL into Layout and run extraction.
2
Review: Check the extracted tokens in the Source panel. Re-extract if something looks off.
3
Generate: Click "Generate layout.md" to synthesise the context file from extracted data.
4
Test: Paste a snippet into the Quality tab's Check code panel to validate it against your design system, or generate variants in the Explorer and aim for a health score of 80+.
5
Iterate: Edit layout.md manually or use the AI chat bar to make changes in plain English (e.g. "make buttons square"). Re-test.
6
Export: Download the ZIP bundle and add the relevant files to your project.
7
Build: Your AI coding tool now has the design system as context on every prompt.

Using the MCP server? You can skip steps 6–7. Your AI agent fetches design context automatically. See the CLI Guide.

Figma Integration

Figma is a first-class citizen in Layout. Extract directly from your design files, use the native plugin for in-Figma workflows, and push AI-generated components back as real auto-layout frames.

Extract from Figma

Paste any Figma file URL and Layout pulls tokens, components, fonts, and screenshots via the REST API. It resolves actual style values (colours, typography, spacing, effects) in two passes. You just need a Personal Access Token.

Figma Plugin

The native Figma plugin extracts tokens, inspects elements against your design system, and pushes to Layout Cloud without leaving Figma. Key advantage: it reads local (unpublished) styles on all plans, no access token needed.

Push to Figma

Generate component variants in the Explorer, then push your favourite back to Figma as a real auto-layout frame. Designers review AI output in their native tool, closing the loop between code and design.

Figma extraction works on Vercel with no Playwright needed. Website extraction requires a Docker or VPS deployment.

Health Score

The health score (0–100) in the Test panel measures how closely the generated code follows your design system:

80–100

Ready to export. Tokens are being used correctly.

50–79

Partial adherence. Review the Anti-Patterns section in layout.md.

0–49

Low adherence. Check that layout.md has well-formed CSS code blocks.

Export Bundle

When you export from Layout, you download a ZIP containing:

File	Purpose
layout.md	Full design system reference: tokens, components, anti-patterns
CLAUDE.md-section.md	Drop-in section for your project's CLAUDE.md
AGENTS.md	Context for OpenAI Codex, Jules, Factory, Amp (agents.md standard)
tokens.css	CSS custom properties for all design tokens
.cursor/rules/*.mdc	Cursor project rules (design system + components)
DESIGN.md	Google's design.md format, an interoperable design context spec
.codex/skills/<kit>/SKILL.md	Agent Skill folder for OpenAI Codex
tailwind.config.js	Tailwind config pre-loaded with extracted token values
tokens.json	W3C DTCG-compatible token file for Theo, Style Dictionary, etc.

The MCP server makes manual export optional. Once installed, your AI agent fetches tokens and checks compliance on every prompt with no files to manage.

The Quick Reference inside layout.md (Section 0) is designed to be copy-pasted standalone. It fits within tight context budgets and summarises the most critical tokens and rules in 50–75 lines.

Tips

Narrow the Quick Reference. If you have a large layout.md, Section 0 is the most important part. Keep it focused on the 10–15 tokens your AI uses most.

Commit layout.md to your repo. Treat it like any other configuration file. Update it when the design system changes.

Use the comparison view. In the Explorer, generate the same component with and without layout.md context side by side. The gap shows you exactly what value the context file is providing.

Re-extract periodically. Design systems evolve. Re-run extraction after major design updates to keep the context file current.

Next Steps

Studio Guide for the full workspace reference, extraction options, and Explorer.
CLI Guide to set up the MCP server so your AI agent fetches design context automatically.
Layout Live to tweak your running app visually and write changes back to source.
Figma Plugin to extract tokens and inspect elements without leaving Figma.
Chrome Extension to extract tokens, inspect elements, and check compliance from any browser tab.