Studio

The Studio is Layout's browser-based workspace for extracting design systems, synthesising LLM-optimised context files, and exploring AI-generated components. Paste a URL, get a complete AI kit in under 2 minutes.

Extraction

Layout can extract design tokens from two sources: a Figma file or any live website. Paste the URL on the home screen and click Extract. Extraction typically completes in under 2 minutes.

From Figma

Paste a Figma file URL (e.g. https://www.figma.com/file/...) and provide your Figma personal access token. The Studio calls the Figma REST API to resolve actual token values, not just metadata.

What Gets Extracted	Details
Colour styles	Fill values resolved via node API, not just metadata. Includes gradients (linear, radial, conic with angle and all stops)
Typography styles	Font family, size, weight, line-height, letter-spacing, textCase, textDecoration, lineHeightPercent as composites
Effect styles	Shadows, blur effects (both filter and backdrop-filter)
Component inventory	Name, description, variant count, property definitions with defaults and preferred values
Auto-layout patterns	Stack direction, spacing, padding, alignment detected from component structures
Font declarations	Family, weight, style. Google Fonts auto-detected in previews
Variables & modes	Variable collections with light/dark mode support. Alias resolution with cycle detection. Enterprise plans only for direct variable access; gracefully skipped otherwise
Motion tokens	Transition durations, timing functions, and easing values

From Websites

Paste any live website URL. Playwright loads the page in a headless browser and extracts design data from the rendered DOM and computed styles. No Figma access required.

What Gets Extracted	Details
CSS custom properties	All --var declarations from the page
Font declarations	@font-face rules and computed fonts
Computed styles	Colours, typography, spacing, borders, shadows, transitions from DOM elements
Animations	@keyframes rules
Library detection	Tailwind CSS, Bootstrap, etc.
Screenshots	Full-page and viewport captures

Website extraction requires Playwright and cannot run on Vercel serverless. Self-hosted deployments (Coolify, Hetzner, Railway) work fine.

If extraction reaches internal caps (e.g. very large design files with hundreds of styles), amber truncation warnings appear in the progress overlay showing exactly what was capped and at what count. The extraction still completes with the data it captured.

The Studio Workspace

After extraction completes, the Studio opens a two-panel workspace with a mode toggle in the top bar. The Source Panel stays visible on the left in both modes. The right panel switches between the Editor and the Explorer.

Source Panel (left)

Shows the raw extracted data: colour tokens, typography styles, spacing values, component inventory, screenshots, fonts, quality score, and saved components. Use this to verify what was extracted before generating layout.md. If something looks wrong, you can re-extract with different options.

When your design system uses multiple modes (e.g. light and dark), the Source Panel shows mode filter pills at the top of the token list. Select a mode to see only tokens from that mode, or choose All to see everything. Individual tokens display a mode badge indicating which mode they belong to. Modes are preserved across all export formats (CSS, JSON, Tailwind).

If your codebase is connected via the CLI scanner, the Components tab shows a merged view of Figma components and codebase components side by side. Each component displays its source (Figma, Code, or both), import path, and Storybook story count if detected. Icons are automatically filtered from the list.

Editor Mode (right panel)

A Monaco-based markdown editor for layout.md. Once you generate the context file, edit it here to fix misidentified tokens, strengthen the anti-patterns section, or rewrite component specs. Auto-saves with a 2-second debounce. Section navigation pills let you jump between the 9 sections of layout.md quickly.

An AI edit bar sits below the editor. Type natural-language instructions like "make buttons square instead of rounded" or "add a smaller button size variant" and Layout will apply the changes directly to your layout.md. An undo button appears after each edit so you can revert instantly if needed.

Explore Mode (right panel)

The Explorer is an AI-powered design exploration surface. Enter a prompt, set the variant count (2 to 6), and generate multiple component options using your design tokens. Compare output with and without layout.md context, refine variants with follow-up prompts, push results to Figma, or save them to your component library. See the Explorer guide for full details.

Testing Your Design System

The Explorer is the best way to verify that layout.md actually improves AI output before exporting.

Comparison View

The comparison view generates the same component twice: once with your layout.md context active, once without. The side-by-side result shows you exactly what value your design system context is providing. A good context file produces noticeably better output with correct token usage, proper spacing, and on-brand typography.

Health Score

Each generated variant shows a 0 to 100 health score measuring token faithfulness, component accuracy, and anti-pattern violations. Hover the score badge to see a grouped breakdown by rule type: colour token usage, spacing compliance, typography, accessibility, motion tokens, and more. The score runs 12 compliance checks covering hardcoded values, missing interactive states, semantic HTML, and accessibility attributes. Aim for 80+ before exporting to production.

Push to Figma

Click the Figma icon on any variant to open the Push to Figma modal. Choose viewport sizes (mobile, tablet, desktop), optionally target an existing Figma file, and copy a ready-to-paste command for Claude Code or other AI agents with the Figma MCP server installed.

AI Image Generation

When you prompt for layouts that include imagery (landing pages, hero sections, team pages), the AI generates real images using Google Gemini instead of placeholder services. Images are produced automatically after the component code is generated and seamlessly replace any placeholders in the preview. Requires a GOOGLE_AI_API_KEY environment variable.

Fonts

Layout automatically detects fonts during extraction. From Figma, font families and weights are captured from typography styles. From websites, @font-face rules and computed font declarations are scraped directly.

For Google Fonts (the majority of design systems), Layout auto-detects the font families and injects them into component previews automatically. No configuration needed.

For custom or corporate typefaces not available on Google Fonts, open the Fonts tab in the Source Panel and upload your font files (.woff2, .woff, .ttf, .otf, max 5MB each). Uploaded fonts are:

Injected into Explorer variant previews via @font-face
Included in the export bundle under fonts/ with a generated fonts.css
Available for AI agents to use when generating components

No other design-to-code tool packages custom font files as part of the design system export. Most competitors assume fonts already exist in your codebase or fall back to system fonts.

If the health score is below 50, check that layout.md has well-formed CSS code blocks in the token sections. The AI needs parseable examples to reference at generation time.

Quality Score

The Quality tab in the Source Panel shows your layout.md completeness score across 10 dimensions:

Category	Weight
Quick Reference	15%
Colours	20%
Typography	15%
Spacing	10%
Components	25%
Anti-patterns	15%
Motion	—
Accessibility	—
Icons	—
Grid & Layout	—

90 - 100

Production-ready. Comprehensive coverage across all sections.

70 - 89

Good. Covers most areas, minor gaps in documentation.

40 - 69

Needs work. Missing key sections or lacking detail.

0 - 39

Incomplete. Significant gaps that will affect AI output quality.

Re-extraction and Diffing

When you re-extract a design system (via the re-extract button in the top bar), Layout compares the new extraction against the previous one and shows a visual diff:

1Layout captures the previous extraction state
2Runs a fresh extraction from the source
3Shows a diff modal highlighting all changes (added, removed, modified tokens/components/fonts)
4Choose "Accept" to keep the new extraction or "Discard" to revert to the previous state

Re-extract periodically after major design updates. The diff view makes it easy to see exactly what changed without manually comparing token lists.

Exporting

Click Export in the top bar to open the export modal. layout.md is always included. Choose which additional formats to include in the ZIP:

Format	Filename	Use It For
CLAUDE.md	CLAUDE.md-section.md	Persistent context in Claude Code projects
AGENTS.md	AGENTS.md	Codex, Jules, Factory, Amp. Any agent following agents.md spec
Cursor Rules	.cursor/rules/design-system.mdc	Auto-applied rules in Cursor 0.43+
CSS Tokens	tokens.css	Import directly into any stylesheet
JSON Tokens	tokens.json	W3C DTCG format for Style Dictionary, Theo, etc.
Tailwind Config	tailwind.config.js	Theme extension with extracted colours, spacing, radii
Custom Fonts	fonts/*.woff2 + fonts/fonts.css	Uploaded font files with @font-face declarations

The Tailwind config and tokens.css are ready to drop into your project with no manual editing required. The Tailwind config uses theme.extend so it merges with your existing config.

Next Steps

Explorer for multi-variant generation, comparison view, and pushing to Figma.
CLI Guide to set up the MCP server for automatic design context in your AI agent.
Claude Code integration to add the export files for persistent on-brand context.
Cursor integration to set up .cursorrules or MDC rules files.