Guias de DESIGN.md

Um DESIGN.md transforma o sistema de design de um site em um arquivo que seu agente de código consegue ler: cores, tipografia, espaçamento, raios e componentes, com as regras de uso. Estes guias mostram o que fazer com ele, passo a passo, cada um com um exemplo prático feito a partir de um arquivo real da galeria de DESIGN.md.

Ainda não conhece o formato? Comece por o que é um DESIGN.md. Pronto para criar o seu? Gere um DESIGN.md de qualquer site.

Guias por caso de uso

Desenvolvedores que programam com um agente de código com IA
Faça o Claude Code e o Cursor criarem UI com o visual de um site
Extraia um site que você curte, coloque o DESIGN.md dele no seu repositório e aponte seu agente para o arquivo, com os prompts exatos para Claude Code e Cursor.
Fundadores solo e times pequenos
Sem designer? Adote um design system já testado no seu app
Como escolher um site de referência, o que manter do DESIGN.md dele e o que mudar para que o resultado seja seu, e não uma cópia.
Times planejando reconstrução, rebranding ou migração
Vai refazer seu site? Extraia o design system dele primeiro
Registre seu site atual como DESIGN.md antes de refazer, fazer rebranding ou trocar de framework, e saiba o que conferir à mão.
Designers e agências criando protótipos
Misture dois sites de referência em um só design para um protótipo
Compare dois arquivos DESIGN.md extraídos, token por token, e junte os dois em uma especificação para um protótipo, à mão ou com seu agente.
Desenvolvedores criando agentes e fluxos com agentes
Dê ao seu agente de código especificações de design sob demanda com MCP
Conecte o servidor MCP para seu agente extrair sozinho o DESIGN.md de um site, esperar a extração terminar e construir a partir dele.