# Why your AI coding assistant generates off-brand UI (and how to fix it)

> Cursor, Copilot, and Claude generate UI that ignores your design system because they don't have your token context. Flash DSM solves this with Cursor rules and an MCP server that inject live token data into every AI request.

- Source: https://flashdsm.com/blog/cursor-design-tokens-on-brand-ai
- Published: 2026-07-03
- Author: Flash DSM Team
- Category: Tutorial
- Reading time: 5 min read

---

## The problem every AI-native developer has

You open Cursor, type "create a dashboard card component", and the AI generates something like:

```tsx
<div className="bg-white rounded-lg shadow p-4 border border-gray-200">
  <h3 className="text-gray-900 font-semibold text-lg">Card Title</h3>
  <p className="text-gray-600 text-sm mt-1">Card description here</p>
</div>
```

Generic. Gray. Completely disconnected from your design system. Your actual card uses `bg-surface`, `border-border-subtle`, `text-text-primary`, and a border radius of `var(--radius-card)`.

The problem isn't Cursor - it's that Cursor doesn't know your design system exists.

## What Cursor rules do

Cursor rules (stored in `.cursor/rules/`) are markdown files that Cursor reads as persistent context for every AI request in your project. They're like a system prompt that applies to your codebase.

Flash DSM generates a Cursor rule file that looks like this:

```markdown
# Design System - Token Reference

## Color tokens
- Background: `bg-background` (`--color-background: #0F1629`)
- Surface: `bg-surface` (`--color-surface: #1A2540`)
- Primary: `bg-primary` / `text-primary` (`--color-primary: #3B82F6`)
- ...

## Typography
- Display: `font-display` - Inter Display, 600
- Body: `font-sans` - Inter, 400/500
- Sizes: `text-xs` through `text-4xl` mapped to your scale

## Spacing
- xs: `p-1` (4px), sm: `p-2` (8px), md: `p-4` (16px)...

## Component conventions
- Cards use `rounded-card` (`--radius-card: 14px`)
- Buttons use `rounded-button` (`--radius-button: 8px`)
...
```

With this file in your project, Cursor's AI reads your token names, your color values, and your component conventions before generating any code. The same card component request now produces:

```tsx
<div className="bg-surface rounded-card border border-border-subtle p-4">
  <h3 className="text-text-primary font-display text-lg font-semibold">Card Title</h3>
  <p className="text-text-secondary text-sm mt-1">Card description here</p>
</div>
```

On-brand. Uses your tokens. Every time.

## Export Cursor rules from Flash DSM

In the Flash DSM editor, go to **Publish → Cursor Rules**. Flash generates a rules file that includes:

1. Your complete token reference (colors, typography, spacing, radius, shadows)
2. Component naming conventions from your component library
3. Your design system's brand archetype and visual principles
4. Framework-specific guidance (Tailwind class names, CSS variable names)

Drop the exported file into your project's `.cursor/rules/` folder and every AI request in that project will be token-aware from that point on.

## The MCP server (coming soon)

Cursor rules are static - they're written at export time. If you change your design system, you need to re-export.

The Flash DSM MCP server solves this by making token context *live*. Instead of a static file, the MCP server exposes tools that Cursor can call in real time:

- `get_design_tokens(category?)` - read current tokens
- `get_component(name)` - get component spec + code
- `list_violations(file?)` - DS lint results
- `suggest_token_usage(context)` - AI-friendly recommendations

When the MCP server is running, Cursor asks it "what are the current color tokens?" before generating any UI - so token changes in Flash DSM are immediately reflected in every AI-assisted coding session.

The MCP server is in active development. The static Cursor rules export is available today on all plans.

## Practical checklist

To make your AI coding assistant generate on-brand UI:

1. **Generate your design system** in Flash DSM (or import from Figma/URL)
2. **Export Cursor rules** from the Publish panel
3. **Drop the file** into `.cursor/rules/design-system.md` in your project
4. **Test it** - ask Cursor to create a button, a card, or a form field and verify it uses your tokens
5. **Re-export** whenever you update your design system

That's it. Five steps to AI that actually respects your design language.