# Um agente de inteligência artificial para criar sites: Claude Code e Google Stitch > Percurso manual completo de Google Stitch para Claude Code: exportar HTML/CSS, criar DESIGN.md local, construir e verificar uma página e tratar autenticação MCP por resolver. Source: https://ailoot.ai/blog/pt-pt/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/pt-pt/google-stitch-claude-code-design/ Language: pt-PT Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-cb0faf109a84febe2982507bebbe38d597b4bad5c0dfe15664519b88e3686119
Ideia principal O Claude Code escreve lógica de forma excelente, mas o seu design denuncia-o imediatamente: fundo escuro, gradiente roxo, tipo de letra Inter, três blocos iguais. O Google Stitch gera um design a partir de uma descrição em texto, fornece tokens de cor e tipografia num ficheiro DESIGN.md e o Claude Code cria o site a partir desse ficheiro. Aqui mostro todo o fluxo de trabalho, passo a passo — e onde falha.
As instruções adicionais para trabalhar com o Ailoot estão na [documentação](https://ailoot.ai/docs/). ## Porque é que os sites criados com o Claude Code parecem «AI slop»?
Ideia principal Sem um sistema de design, o Claude Code desenha uma interface com um aspeto mediano: fundo escuro, apontamento roxo, tipo de letra Inter e três cartões com sombras iguais. A razão é que o modelo reproduz o padrão mais comum nos seus dados de treino, e esses dados são toda a internet com Tailwind e milhares de páginas de destino idênticas. Sem restrições precisas, o agente produz a média aritmética de todos os modelos.
No caso prático descrito, o trabalho na página inicial de uma aplicação de chamadas começou com um projeto vazio e um pedido para o Claude Code criar uma página de destino. O resultado foi o clássico: `slate-950` para o fundo, `indigo-500` para o apontamento, Inter a negrito no título e três cartões idênticos com sombras por baixo. O mesmo esquema da primeira versão do v0, do primeiro Lovable, da primeira geração do ChatGPT. Reescrevi o pedido cinco vezes, acrescentei «premium», «não como toda a gente», «moderno» — a página continuava a parecer um tema WordPress de 2015. A lógica é simples: sem restrições, o modelo escolhe a média estatística do que viu. E viu um milhão de páginas de destino idênticas feitas com Bootstrap e Tailwind. Para obter um resultado que não seja mediano, tens de dar especificações ao agente: que cores, que tipos de letra, que espaçamento e que componentes deve considerar canónicos. Para um modelo, a palavra «bonito» significa «a mediana de 2020». Os adjetivos não alteram o resultado; são necessários parâmetros exatos. Analisei esta mesma diferença num guia sobre [sistemas de design prontos a usar com o Refero](https://ailoot.ai/blog/pt-pt/claude-code-refero-design-md/) — aí, usas o estilo de outra pessoa (Apple, Linear, Stripe) e entregas-mo ao agente. O Google Stitch aborda a questão pelo outro lado: em vez de pedir emprestado o estilo de outra pessoa, geras o teu — a partir da tua descrição. ## O que é o Google Stitch e como ajuda?
Ideia principal O Stitch é uma ferramenta gratuita do Google Labs que transforma uma descrição em texto ou uma imagem num design de interface completo: ecrãs, cores, tipografia e esquema. Funciona com modelos Gemini diretamente no browser. O seu principal valor num fluxo de trabalho com Claude Code é fornecer o design como dados estruturados: cores, tipos de letra e espaçamento com valores exatos. O agente lê-os e reprodu-los em código, sem «calcular a olho» a partir de uma captura de ecrã.
O Stitch é uma experiência do Google Labs, apresentada na Google I/O em maio de 2025. Escreves no campo do pedido o aspeto que queres para a aplicação (ou carregas uma captura de ecrã, um esboço num quadro branco ou a página de um concorrente), e o Stitch gera ecrãs de interface numa tela infinita. Nos bastidores, usa Gemini 2.5 Pro e Flash, e o Gemini 3 foi adicionado em dezembro de 2025 para criar esquemas mais refinados. O que nos é útil: - **Vibe Design** — descreve a sensação por palavras («minimalista e premium, como a Stripe») e obtém várias direções visuais à escolha. - **Referências** — carrega uma imagem do Dribbble ou do Pinterest; o Stitch preserva o seu esquema e aplica os teus requisitos. - **Exportação** em três formatos: para o Figma (com camadas editáveis), como HTML/CSS limpo e através do MCP — diretamente para o agente. A diferença em relação a estilos prontos a usar como o Refero é importante. O Refero é uma biblioteca de sistemas de design já extraídos de sites reais; usas uma marca existente. O Stitch gera um sistema para o teu produto de raiz. Não tens um design de referência e queres o teu próprio aspeto? É o Stitch. Precisas de aplicar rapidamente o estilo de um produto conhecido? Refero. Resolvem etapas diferentes e complementam-se bem. O próprio Claude também tem um modo de design integrado; abordei-o num guia sobre o [Claude Design](https://ailoot.ai/blog/pt-pt/claude-design-guide/). O Stitch é diferente porque fornece um sistema pronto a usar num ficheiro externo que o agente lê sempre que cria algo. ## Requisitos de disponibilidade do Google Stitch O Stitch não está disponível em todos os países: um representante da Google escreveu no fórum oficial que o serviço está disponível para utilizadores com 18 ou mais anos em 212 países e que a lista está a crescer. Nas regiões com restrições, ao aceder ao serviço, vês apenas esta mensagem: «Lamentamos, o Stitch não está disponível.» É necessária uma conta Google — só é possível iniciar sessão com uma. ## Quando a autorização Stitch MCP bloqueia o fluxo Claude Code {#how-do-you-connect-google-stitch-to-claude-code-through-mcp}
Ideia principal A configuração aqui descrita encontrou uma falha de autorização no MCP remoto `https://stitch.googleapis.com/mcp` em Claude Code. Este artigo não fornece configuração MCP compatível comprovada; o percurso completo abaixo usa exportação local HTML/CSS.
Há muita informação inútil online sobre como ligar o MCP, e metade das instruções simplesmente não funciona. Por exemplo, muitos guias (incluindo alguns populares em inglês) recomendam instalar o pacote `@google/stitch-mcp` com o comando `npx -y @google/stitch-mcp@latest`. Esse pacote não existe — o npm devolve `404`. Não copies este comando; vais perder tempo. Pela mesma razão, escolhe integrações cuja instalação e verificação numa tarefa real tenham sido confirmadas. A tentativa MCP remota descrita chegou ao erro `Incompatible auth server` no Claude Code. Esse erro observado não é uma receita funcional nem prova de que toda a configuração atual falha. Não continues com um passo indefinido de «ligar MCP»: usa a exportação manual HTML/CSS abaixo até verificar uma configuração compatível exata. Primeiro, cria uma chave. No Stitch: clica no teu avatar → **Stitch settings** → secção **API key** → **Create key** → copia-a. A seguir, adiciona o proxy ao Claude Code com um comando: bash Coloca a chave numa variável de ambiente (o método mais simples — sem teres de lidar com a consola Google e com tokens que expiram): ```bash export STITCH_API_KEY="your-key-from-stitch-settings" ``` Se preferires configurá-lo manualmente, fica assim (em `~/.claude.json` ou `.mcp.json` na raiz do projeto): json Reinicia o Claude Code e verifica se a ligação está a funcionar: ```bash claude mcp list ``` O fluxo de trabalho com o Stitch e o DESIGN.md é engenharia de contexto na sua forma mais pura: colocas tokens exatos no contexto do Claude antecipadamente e ele cria tudo de acordo com esses tokens, sem «adivinhar o que eu queria dizer». A metodologia completa reúne os três pilares — o clone de IA, o Segundo Cérebro e a Engenharia de Contexto. Esta combinação transforma o Claude de um «assistente que adivinha» numa ferramenta que produz resultados previsíveis. ## O que é o DESIGN.md e porque é melhor do que uma captura de ecrã?
Ideia principal O DESIGN.md é um ficheiro Markdown legível por máquina que contém os parâmetros do sistema de design: cores em hexadecimal, uma escala tipográfica, unidades de espaçamento e regras para os componentes. O Claude Code lê-o como contexto e cria cada elemento usando os mesmos tokens. Um agente não consegue extrair de uma captura de ecrã um valor hexadecimal ou uma medida de espaçamento exatos — tem de adivinhar. A partir do Markdown, usa os números literalmente, pelo que todos os ecrãs parecem ter sido criados «por um só designer».
Eis um detalhe fundamental que a maioria das instruções apresenta incorretamente: não existe um botão «Export DESIGN.md» no Stitch. É o próprio agente que cria o ficheiro. De acordo com o codelab oficial da Google, o pedido é mais ou menos assim: «acede ao projeto através do Stitch MCP, extrai a paleta e a tipografia e cria um DESIGN.md a partir delas». Esse codelab pressupõe uma ligação MCP funcional. No percurso manual aqui descrito, o Claude Code lê antes o HTML/CSS exportado e escreve o ficheiro estruturado na raiz do projeto; deve assinalar tokens em falta, não adivinhá-los pela imagem. O DESIGN.md contém dados específicos em vez de adjetivos: ```markdown # DESIGN.md ## Colors - Primary: #0F172A - Accent: #F97316 - Success / Error / Warning: ... - Background / surfaces: ... ## Typography - Font (body): "Instrument Sans"; (headings): "Instrument Serif" - Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4 - Weights: 400 / 500 / 700 ## Spacing (base 8px) - xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64 ## Layout - Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280 ## Components - Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled - Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08) ``` Para fazer o Claude Code usá-lo, remete para o ficheiro em `CLAUDE.md` (por exemplo, com a linha «Use the design of all components from `DESIGN.md`») — e o agente carrega os mesmos tokens em cada sessão. Um botão de segunda-feira e um cartão de sexta-feira ficam com o mesmo estilo porque há uma única fonte de verdade. Nesta configuração, duas referências locais complementam-se. DESIGN.md contém regras do sistema: cor, tipografia, espaçamento e componentes. HTML/CSS e recursos exportados do Stitch fornecem a disposição concreta do ecrã. MCP é opcional e não é requisito deste percurso. ## Como criar um site: o percurso completo do texto ao design?
Ideia principal O percurso manual completo tem sete passos: verificar disponibilidade, descrever produto, juntar referência, aperfeiçoar um ecrã, exportar HTML/CSS, criar DESIGN.md desses ficheiros e construir e verificar uma página no Claude Code. Evita a autenticação MCP por resolver. Adaptação aos ecrãs, navegação e interações ainda exigem implementação e testes.
Eis o processo completo, pela ordem certa: 1. **Abre o Stitch.** Verifica a disponibilidade no país e inicia sessão em `stitch.withgoogle.com` com a conta Google. 2. **Descreve o produto.** Indica ecrãs e percurso do utilizador; confirma ou edita a lista proposta. 3. **Adiciona uma referência.** Carrega a captura pretendida e especifica cores, tipografia e disposição a manter. 4. **Gera e aperfeiçoa.** Escolhe um ecrã e afina-o antes de ampliar o design. 5. **Exporta o ecrã escolhido em HTML/CSS.** Guarda os ficheiros e recursos necessários numa pasta de referências do projeto. Abre o HTML localmente e confirma que corresponde ao ecrã selecionado; uma captura não contém os valores CSS exatos. 6. **Cria DESIGN.md da exportação local.** Pede ao Claude Code que leia o HTML/CSS, registe os valores reais de cor, fonte, espaçamento, disposição e componentes e liste os valores em falta para decidires. Este percurso dispensa chave API Stitch e autenticação MCP. 7. **Constrói e verifica uma página.** Dá estes prompts ao Claude Code, substituindo a pasta pelo caminho real da exportação: ``` Lê a exportação Stitch HTML/CSS em refs/stitch-export/. Cria DESIGN.md na raiz do projeto com os valores existentes nesses ficheiros. Identifica valores em falta em vez de os inventar. ``` ``` Constrói uma página a partir de DESIGN.md e da exportação Stitch local. Mantém componentes modulares. Compara a página renderizada com a exportação nas larguras de computador e telemóvel e verifica separadamente navegação e estados interativos. ``` A partir daí, o Claude Code trata de tudo: navegação entre ecrãs, capacidade de resposta nos pontos de quebra definidos em DESIGN.md, animações e interatividade. O Stitch fornece ecrãs estáticos e um protótipo clicável, mas não cria lógica funcional nem publica o site num serviço de alojamento — isso cabe ao agente. ## Como eliminar o «aspeto de IA»: o que deves mudar exatamente?
Ideia principal O «aspeto de IA» desaparece quando substituis adjetivos subjetivos por restrições precisas. As três principais alterações: remove o apontamento roxo predefinido e especifica o teu próprio valor hexadecimal, substitui o Inter por uma combinação de tipos de letra expressiva e dá ao agente uma referência de um site real em vez da palavra «moderno». Regista tudo isto em DESIGN.md e o agente deixa de voltar à média aritmética dos modelos.
Eis os pontos específicos em que um site deixa de se denunciar: - **Cor.** O roxo `indigo-500` é o primeiro sinal revelador. Define as cores primária e de apontamento com valores hexadecimais exatos diretamente em DESIGN.md. Cada agente interpretará «azul da marca» à sua maneira. - **Tipo de letra.** O Inter é a escolha mais segura e, por isso, o «tipo de letra de IA» mais reconhecível. Escolhe uma combinação expressiva: por exemplo, um tipo sem serifa para o texto corrido e outro com personalidade para os títulos. Define-a no design do Stitch e regista-a em DESIGN.md. - **Uma referência em vez de um adjetivo.** O modelo interpreta «torna-o moderno» como «a mediana de 2020». Interpreta literalmente «usa o esquema desta página» quando lhe dás uma captura de ecrã real. Carrega uma imagem de referência no Stitch; não é possível transmitir gosto por palavras. - **Espaçamento e espaço livre.** Um esquema de modelo reconhece-se pelos blocos apertados e idênticos. Define uma escala de espaçamento generosa em DESIGN.md — o agente organizará os elementos com mais liberdade. A especificidade supera os adjetivos subjetivos. O Stitch é essencialmente uma máquina que traduz o teu «quero assim» em tokens precisos, para que o agente não tenha de adivinhar. ## Google Stitch ou alternativas: qual deves escolher?
Ideia principal O Google Stitch é uma boa escolha quando precisas de um design de raiz e não tens orçamento. O teu site já está desenhado no Figma? Usa o Figma MCP. Precisas de código React pronto a usar? Usa o v0. Queres o estilo de uma marca conhecida? Escolhe o Refero. Precisas imediatamente de uma aplicação com backend? Usa o Lovable. Para quem faz vibe coding com um orçamento limitado, o Stitch é o ponto de partida mais acessível, mas não oferece publicação nem backend.
Comparei as ferramentas segundo os critérios que realmente importam para fazer vibe coding com um orçamento limitado: | Ferramenta | Preço | O que fornece | Integração com Claude Code | |----|----|----|----| | **Google Stitch** | Gratuito | Design de raiz a partir de texto: ecrãs, HTML, Figma | Exportação local HTML/CSS; MCP só com configuração compatível verificada | | **v0 (Vercel)** | Gratuito + \$20/mês | Código React / Tailwind pronto a usar, publicação na Vercel | Através de pedidos e código | | **Figma Dev Mode MCP** | Gratuito em versão beta | Fornece um design pronto do Figma para o código | Figma MCP oficial | | **Refero Styles** | Biblioteca gratuita | Ficheiros DESIGN.md prontos a usar, baseados em sites reais | Refero MCP oficial | | **Lovable** | Gratuito + \$25/mês | Tudo num só: interface + base de dados + publicação | Plataforma separada | O fluxo de trabalho que uso: Stitch para explorar o design → Claude Code para criar e tratar da lógica. Para quem faz vibe coding com um orçamento limitado, o Stitch ganha porque é gratuito e cria um aspeto único para o produto de raiz. Se quiseres conhecer o conjunto completo de ferramentas disponíveis no mercado, abordei-as no artigo principal [o que usar para programar em 2026](https://ailoot.ai/blog/pt-pt/ai-coding-tools/). ## Onde é que o Google Stitch falha: quais são as suas limitações?
Ideia principal O Stitch só trata da interface — não tem backend, publicação nem apresentações. As ferramentas de edição manual são limitadas: não é possível mover um elemento individual como no Figma; só é possível regenerá-lo. Os resultados são não determinísticos — um único pedido pode produzir ecrãs diferentes. Além disso, há um limite de gerações gratuitas sem opção de comprar mais, um estado experimental sem garantias e o problema de autorização no Claude Code.
Eis uma lista honesta para que não fiques desiludido ao terceiro ecrã: - **Apenas a interface.** Sem backend, base de dados ou publicação num serviço de alojamento. Para isso, precisas do Claude Code (ou do Lovable, se quiseres tudo no mesmo sítio). - **Edição limitada na ferramenta.** Não podes mover um elemento individual com o rato — só podes alterá-lo através de um pedido e regenerá-lo. Não é o Figma. - **Não determinismo.** O mesmo pedido produz resultados diferentes. É bom para explorar ideias, mas inconveniente quando precisas de resultados reproduzíveis. - **Quota.** Vais atingir o limite de gerações gratuitas (atualmente, diário); não podes comprar mais, por isso tens de esperar que a quota seja reposta. O número exato varia, por isso verifica a interface. - **Estado experimental.** O Google Labs não garante apoio a longo prazo. O serviço pode mudar ou encerrar. - **Restrição geográfica** e o problema de autorização do MCP no Claude Code, mencionados nas secções sobre disponibilidade e configuração. O Stitch não é uma boa opção quando tens um guia de marca rigoroso para muitos projetos, quando o design já está no Figma ou quando precisas de uma aplicação com backend já publicada. ## O que se segue?
Ideia principal A seguir, cria o fluxo de trabalho manualmente: gera o teu primeiro ecrã no Stitch, extrai o DESIGN.md e usa-o para criar uma página no Claude Code. Levará uma noite e resolverá a principal preocupação — a de que o site volte a parecer «gerado por IA». Tudo depende de uma competência: controlar o que entra no contexto do agente. O resto vem com a prática.
Cria o fluxo de trabalho mais simples possível com um ecrã: descreve o produto no Stitch, gera a página inicial, exporta o HTML/CSS e pede ao Claude Code para criar DESIGN.md e construir a página com esses ficheiros locais. Quando vires o gradiente roxo desaparecer por si só, o resto será mais fácil. Conceber com o Stitch é uma técnica de engenharia de contexto. O sistema completo combina um clone de IA, o Segundo Cérebro e engenharia de contexto, para que o Claude possa basear-se em regras e contexto preparados.
### Fontes - [Google Developers Blog - Stitch: a new way to design UIs](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Google Blog - Stitch and Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab - Design-to-Code with Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma - setting up MCP for Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
O clone de IA, o Segundo Cérebro e a engenharia de contexto são importantes para o produto. Conceber com o Stitch é o primeiro elemento desta combinação. Para continuares a trabalhar com modelos, podes visitar o [Ailoot](https://ailoot.ai/). ## Perguntas frequentes ### O que faço quando Stitch MCP devolve Incompatible auth server? Use o percurso manual completo: exporte o ecrã em HTML/CSS, guarde os recursos no projeto, verifique a exportação localmente e peça ao Claude Code que crie DESIGN.md desses ficheiros. O artigo não fornece configuração MCP comprovada; «ligar MCP» não é um passo concluído. ### Como evito tokens de design adivinhados no DESIGN.md? Forneça HTML/CSS exportado, não apenas uma captura. Peça os valores realmente presentes e uma lista de cores, fontes, espaçamentos ou regras de componentes em falta para decidir. Compare depois uma página renderizada com a exportação. ## Ailoot · A empresa e a sua carteira de projetos A Ailoot assenta numa experiência operacional consolidada, numa ampla base de clientes, num serviço estável e no acompanhamento contínuo dos KPI. A empresa e a sua carteira de projetos: milhões de clientes; vendas mensais na ordem dos milhares de milhões. A Ailoot aplica essa experiência operacional ao acesso por API a funcionalidades de IA nos produtos dos clientes, agentes, aplicações e automatizações.