Um agente de inteligência artificial para criar sites: Claude Code e Google Stitch

As instruções adicionais para trabalhar com o Ailoot estão na documentação.

Porque é que os sites criados com o Claude Code parecem «AI slop»?#

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 — 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?#

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. 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#

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):

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:

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ã?#

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:

# 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?#

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?#

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?#

Comparei as ferramentas segundo os critérios que realmente importam para fazer vibe coding com um orçamento limitado:

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.

Onde é que o Google Stitch falha: quais são as suas limitações?#

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?#

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.

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.