What is Layout?

Layout is the compiler between design systems and AI coding agents. It extracts your tokens, components, and visual patterns from Figma or a live website, lets you refine them in a studio editor with AI assistance, then serves the result directly to your coding agent via MCP so every component it builds is on-brand, every time. Designers stay in control of the system. AI stays on-brand.

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

Two-mode workspace: browse extracted tokens on the left, edit layout.md in the centre with an AI edit bar, then switch to the Explorer to generate and test component variants.

Explorer

Generate 2–6 component variants from a single prompt. Compare with and without design context, upload reference images, and push results to Figma as real auto-layout frames.

CLI & MCP Server

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

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, AGENTS.md, Cursor rules, 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: Switch to the Explorer and generate a few component variants. Check the health score and aim for 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
.cursorrules	Cursor rules file with Quick Reference context
cursor/rules/design-system.mdc	Cursor v0.43+ MDC rules format
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.
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.