Google Stitch abre a DESIGN.md entre plataformas

Introdução

Google Stitch DESIGN.md é a palavra que define a movimentação estratégica da Google para padronizar o jeito como sistemas de design conversam com agentes e ferramentas. Ao abrir o código da especificação, a empresa coloca no mercado um formato que transforma regras visuais em instruções claras para humanos e máquinas, com portabilidade entre plataformas.

A especificação DESIGN.md do Stitch combina tokens de design em YAML com racional em Markdown, valida acessibilidade com WCAG e já chega com um CLI que faz lint, diff e exporta para outros formatos. Isso dá ao design system um formato versionável, auditável e realmente utilizável por agentes.

O que a Google abriu exatamente

A Google abriu como open source a especificação em torno do arquivo DESIGN.md, hospedando o repositório público no GitHub com licença Apache 2.0. O repositório descreve o escopo do formato, documentação, exemplos e um pacote npm para uso do CLI. Há comandos para lint, diff, exportação e consulta da própria spec. Em 21 de abril de 2026, o repositório publicou a release 0.1.0.

Por que isso importa para times de produto

Padronização além do Figma, Sketch e código. O DESIGN.md define tokens e também o racional, o que facilita transferência entre ferramentas e agentes, sem perder a intenção por trás das escolhas.
Automação de qualidade. O CLI valida contraste contra WCAG e identifica problemas estruturais, reduzindo o risco de inconsistências ao longo do ciclo.
Portabilidade de tokens. Exportação direta para Tailwind e DTCG encurta o caminho entre design e engenharia.

![Design system tokens em arquivo Markdown]

Como o DESIGN.md funciona na prática

O formato tem duas camadas. Primeiro, um front matter em YAML, com tokens como cores, tipografia, raios de borda, espaçamentos e componentes. Em seguida, um corpo em Markdown que explica o racional, a ordem de seções, como aplicar paleta e tipografia, além de boas práticas. Os tokens são normativos, o texto orienta as aplicações.

Exemplo de tokens, com cores em hex sRGB, tipografia com família, tamanho, peso, altura de linha e espaçamento entre letras.
Ordem de seções padronizada, com Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do’s and Don’ts.
Componentes com propriedades válidas, como backgroundColor, textColor, typography, rounded, padding, size, height e width, inclusive variações como hover.

Na execução, um agente ou pipeline consegue ler o DESIGN.md, validar, comparar versões e exportar tokens para um tema Tailwind ou para o padrão DTCG. O resultado é menos retrabalho na passagem de handoff, já que o mesmo arquivo guia a geração de UI e o front end.

Stitch, IA e a proposta de portabilidade

O Stitch é o canvas de design com IA do Google Labs. Recentemente, a Google destacou que o Stitch evoluiu para um estúdio de design nativo em IA, com geração de interfaces de alta fidelidade a partir de linguagem natural, além de recursos como agentes e integração com modelos Gemini. Nesse contexto, o DESIGN.md funciona como memória persistente de estilo e regras para agentes e exportações.

Foco em intenção. Em vez de apenas desenhar pixels, o Stitch e seus agentes entendem a intenção por trás das regras, como uso de cores, contraste e tipografia, e conseguem validar escolhas automaticamente.
Laboratório com ambição de padrão. O DESIGN.md leva essa inteligência para fora do Stitch, já que o arquivo é aberto e validável em qualquer pipeline que implemente a spec.

Casos de uso imediatos

Migração de design systems entre times e fornecedores. Design systems frequentemente vivem presos a uma ferramenta. Com DESIGN.md, tokens e racional viajam com o projeto e com o time, reduzindo dependência e tempo de onboarding.
Auditorias de acessibilidade e revisão contínua. O linter checa contraste e referência de tokens, e o diff detecta regressões em mudanças de versão. Bom para esteiras com controle rigoroso.
Integração com frameworks de front end. Exportação direta para Tailwind e DTCG aproxima o arquivo de uma fonte única de verdade entre design e engenharia.
Agentes de design internos. Equipes podem injetar a spec e as regras do DESIGN.md como contexto em agentes internos, padronizando gerações e correções.

![Validação de contraste e tokens com CLI]

O que o CLI entrega hoje

O pacote npm @google/design.md instala um CLI com quatro comandos principais.

