# DESIGN.md Integrations

> Connect DESIGN.md to Claude Code, Cursor, Kiro, Windsurf, and Google Stitch. Consistent UI from your AI coding agent.

## TL;DR

DESIGN.md gives AI agents your colors, typography, and component rules in one file. The agent reads it before generating any UI, so every button, card, and form follows your design system — without you repeating yourself in prompts.

## Primary Integrations

### Claude Code

Claude Code reads CLAUDE.md from the project root. Add a reference to your DESIGN.md file and Claude will follow your design rules in every generated component.

- **Config file**: CLAUDE.md
- **Setup**: Add `Read DESIGN.md before generating UI` to CLAUDE.md

### Cursor

Cursor uses .cursor/rules/ for project-specific instructions. Create a rule that references your DESIGN.md file.

- **Config file**: .cursor/rules/design.mdc
- **Setup**: Create a rule pointing to your DESIGN.md

### Kiro

Kiro automatically reads files from .kiro/steering/. Place your DESIGN.md there or reference it from the steering directory.

- **Config file**: .kiro/steering/
- **Setup**: Copy DESIGN.md to .kiro/steering/

### Windsurf

Windsurf uses global_rules.md for project-wide instructions. Add a reference to your DESIGN.md.

- **Config file**: global_rules.md
- **Setup**: Add reference to DESIGN.md in global_rules.md

### Google Stitch

Google Stitch has native DESIGN.md support. Export your design system directly from Stitch.

- **Config file**: Native (no config needed)
- **Setup**: Use Stitch's built-in DESIGN.md export

## Also Works With

DESIGN.md integrates with any AI agent that reads project files. Setup guides available for:

- Aider
- Cline
- Codex
- Continue
- Devin
- GitHub Copilot

## Does it work with my AI agent?

DESIGN.md works with any AI agent that reads project files. Integrations exist for Claude Code, Cursor, Kiro, Windsurf, Google Stitch, Aider, Cline, Codex, Continue, Devin, and GitHub Copilot. Setup varies by agent but the DESIGN.md file remains the same.

## Do I need Google Stitch to use DESIGN.md?

No. Google Stitch introduced the format, but DESIGN.md works with any AI agent. Copy a file from the library and reference it in your agent config.

## Where do I get a DESIGN.md file?

Copy one from the designmd.app library (759+ documented files) or generate one from your codebase with the design-md skill at skill.dev.br.

## Next Steps

- https://designmd.app/library — 759+ documented DESIGN.md files
- https://designmd.app/what-is-design-md — Format specification and anatomy
- https://designmd.app/guides — Step-by-step setup guides
- https://designmd.app/faq — Common questions

---
Source: https://designmd.app/integrations