Site Profissional com Claude Code + Google Stitch
Como usar o Google Stitch (gratuito) com Claude Code via MCP para criar sites profissionais sem contratar designer. Do brief ao código de produção em minutos.
O que é
Site Profissional com Claude Code + Google Stitch
Noventa por cento dos empresários que usam Claude Code travam no mesmo lugar: o código funciona, mas o visual parece amador. Contratar um designer custa entre R$2.000 e R$5.000 por mês — custo fixo alto para quem está validando um produto ou tem uma operação enxuta.
O Google Stitch resolve isso de forma gratuita. Você descreve o site ou app em português, joga referências visuais do Pinterest ou Instagram, e em segundos o Stitch gera o design completo: todas as telas, sistema de cores, tipografia — tudo.
A integração via MCP é o que fecha o ciclo. Ao exportar com a opção MCP, o Claude Code recebe acesso direto a todos os designs — sem exportar imagens, sem explicar paleta, sem reunião de alinhamento. Com o prompt certo, ele transforma o design em código de produção: animações, transições e telas conectadas funcionando.
Como funciona
Principais recursos
Descreva em português
Abre o Stitch e descreve o teu site ou app em português. Joga referências visuais do Pinterest, Instagram ou qualquer lugar, funciona direto.
Design completo em segundos
O Stitch gera o design completo: todas as telas, sistema de cores, tipografia. Não é um template genérico, é gerado a partir do teu brief.
Export via MCP
Clica em Exportar, escolhe a opção MCP e copia o código de configuração. Essa integração é o que diferencia o Stitch de qualquer outra ferramenta de design.
Claude acessa os designs
Cola o código no terminal do Claude Code. A partir daí, o Claude tem acesso direto a todos os designs, sem exportar PNGs, sem reexplicar a paleta.
Prompt → código de produção
Com o prompt certo, Claude transforma o design em código funcionando: animações, transições, telas conectadas. Tudo em produção.
Zero custo fixo
Sem designer. Sem agência. Sem mensalidade. Duas ferramentas gratuitas integradas via MCP substituem R$2.000–5.000 por mês em contratação.
Guia completo
Do zero ao site em 4 passos
Criar o design no Stitch
Acesse stitch.withgoogle.com e crie um novo projeto. Descreva o seu site em português: o que é, para quem é, o tom que quer transmitir. Adicione referências visuais: screenshots de sites que te inspiram, paletas do Pinterest, exemplos do Instagram.
Quanto mais específico o brief, mais alinhado o design. "Site de consultoria de IA para PMEs, tom sério mas acessível, azul marinho e cinza" gera resultado melhor que "site profissional".
Exportar via MCP
Quando o design estiver pronto, clica em Exportar no canto superior direito. Escolhe a opção MCP (não PNG, não Figma). O Stitch vai gerar um bloco de configuração JSON. Copia esse código.
A opção MCP só aparece na versão web do Stitch. Se não estiver visível, certifique-se de que o design tem pelo menos uma tela concluída.
Conectar ao Claude Code
Abre o terminal e navega até a pasta do teu projeto. Cola o código de configuração MCP no arquivo de settings do Claude Code (ou usa o comando de instalação que o Stitch fornece). O Claude vai confirmar quando a conexão estiver ativa.
# Cole no terminal após copiar o código MCP do Stitch: npx @anthropic-ai/claude-code mcp install [código-do-stitch] # Confirma a instalação: claude mcp list
Gerar o código com o prompt certo
Com o MCP conectado, abra o Claude Code e use o prompt abaixo. O Claude vai acessar os designs do Stitch diretamente e transformá-los em código de produção: componentes React, estilos, animações e navegação.
Leia os designs conectados via MCP do Stitch. Com base nas telas disponíveis, implemente o site completo: 1. Estrutura de rotas (uma por tela do Stitch) 2. Componentes React para cada seção — header, hero, cards, footer 3. Sistema de cores e tipografia exatamente como no design 4. Transições entre telas 5. Animações de entrada dos elementos (fade-in, slide-up) 6. Responsivo: mobile-first, breakpoints sm/md/lg Use Tailwind CSS. Zero valores hardcoded — usa as variáveis CSS dos tokens do design. Começa pela tela principal e vai descendo na hierarquia.
O que você terá
Site profissional. Sem designer. Sem agência.
- Design gerado a partir do teu brief — não um template genérico
- Código React completo com componentes reutilizáveis
- Sistema de cores e tipografia consistente em todas as telas
- Animações e transições funcionando em produção
- Responsivo desde a primeira versão
- Custo: R$ 0 em design + tempo do Claude Code
Ver também
Guia completo de configuração do Claude Code, do básico ao expert. Pré-requisito para usar o MCP do Stitch.
Crie sites completos com Claude Code e componentes do 21st.dev. Outra abordagem para sites profissionais sem experiência prévia.
Fluxo completo para criar identidade visual: brief, design system, KV e app React interativo em um dia.