lint, valida estrutura e aplica regras, com saída padronizada em JSON, incluindo severidade e resumo de erros, avisos e infos.
diff, compara dois arquivos DESIGN.md, mostra tokens adicionados, removidos e modificados e sinaliza regressão quando há aumento de problemas.
export, converte tokens para Tailwind e DTCG, gerando arquivos prontos para consumo em temas e em pipelines de design tokens.
spec, retorna a especificação em Markdown ou JSON, útil para injetar o conjunto de regras em agentes e testes automáticos.

Para organizações com múltiplos produtos, essa composição cobre pilares críticos, validação automática, comparação de versões e saída para consumo em tempo de build.

Limites e riscos a observar

Maturidade de ecossistema. O repositório indica uma versão 0.1.0 em abril de 2026, o que significa que a spec ainda está em amadurecimento. Mudanças são prováveis, então vale blindar pipelines com locks de versão e testes.
Adoção por terceiros. Apesar de aberto, o valor total depende de quão rápido editores, plugins e ferramentas de design e código passam a entender e validar o DESIGN.md nativamente. Este é o ponto de atenção para times que dependem de integrações amplas.
Governança de tokens e racional. Padronizar a escrita do racional e manter consistência semântica é desafio organizacional. A spec define ordem e estrutura, mas a qualidade do conteúdo depende da disciplina do time.

Comparativo com o status quo

Hoje, times costumam manter tokens em JSON ou ferramentas específicas, e a documentação de racional vive em wikis. O DESIGN.md unifica essas peças em um arquivo audível, legível por agentes e pronto para lint e diff. Em vez de justificar escolhas só em revisões, o racional acompanha os tokens e vira dado de entrada para agentes e validação, reduzindo inconsistência entre telas e produtos.

Hand-off mais curto. Exportação para Tailwind e DTCG reduz trabalho manual para adaptar tokens de design ao tema do front end.
Qualidade previsível. Regras de lint com severidade estável e checagem de contraste elevam o padrão mínimo de entrega.

Como aplicar já, passo a passo

Crie um protótipo do seu DESIGN.md. Defina name, cores, tipografia, espaçamentos, raios e pelo menos dois componentes com suas propriedades, incluindo variações de estado. Respeite a ordem de seções para evitar erros.
Valide com o CLI. Rode o lint, sane warnings e garanta contraste. Documente como cada componente deve aplicar tokens, com exemplos.
Gere artefatos. Exporte para Tailwind ou DTCG, conecte com seu build e publique como pacote interno. Versione o DESIGN.md junto do código da aplicação.
Feche o ciclo com agentes. Use o comando spec para injetar as regras em prompts de agentes internos e do Stitch, para que toda geração respeite o design system.

Reflexões e insights

Padronizar design para agentes exige capturar não só números, exige capturar intenção. O ganho do DESIGN.md é tornar legível essa intenção, sem perder a precisão dos tokens. Quando o agente entende para que serve cada cor e tipografia, consegue propor alternativas e validar escolhas com base em regras objetivas e contexto declarado.

Outro ponto é governança. A partir do momento em que o racional fica ao lado dos tokens, equipes passam a discutir por que e não só o que mudou. O diff deixa clara a evolução da linguagem visual. E a exportação para padrões como Tailwind e DTCG aproxima o discurso do design do impacto no código. Isso reduz divergências entre squads e acelera descoberta, pois hipóteses de UI viram protótipos funcionais com mais rapidez.

O Stitch evolui como estúdio de design com IA. A integração com modelos Gemini e a ênfase em uma linguagem compartilhada entre humanos e agentes apontam para ciclos de design mais curtos e mais controlados. O DESIGN.md é a peça que permite levar essa linguagem para fora do próprio Stitch e para dentro dos processos de cada empresa.

Conclusão

A abertura da especificação DESIGN.md posiciona a Google no centro da conversa sobre interoperabilidade entre design, código e IA. O formato une tokens e racional, valida acessibilidade, compara versões e exporta para padrões do mercado. Para times de produto, isso significa reduzir atrito entre ideias e implementações, com mais previsibilidade e menos retrabalho.

O próximo passo é menos sobre ferramenta e mais sobre cultura de design. Vale começar pequeno, criar um DESIGN.md piloto, colocar no lint do CI e medir impacto em consistência e velocidade. Se a comunidade adotar o formato e fornecedores ampliarem suporte, a promessa de portabilidade real entre plataformas deixa de ser hipótese e vira prática diária.