DEV Community

Cover image for How to Wire DESIGN.md into Claude Code, Cursor, Kiro and Windsurf
PromptMaster
PromptMaster

Posted on

How to Wire DESIGN.md into Claude Code, Cursor, Kiro and Windsurf

#webdev #ai #tutorial #design

To make an agent use DESIGN.md, point its persistent-context mechanism at the file. The pattern is the same everywhere: tell the agent to read DESIGN.md for UI work.

Claude Code

Reference DESIGN.md from your CLAUDE.md:

# In CLAUDE.md

## Design
This project has a DESIGN.md defining the visual identity.
Before generating or modifying any UI, read DESIGN.md and
follow its tokens and rationale. Use the accent color only
as the rationale specifies.
Enter fullscreen mode Exit fullscreen mode

Cursor

Use a rules file to inject DESIGN.md into every UI generation, so the design context is present whenever the agent produces interface code.

Kiro and Windsurf 

# Kiro     -> add DESIGN.md to the steering directory
# Windsurf -> point the global rules file at DESIGN.md
Enter fullscreen mode Exit fullscreen mode

Every agent has a persistent-context mechanism; you route it to your design file.

Verify it is honoured

Ask the agent to generate a component and inspect the result:

  • Does the button use your accent, or a generic blue?
  • Are the corners your radius?
  • Does the spacing match your scale?

The first generation usually reveals a gap in your prose. Fill it, and the fix is permanent.

One file, many tools

Because DESIGN.md is an open format, the same file serves Claude Code, Cursor, Kiro and Windsurf at once - one design source of truth, no per-tool drift.

FAQ

Where do DESIGN.md files come from? Write one by hand, generate a draft with an agent, or export from Google Stitch.
Does it work across tools? Yes - one file, read by each tool's own mechanism.

Bottom line

Wiring in DESIGN.md is always the same move: tell the agent's context mechanism to read the design file for UI work.

Free starter: The format, a complete annotated example, and the core idea are on a free cheat sheet: DESIGN.md Quick-Start Cheat Sheet

Go deeper: The full guide covers the entire format — the token schema, the CLI in depth, accessibility, Tailwind and DTCG export, agent integration, and a complete walkthrough: DESIGN.md: The Complete Guide to Design Systems for AI Agents

Which agent are you wiring DESIGN.md into first? Curious which tools people are using for UI work these days.

Top comments (0)