# Integrações DESIGN.md

> Conecte DESIGN.md ao Claude Code, Cursor, Kiro, Windsurf e Google Stitch. UI consistente do seu agente de código IA.

## TL;DR

DESIGN.md passa para os agentes de IA suas cores, tipografia e regras de componente em um arquivo. O agente lê antes de gerar qualquer UI, então cada botão, card e formulário segue seu design system — sem você se repetir nos prompts.

## Integrações Primárias

### Claude Code

Claude Code lê CLAUDE.md da raiz do projeto. Adicione uma referência ao seu arquivo DESIGN.md e o Claude seguirá suas regras de design em cada componente gerado.

- **Arquivo de config**: CLAUDE.md
- **Setup**: Adicionar `Leia DESIGN.md antes de gerar UI` ao CLAUDE.md

### Cursor

Cursor usa .cursor/rules/ para instruções específicas do projeto. Crie uma regra que referencie seu arquivo DESIGN.md.

- **Arquivo de config**: .cursor/rules/design.mdc
- **Setup**: Criar regra apontando para seu DESIGN.md

### Kiro

Kiro lê automaticamente arquivos de .kiro/steering/. Coloque seu DESIGN.md lá ou referencie-o do diretório steering.

- **Arquivo de config**: .kiro/steering/
- **Setup**: Copiar DESIGN.md para .kiro/steering/

### Windsurf

Windsurf usa global_rules.md para instruções de todo o projeto. Adicione uma referência ao seu DESIGN.md.

- **Arquivo de config**: global_rules.md
- **Setup**: Adicionar referência ao DESIGN.md no global_rules.md

### Google Stitch

Google Stitch tem suporte nativo a DESIGN.md. Exporte seu design system diretamente do Stitch.

- **Arquivo de config**: Nativo (sem config necessária)
- **Setup**: Usar a exportação DESIGN.md integrada do Stitch

## Também Funciona Com

DESIGN.md integra com qualquer agente de IA que leia arquivos do projeto. Guias de setup disponíveis para:

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

## Funciona com meu agente de IA?

DESIGN.md funciona com qualquer agente de IA que leia arquivos do projeto. Existem integrações para Claude Code, Cursor, Kiro, Windsurf, Google Stitch, Aider, Cline, Codex, Continue, Devin e GitHub Copilot. O setup varia por agente mas o arquivo DESIGN.md permanece o mesmo.

## Preciso do Google Stitch para usar DESIGN.md?

Não. O Google Stitch introduziu o formato, mas DESIGN.md funciona com qualquer agente de IA. Copie um arquivo da biblioteca e referencie no config do seu agente.

## Onde pego um arquivo DESIGN.md?

Copie um da biblioteca designmd.app (mais de 759 arquivos documentados) ou gere um da sua base de código com a skill design-md em skill.dev.br.

## Próximos Passos

- https://designmd.app.br/library — Mais de 759 arquivos DESIGN.md documentados
- https://designmd.app.br/o-que-e-design-md — Especificação do formato e anatomia
- https://designmd.app.br/guides — Guias de setup passo a passo
- https://designmd.app.br/faq — Perguntas comuns

---
Fonte: https://designmd.app.br/integrations