← Home

Cursor

Cursor reads project rules from .cursor/rules and MCP servers from .cursor/mcp.json. Layout sets up both: the rules inject your design system into every Composer and Chat prompt, and the MCP server gives the agent live access to tokens, component specs, and compliance checking.

Option A: the CLI (recommended)

One command registers the Layout MCP server in .cursor/mcp.json and creates .cursor/rules/layout.mdc (and AGENTS.md) from your loaded kit when they do not exist yet:

bash
npx @layoutdesign/context install --target cursor

If a legacy .cursorrules file already exists, the CLI augments it instead of creating the MDC rule. To regenerate just the Cursor rule at any time:

bash
npx @layoutdesign/context export --format cursor
Cursor's marketplace listing for MCP servers is submission-based; Layout's listing is in the submission pipeline. The CLI install above gives you the identical MCP setup today, no marketplace required.

Option B: MDC rules from the export bundle

The Studio export bundle includes two MDC rules files, which offer finer control over when rules are applied. Copy them into your project:

bash
mkdir -p .cursor/rules
cp path/to/export/.cursor/rules/design-system.mdc .cursor/rules/design-system.mdc
cp path/to/export/.cursor/rules/components.mdc .cursor/rules/components.mdc

MDC rules support a frontmatter globs field to scope when the rules apply. Open the file and adjust it if needed. For example, to target only TypeScript and CSS files:

markdown
---
description: Design system rules
globs: ["**/*.tsx", "**/*.css"]
alwaysApply: false
---

<!-- Design system context here -->
Scoping to ["**/*.tsx", "**/*.css"] keeps design system context out of non-UI files (config, tests, scripts) and helps Cursor stay focused on the right rules.

Using in Cursor Composer

With either rules file in place, Cursor Composer will automatically follow the design system on every generation. You can also reference it explicitly to reinforce the intent:

text
Build a primary button following our design system

Chat works the same way. The design context is present on every message without you having to paste it manually.

For the most accurate completions, also add tokens.css to your project and import it in your global stylesheet. Cursor picks up context from open files, so keeping layout.md open in a tab further improves output quality.