Using designtoken.md with Cursor

Q: How does Cursor find my designtoken.md?

Place designtoken.md in your project root. Cursor reads project files as context when you reference them, and files in the root directory are the easiest for Cursor to discover.

1 Generate your token file

Generate your token file

Head to the designtoken.md generator and configure your design system:

Pick your brand colors and let the generator build full color scales
Configure typography — font families, sizes, and weights
Set spacing and border-radius values
Switch to the designtoken.md tab in the output panel
Copy the output or download the file

Open the generator →

2 Place it in your project

Place it in your project root

Drop the file at the root of your project so Cursor picks it up as context:

your-project/
├── designtoken.md    ← place it here
├── src/
├── package.json
└── ...

Cursor reads project files as context when you reference them. By placing designtoken.md at the top level, it becomes easy to reference and Cursor can discover it when scanning your project structure.

3 Use with Cursor

Start building with tokens

Cursor reads project files as context when you reference them. You can add designtoken.md to your .cursorrules file or reference it directly in prompts:

// In .cursorrules:
"Always reference designtoken.md for styling decisions. Use the defined
color scales, typography, spacing, and radius tokens."

// Or reference directly in chat:
"Build a dashboard layout using the tokens from designtoken.md."

The structured markdown format means Cursor can parse the token definitions deterministically — it reads the headings, tables, and code blocks to extract exact values for colors, spacing, typography, and components.

Before & after

See the difference tokens make in what your agent outputs:

Without tokens (generic)

<button style="
  background: blue;
  color: white;
  padding: 10px 20px;
">
  Click me
</button>

With designtoken.md

<button style="
  background: var(--color-primary-500);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
">
  Click me
</button>

With tokens, every component Cursor generates uses your actual design values instead of arbitrary defaults.

Tip

If you generate the same tokens across multiple projects, you can encode them as a reusable skill on skill.design — so your design system follows you everywhere.

Best practices

Keep your designtoken.md at the project root
Regenerate when your design direction changes
The visual reference section helps agents understand the intended aesthetic
Commit the file to version control so all team members get the same tokens
If you find yourself using the same tokens across multiple projects, turn them into a reusable design skill on skill.design — your agent can install your design preferences as a package.

Frequently asked questions

How does Cursor find my designtoken.md?

Place designtoken.md in your project root. Cursor reads project files as context when you reference them, and files in the root directory are the easiest for Cursor to discover.

Should I add it to .cursorrules?

You can reference it there for automatic inclusion. Adding a line like "Always use the tokens defined in designtoken.md for styling" to your .cursorrules means Cursor will apply your design tokens without needing a reminder in each prompt.

Does Cursor use the full color scale?

Yes. The structured markdown format of designtoken.md lets Cursor parse and apply specific scale values like --color-primary-100 through --color-primary-900, rather than just a single brand color.

Generate your designtoken.md →