← Home

Cursor

Cursor uses .cursorrules or MDC rules files to inject context into every AI prompt in the editor. Layout exports both formats, so use whichever matches your Cursor version.

Option A: .cursorrules (all versions)

Copy the .cursorrules file from your export bundle to your project root:

bash
cp path/to/export/.cursorrules .cursorrules

Cursor automatically reads this file and injects the design system context into both Composer and Chat on every prompt.

Option B: MDC rules (Cursor 0.43+)

Cursor 0.43 and later supports MDC rules files, which offer finer control over when rules are applied. Copy the MDC file into your project:

bash
mkdir -p .cursor/rules
cp path/to/export/cursor/rules/design-system.mdc .cursor/rules/design-system.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.