The compiler between design systems and AI coding agents

AI coding agents can build entire features from a one-line prompt. But every UI they generate looks generic, wrong colours, wrong spacing, wrong type scale.

Your design system lives in Figma. Your AI agent can't see it. Every component it builds is a guess. Every colour is a hallucination. Every spacing value is made up.

This is the context gap, the invisible wall between your design system and your AI tools.

Designers spend hours correcting AI output that ignores their system. Developers ship components that look 'close enough.' The brand erodes one commit at a time.

Layout is the compiler that closes it.

A half-complete design system gives your AI half the context. It fills the gaps with guesses — and you're back to the wrong colours, the wrong spacing, the wrong type scale.

Every layout.md gets a completeness score across six weighted sections: Quick Reference, Colours, Typography, Spacing, Components, Anti-patterns. You see exactly where the gaps are before the AI does.

Layout surfaces specific suggestions — not vague warnings. "Your component inventory is missing interactive states." "No spacing scale defined." Fix them in the editor, or re-extract from a more complete source.

0 to 100. You decide when it's ready.

You see a component you love on a competitor's site. You need to audit a client's live product. You want to match an existing app's design language. You shouldn't have to copy-paste a URL every time.

The Layout Chrome extension lives in your browser sidebar. Click any page to extract its design tokens — colours, typography, spacing, radius — and push them straight to your Layout project. No tab-switching. No copy-paste.

Pick any element to inspect its computed styles and see which values match your design system tokens. Green means on-system. Red means off-brand. One click copies the element's HTML and styles, formatted for your AI agent.

Five tools. One sidebar.

Extract tokens. Capture screenshots. Inspect elements. Check compliance with a score out of 100. Copy a ready-to-paste prompt that sends any page to Figma as pixel-perfect editable frames with auto-layout — powered by Figma's own capture engine via Claude Code. All without leaving the tab you're on.

Every AI coding tool generates one answer. One layout. One guess. Layout Explorer generates up to six — each built on your design system.

Describe what you need. Explorer creates distinct variations: different layouts, different visual weight, different density. All on-brand. Pick a direction. Refine it. Ship something only your team could have designed.

Then push it to Figma. Your designer brings the taste, the craft, the invisible details that make good design feel right. Import their changes back. The loop continues.

Better than a new canvas

Upload a reference image. Refine with follow-up prompts. Compare results with and without your design system. When you find the right direction, push it straight to Figma or promote it to your component library.

Extraction is the starting point, not the end. Layout gives you a structured design system — tokens, typography, and components, all browsable in the Studio.

Generate components in the Explorer with AI assistance. Describe what you need — Layout generates variants using your design tokens. Save the best ones to your library with categories and tags.

Browse saved components and pages in the Studio. Filter by type, search by category. Everything stays connected to your layout.md.

Not a static export. A living system.