Conteúdo detalhado
🎯 Copie o que já vence: a estratégia da lei de potência
A maior alavanca para construir um bom site não é ter uma ideia original — é descobrir o que já funciona e partir dali. Pense num chef abrindo um restaurante: ele come nos melhores lugares da cidade, anota o que dá certo e só então monta o cardápio dele — melhor, porque parte do que já está validado.
Uma postura de construção que parte da observação, não da imaginação. Você mapeia os sites que já dão resultado e extrai os padrões deles.
Sites de referência já passaram por anos de tentativa e erro. Você herda esse aprendizado de graça e evita reinventar a roda.
"Não reinvente a roda" · extrair padrões (CTAs, propósito, estrutura) · usar IA para construir rápido a partir do validado.
🍽️ A analogia do chef
O site é o sistema de 3 passos do módulo. Passo 1 — você "come nos melhores restaurantes" (pesquisa concorrentes). Passo 2 — vira o garçom anotando o pedido (design brief). Passo 3 — cozinha e serve (constrói e publica). Tudo parte do que já está provado.
🔎 Inteligência competitiva: pesquisa + matriz de avaliação
Use o Firecrawl dentro do Claude Code para encontrar e ler os sites dos concorrentes do seu nicho. Daí você sai de uma lista ampla para um top 5 e monta uma matriz de avaliação que transforma achismo em uma grade objetiva de notas.
Raspar concorrentes com o Firecrawl e pontuá-los numa tabela por critérios (oferta, prova social, clareza, design, SEO).
É a matéria-prima do seu site. Sem essa base, você constrói no escuro. A matriz revela padrões repetidos entre os vencedores.
Lista ampla → top 5 · fontes (avaliações no Google, ranking de SEO, clareza da oferta) · "o que os 5 melhores têm que os 5 piores não têm".
🪜 Passo a passo
- Crie uma pasta nova (ex.:
website) e abra o Claude Code nela. - Conecte o Firecrawl (firecrawl.dev) ao agente.
- Envie o prompt de pesquisa de concorrentes (ver "Prompts prontos").
- Responda às perguntas de clarificação: quem é o cliente, qual o ângulo, qual a região.
- Receba o relatório com a lista, o top 5 e a análise comparativa. Se vier sem formatação, peça "crie um resumo em HTML dessa pesquisa".
📝 O design brief estruturado (best-principles.md)
Transforme a pesquisa num documento único — best-principles.md — onde você cola toda a investigação e os princípios extraídos. O agente constrói muito melhor lendo um brief organizado do que recebendo instruções soltas no chat.
Um arquivo .md que vira a fonte de verdade do projeto: nome, oferta, público, tom e princípios da pesquisa.
Um brief claro orienta sem engessar. É a ponte entre a pesquisa e o que o agente vai construir.
Menos prescritivo é melhor · dê liberdade ao agente · deixe preço/posicionamento guiados pela pesquisa.
✓ Faça assim
- ✓Dê direção: nome, oferta, público, tom.
- ✓Cole toda a pesquisa do Passo 1 no arquivo.
- ✓Responda de forma geral; deixe espaço para boas decisões.
✗ Evite
- ✗Encher de regras minuciosas que travam o agente.
- ✗Mandar instruções soltas no chat, sem documento.
- ✗Fixar preço/posição antes da pesquisa indicar.
💡 Dica prática
Depois de colar a pesquisa, peça: "familiarize-se com o best-principles.md e me avise quando entender o brief". As perguntas que o agente devolver mostram se o brief está bom.
🤖 Agentes paralelos: três sites de uma vez
O mesmo prompt gera resultados diferentes a cada execução. Em vez de torcer por uma única tentativa, abra vários terminais — cada um com um Claude Code construindo uma versão com uma estratégia distinta — e escolha a vencedora.
Rodar versões paralelas do site: do brief puro, de um HTML de inspiração e de um sistema de design de referência.
Você compara "sabores" e não fica refém de uma única saída por azar.
Terminais paralelos · pastas separadas (1/, 2/, 3/) · três estratégias · comparar e escolher.
Abra três terminais
Renomeie-os: "versão brief", "versão inspiração HTML", "versão design system". Cada um lê o best-principles.md.
Rode estratégias diferentes
Peça que cada agente salve sua versão numa pasta própria (1/, 2/, 3/).
Compare e escolha
Abra cada versão em localhost, compare, mantenha a melhor e apague as outras.
✂️ UI sniping + SEO: polimento que converte
Com a versão escolhida em mãos, dê o acabamento. UI sniping é pegar componentes prontos e bonitos em galerias e integrá-los; em paralelo, rode pacotes de UI/UX e SEO para deixar o site acessível e rankeável.
Trazer trechos de interface que comprovadamente funcionam (de 21st.dev, Codepen) e rodar um agente de UI/UX e outro de SEO ao mesmo tempo.
Você ganha qualidade visual de ponta sem desenhar do zero — e design bonito que ninguém acha não converte.
21st.dev e Codepen · integrar "abaixo do H1" / "na seção de depoimentos" · pacotes de UI/UX e SEO em paralelo · relatório com itens marcados.
📊 Fluxo de refino
- •Escolha um componente (depoimentos, efeito de destaque), copie o código e peça ao agente para integrar e ajustar o texto.
- •Num terminal, rode o pacote de UI/UX (contraste, tamanho de botão, navegação, mobile) "sem dó".
- •Em outro, rode o pacote de SEO (palavras-chave, copy, schema markup) sem mexer no design.
- •Peça um relatório com tudo marcado e faça a revisão crítica final.
Indo mais fundo (opcional): use só o que combina
Nem todo componente bonito serve para o seu negócio. Pegue o que reforça a mensagem e descarte o resto. Galerias de UI são ponto de partida, não obrigação — coerência vence quantidade.
🚀 Deploy na Vercel: do localhost à URL pública
Um site só no seu computador não serve para ninguém. GitHub guarda o código (como um "save de videogame": se algo quebrar, você volta para a versão anterior) e a Vercel coloca o site no ar com uma URL que você envia para qualquer pessoa.
Subir o projeto para o GitHub e conectar à Vercel para gerar uma URL acessível por qualquer pessoa.
A URL pública é o que você envia para clientes. Sem deploy, o site não existe para o mundo.
GitHub como backup e "save state" · repositório privado vs. público · Vercel conecta ao GitHub · domínio personalizado e redirecionamento 301.
🪜 Passo a passo
- Peça ao agente para conectar ao GitHub via CLI (ou confirmar se já está conectado).
- Peça para criar um repositório com o projeto inteiro.
- Peça para conectar à CLI da Vercel.
- Peça: "publique isto na Vercel". Você recebe uma URL pública.
- (Opcional) Na Vercel, adicione um domínio personalizado e aguarde a propagação.
Auto-checagem (opcional): por que construir o site em versões paralelas?
✏️ Exercícios
1. Pesquisa de concorrentes (médio)
Escolha um nicho real e rode o prompt de pesquisa com o Firecrawl. Critério: você tem uma lista do top 5 e uma matriz de avaliação preenchida.
2. Design brief (médio)
Monte o best-principles.md com a pesquisa. Critério: o agente confirma que entendeu o brief e faz perguntas pertinentes.
3. Agentes paralelos (médio)
Construa três versões do site em pastas separadas. Critério: você abre as três em localhost e justifica qual escolheu e por quê.
4. UI sniping (médio)
Integre pelo menos dois componentes de 21st.dev ou Codepen, com o texto ajustado. Critério: os componentes aparecem e fazem sentido no contexto.
5. Deploy (difícil)
Publique na Vercel. Critério: você abre a URL pública num navegador anônimo e o site carrega.
⌨️ Prompts prontos
Estes são os prompts-chave do sistema de 3 passos. Note o tom: claro, em português, dizendo o quê e para quem, e deixando espaço para o agente decidir bem. O banco completo está na Biblioteca → Prompts.
Pesquisa de concorrentes (Firecrawl)
Olá! Quero criar um site para uma consultoria de crescimento online que constrói sites e ajuda empresas a conseguir clientes. No fundo, precisa ser algo que ajude empresas a ter um site que funcione. O que quero que você faça: use a conexão com o Firecrawl e encontre as melhores e mais bem-sucedidas consultorias/construtoras de sites do meu mercado. Vou atuar em [REGIÃO], mas isso pode ser internacional. 1. Identifique uma lista ampla dessas empresas. 2. Recorte o top 5. Você pode avaliá-las como achar melhor: avaliações no Google, ranking de SEO, clareza da oferta etc. Crie uma matriz de julgamento que ajude a entender e pontuar cada uma. 3. Entregue um relatório das 5 melhores. 4. Faça uma análise profunda: o que os 5 melhores têm em comum que os 5 piores NÃO têm? Quero usar esses princípios para construir o meu site. Me faça quaisquer perguntas necessárias para clarificar o entendimento.
Original (EN):
Hi! I'd like to create a website for an online growth consultancy that builds websites and helps businesses get customers. Fundamentally, it needs to be something that helps businesses get a website that works. What I'd like you to do: use the Firecrawl connection and find the very best, most successful website consultancies / website builders in my market. I'll be operating in [REGION], but this could be international. 1. Identify a large list of these. 2. Narrow it to the top 5. Assess them however you see fit — Google reviews, SEO ranking, offer clarity, etc. Build a judging matrix that helps you understand and score them. 3. Deliver a report of the 5 best. 4. Do a deep analysis: what do the 5 best have in common that the 5 worst do NOT? I want to use those principles to build mine. Ask me any questions you need to clarify your understanding.
Design brief / construir a partir do best-principles.md
Olá! Quero que você se familiarize com o documento best-principles.md. Vamos construir juntos um site de [TIPO DE NEGÓCIO]. Use os princípios extraídos da pesquisa de concorrentes como base. Seja menos prescritivo do que mais — tem liberdade para decidir o que funciona melhor. Use os melhores recursos e bibliotecas disponíveis para deixar o site o mais bonito e interativo possível. Me avise quando tiver entendido o brief; aí começamos a construir.
Original (EN):
Hi! Please familiarize yourself with the best-principles.md document. We're going to build a website together for a [BUSINESS TYPE]. Use the principles extracted from the competitor research as your base. Be less prescriptive rather than more — you have freedom to decide what works best. Use the best resources and libraries available to make this as beautiful and interactive as possible. Let me know when you've understood the brief, then we'll start building.
UI sniping — integrar componente
Ótimo trabalho. Quero que você integre o componente abaixo [logo após o H1 / na seção de depoimentos] e ajuste o texto para fazer sentido no nosso site. Aqui está o código/URL do componente: [COLE AQUI].
Deploy na Vercel
1. Conecte-se ao GitHub via CLI. Se já estiver conectado, apenas confirme. 2. Crie um repositório no GitHub com este projeto inteiro. 3. Conecte-se à CLI da Vercel. Se já estiver conectado, apenas confirme. 4. Publique este site na Vercel e me dê a URL pública.
Revisão crítica final
Quero que você atue como um avaliador crítico e exigente. Percorra o site e encontre inconsistências, textos que não fazem sentido e design ruim. Volte com uma lista classificada em crítico / alto / médio / baixo. Não invente bugs críticos onde não existem, mas olhe de verdade para me ajudar a melhorar. Traga qualquer repositório/pacote relevante que ajude.
⚠️ Erros comuns
- ✗Ser prescritivo demais no brief. Encher de regras "trava" o agente e o resultado fica engessado. Dê direção, mas deixe espaço para boas decisões.
- ✗Construir uma versão só. O mesmo prompt gera saídas diferentes a cada execução. Com uma única tentativa, você pode ficar com a pior por azar.
- ✗Esquecer de tornar o site público/acessível. Site só no localhost não serve a ninguém. Cheque repositório privado vs. público e HTTPS.
- ✗Pular SEO e acessibilidade. Um site lindo que ninguém encontra (e que exclui quem tem limitação) não converte. Rode os pacotes antes de considerar pronto.
- ✗Confiar cegamente no resultado. Sempre faça a revisão crítica final: copy, consistência, propagação do domínio, links quebrados.
✅ Resumo do módulo
Checklist de conclusão
- ☐ Rodei a pesquisa de concorrentes com o Firecrawl e tenho um relatório do top 5.
- ☐ Montei a matriz de avaliação com critérios e notas.
- ☐ Criei o best-principles.md e o agente confirmou que entendeu o brief.
- ☐ Construí 2–3 versões em paralelo e escolhi a melhor de forma justificada.
- ☐ Apliquei UI sniping com ao menos dois componentes integrados e ajustados.
- ☐ Rodei SEO e UI/UX e recebi os relatórios.
- ☐ Publiquei na Vercel e tenho uma URL pública que abre num navegador anônimo.
Próximo módulo:
2.2 — Construindo apps: do site estático à primeira aplicação interativa