Criar site com IA: 7 passos do briefing ao site no ar

Três jeitos de criar um site com IA

As ferramentas diferem menos em quão esperta é a IA e mais em onde o seu site vai morar. Isso decide quanto você paga todo mês e com que facilidade você consegue sair.

O Wix já consegue rascunhar um site a partir de um único prompt, e o Squarespace e o Framer oferecem construtores com IA parecidos, mas o site fica na plataforma deles enquanto você pagar. Os construtores de apps no navegador escrevem código de verdade e hospedam para você, geralmente cobrando em créditos. Tanto eles quanto o caminho do agente são formas de vibe coding: você descreve o que quer e avalia o resultado, em vez de escrever o código.

Quer ver um design antes de construir qualquer coisa? O Claude Design, a ferramenta de design visual da Anthropic (uma prévia de pesquisa para os planos pagos do Claude), rascunha protótipos como uma landing page, que você pode exportar como HTML independente ou entregar ao Claude Code para construir (anúncio da Anthropic).

As vantagens e desvantagens em detalhe estão na nossa comparação entre Claude Code e Lovable, e os preços atuais de cada ferramenta estão em as melhores ferramentas de vibe coding.

Qual é a melhor IA para criar um site?

A melhor IA para criar um site é aquela cujo caminho combina com o jeito que você quer ter e editar o site:

• Escolha um construtor de sites com IA se você quer uma única cobrança e um editor de arrastar e soltar, e vai mudar o site raramente.
• Escolha um construtor de apps no navegador se você quer algo funcionando em uma hora e não se importa de pagar em créditos.
• Escolha um agente de IA se você quer um design personalizado, ser dono de tudo e espaço para acrescentar páginas, um blog ou pequenas ferramentas depois.

Quando eu crio sites para clientes, o meu padrão é o caminho do agente, porque o cliente fica com arquivos que pode levar para qualquer lugar. O resto deste guia segue esse caminho, de uma pasta vazia até um site no ar.

O que você precisa para criar um site com o Claude Code

Passo 1: escreva um briefing de uma página

O briefing decide a maior parte da qualidade. A IA é muito boa em transformar instruções claras em páginas e muito ruim em adivinhar o que torna o seu negócio diferente.

Preencha este modelo e salve como brief.md dentro de uma pasta de projeto vazia:

NEGÓCIO: [NOME], [O QUE VOCÊ VENDE], [REGIÃO QUE VOCÊ ATENDE]
PÚBLICO: [QUEM COMPRA E O QUE PREOCUPA ESSA PESSOA ANTES DE COMPRAR]
AÇÃO PRINCIPAL: [AGENDAR UMA LIGAÇÃO, PEDIR UM ORÇAMENTO, LIGAR OU COMPRAR]
PÁGINAS: Início, Serviços, Sobre, Contato
PROVAS: [AVALIAÇÕES REAIS, ANOS DE MERCADO, CERTIFICAÇÕES]
FATOS QUE PRECISAM ESTAR EXATOS: [TELEFONE, ENDEREÇO, HORÁRIOS, PREÇOS]
TOM: [TRÊS PALAVRAS, POR EXEMPLO ACOLHEDOR, ESPECIALISTA, DIRETO]
VISUAL: [CORES DA MARCA EM CÓDIGOS HEX, FONTES SE VOCÊ TIVER]
SITES DE QUE EU GOSTO: [2 OU 3 LINKS E O QUE VOCÊ GOSTA EM CADA UM]
NUNCA: Inventar avaliações, números ou prêmios. Nada de clichês de banco de imagens.

Passo 2: prepare a pasta e uma rede de segurança

1. Abra o projeto. No app do Claude para desktop, clique na aba Code. Na linha abaixo da caixa do prompt, escolha a primeira opção em Local no seletor de ambiente, depois clique no controle de pasta ao lado, escolha Open folder… e selecione a pasta do seu projeto.
2. Ative o histórico de versões. Peça para o Claude configurar o Git e fazer um commit depois de cada versão que funcionar. O Git é uma ferramenta gratuita que salva retratos do seu projeto, para você poder voltar a qualquer versão anterior.
3. Salve as suas regras. Peça para ele criar um arquivo CLAUDE.md com o tom, o visual, os fatos exatos e a lista do "nunca" do seu briefing. O Claude Code lê esse arquivo no começo de toda sessão, e o nosso guia do arquivo CLAUDE.md tem modelos prontos.

Passo 3: gere a primeira versão

Escolha a tecnologia mais simples que resolva. Para uma a cinco páginas, HTML e CSS simples bastam: não tem etapa de build nem framework para manter atualizado. Se você planeja um blog com muitos artigos, peça Next.js, e o Claude Code avisa se precisar instalar alguma coisa antes.

