← Home

Chrome Extension

Alpha

The Layout Chrome extension lives in your browser sidebar. Extract design tokens from any webpage, inspect elements against your design system, check compliance scores, capture screenshots, and push pages to Figma. All without leaving the tab you are on.

Download Chrome Extension (Alpha)

v0.1.0 · 95 KB · Chrome or Chromium-based browsers

Five Tools

Extract

Extracts design tokens from the current page: colours, typography, spacing, border radius, fonts, CSS variables, and detected CSS frameworks. Push the extracted tokens directly to a Layout project with one click.

Capture

Screenshot the current page as viewport, full-page, or a selected region. Push the screenshot to your Layout Explorer where AI can rebuild the design using your tokens. Download option also available.

Inspect

Click any element on the page to see its computed styles: typography, layout, and visual properties. The extension matches each value against your project's design tokens. Green means on-system. Red means off-brand. One click copies the element's HTML and styles, formatted for pasting into an AI coding agent.

Comply

Run a compliance check on the current page against your project's design tokens. Shows a score ring (0 to 100) with a per-category breakdown: colours, typography, and spacing. Each category lists on-system and off-system counts so you can see exactly where a page drifts from the design system.

Figma

Send the current webpage to Figma as rendered frames. Select which viewports to capture (desktop, tablet, mobile) and optionally provide a Figma file URL to add to an existing file. Click Copy Prompt for Claude Code and paste it into Claude Code. It calls the url-to-figma MCP tool, which uses Figma MCP and Playwright to capture and place the page as frames in your Figma file.

Requires three MCP servers: Layout MCP (@layoutdesign/context), Figma MCP (mcp.figma.com), and Playwright MCP.

Installation

The extension is currently in alpha and installed manually via Chrome's developer mode. It will be published to the Chrome Web Store soon.

  1. Download the extension ZIP and unzip it
  2. Open Chrome and navigate to chrome://extensions
  3. Enable Developer mode (toggle in the top right)
  4. Click Load unpacked and select the dist folder inside the unzipped directory
  5. The Layout icon appears in your Chrome toolbar. Click it to open the side panel.
This is an alpha release. The extension will be published to the Chrome Web Store soon, at which point installation will be a single click.

Setup

The extension connects to your Layout account to push extracted data and check compliance against your project's design tokens.

  1. Open the extension side panel and tap the Settings tab at the bottom
  2. Enter your Layout API key. Generate one at layout.design > Settings > API Keys
  3. If you are running a self-hosted Layout instance, change the Server URL to your instance's address before entering the API key
  4. Select your organisation and project from the dropdowns
  5. The Home tab now shows quick actions and the current page URL
Your API key and server URL are stored locally in Chrome's extension storage. They are never sent to any third party.

Copy for AI Workflow

The Inspect tool includes a "Copy for AI" button that formats the selected element's HTML and computed styles into a structured prompt. Paste it directly into Claude Code, Cursor, or any AI coding agent. The agent receives the exact element markup, its computed CSS values, and which design tokens it matches, giving it enough context to recreate the element on-brand.

  1. Open the Inspect tool in the side panel
  2. Click any element on the page to select it
  3. Review the computed styles and token matches in the side panel
  4. Click Copy for AI
  5. Paste into your AI coding agent's prompt

Compliance Scoring

The Comply tool analyses the current page against the design tokens in your connected Layout project. It checks colours, typography, and spacing values used on the page and reports how many are on-system versus off-system.

80 - 100
Strong adherence. Most values match the design system. Minor off-system values are likely intentional.
50 - 79
Partial adherence. Some values drift from the system. Review the per-category breakdown.
0 - 49
Low adherence. Significant drift. The page may be using hardcoded values or an outdated design system.

Troubleshooting

Side panel does not open

Ensure the extension is enabled in chrome://extensions. Try clicking the Layout icon in the toolbar, then selecting "Open side panel". Some Chrome versions require pinning the extension first.

Extract returns no tokens

The page may be using inline styles or a CSS-in-JS library that injects styles at runtime. Try waiting for the page to fully load before extracting. Pages behind authentication walls may also block content script access.

Inspect shows no token matches

Token matching requires a connected Layout project with extracted design tokens. Go to Settings, verify your API key is valid, and select a project that has completed extraction.

Comply shows 0 score

Ensure the connected project has design tokens. If the project was created but never extracted, there are no tokens to check against. Run an extraction in Layout Studio first.

Figma push fails

Check that your Figma access token is valid and has write permissions. The file key must match an existing Figma file you have edit access to. Generate a new token at Figma > Settings > Account > Personal access tokens.

Extension not working on certain pages

Chrome extensions cannot inject content scripts into chrome:// pages, the Chrome Web Store, or pages with strict Content Security Policies. Try on a standard webpage.

Tips

  • Use Extract on competitor sites or design references to quickly capture their token systems into Layout for comparison
  • Comply is useful for auditing client sites before a redesign. Run it on multiple pages to get a baseline compliance score
  • The Inspect tool's "Copy for AI" output includes CSS variable names where detected, giving your AI agent concrete token references
  • Capture screenshots and push them to the Explorer where AI can recreate the design using your own tokens
  • The extension works alongside Layout Studio. Extract tokens from a live site in the extension, then generate layout.md from them in the Studio