# Layout

> The compiler between design systems and AI coding agents.

Layout extracts design systems from Figma files and live websites, then generates structured, LLM-optimised context bundles (layout.md) that help AI coding agents produce on-brand UI code consistently.

## Key Features

- **Extract** design tokens, components, fonts, and screenshots from Figma or live websites
- **Studio editor** with three panels: source browser, layout.md editor with AI chat, and live component preview
- **Explorer** for generating 2–6 component variants from a single prompt
- **MCP server** (`@layoutdesign/context`) that serves design context to AI agents in real-time
- **Export** ZIP bundles with layout.md, tokens.css, tokens.json, tailwind.config.js, AGENTS.md, and Cursor rules
- **Push to Figma** — send AI-generated components back to Figma as real auto-layout frames
- **Compliance checking** — validate generated code against design system rules

## Layout UI

Layout UI is a reskinnable component system: 54 components built on Base UI that consume nothing but semantic design tokens. Every kit published to the Gallery is also an installable Layout UI theme, and every component ships machine-readable rules (usage, never-do, tokens used) so AI agents build with them correctly. Free and open source (MIT).

- Explore: https://ui.layout.design
- Install a component: `npx @layoutdesign/context add <component>`
- Install a theme: `npx shadcn add https://layout.design/r/<slug>/theme.json`
- Docs: https://layout.design/docs/layout-ui
- Compare: https://layout.design/vs/shadcn

## Docs

- [What is Layout?](https://layout.design/docs)
- [Walkthrough](https://layout.design/docs/walkthrough)
- [Studio Editor](https://layout.design/docs/studio)
- [Explorer](https://layout.design/docs/explorer)
- [CLI & MCP Server](https://layout.design/docs/cli)
- [layout.md Format](https://layout.design/docs/layout-md)
- [Component Library](https://layout.design/docs/component-library)
- [Dashboard](https://layout.design/docs/dashboard)
- [Organisations](https://layout.design/docs/organisations)
- [Webhooks](https://layout.design/docs/webhooks)
- [API Reference](https://layout.design/docs/api-reference)
- [Self-Hosting](https://layout.design/docs/self-hosting)

## Integrations

- [Claude Code](https://layout.design/docs/integrations/claude-code)
- [Cursor](https://layout.design/docs/integrations/cursor)
- [GitHub Copilot](https://layout.design/docs/integrations/copilot)
- [Windsurf](https://layout.design/docs/integrations/windsurf)
- [OpenAI Codex](https://layout.design/docs/integrations/codex)
- [Figma Plugin](https://layout.design/docs/figma-plugin)

## Links

- [Pricing](https://layout.design/pricing)
- [Changelog](https://layout.design/changelog)
- [npm package](https://www.npmjs.com/package/@layoutdesign/context)
- [GitHub](https://github.com/uselayout)