Your AI Agent Ignores Your Design System. DTCG Tokens + AGENTS.md Tells It to Stop.

Export your design system as W3C DTCG JSON, build CSS custom properties with Style Dictionary, and add one line to AGENTS.md — Claude Code will then use your actual tokens instead of generic defaults in every component it generates.

What you'll be able to do after this: make Claude Code (and other agents) generate components that use your actual design tokens — brand colors, spacing, typography — rather than the plausible-looking defaults they fall back on when you haven't told them where to look.

Three things you'll take away:

• How to export your design system as W3C DTCG JSON — the format agents can parse without special tooling
• How to compile those tokens to CSS custom properties your agent can find and use
• The one AGENTS.md line that makes the whole pipeline stick

Why agents ignore your tokens without this. Agents parse your codebase but don't know which values represent deliberate design decisions. Without explicit pointing, they pattern-match on whatever they see first — often Tailwind defaults or shadcn variables. A machine-readable token file plus an instruction in AGENTS.md fixes this without plugins.

Step 1 — Export DTCG JSON from Figma. Plugins → Tokens Studio → Export → W3C DTCG format. (Tokens Studio is free; DTCG export requires Figma with Variables, which is on paid plans.) This produces a tokens.json with $value and $type fields that any JSON-capable process can read:

{
  "color": {
    "brand": {
      "primary": { "$value": "#3b82f6", "$type": "color" },
      "secondary": { "$value": "#06b6d4", "$type": "color" }
    }
  },
  "spacing": {
    "md": { "$value": "16px", "$type": "dimension" }
  }
}

Add this as design-system/tokens.json at the repo root and commit it.

Step 2 — Build CSS custom properties with Style Dictionary.

npm install --save-dev style-dictionary

sd.config.json:

{
  "source": ["design-system/tokens.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "files": [{ "destination": "design-system/tokens.css", "format": "css/variables" }]
    }
  }
}

npx style-dictionary build --config sd.config.json

This writes design-system/tokens.css with entries like --color-brand-primary: #3b82f6. Commit it so the agent can read it at session start.

Step 3 — Point Claude Code at the token file. Add to AGENTS.md (or .claude/CLAUDE.md):

## Design system
Always read `design-system/tokens.css` before generating or editing any component.
Use CSS custom properties from that file for all colors, spacing, and typography.
Do not invent color values or use Tailwind defaults when a token exists.

Claude Code reads AGENTS.md at session start and applies the instruction consistently.

Where this breaks: agents will still fall back to defaults wherever your token file has gaps — incomplete coverage in the spec means incomplete coverage in the output. Style Dictionary's default CSS naming (e.g. --color-brand-primary) may not match your existing component library's naming convention; if they diverge you'll need a custom formatter. DTCG export from Figma also requires the Variables feature, which is not on the free plan.

Sources: Stop AI from Ignoring Your Design Tokens — atomize.tools · Style Dictionary DTCG docs · W3C Design Tokens Community Group