--- title: "Como usar design.md com Google Stitch: passo a passo completo" date: 2026-05-09T16:24:26Z modified: 2026-07-29T01:42:26Z permalink: "https://camaraux.com.br/design-md-google-stitch/" type: post status: publish excerpt: "Chega de telas inconsistentes: veja como usar design.md no Google Stitch para que cada interface gerada por IA siga a mesma identidade visual." wpid: 7227 categories: - Fundamentos de UX tags: - Fundamentos de UX - claude code - cursor - design system ia - Design Tokens - design.md - ferramentas de design - google stitch - stitch tutorial - UX Design - vibe design rank_math_title: "Como usar design.md com Google Stitch: passo a passo completo" rank_math_description: "Aprenda a criar, importar e usar um arquivo design.md no Google Stitch para gerar interfaces com identidade visual consistente. Guia prático com passo a passo.\\nPalavra-chave foco: design.md stitch\\n" rank_math_focus_keyword: design.md,stitch featured_image: /wp-content/uploads/2026/05/Ilustracao-conceito-Design.md-Google-Stitch-para-UX.webp featured_image_alt: Homem observa ambiente conceitual em cúpula de vidro com pontes, fontes, canais de água e mini construções em tons pastéis author: Lucas Camara timestamp: 2026-07-29T01:42:26Z --- Você abre o Google Stitch, descreve a tela que precisa e recebe um design bonito — mas com cores genéricas, tipografia padrão e espaçamentos que não têm nada a ver com o projeto. Na iteração seguinte, a interface muda de novo. Na terceira, parece que foi feita por um designer diferente. > Se você ainda não conhece o formato `design.md`, comece por aqui: [DESIGN.md: o arquivo que ensina identidade visual para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-agentes-ia-ux.md). Este guia assume que você já entende o conceito e foca na integração com o Stitch. Esse é o problema que o `design.md` resolve quando integrado ao Stitch. Neste guia você vai ver como criar, importar e aplicar um arquivo `design.md` no Google Stitch para que cada tela gerada siga a mesma identidade visual — sem repetir as regras a cada prompt. ## O que é o Google Stitch O [Google Stitch](https://stitch.withgoogle.com) é uma ferramenta de design de interfaces movida a IA, desenvolvida pelo Google Labs. Você descreve o que precisa em linguagem natural — ou faz upload de uma imagem de referência — e o Stitch gera telas com código HTML/CSS pronto para exportação. A atualização de março de 2026 transformou o produto: canvas infinito, quatro modos de geração (Ideate, Flash, Thinking e Redesign), prototipagem multi-tela, voz como entrada e — o que interessa a este artigo — suporte nativo ao formato `design.md`. Se você ainda não conhece o conceito do arquivo, leia primeiro o artigo [DESIGN.md: o arquivo que ensina identidade visual para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-agentes-ia-ux.md), que explica a estrutura e a lógica do formato. ## Por que o design.md e o Stitch foram feitos um para o outro O `design.md` foi criado pelo Google — o mesmo Google por trás do Stitch — como um formato open source para que agentes de IA recebam contexto visual estruturado. Não é uma coincidência que o Stitch tenha sido a primeira ferramenta a implementar suporte nativo ao arquivo. A integração funciona assim: todo prompt que você envia ao Stitch é automaticamente combinado com o conteúdo do seu `design.md` antes de chegar ao modelo Gemini. Isso significa que o agente sabe, antes de gerar qualquer pixel, que sua cor primária é `#0F4C81`, que a fonte é Inter, que botões têm `border-radius: 8px` e que o grid segue colunas de 8px. Sem o `design.md`, o Stitch gera cada tela do zero a partir do prompt — e dois prompts diferentes, mesmo que para o mesmo produto, produzem resultados visuais diferentes. Com o arquivo, as telas pertencem ao mesmo sistema. O resultado prático: menos retrabalho de ajuste, menos prompts de correção e interfaces que já saem da geração com consistência suficiente para uma apresentação ou protótipo navegável. ## Como criar ou importar seu design.md no Stitch — passo a passo Existem três caminhos dentro do Stitch para ter um `design.md` ativo no seu projeto. O processo começa sempre pelo mesmo lugar: selecione uma ou mais telas no canvas, clique em **Modify** e escolha **Design System** no menu suspenso. ### Opção 1 — Gerar a partir de uma URL Esta é a opção mais rápida quando você já tem um produto digital publicado ou quer replicar a identidade visual de um site de referência. 1. No painel de Design System, escolha **Extrair de URL**. 2. Cole o endereço do site. Pode ser o seu produto, um concorrente ou qualquer referência visual que você queira usar como base. 3. O Stitch usa o Gemini para analisar a página renderizada e extrair cores, tipografia, espaçamento e padrões de componentes. 4. Revise o `design.md` gerado antes de confirmar — os valores extraídos são uma aproximação e podem precisar de ajuste nos tokens mais específicos. **Quando usar:** projetos com identidade visual já publicada na web ou quando você quer trabalhar a partir de uma referência visual externa. **Ponto de atenção:** a extração por URL lê o que está renderizado visualmente, não o código-fonte. Se o site usa variáveis CSS sem valores inline, alguns tokens podem não ser capturados com precisão. ### Opção 2 — Importar um arquivo design.md pronto Esta opção faz sentido quando você já tem um `design.md` criado em outra ferramenta (Claude Code, Cursor, Kiro) ou quando quer usar um template de referência como ponto de partida. 1. No painel de Design System, escolha a opção de **importar** ou **colar DESIGN.md**. 2. Cole o conteúdo do arquivo Markdown diretamente no campo. 3. O Stitch valida a estrutura e confirma os tokens reconhecidos. A [biblioteca de templates design.md da CamaraUX](https://camaraux.com.br/design-md/) tem mais de 50 arquivos prontos, inspirados em linguagens visuais de marcas como Adobe, Apple, Airbnb, Binance e BMW — compatíveis com Stitch, Claude Code, Cursor e Lovable. Você copia o template mais próximo do estilo do projeto, ajusta os tokens reais e importa direto no Stitch. **Quando usar:** projetos que ainda não têm produto publicado, times que querem consistência entre Stitch e agentes de código, ou designers que preferem controle total sobre os tokens antes de começar a gerar telas. ### Opção 3 — Criar do zero dentro do Stitch 1. No painel de Design System, escolha **DESIGN.md** como opção de criação. 2. O Stitch abre um editor onde você cola ou digita o conteúdo do arquivo seguindo a estrutura canônica: cabeçalho YAML com tokens, seguido de seções Markdown explicando as decisões visuais. 3. Salve. O arquivo fica vinculado ao projeto e é carregado automaticamente em todas as gerações. **Quando usar:** projetos do zero com identidade visual definida mas não publicada, ou quando você quer documentar tokens de um produto que só existe no Figma. ## Como o Stitch usa o design.md durante a geração de telas Uma vez configurado, o `design.md` opera em segundo plano — você não precisa mencioná-lo nos prompts. O fluxo de geração funciona assim: Você escreve o prompt descrevendo a tela: _“Tela de configurações com seção de notificações e toggle para cada categoria.”_ O Stitch combina esse prompt com o `design.md` antes de enviar ao Gemini. O modelo gera a interface já aplicando os tokens do arquivo — a cor primária nos botões, a fonte correta, o espaçamento e o `border-radius` definidos. O resultado aparece no canvas como visual renderizado e código HTML/CSS. Se algo não ficou certo, você refina com um prompt de ajuste — e o `design.md` continua ativo na iteração, mantendo a identidade visual da correção consistente com o restante. Nas gerações multi-tela (recurso da atualização de março de 2026), o `design.md` garante que a tela de login, o dashboard e a tela de configurações gerados em sequência pareçam do mesmo produto. Sem o arquivo, cada tela tende a ter pequenas variações que acumulam inconsistência ao longo do projeto. ## Exportar o design.md do Stitch para usar no Claude Code e Cursor Uma das vantagens mais práticas do formato aberto é a portabilidade. Você pode criar e refinar o `design.md` no Stitch — que tem uma interface visual para isso — e depois levar o arquivo para os agentes de código que usam no desenvolvimento. Para exportar: acesse **Settings → Design System → Export DESIGN.md** dentro do projeto no Stitch. O arquivo é baixado como Markdown puro. Com o arquivo exportado, você pode colocá-lo diretamente na raiz do projeto para Claude Code e Cursor — como detalhado no artigo sobre [DESIGN.md para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-agentes-ia-ux.md). O resultado é que designer e desenvolvedor trabalham com o mesmo sistema de tokens, sem precisar sincronizar manualmente cada decisão visual. Para usar no **Claude Code**: coloque o `design.md` na raiz e adicione uma linha no `CLAUDE.md` referenciando o arquivo para geração de componentes de interface. Para usar no **Cursor**: adicione a referência no `.cursorrules` ou nas regras globais do projeto. O fluxo completo fica: Stitch para ideação e prototipagem → `design.md` exportado para o repositório → Claude Code ou Cursor consumindo o mesmo arquivo no desenvolvimento. ## Erros comuns e como corrigir **Import falhou no Stitch** O Stitch espera seções específicas no Markdown para parsear os tokens: `## Colors`, `## Typography`, `## Spacing`, `## Components`. Se o arquivo usa nomes de seção diferentes (como `## Cores` em português), o import pode falhar ou ignorar aquela seção. Use os nomes canônicos em inglês nas seções do YAML e Markdown. **Cores não reconhecidas** Use sempre o formato hexadecimal (`#1A73E8`) nas definições de cor. O Stitch pode não reconhecer nomes sem valor hex — “azul escuro” como token é ambíguo para o modelo; `#1A3A6E` não é. **Componentes não aplicados** Definições vagas não funcionam. _“Botão arredondado”_ não é um token — `border-radius: 8px, padding: 8px 16px, background: var(--color-primary)` é. Quanto mais específico o valor, mais fielmente o Stitch aplica. **Design system desatualizado nas gerações** Se você editou o `design.md` fora do Stitch e reimportou, o Stitch mantém a versão anterior em cache. Reimporte explicitamente via Settings → Design System → Import para garantir que a versão mais recente está ativa. **Extração de URL incompleta** A extração por URL captura o que o Gemini consegue ler visualmente na página renderizada. Sites com muita customização via JavaScript carregado depois do render ou com variáveis CSS não inline podem resultar em tokens incompletos. Nesses casos, complemente manualmente o `design.md` gerado com os valores que faltaram. ## design.md com Stitch vs design system completo: quando usar cada um O `design.md` não substitui um [design system completo](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-system-guia-escalabilidade-roi.md) — e o Stitch também não. A escolha certa depende do contexto do projeto. Use **design.md + Stitch** quando o objetivo é prototipar rápido, o escopo não justifica a infraestrutura de um design system completo, ou o time não tem designer dedicado para manter uma biblioteca de componentes. Para MVPs, landing pages, telas de pitch e exploração de conceito, é a combinação mais eficiente disponível hoje. Use um **design system documentado** quando o produto é complexo, tem múltiplos times contribuindo, tem componentes reutilizados em escala ou precisa de governança formal sobre as decisões visuais. Nesse cenário, o `design.md` pode coexistir como uma camada de contexto para os agentes de IA — mas ele complementa, não substitui, a biblioteca de componentes. A distinção importante: o `design.md` documenta _tokens e regras de decisão_ para que agentes de IA apliquem mecanicamente. Um [design system com tokens W3C](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-tokens-arquitetura-w3c.md) documenta o sistema completo — estados, variantes, acessibilidade, comportamento responsivo — para que humanos e ferramentas o apliquem em toda a organização. São camadas diferentes, não substitutas. --- O `design.md` com Google Stitch é a entrada mais prática que existe hoje para designers que querem consistência visual nas interfaces geradas por IA — sem o overhead de um design system completo. A biblioteca de templates da CamaraUX tem arquivos prontos para mais de 50 estilos de marca, compatíveis com Stitch, Claude Code, Cursor e Lovable. > Para encontrar um arquivo de base sem criar do zero, a [Biblioteca de Templates Design.md](https://camaraux.com.br/design-md/) da CamaraUX tem arquivos prontos que você pode importar diretamente no Stitch. [Explore os templates design.md disponíveis na biblioteca](https://camaraux.com.br/design-md/) e escolha o ponto de partida certo para o seu próximo projeto. > > > Veja também: [guia completo de inteligência artificial para designers](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/inteligencia-artificial-para-designers.md) — contexto mais amplo sobre como o `design.md` se encaixa no processo de UX com IA. Se você quer estruturar o uso de IA no processo de UX do seu produto de forma consistente — do design ao desenvolvimento — [fale com a consultoria da CamaraUX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/contato.md). ## Topics **Categorias:** [Fundamentos de UX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/fundamentos-de-ux.md) **Tags:** [claude code](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/claude-code.md), [cursor](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/cursor.md), [design system ia](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-system-ia.md), [Design Tokens](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-tokens.md), [design.md](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-md.md), [ferramentas de design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/ferramentas-de-design.md), [google stitch](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/google-stitch.md), [stitch tutorial](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/stitch-tutorial.md), [UX Design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/ux-design.md), [vibe design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/vibe-design.md)