Você abre o Google Stitch, descreve uma nova tela e recebe uma interface visualmente interessante. Na segunda geração, porém, a cor muda. Na terceira, o espaçamento é diferente. O botão que antes tinha cantos discretos agora aparece completamente arredondado. Quando cada prompt precisa repetir toda a identidade visual do produto, a velocidade prometida pela IA começa a gerar outro problema: inconsistência.
É justamente nesse ponto que o DESIGN.md se torna útil. O formato permite registrar regras visuais e decisões de design em um arquivo que pode ser usado pelo Stitch como contexto para gerar interfaces mais alinhadas ao mesmo sistema visual.
Se você ainda não conhece o formato, veja primeiro o que é DESIGN.md. Neste artigo, o foco é exclusivamente sua aplicação no Google Stitch.
Neste guia você vai entender como usar DESIGN.md no Google Stitch, como importar regras existentes, como extrair um design system de uma interface, como integrar o arquivo ao Stitch MCP e como levar o mesmo contexto visual para outras etapas do desenvolvimento.
O que é o Google Stitch
O Google Stitch é uma ferramenta experimental do Google Labs voltada à criação e iteração de interfaces digitais com inteligência artificial. O produto começou permitindo transformar prompts de texto e imagens em interfaces e código de front-end, mas evoluiu significativamente desde seu lançamento.
Em março de 2026, o Google apresentou uma nova versão do Stitch baseada em um canvas infinito com um agente de design capaz de trabalhar com texto, imagens, código e outros elementos do projeto como contexto. A atualização também ampliou recursos de prototipagem, entrada por voz, exploração de alternativas e integração com outras ferramentas.
Entre as mudanças mais relevantes para times de produto está o suporte ao DESIGN.md. Segundo o Google Labs, o Stitch pode extrair um design system a partir de uma URL e importar ou exportar regras visuais por meio desse arquivo.
Em abril de 2026, o Google também tornou pública a especificação preliminar do DESIGN.md, permitindo que o formato ultrapassasse o próprio Stitch e pudesse ser utilizado por outras ferramentas e agentes de IA.
O que é DESIGN.md dentro do Google Stitch
Dentro do Stitch, o DESIGN.md funciona como uma representação textual da linguagem visual de um produto. Em vez de depender apenas de um prompt como “crie um dashboard moderno em azul”, você pode fornecer informações mais específicas sobre cores, tipografia, hierarquia, componentes, espaçamento, superfícies e comportamento visual.
O objetivo não é transformar Markdown em uma biblioteca completa de componentes. O arquivo funciona como uma fonte de contexto para agentes de design, ajudando a IA a entender não apenas quais valores existem, mas como e por que determinadas decisões visuais devem ser utilizadas.
A própria documentação das Stitch Skills do Google descreve o DESIGN.md como uma fonte de verdade para a linguagem visual de um projeto.
Vale observar que a especificação oficial DESIGN.md ainda está em estágio alpha. Isso significa que estrutura, schema e ferramentas associadas continuam em desenvolvimento. Por esse motivo, é melhor seguir a especificação atual do que depender de uma lista rígida de seções ou de caminhos específicos da interface do Stitch.
Por que usar DESIGN.md no Google Stitch
Sem contexto visual suficiente, uma ferramenta generativa precisa inferir parte das decisões de interface a cada nova solicitação. Mesmo quando os prompts são semelhantes, pequenas variações podem aparecer em cores, tipografia, espaçamento, bordas, densidade ou composição dos componentes.
Com um DESIGN.md associado ao fluxo, o Stitch recebe uma referência mais explícita sobre a linguagem que deve orientar novas gerações e alterações. Isso reduz a necessidade de repetir instruções visuais extensas em cada prompt e torna mais fácil manter várias telas dentro de uma mesma direção de design.
- Consistência: novas telas partem das mesmas regras visuais.
- Contexto persistente: decisões importantes não precisam depender apenas da memória da conversa ou de um prompt isolado.
- Portabilidade: o mesmo arquivo pode participar de fluxos com Stitch e outras ferramentas compatíveis.
- Menos retrabalho: a primeira geração já pode começar mais próxima da identidade visual esperada.
- Integração entre design e desenvolvimento: as regras podem acompanhar o projeto para agentes de código.
Como usar DESIGN.md no Google Stitch
Existem diferentes formas de chegar a um design system utilizável no Stitch. A melhor depende de onde seu projeto está começando: uma interface já publicada, um arquivo DESIGN.md existente, um código front-end ou um projeto criado diretamente no Stitch.
1. Extrair o design system de uma URL
Se o produto já está publicado, um dos caminhos mais rápidos é usar uma página existente como referência. O Google informa que o Stitch consegue extrair um design system a partir de uma URL, permitindo utilizar a linguagem visual encontrada como base para novas criações.
- Abra o projeto no Stitch.
- Acesse os recursos relacionados ao design system do projeto.
- Informe a URL que será utilizada como referência visual.
- Revise as regras e características identificadas pelo Stitch.
- Ajuste manualmente elementos que não representam corretamente o sistema original.
- Use o design system resultante como contexto para gerar ou modificar telas.
Não trate a extração automática como documentação definitiva do seu design system. Ela funciona melhor como ponto de partida. Uma interface renderizada nem sempre expõe toda a lógica existente por trás de tokens semânticos, variantes, estados, acessibilidade ou decisões responsivas.
Se seu objetivo for transformar um site diretamente em uma base reutilizável, você também pode testar o gerador de DESIGN.md da CamaraUX.
2. Importar um DESIGN.md existente
Se o projeto já possui um DESIGN.md, não faz sentido reconstruir toda a identidade dentro do Stitch. O formato foi criado justamente para permitir transportar regras visuais entre projetos e ferramentas.
- Abra o design system do projeto no Stitch.
- Use a opção disponível para importar as regras de design.
- Forneça o conteúdo do seu DESIGN.md.
- Revise como cores, tipografia, componentes e demais regras foram interpretados.
- Aplique o sistema às telas desejadas e valide o resultado visual.
Esse fluxo é particularmente útil quando o DESIGN.md já foi criado a partir de um design system, de um código existente ou de outro agente. Se precisar construir o arquivo antes, veja o guia como criar um DESIGN.md.
3. Criar ou refinar o DESIGN.md a partir do próprio projeto
O fluxo também pode começar no próprio Stitch. Você pode explorar uma direção visual, chegar a um conjunto de telas coerente e então transformar aquela linguagem em uma referência reutilizável.
As ferramentas oficiais do Google incluem uma skill chamada design-md capaz de analisar projetos do Stitch e sintetizar um DESIGN.md semântico. O arquivo registra características como atmosfera visual, paleta e função das cores, regras tipográficas, estilo de componentes, princípios de layout e orientações para futuras gerações.
Esse caminho é especialmente interessante em projetos exploratórios: primeiro você encontra a direção visual no canvas, depois transforma as decisões aprovadas em um contexto mais persistente para as próximas telas.
Qual caminho escolher
| Seu ponto de partida | Melhor caminho | Objetivo |
|---|---|---|
| Site ou produto publicado | Extrair design system da URL | Usar a interface existente como referência |
| DESIGN.md já criado | Importar no Stitch | Reaproveitar as regras existentes |
| Projeto criado no Stitch | Gerar ou refinar DESIGN.md | Transformar a direção aprovada em contexto reutilizável |
| Código front-end existente | Usar extract-design-md | Extrair a linguagem visual diretamente do código |
Como estruturar um DESIGN.md para o Stitch
Um bom DESIGN.md não deve ser apenas uma coleção de valores CSS. O Stitch precisa compreender a linguagem visual do produto, por isso descrições semânticas também são importantes.
As próprias Stitch Skills recomendam documentar características como tema visual, função das cores, hierarquia tipográfica, estilo de componentes, estratégia de espaçamento, layout, comportamento responsivo e orientações específicas para novas gerações.
Um exemplo simplificado poderia seguir esta lógica:
# Design System: Produto
## Visual Theme & Atmosphere
Interface limpa, profissional e de baixa densidade visual.
Priorizar clareza, espaços amplos e hierarquia forte.
## Color Palette & Roles
Primary: #5257FF
Surface: #FFFFFF
Text Primary: #17181A
Text Secondary: #61646B
Use Primary apenas em ações principais, elementos selecionados
e pontos de maior importância na interface.
## Typography Rules
Família principal: Inter.
Títulos devem utilizar maior contraste de peso e tamanho.
Textos de apoio devem permanecer visualmente secundários.
## Component Stylings
Buttons: cantos de 8px, peso médio e altura consistente.
Cards: superfícies claras, bordas discretas e sombra mínima.
Inputs: estado de foco evidente e labels persistentes.
## Layout Principles
Usar espaçamento consistente e agrupamento por proximidade.
Priorizar alinhamentos previsíveis e leitura vertical clara.O exemplo acima é propositalmente simples. A estrutura oficial está em evolução e o formato permanece em estágio alpha. Para arquivos destinados a produção ou automações, consulte sempre a especificação atual do DESIGN.md.
Como o Stitch usa o DESIGN.md na prática
Depois que um design system é criado ou associado ao projeto, ele passa a servir como referência visual para o trabalho realizado no Stitch. Isso não significa que cada resultado será matematicamente idêntico ao anterior. O Stitch continua sendo uma ferramenta generativa e o prompt, o contexto do canvas e o objetivo da nova tela também influenciam o resultado.
A diferença é que a geração deixa de depender apenas de uma descrição pontual. O agente passa a ter acesso a um conjunto mais explícito de decisões que definem a identidade visual esperada.
Imagine que o DESIGN.md determine que a cor #5257FF seja reservada às ações principais, que os cards tenham bordas discretas, que a interface utilize Inter e que o produto privilegie espaços amplos. Você pode então pedir:
“Crie uma tela de configurações com preferências de notificação, segurança e gerenciamento da conta.”
O prompt descreve o que precisa existir. O design system fornece parte do contexto sobre como aquela interface deve se apresentar visualmente.
Essa separação é valiosa porque você deixa de colocar dezenas de instruções visuais em cada prompt e passa a concentrar decisões recorrentes em uma fonte de referência compartilhada.
DESIGN.md com Stitch MCP e Agent Skills
O fluxo não precisa ficar restrito à interface gráfica do Stitch. Em 2026, o Google ampliou a integração do produto com desenvolvimento por meio do Stitch MCP server, SDK e Agent Skills.
A biblioteca oficial google-labs-code/stitch-skills segue o padrão de Agent Skills e é compatível com ambientes como Gemini CLI, Claude Code, Cursor, Codex e outros agentes que consigam trabalhar com esse ecossistema.
stitch::manage-design-system
A skill stitch::manage-design-system foi criada para gerenciar design systems no Stitch por meio do MCP. Entre suas funções estão criar ou atualizar um design system, enviar um DESIGN.md e aplicar o sistema visual às telas de um projeto.
Um fluxo possível é manter o arquivo dentro do projeto:
.stitch/
└── DESIGN.mdO agente pode então utilizar esse arquivo como fonte para criar ou atualizar o design system do projeto no Stitch.
stitch::extract-design-md
Outra skill importante é stitch::extract-design-md. Em vez de analisar apenas uma interface renderizada, ela pode examinar um código front-end existente em React, Vue, Svelte, Angular, HTML/CSS e outros ambientes para identificar cores, tipografia, espaçamentos, componentes, temas e tokens.
O resultado é um DESIGN.md compatível com o ecossistema do Stitch. Isso cria um caminho muito interessante para produtos existentes:
código existente → extração do sistema visual → DESIGN.md → Stitch → novas interfaces coerentes com o produto
A documentação oficial da skill recomenda salvar esse arquivo em .stitch/DESIGN.md, permitindo que outras Skills e automações reutilizem a mesma fonte de contexto.
Um fluxo mais avançado: Stitch, DESIGN.md e agentes de código
A portabilidade é uma das partes mais interessantes do formato. O Google descreve o DESIGN.md como uma forma de importar e exportar regras de design entre projetos e outras ferramentas. Na prática, isso permite que a linguagem visual deixe de existir apenas dentro do canvas.
Um workflow possível é:
- Explorar a interface e o fluxo no Google Stitch.
- Criar, importar ou refinar o DESIGN.md do projeto.
- Usar o design system para orientar outras telas.
- Manter o arquivo junto ao projeto ou repositório.
- Disponibilizar o mesmo contexto para agentes usados na implementação.
Isso não significa que Claude Code, Cursor, Codex ou qualquer outro agente interpretem o arquivo exatamente da mesma maneira. Cada ambiente possui seus próprios mecanismos de contexto e regras. O DESIGN.md funciona como uma fonte compartilhável, enquanto a forma de conectá-lo ao agente depende da ferramenta utilizada.
Se quiser seguir para essa etapa, veja o guia específico sobre como usar DESIGN.md com Claude Code, Cursor e agentes de IA.
Erros comuns ao usar DESIGN.md no Google Stitch
Tratar o arquivo como uma lista de valores CSS
Informar apenas #5257FF, 16px e 8px dá ao agente valores, mas pouco significado. Sempre que possível, explique a função de cada decisão: qual cor representa ação principal, quando determinado raio deve ser usado, qual hierarquia a tipografia pretende comunicar e como o espaçamento organiza grupos de informação.
Usar descrições vagas demais
Expressões como “bonito”, “moderno” ou “minimalista” podem ser interpretadas de muitas formas. Prefira regras observáveis: densidade baixa, fundos claros, sombras discretas, raio de 8px, contraste forte entre títulos e corpo, apenas uma cor de destaque para ações principais.
Esperar fidelidade absoluta
O DESIGN.md melhora o contexto, mas o Stitch continua utilizando geração por IA. O arquivo não substitui revisão humana, avaliação de usabilidade, verificação de acessibilidade ou validação de componentes antes da implementação.
Não revisar um design system extraído automaticamente
Uma URL ou um codebase pode conter exceções, estilos antigos, componentes duplicados e decisões que não deveriam virar regra. Antes de transformar uma extração em fonte de verdade, revise o resultado e remova ruído.
Misturar regra visual com especificação funcional
O objetivo principal do DESIGN.md é comunicar identidade e linguagem visual. Regras extensas de negócio, lógica de backend, requisitos de autenticação ou decisões arquiteturais pertencem a outros artefatos do projeto.
Criar regras que contradizem o produto real
Se o DESIGN.md diz que todo botão primário é azul, mas metade do produto utiliza verde, o agente recebe uma fonte de contexto diferente do sistema existente. Antes de automatizar, resolva as inconsistências mais importantes ou documente explicitamente as exceções.
DESIGN.md substitui um design system?
Não. DESIGN.md e design system resolvem problemas relacionados, mas não são equivalentes.
Um design system completo pode incluir componentes implementados, documentação, estados, variantes, padrões de interação, acessibilidade, processos de contribuição, governança, versionamento e integração entre design e código.
O DESIGN.md representa uma camada de contexto visual pensada para ser compreendida por agentes. Ele pode registrar princípios, tokens e orientações importantes, mas não reproduz sozinho toda a infraestrutura e governança de um sistema de design maduro.
Inclusive, a especificação oficial possui mecanismos de interoperabilidade inspirados no formato de Design Tokens do W3C, permitindo exportar tokens para formatos como DTCG e Tailwind. Isso reforça a ideia de integração entre camadas, não de substituição.
| DESIGN.md | Design system completo |
|---|---|
| Contexto para agentes | Sistema operacional de design |
| Regras e linguagem visual | Componentes, regras e governança |
| Arquivo portátil | Ecossistema de ferramentas e processos |
| Pode conter tokens | Gerencia tokens em escala |
| Ajuda a orientar geração | Orienta design e implementação organizacional |
Quando vale a pena usar DESIGN.md com Stitch
A combinação é particularmente útil quando existe uma linguagem visual que precisa sobreviver a várias gerações de interface. É o caso de MVPs, novos fluxos de produtos existentes, protótipos de alta fidelidade, exploração de alternativas, landing pages, aplicações internas e produtos que já utilizam agentes de IA no desenvolvimento.
Também é interessante quando design e código começam a compartilhar fluxos agentivos. Nesse cenário, o DESIGN.md pode atuar como um artefato intermediário entre decisões feitas no design e o contexto entregue às ferramentas utilizadas na implementação.
Por outro lado, ele não elimina a necessidade de decisões de UX. Uma interface visualmente consistente ainda pode ter uma arquitetura de informação ruim, fluxo confuso, feedback inadequado ou problemas de acessibilidade. IA pode acelerar a execução da interface, mas continua sendo necessário avaliar a experiência que está sendo criada.
O que muda com Stitch MCP e Skills
A integração via MCP transforma o DESIGN.md de um arquivo usado apenas manualmente em parte de um workflow automatizável. As Stitch Skills oficiais já permitem gerar designs, administrar design systems, extrair DESIGN.md de código, subir assets e trabalhar com projetos do Stitch a partir de agentes externos.
Um projeto mais avançado pode organizar seus artefatos assim:
projeto/
├── .stitch/
│ ├── DESIGN.md
│ ├── metadata.json
│ ├── SITE.md
│ └── designs/
└── app/
└── ...A própria skill oficial stitch-loop utiliza uma estrutura semelhante, mantendo DESIGN.md, metadados do projeto, visão do site e resultados gerados dentro de uma pasta dedicada ao Stitch.
Isso aponta para uma mudança maior no processo de produto: o design system deixa de servir apenas como documentação consultada por pessoas e passa também a fornecer contexto legível por agentes.
DESIGN.md no Stitch é um ponto de partida, não piloto automático
O maior valor do DESIGN.md não está em pedir que a IA tome todas as decisões de design por você. Está em evitar que decisões já tomadas precisem ser redescobertas em cada geração.
O designer continua responsável por definir hierarquia, comportamento, acessibilidade, arquitetura, linguagem e adequação da solução ao problema. O arquivo ajuda o agente a respeitar melhor essa direção durante a execução.
Quando usado dessa forma, o workflow fica mais previsível: o Stitch acelera exploração e prototipagem, o DESIGN.md preserva parte da linguagem visual e outros agentes podem reutilizar o mesmo contexto no caminho até a implementação.
Para explorar exemplos e referências, acesse a biblioteca de DESIGN.md da CamaraUX. Se quiser construir seu próprio arquivo, veja também como criar e aplicar um DESIGN.md em projetos de IA.
E se você estiver ampliando o uso de inteligência artificial no processo de produto, o guia de inteligência artificial para designers conecta esse workflow a outras etapas de UX e Product Design.
Perguntas frequentes sobre DESIGN.md e Google Stitch
O que é DESIGN.md no Google Stitch?
DESIGN.md é um arquivo que descreve a linguagem visual de um produto de forma legível por agentes. No Stitch, ele pode ser usado como contexto para criar ou aplicar design systems e orientar novas interfaces de acordo com regras visuais definidas.
Como importar DESIGN.md no Google Stitch?
O Stitch oferece recursos para importar regras de design por meio de DESIGN.md. Abra os recursos de design system do projeto, importe o arquivo ou seu conteúdo, revise como as regras foram interpretadas e aplique o sistema às telas desejadas. Como a interface do Stitch evolui rapidamente, os nomes exatos dos controles podem mudar.
O Google Stitch consegue extrair um design system de uma URL?
Sim. O Google informa oficialmente que o Stitch consegue extrair um design system a partir de uma URL. O resultado deve ser revisado, porque uma interface renderizada pode não revelar todas as regras, tokens semânticos, estados e decisões existentes no sistema original.
DESIGN.md substitui um design system?
Não. DESIGN.md fornece contexto visual para agentes, enquanto um design system completo também envolve componentes, estados, variantes, documentação, acessibilidade, governança, versionamento e processos de contribuição. Os dois podem funcionar juntos.
Posso usar o DESIGN.md do Stitch no Claude Code ou Cursor?
O formato foi criado para ser portátil e pode ser compartilhado com outros agentes e ferramentas. A forma como o arquivo entra no contexto varia em cada ambiente. Para Claude Code, Cursor e outros agentes, configure o mecanismo de instruções adequado à ferramenta utilizada.
DESIGN.md é um formato oficial do Google?
O formato foi desenvolvido no ecossistema do Google Labs e sua especificação foi disponibilizada publicamente como projeto open source. Em 2026, a especificação continua marcada como alpha e está em desenvolvimento ativo.
Fontes e documentação oficial
- Google Labs: Introducing vibe design with Stitch
- Google Labs: Stitch’s DESIGN.md format is now open-source
- Google Labs: real-time design updates for Stitch
- Google Labs Code: especificação open source DESIGN.md
- Google Labs Code: Stitch Agent Skills
- Stitch Skill: manage-design-system
- Stitch Skill: extract-design-md
