AI agents finally know your design system. Layout makes them follow it.

Extract your design system from Figma or any live website. Serve it to Claude Code, Cursor, Copilot and Codex, unmetered, in your repo. Then gate every AI edit to your tokens with Layout Live.

Context is solved. Enforcement is the product.

Request Early Access Got an invite code? →Download Layout Live

Works with

and more

Acmeacme-design-system

Brand2

--accent#E4F222

--accent-soft#3A3F0A

Surface5

--bg-app#0C0C0E

--bg-panel#141418

--bg-surface#1A1A20

--bg-elevated#222228

--bg-hover#2A2A32

Text3

--text-primary#EDEDF4

--text-secondary#A6A6B0

--text-muted#7A7A85

Status3

--success#34C759

--warning#FF9F0A

--error#FF453A

Pro · billed monthly

$24/ mo

Ship faster.

From design system to production in minutes.

Unlimited extractions
All MCP tools
Figma sync

Pricing — minimal centred92

Single column, lime CTA, three-feature checklist.

Dashboard

Compile design.

Tokens, types, components — served to every AI agent.

Pricing — split with art86

Left-aligned copy, gradient art block on right.

NEWlayout v1

The compiler
for design systems.

tokens

components

kits

health · 87/100synced

Pricing — stat hero90

Three live metrics over a progress bar; NEW pill.

Starter

$0/mo

core
sync

Pick

Pro

$24/mo

core
sync
MCP

Choose

Team

$96/mo

core
sync

Pick

Pricing — three-tier ladder94

Starter / Pro / Team with Pro highlighted in lime.

MonthlyYearly

Save 20%

Pro · annual

$19/ mo$24

Billed $228 yearly. Cancel anytime.

Pricing — annual toggle88

Monthly/Yearly switch, Save 20% pill, single hero card.

Compare plans.

FeatureFreePro

Extractions3 / moUnlimited

MCP tools—

Figma sync—

Team kits—

Pricing — feature comparison91

Pro vs Free table with checks and crosses.

★★★★★4.9 · 240 teams

“Layout cut our design-to-code review loop from days to hours.”

Maya ChenHead of Design · Linear

Pricing — testimonial card87

Quote-led layout with avatar row and CTA underneath.

Variants:7

Model:

Sonnet 4.6

Acmeacme-design-system

Explorer

Dashboard

Compile design.

Tokens, types, components — served to every AI agent.

Pricing — split with art★ 86

Left-aligned copy, gradient art block on right.

2 of 3 variants

Full context.

Zero enforcement.

Layout gates it.

Every AI tool ships design-system context now. Rules files, MCP servers, imported style guides. And the output still drifts: raw hex codes instead of your colour tokens, arbitrary pixel values instead of your spacing scale.

Context tells an agent what your system is. Nothing stops it emitting #6366f1 anyway. A rule in the prompt is a suggestion, not a constraint.

The gap has moved. It is no longer between your design system and your AI tools. It is between knowing the rules and being held to them.

Layout closes it with extraction-grounded compliance: your design system, and its enforcement, follows the code into your repo and your agent.

AI agent prompt"A pricing card for our Pro plan with 3 features and a CTA button"

✗ Without Layoutgeneric AI output

PRO PLAN

$24/month

• Unlimited extractions
• All MCP tools
• Figma sync

Hardcoded #3b82f6 — not your brand colour

Arial fallback font — Inter not loaded

Off-grid spacing (28px, 18px) — wrong scale

Made-up "PRO PLAN" pattern — no token reference

✓ With Layoutsame prompt · uses your design system

Pro

Ship faster.

From design system to production in minutes.

$24/ month

billed annually · cancel anytime

Unlimited extractions
All MCP tools
Figma + extension sync
Priority support

