O que é DESIGN.md? O arquivo de design que agentes de código com IA leem (com exemplos gratuitos de apps para celular)

O DESIGN.md é um arquivo Markdown que descreve a identidade visual de um produto para agentes de código com IA. O formato do Google Labs combina tokens de design em YAML (opcionais) com orientações por escrito sobre como usá-los. Ele fornece a um agente regras concretas de cores, tipografia, espaçamento e componentes para ler antes de gerar uma interface.

Para desenvolvedores de apps de celular, a parte mais útil é poder levar essas escolhas para a próxima tela. Comece com um arquivo da nossa biblioteca gratuita de DESIGN.md para celular, inspecione as telas ao lado dele e adapte as regras para o seu app.

Quem criou o DESIGN.md?

O Google Labs publica o formato DESIGN.md usado pelo Stitch. O Google introduziu a importação e exportação de DESIGN.md no seu anúncio do Stitch em março de 2026 e, em seguida, abriu o código do rascunho da especificação em abril. O repositório oficial ainda classifica o formato como alpha, então consulte a especificação atual ao construir uma integração.

Um arquivo chamado DESIGN.md também pode ser apenas um documento comum de projeto. Ao compartilhar um arquivo desse tipo, informe qual formato ele utiliza e mantenha o texto original disponível para inspeção.

O que entra em um arquivo DESIGN.md?

A especificação do Google Labs descreve um corpo em Markdown com frontmatter em YAML opcional. Os grupos de tokens cobrem cores, tipografia, cantos arredondados, espaçamento e componentes. O corpo explica decisões como onde aplicar uma cor de destaque ou como os botões se diferenciam dos cards. Valores exatos e orientações por escrito cumprem funções distintas.

A especificação aceita strings de cores em CSS, incluindo valores hexadecimais. Coloque cores em hexadecimal entre aspas no YAML: uma cerquilha sem aspas inicia um comentário. Uma referência como {colors.primary} aponta para outro token no arquivo. A biblioteca do Sleek exibe amostras em hex ao lado do texto original para que você possa conferir a paleta antes de baixá-la.

Como é um exemplo mínimo de DESIGN.md?

Um DESIGN.md inicial pode descrever um pequeno sistema visual: uma paleta, um estilo de corpo de texto, um valor de espaçamento e um botão. O exemplo abaixo foi escrito para este guia. Salve-o como DESIGN.md e adicione regras conforme o seu app de celular precisar. É um ponto de partida, não uma biblioteca de componentes pronta.

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

Verifique as suas próprias adições com o comando de lint do repositório. O diagnóstico ajuda a identificar referências quebradas e problemas de contraste entre cores. Mesmo assim, inspecione a tela renderizada: um arquivo de texto não mostra um rótulo cortado, um controle confuso ou o teclado cobrindo um formulário.

npx @google/design.md lint DESIGN.md

Como usar o DESIGN.md com o Claude Code?

Mantenha DESIGN.md no projeto e peça ao Claude Code para lê-lo nas tarefas de interface. A documentação de memória da Anthropic explica que as importações de CLAUDE.md são carregadas no início da sessão. Use uma referência simples ao caminho para leitura sob demanda, ou uma regra em .claude/rules/ com padrões paths que correspondam aos seus arquivos de interface.

Por exemplo, adicione esta instrução ao CLAUDE.md sem uma importação @:

For UI tasks, read DESIGN.md before creating or changing app screens.

Em seguida, peça uma tela específica e seus estados. Por exemplo, peça uma lista de tarefas com um estado vazio e um estado de falha na sincronização. Revise se a UI gerada segue os valores do arquivo e atualize o DESIGN.md quando você alterar o design intencionalmente. Nosso guia para desenhar com o Claude cobre o fluxo de trabalho completo.

Como usar o DESIGN.md com o Cursor ou o Stitch?

No Cursor, anexe o DESIGN.md explicitamente à tarefa ou faça referência a ele em uma regra de projeto. No Stitch, use o fluxo de importação e exportação de DESIGN.md para transferir regras de design entre projetos. A distinção é importante: um agente de código precisa do arquivo em seu contexto, enquanto o Stitch oferece um fluxo de trabalho construído em torno desse formato.

Para o Cursor, a documentação de regras explica as regras de projeto e as referências de arquivos. Uma regra pode instruir o agente a ler o DESIGN.md sempre que fizer alterações de UI. Defina quando a regra se aplica para evitar que tarefas de backend não relacionadas carreguem um documento de design extenso.

No caso do Stitch, o anúncio do DESIGN.md do Google confirma que você pode importar e exportar regras de design entre projetos. Após a importação, compare a tela gerada com o arquivo original e ajuste as regras quando necessário.

Como o Sleek usa o DESIGN.md para estilos de apps de celular?

O Sleek armazena um arquivo de design com cada referência destacada e remixável. Quando você escolhe Usar este estilo e descreve seu app, o Sleek envia esse arquivo junto com o seu brief para a geração. O arquivo descreve a estética; o seu brief determina o propósito e o conteúdo do app. Você pode inspecionar as telas e o arquivo com antecedência.

A galeria de referências e a biblioteca de DESIGN.md utilizam os mesmos projetos em destaque. O Sleek usa a estrutura do Google Labs e acrescenta propriedades de componentes, como bordas e sombras, que o linter aponta como avisos. Também adiciona orientações sobre iconografia, ilustração, hierarquia e detalhes visuais marcantes. O arquivo de estilo registra as escolhas visuais para gerar um novo app.

Abra um estilo na biblioteca para copiar ou baixar o seu DESIGN.md ou escolha Use this style in Sleek para inserir a ideia do seu app. Se quiser controlar o Sleek diretamente do seu ambiente de desenvolvimento, o guia de configuração do agente explica essa integração dedicada.

Perguntas frequentes sobre DESIGN.md