STITCH
Do Google Stitch ao Claude Code, passo a passo
Você desenha as telas no Google Stitch descrevendo o aplicativo em texto, aprova o visual e conecta o Stitch ao Claude Code por MCP. O Claude Code passa a enxergar as telas aprovadas e escreve o código seguindo aquele design.
Para quem monta aplicativo ou sistema com o Claude Code e não gosta do visual que sai. Precisa de conta Google para o Stitch e do Claude Code, que exige plano pago.
Passo a passo
Descreva o aplicativo no Stitch
Entre no Stitch, escolha se é App ou Web e use o primeiro prompt abaixo. Dá para anexar uma imagem de referência, como um print de tela que você achou no Pinterest ou no Dribbble.
Ajuste até aprovar
Peça mudanças tela por tela. Em Edit Theme você define modo claro ou escuro, cor de destaque, arredondamento e fonte, e isso vale para todas as telas.
Crie a chave de API
Nas configurações do Stitch (Settings), desça até API Keys e clique em Create API Key. Copie e guarde: chave é senha.
Conecte ao Claude Code
No terminal, rode o comando do segundo bloco trocando api-key pela sua chave. Depois abra o Claude Code e digite /mcp para ver se o stitch aparece conectado.
Peça o código
Na pasta do projeto, cole o terceiro prompt. O Claude Code lista as telas do projeto no Stitch, lê cada uma e monta o aplicativo com a navegação entre elas.
Confira tela por tela
Compare o que rodou no navegador com o que você aprovou no Stitch, no computador e na largura do celular. Peça correção do que saiu diferente.
Prompts para copiar
Descrever o aplicativo no Stitch
Quero o design completo de um aplicativo [WEB / DE CELULAR] chamado [NOME], para [QUEM VAI USAR]. O que ele faz: [DESCREVA EM 2 OU 3 FRASES]. Telas que eu preciso, nesta ordem de uso: 1. [TELA DE ENTRADA: O QUE TEM NELA] 2. [TELA PRINCIPAL: O QUE TEM NELA] 3. [TELA DE DETALHE OU CADASTRO: O QUE TEM NELA] 4. [TELA DE CONFIGURAÇÕES OU PERFIL] Estilo: [LIMPO E CLARO / ESCURO / COLORIDO], cor principal [COR], cantos [ARREDONDADOS / RETOS], fonte [SEM SERIFA SIMPLES]. A imagem anexada é a referência de estilo. Textos da interface em português do Brasil. Use dados de exemplo realistas para [SEU NEGÓCIO], sem texto de enchimento. Não use ilustração genérica nem ícone decorativo sem função.
Conectar o Stitch ao Claude Code (terminal)
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user
Transformar o design em código
Você é desenvolvedor front-end e tem acesso ao meu projeto do Stitch pelo MCP. Contexto: o projeto se chama [NOME DO PROJETO NO STITCH] e tem as telas do aplicativo [NOME], que eu já aprovei. O aplicativo é para [QUEM VAI USAR] e precisa [O QUE ELE FAZ]. Tarefa: liste as telas do projeto no Stitch e leia cada uma. Monte o aplicativo nesta pasta seguindo o design aprovado: mesmas cores, fontes, espaçamentos e ordem dos elementos. Ligue as telas entre si pela navegação, faça os formulários e botões funcionarem e acrescente transições discretas entre telas. Formato: antes de escrever código, me mostre a lista de telas que encontrou, a tecnologia que vai usar e o que ainda depende de decisão minha (login, banco de dados, pagamento). Espere eu aprovar. No fim, diga como rodar no meu computador. Não faça: não redesenhe nada por conta própria. Onde o design não cobrir um estado (lista vazia, erro, carregando), me pergunte ou siga o estilo das telas existentes e avise. Não deixe botão sem ação. Não diga que terminou sem abrir cada tela e comparar com a do Stitch.
Links
- Google StitchFerramenta do Google que gera telas de aplicativo a partir de texto e imagem de referência.
- Stitch via MCPDocumentação oficial com o comando de conexão ao Claude Code e a criação da chave.
- Claude CodeInstalação oficial do Claude Code.
O endereço antigo stitch.withgoogle.com hoje redireciona para stitch.google.com.
A documentação do Stitch não informa preço nem limite de uso. Confira na própria ferramenta se o uso continua sem custo e qual é a cota.
A chave de API do Stitch dá acesso aos seus projetos. Não cole em conversa, print ou repositório público.
Conferido em 14/11/2026. Ferramenta muda rápido: se algo não bater, me avisa no direct.