Integrations
Layout works with every major AI coding tool. Export your design system bundle once, then drop the right file into each tool. Your AI assistant will follow the design system on every prompt without you having to paste context manually.
Claude Code
Add the design system to CLAUDE.md so every component Claude generates is on-brand without manual context pasting.
Cursor
Use .cursorrules or MDC rules files to inject design system context into every Composer and Chat prompt.
GitHub Copilot
Persist design context via .github/copilot-instructions.md so inline completions follow your token system.
Windsurf
Configure windsurf.rules and import tokens.css so Cascade suggestions naturally use the correct token values.
Google Antigravity
Add the Layout MCP server via the MCP Store or manual config. Antigravity agents get full design system context on every prompt.
OpenAI Codex
Drop AGENTS.md into your repo root. Codex reads it automatically on every task, no further setup required.
Chrome Extension
Extract design tokens from any webpage, inspect elements against your design system, check compliance scores, and push to Figma from a browser sidebar.
Token files
Regardless of which AI tool you use, adding the token files to your codebase makes completions more accurate. Both tokens.css and tailwind.config.js work with all tools. The AI sees the actual token values in your source files, reinforcing the design system rules in context.
tokens.css: CSS custom properties
Import in your global stylesheet to make all design tokens available as CSS custom properties throughout your project.
/* globals.css or app.css */
@import "./tokens.css";tailwind.config.js: Tailwind theme
Replace or merge with your existing Tailwind config. All extracted tokens are pre-mapped into the Tailwind theme, so your AI-generated class names use the correct values.
// tailwind.config.js: already maps all extracted tokens into Tailwind's theme
const config = require("./tailwind.config.js");