Comece no modo Plan, para o Claude propor antes de escrever. No app para desktop, escolha Plan no seletor de modo abaixo da caixa do prompt; no terminal, aperte Shift+Tab até ver o plan mode.

Leia o brief.md e o CLAUDE.md. Planeje um site de [NÚMERO] páginas para este
negócio em HTML e CSS simples, pensado primeiro para o celular. Para cada página,
liste as seções, um título provisório para cada seção e tudo o que você precisa
de mim. Não escreva código até eu aprovar o plano.

Rodamos esse prompt no briefing mostrado no topo desta página, para uma oficina de bicicletas de demonstração. Antes de escrever qualquer código, o Claude Code reformulou o objetivo com as próprias palavras, encontrou as duas fotos na pasta e listou os cinco arquivos que ia criar. Mais abaixo, o plano tinha um título provisório para cada seção, que é o momento mais barato para mudar de ideia.

Responda às perguntas dele e aprove o plano. Depois troque para o modo Manual, para aprovar cada mudança, ou Accept edits, para revisar depois, e deixe que ele construa.

Para ver o resultado, clique no caminho do index.html no chat, e a página abre no painel Browser. Você também pode clicar em Browser na barra de título da sessão.

A construção levou menos de três minutos. Vale ler o relatório linha por linha: ele conferiu cada fato com o briefing, testou o layout na largura de celular e de desktop, escureceu o texto do botão porque branco naquele laranja não passava na checagem de contraste e listou os textos provisórios que usou onde o briefing não dizia nada. Essa lista é a sua lista de tarefas para o passo 4.

Passo 4: ajuste uma seção de cada vez

É aqui que o site vira seu, uma mensagem curta e específica de cada vez.

• Uma mudança por mensagem. Passos pequenos mantêm os erros pequenos e fáceis de desfazer.
• Mostre, não descreva. Arraste um print para a caixa do prompt e diga o que mudar.
• Confira a largura de celular com frequência. Muitos dos seus visitantes vão chegar pelo celular.
• Use só conteúdo real. Nunca publique avaliações, logos de clientes ou estatísticas inventadas pela IA; isso engana os clientes e pode violar regras de defesa do consumidor.
• Desfaça e diminua o pedido. Se uma mudança quebrar alguma coisa, peça para o Claude desfazer, ou rode /rewind no terminal, e depois tente um passo menor.

Formulários de contato e agendamentos sem backend

Um site em HTML simples não tem servidor por trás, então um formulário de contato que o Claude escreve do zero não tem para onde entregar a mensagem. Em vez disso, incorpore um formulário ou widget de agendamento de uma ferramenta que você já usa, como Google Forms, Calendly ou a sua plataforma de e-mail: cole o código de incorporação no chat e diga ao Claude para usá-lo e não guardar nenhum dado no projeto. Depois envie um teste pelo celular e confira se ele chega.

Passo 5: publique o seu site na Vercel

A Vercel é um serviço de hospedagem: ela mantém o seu site no ar e dá a cada publicação um endereço gratuito vercel.app que você pode compartilhar antes mesmo de ter um domínio.

Dá para criar um site com IA de graça?

Dá para construir e pré-visualizar de graça, mas não para manter um site de negócio só com planos gratuitos. O Claude Code exige um plano pago do Claude, e o plano gratuito Hobby da Vercel é só para sites pessoais e não comerciais. As diretrizes de uso justo da Vercel consideram uso comercial anunciar um produto ou serviço, receber pagamentos e exibir anúncios, então um site de negócio deve ficar no Pro.

A Netlify e o Cloudflare Pages também hospedam sites estáticos e têm planos gratuitos. Leia os termos de cada um sobre uso comercial antes de depender deles para um negócio.

Opção A: arrastar e soltar, sem terminal

1. Abra o Vercel Drop. Entre em vercel.com/drop e faça login (como o Vercel Drop funciona).
2. Solte a pasta. Arraste a pasta do projeto para a página, ou clique em folder para escolhê-la.
3. Publique. Escolha o seu time, dê um nome ao projeto e clique em Deploy. Quando terminar, você recebe uma URL no ar.
4. Atualize depois. Solte a pasta sobre o projeto no seu painel da Vercel, e a Vercel publica uma nova versão de produção.

vercel.com/drop

Solte a pasta que tem o index.html no nível de cima. Se não houver um, a Vercel pergunta qual página mostrar no endereço raiz.

Opção B: deixe o Claude Code publicar

Peça: "Publique este site em produção na Vercel com a Vercel CLI e me guie no login." A CLI (ferramenta de linha de comando) precisa do Node.js, e o Claude avisa se ele estiver faltando. Estes são os comandos que ele roda, e no Windows eles são os mesmos no PowerShell:

# Instala a ferramenta de linha de comando da Vercel (precisa do Node.js)
$ npm i -g vercel
# Login: abre uma janela do navegador
$ vercel login
# Cria uma publicação de pré-visualização para conferir antes
$ vercel
# Publica em produção
$ vercel deploy --prod
$ 

Quando você passar a editar o site com frequência, conecte o projeto a um repositório no GitHub. Aí a Vercel publica automaticamente cada push, com pré-visualizações para os branches paralelos e produção para o branch principal.

Passo 6: conecte o seu domínio

1. Adicione o domínio. No seu projeto na Vercel, abra Settings > Domains e clique em Add Domain.
2. Aceite a versão com www. Se você adicionar example.com, a Vercel sugere adicionar também www.example.com e recomenda o www como endereço principal.
3. Adicione os registros DNS que a Vercel mostrar, no seu registrador (a empresa em que você comprou o domínio).
4. Espere o sinal de confirmação. Mudanças de DNS podem levar um tempo para se espalhar, e o certificado HTTPS (o cadeado) é configurado para você.

Copie os valores do seu próprio projeto, e não de um tutorial, porque eles mudam de um projeto para outro. Enquanto os registros no seu registrador não baterem, o cartão do domínio mostra Invalid Configuration:

Passo 7: SEO básico para o Google encontrar você

SEO (otimização para mecanismos de busca) significa deixar as páginas fáceis de entender para os buscadores e dignas de aparecer nos resultados. O próprio guia de SEO para iniciantes do Google é curto e fácil de ler, e estas são as partes que mais importam para um site pequeno.

Faça uma revisão de SEO no site inteiro:
1. Escreva um título único (com menos de 60 caracteres) e uma meta description
   (com menos de 155 caracteres) para cada página, com o nome do negócio e a região.
2. Adicione texto alternativo descritivo a cada imagem que tenha significado.
3. Crie o sitemap.xml e o robots.txt para https://www.[SEU DOMÍNIO].com
4. Adicione JSON-LD de LocalBusiness usando só fatos do brief.md.
   Se faltar algum valor, me pergunte em vez de inventar.
5. Liste tudo o que você não conseguiu fazer e por quê.

Antes de publicar, cole o bloco LocalBusiness que o Claude adicionar no Schema Markup Validator, que é gratuito, e confira se ele não mostra nenhum erro:

Avise o Google que o site existe

1. Adicione uma propriedade. No Google Search Console, adicione uma propriedade do tipo Domínio, e não do tipo prefixo de URL. O Google faz a verificação com um registro DNS no seu registrador, e ela cobre as versões com e sem www, tanto em http quanto em https.
2. Envie o sitemap. No relatório Sitemaps, digite a URL do seu sitemap.
3. Peça a indexação. Inspecione a URL da sua página inicial e clique em Solicitar indexação.

O Google trata um sitemap como uma sugestão, e pedir a indexação não garante que a página seja indexada. O Google diz que o rastreamento "pode levar de alguns dias a algumas semanas" (Pedir ao Google para rastrear novamente os URLs).

Meça o que acontece depois do lançamento

O relatório Desempenho do Search Console mostra quais buscas fizeram as suas páginas aparecer e com que frequência as pessoas clicaram. Para as visitas, abra Analytics no seu projeto na Vercel, clique em Enable e peça ao Claude Code para adicionar o script que a Vercel mostra para sites em HTML simples. No Pro, custa US$ 0,03 a cada 1.000 visualizações de página e outros eventos, pagos com o crédito de uso mensal (preços do analytics da Vercel).

Problemas comuns depois de publicar

As soluções de domínio seguem a seção de solução de problemas do guia de adicionar um domínio da Vercel, e a solução do sitemap segue a ajuda do relatório Sitemaps do Google.

Dá para criar um app com IA do mesmo jeito?

Sim, para apps simples. Uma ferramenta de agendamento, uma calculadora de orçamentos ou um pequeno portal para clientes seguem os mesmos passos, mas o risco muda quando entram contas de usuário, pagamentos ou dados de clientes armazenados.

Use serviços consagrados para login e pagamentos em vez de código próprio, mantenha os dados de teste separados dos dados reais e peça para um desenvolvedor revisar o app antes do lançamento. Leia vibe coding é ruim? para conhecer os riscos reais e um checklist de segurança.

O que fazer agora

Escreva o seu briefing hoje à noite com o modelo acima, mesmo que você só vá construir no fim de semana, porque é a etapa que mais decide a qualidade. Depois construa só a página inicial, publique com o Vercel Drop em um endereço gratuito vercel.app e veja como ela fica no seu celular antes de acrescentar mais páginas.

Se você prefere começar com uma única landing page, siga como fazer vibe coding de um site, prompt por prompt. O curso Builders vai mais fundo no planejamento, na psicologia do cliente e na configuração de SEO por trás de um site que traz pedidos de orçamento.