Uses --accent (#E4F222) from your tokens

Inter font + correct type scale (display 36, body 12)

On-grid spacing — 4px base, all multiples

Reuses your "Pricing card" component pattern

Toggle the buttons above. Same prompt — Layout closes the gap between AI guess and your design system.

AI agent prompt

"A pricing card for our Pro plan"

Pro

Ship faster.

From design system to production in minutes.

$24/ month

Unlimited extractions
All MCP tools
Figma + extension sync

Same prompt — Layout closes the gap between AI guess and your design system.

Edit the real thing.

Not a prompt.

On your desktop.

Layout Live is the macOS app that turns your running React app into a canvas. Click an element, scrub its padding, swap a colour for a design token, and the edit is written straight back to your Tailwind source.

Deterministic edits

Every change is an AST rewrite of your real source. No cloud sandbox, no AI tokens spent on a 4px nudge.

Compliance gate

A live score gates each edit to on-token values, so the diff is your design system, not a near miss.

Agent hand-off

When a change needs logic, hand the element to Claude Code, Cursor or any MCP agent with full context attached.

Closed request loop

Pin a request to an element: amber while it waits, blue while the agent works, green when it reports back with a screenshot.

Figma meters every AI edit with credits. Layout Live edits are deterministic. Free for individuals.

Try Layout Live See all eight capabilities →

~/invoices-applocalhost:5173

Layers

Edits2

Requests

page

heading

button

footer

Outstanding

£12,480

button

Add contact

buttonApp.tsx:48

Editing: Desktop

DTM

Spacing

Padding · X

16px

4812162024

Typography

Font size

16px

Weight

Medium▾

Fill

brand-primary

Compliance98

localhost:5173

page›header›button

Outstanding

£12,480

button

buttonApp.tsx:48

Padding · X

16px

4812162024

Font size

16px

Compliance

One design system.

Every developer.

Enforced everywhere.

Layout is built for teams, not just the developer who set it up. One extracted design system, shared by every developer and every agent in the org.

Live requests sync across your organisation through a shared cloud queue. A designer pins a request in Layout Live, a teammate adopts it in theirs, and the Live Requests page in the Studio dashboard shows every request and what the agent did with it.

Nothing off-system reaches main. Run check --ci in your pipeline and pull requests get annotated with every violation, with the merge gated on the result. Roles, invitations and per-project scoping keep the system owned by the people who own the design.

The design system stops being advice. It becomes policy.

Live Requestsacme-org · synced across 8 seats

Tighten card padding to --space-4Claude Code · note + screenshot attachedDone

Hero CTA should use --color-primaryCursor · in progressWorking

Swap footer link hover to tokenPinned by Sarah · waiting for an agentWaiting

Pinned in Layout Live · visible in the Studio dashboard · posts to Slack

feat: pricing page refresh#482

✕layout check --ci2 violations

Pricing.tsx:41#6366f1→--color-primary

Button.tsx:1218px→--space-4

Off-system values never reach main.Merge blocked

Your design system in.

Unmetered context out.

Two commands.

Connect a Figma file or paste any live URL. Layout extracts colour, typography, spacing, effects and component inventory — actual values, not metadata — into a structured layout.md built for LLM consumption.

Every extraction is scored 0–100 for completeness across six weighted sections, with specific suggestions to close the gaps. You see what's missing before the AI fills it with guesses.

Then run install. Layout auto-configures MCP for Claude Code, Cursor, Windsurf, Copilot, Codex and Gemini CLI, and 23 tools put your design system on every prompt: query tokens, check compliance, preview components, push to Figma.

Extract once. Unlimited local context. No per-call metering, no seat requirement.

Acmefigma.com/file/4kLp...

extracting · 80%

Extraction · 4 of 6

Connect to FigmaOAuth · file 4kLp

Fetch styles47 colours · 12 text · 8 effects

Resolve variables2 modes · light + dark

Parse components23 found · resolving instances

Generate layout.md

Compute health score

23s elapsed~ 6s left

47 styles·23 components·2 modes

layout.md

Saving…~3.2k tokens

# Acme Design System

Source: Figma · file 4kLp · 2 modes (light + dark)

Generated: 2026-04-29 · Layout v1.4

## Quick Reference

- **Brand**: #E4F222 (lime accent)

- **Surface**: 5-step elevation, dark-first

- **Body font**: Inter, 16/24, weight 400

- **Display font**: Inter, 56/64, weight 600

- **Spacing**: 4px base, 12-step scale

## Colours

```css

--accent: #E4F222;

--accent-soft: #3A3F0A;

--bg-app: #0C0C0E;

--bg-panel: #141418;

--bg-surface: #1A1A20;

--bg-elevated: #222228;

--text-primary: #EDEDF4;

--success: #34C759;

--warning: #FF9F0A;

--error: #FF453A;

```

## Typography

figma.com/file/4kLp…

80%

Connect to FigmaOAuth · file 4kLp

Fetch styles47 colours · 12 text · 8 effects

Resolve variables2 modes · light + dark

Parse components23 found · resolving

23s elapsed~ 6s left

layout.mdwriting live

# Acme Design System

## Colours

--accent: #E4F222;

--bg-app: #0C0C0E;

--bg-panel: #141418;

--text-primary: #EDEDF4;

--success: #34C759;

Figma changes.

Code follows.

Both ways.

Layout watches your Figma file via webhook. When a change lands, you get a token-by-token diff — added, modified, removed — and one click updates layout.md. Your AI reads the latest design system on the next prompt.

It works in the other direction too. Push AI-generated components to Figma as editable frames across three viewports, and the design-in-figma MCP tool gives agents your actual token values so new Figma screens start on-brand.

The native Figma plugin syncs tokens and variables bidirectionally, inspects elements against your system, and assembles AI variants into component sets.

One design system. Never two versions of it.

Figma ↔ Layout Studio · live sync

Acme · Design Systemmain

3 collaborators

Variables · Brand + Surface2 modes

accent

bg-app

bg-panel

bg-surface

bg-elevated

text-primary

designer · just now
changed accent #E4F222 → #E8F84F

Components

MCP webhook~120ms

Layout StudioAcme

● synced 2s ago

Tokens · 6acme-design-system.fig

accent

bg-app

bg-panel

bg-surface

bg-elevated

text-primary

layout.md · auto-updated

## Colours

--accent: #E8F84F;

--bg-app: #0C0C0E;

--bg-panel: #141418;

◆AI agent → get_design_system() · 3 callers · just now

●3 in-flight components · re-rendered with new --accent

Figma ↔ Studio · live sync

Acme · Design System

file 4kLp

accent

bg-app

bg-panel

bg-surface

MCP webhook · ~120ms

Layout Studio · Acme

● synced 2s

accent

bg-app

bg-panel

bg-surface

◆AI agent → get_design_system() · just now

And the rest of the toolkit.

Every surface reads the same extracted design system, so wherever the work happens, the output stays on-brand.

Studio

Explorer

Generate up to six on-system variants of a component or page from one prompt, each scored for compliance. Push the winner to Figma or promote it to your library.

Open the Studio →

Browser

Chrome extension

Extract design tokens from any live site in the sidebar, inspect elements against your system, and push straight to your Layout project. No tab-switching.

Read the docs →

Open source

Layout UI

54 shadcn-compatible components, 58 themes, one --layout-* token contract. Swap the kit and the whole system reskins with no component code changes.

Browse Layout UI →

Community

Kit Gallery

Start from a community design system kit, or publish yours from the Studio with one click and install it anywhere from the CLI.

Browse all kits →

Open source.

Free forever.

The CLI and MCP server are MIT licensed. The Studio is AGPL-3.0. Run it locally, deploy it yourself, contribute back. No lock-in, no vendor risk.

Three starter kits bundled — Linear, Stripe, Notion. From npm install to your AI building on-brand in 60 seconds.

Studio on GitHub CLI on GitHub Self-hosting docs →

Give your AI perfect taste.

Layout is in early access. Join the teams shipping AI-built UI that actually looks right, and help shape what we build next.

→ Direct founder access via Discord

→ First look at every feature before public release

→ Founding member pricing, locked in permanently

→ Direct input on the roadmap

Request Early Access →Got an invite code? →

AI agents finally know your design system. Layout makes them follow it.

Ship faster.

Compile design.

The compilerfor design systems.

Compare plans.

Compile design.

Ship faster.

Ship faster.

And the rest of the toolkit.

Give your AI perfect taste.

The compiler
for design systems.