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

To make an agent use DESIGN.md, point its persistent-context mechanism at the file: reference it from CLAUDE.md for Claude Code, a rules file for Cursor, the steering directory for Kiro, and global rules for Windsurf. The pattern is the same everywhere — tell the agent to read DESIGN.md for UI work.

How do I wire DESIGN.md into Claude Code?

The cleanest approach is to reference DESIGN.md from your CLAUDE.md, so the agent knows to consult it for any UI work. A single line that names the file and states when to use it — "before generating UI, read DESIGN.md and follow its tokens and rationale" — is enough to create the link.

How do I wire it into Cursor?

In Cursor, you use a rules file to inject DESIGN.md into every UI generation, so the design context is present whenever the agent produces interface code. The principle matches Claude Code: point the agent's native rules mechanism at the design file.

How do I wire it into Kiro and Windsurf?

In AWS Kiro, add DESIGN.md to the project's steering directory, where it becomes persistent context. In Windsurf, point the global rules file at your DESIGN.md. The details differ, but the idea is universal: every agent has a mechanism for persistent context, and you route it to your design file.

How do I confirm the agent is using it?

Ask the agent to generate a component and inspect the result against your system. Does the button use your accent color, or a generic blue? Are the corners your radius? The first generation usually reveals a gap in your prose, which you then fill — and the improvement is permanent.

FAQ

Does one DESIGN.md work across tools? Yes. Because it is an open format, the same file serves Claude Code, Cursor, Kiro and Windsurf at once, with no per-tool design drift.

Where do DESIGN.md files come from? You write one by hand, generate a draft with an agent, or export one from Google Stitch, the format's reference consumer.