Skip to main content
Home/Recipes/Design-system-aware Cursor project
Code & Tokens

Design-system-aware Cursor project

Developer

Overview

Extract DESIGN.md and add it to Cursor project rules. Every AI suggestion in the editor now has brand context: correct colors, type scale, and spacing before you write a line.

Add the extracted DESIGN.md to .cursorrules or as a Cursor context file. Every AI suggestion Cursor makes in that project now has the brand token system as context. The agent knows the correct primary color, the type scale steps, the spacing rhythm, and the border radius values before you type a prompt. Component suggestions come out on-token. Refactoring suggestions use the right variable names. No more correcting AI-generated hardcoded values after the fact.

Generate DESIGN.md

Terminal
dembrandt example.com --design-md
Add to .cursorrules
# Paste DESIGN.md content into .cursorrules or add as context file.
# Example Cursor prompt after setup:
"Add a pricing card component. Use the design system
tokens in DESIGN.md, no hardcoded values."
Output

Cursor project with brand context. Agent suggestions stay on-token.

More in Code & Tokens

Give GitHub Copilot brand contextRefactor hardcoded colors to token variablesTailwind defaults to brand themeLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExport design tokens to StorybookExtract design tokens for a Next.js application

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more