Como criar um site com IA: do briefing ao site no ar

Para criar um site com IA, você descreve o site em linguagem simples, deixa uma ferramenta de IA produzir as páginas e depois revisa, corrige e publica. Dá para fazer isso dentro de um construtor de sites com IA, que hospeda o site para você, ou com um agente de IA como o Claude Code, que escreve arquivos de verdade, que são seus e podem ir para qualquer hospedagem, como a Vercel.

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.

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.

Um jeito rápido de decidir

• Escolha um construtor de sites 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 antes de começar

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, escolha Local, clique em Select folder e escolha 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 CLAUDE.md tem modelos prontos.

O Claude Code também guarda os próprios checkpoints, que você pode desfazer com /rewind. O Git é a rede de segurança permanente, então mantenha os dois.

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 plan mode, para o Claude propor antes de escrever. No app para desktop, escolha Plan no seletor de modo ao lado do botão de enviar; 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.

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, abra o painel Browser com Cmd+Shift+B no Mac ou Ctrl+Shift+B no Windows e peça para o Claude abrir o index.html ali.

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

É aqui que o site vira seu. Mensagens curtas e específicas funcionam muito melhor do que textos longos, e cada uma é fácil de desfazer.

• 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 e depois tente um passo menor.

Passo 5: publique 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.

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 com a sua conta logada (como o Vercel Drop funciona).
2. Solte a pasta. Arraste a pasta do projeto para a página.
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.

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

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.

Duas coisas que você pode pular: o Google diz que não usa a meta tag keywords, e o tamanho do texto sozinho não ajuda uma página a ranquear.

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]
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ê.

Avise o Google que o site existe

1. Adicione uma propriedade. No Google Search Console, adicione uma propriedade do tipo Domínio. O Google faz a verificação com um registro DNS no seu registrador, e ela cobre as versões com e sem www.
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. Muitas vezes leva mais ou menos um dia, e às vezes uma ou duas semanas.

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.