Dá para criar um site com IA sem saber programar?

Sim, para um site institucional simples ou um portfólio. Um agente de código escreve os arquivos e roda os comandos; o seu trabalho é descrever com clareza o que você quer, conferir o resultado no navegador e fazer algumas checagens básicas antes de colocar no ar.

Qual stack devo usar para criar um site com IA?

Para um site de conteúdo (páginas de marketing, blog, portfólio), Astro é um bom padrão. Se você precisa de login, painel ou banco de dados, Next.js se encaixa melhor; para uma única página, HTML e CSS puros bastam.

Devo usar um criador de sites com IA ou um agente de código?

Criadores de sites com IA entregam uma página no ar em minutos, mas prendem você à plataforma deles. Um agente de código exige mais passos; em troca, o código é seu, você hospeda onde quiser e pode mudar qualquer coisa.

Um site feito com IA vai ranquear no Google?

Tecnicamente sim: com títulos adequados, meta descriptions, sitemap e páginas rápidas, o Google rastreia o site como qualquer outro. A posição depende da qualidade e da utilidade do conteúdo, não de a IA ter escrito o código.

Onde posso hospedar um site que criei com IA?

Vercel, Netlify e Cloudflare Pages são escolhas comuns para sites estáticos; os três se conectam a um repositório no GitHub e fazem novo deploy a cada push. Você adiciona seu domínio no painel deles e atualiza o registro DNS no seu registrador.

Como criar um site com IA: guia passo a passo

Para criar um site com IA, você descreve o site para um agente de código (Claude Code, Codex, Gemini CLI e similares) em um briefing curto e concreto; o agente monta o projeto e escreve as páginas, você revisa no navegador e pede correções e, por fim, faz o deploy na Vercel, Netlify ou Cloudflare Pages. Para um site institucional ou portfólio, isso pode levar uma tarde. O que realmente faz diferença é a stack certa, um bom primeiro prompt e um checklist antes do lançamento.

Este guia percorre todo o caminho, da pasta vazia ao site no ar: qual stack escolher e por quê, o que colocar no primeiro prompt, como apurar o design com screenshots, checagens de mobile e acessibilidade, o básico de SEO, um formulário de contato, domínio e deploy. No final há uma lista dos erros que a IA costuma cometer e algumas regras de segurança.

Primeira decisão: criador de sites com IA ou agente de código?

Existem dois caminhos, e os dois contam como “criar um site com IA”.

Criadores de sites com IA (os recursos de IA de plataformas como Wix, Framer ou Webflow, ou geradores de apps no navegador) transformam uma frase em uma página no ar em minutos. São rápidos e a hospedagem está incluída. A contrapartida: o código fica basicamente na plataforma, você paga mensalidade, não pode fazer o que a plataforma não permite e sair dela é difícil.

Agentes de código rodam na sua máquina, na sua pasta. Eles escrevem arquivos, rodam npm install, leem erros e os corrigem. São mais passos; em troca, você termina com um repositório de código normal. Pode hospedar em planos gratuitos, entregar para qualquer desenvolvedor e adicionar a biblioteca que quiser.

	Criador de sites	Agente de código
Tempo até o primeiro resultado	Minutos	Uma ou duas horas
Dono do código	Basicamente a plataforma	Você
Hospedagem	Deles, em plano pago	Em qualquer lugar, muitas vezes no plano gratuito
Necessidades específicas	Até onde a plataforma permite	Até onde o código alcança
Curva de aprendizado	Muito baixa	Alguma familiaridade com terminal e git

Este guia cobre o segundo caminho: fazer vibe coding de um site, em que o agente escreve o código e você conduz o resultado. Se ainda não escolheu um agente, veja as melhores ferramentas CLI de IA para programar.

1. Instale o básico

Você precisa de três coisas:

Node.js (a versão LTS). Astro e Next.js rodam nele.
Git e uma conta no GitHub. É o seu botão de desfazer e o jeito mais fácil de conectar à hospedagem.
Um agente de código, por exemplo:

npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex

Depois crie uma pasta vazia, inicialize o git e inicie o agente nela:

mkdir cafe-site && cd cafe-site
git init
claude

Iniciar o git primeiro importa: quando o agente quebrar algo, git diff mostra o que mudou e git checkout . desfaz.

2. Escolha a stack: Astro, Next.js ou HTML puro

O agente consegue escrever qualquer coisa, mas, sem direção, pode pegar a opção mais pesada que vier à cabeça. Em linhas gerais:

HTML + CSS puros: um convite de uma página, um teaser de produto, uma página “em breve”. Sem etapa de build, sem dependências, roda em qualquer lugar.
Astro: sites de marketing, sites de empresa, blogs, portfólios. As páginas são renderizadas como HTML puro por padrão, então são rápidas e boas para SEO, e os posts do blog ficam em arquivos Markdown. É o meu padrão para sites de conteúdo.
Next.js: trabalho com cara de aplicação, como contas de usuário, painéis, banco de dados ou pagamentos. Exagero para um site institucional sozinho.

Se estiver em dúvida, comece com Astro. Ele ainda dá conta de um formulário de contato ou uma pequena API depois.

3. O primeiro prompt, com direção de design

O erro mais comum é digitar “faça um site para uma cafeteria”. Você recebe o template que todo mundo já viu: gradiente roxo, título centralizado, três cards. Coloque conteúdo, estrutura e direção de design na primeira mensagem:

Build a marketing site with Astro for a neighbourhood cafe called "Piggy Bank Coffee".

Pages: Home, Menu, About, Contact.
Home: a large photo area (placeholder for now), a one-line tagline,
a "See the menu" button, opening hours, address and a map link.
Menu: a list grouped by category (coffee, pastries, breakfast), prices in USD.

Design direction: warm and simple. Cream background (#f6f0e6), dark brown text (#2b1d14),
terracotta accent (#c2603a). Serif for headings, a readable sans-serif for body text
(Google Fonts). Generous whitespace, small corner radius, no shadows, no gradients.
Mobile first.

Rules:
- No Tailwind; use plain CSS and CSS custom properties.
- html lang="en".
- Every page gets a unique <title> and meta description.
- When done, start `npm run dev` and list the files you created.

Por que funciona: você deu cores e fontes concretas, uma lista do que “não fazer” (gradientes, sombras) e a estrutura e o conteúdo das páginas. Quanto menos o agente precisa adivinhar, mais o resultado se parece com o que você tinha em mente. Você também pode anexar um screenshot de um site de que gosta: “Siga o espaçamento e a tipografia deste site; não copie as cores nem o conteúdo.”

4. Itere no design com screenshots

Quando o agente roda npm run dev, o site geralmente abre em http://localhost:4321 (Astro) ou http://localhost:3000 (Next.js). A partir daí é um ciclo:

Abra a página e tire um screenshot do que você não gostou.
Entregue a imagem ao agente (a maioria das CLIs aceita imagens arrastando e soltando ou colando) e peça para corrigir uma coisa.
Confira o resultado; se estiver bom, faça commit.

The attached image is the home page on mobile. Three problems:
1. The tagline doesn't fit; the line breaks look bad.
2. The "See the menu" button touches the screen edge.
3. The opening-hours table overflows horizontally.
Fix only these. Don't change anything else.

“Não mude mais nada” é pequeno, mas importante: agentes adoram “melhorar” componentes vizinhos enquanto corrigem um. Depois de cada passo bom, rode git add -A && git commit -m "...", assim, se o próximo pedido quebrar algo, você volta ao último estado bom.

Se quiser que o agente controle um navegador sozinho, adicione um servidor MCP do Playwright; ele pode abrir a página, tirar os próprios screenshots e corrigir o que vê.

5. Checagens de mobile e acessibilidade

Sites feitos com IA muitas vezes ficam bem no desktop e desmontam no celular. Antes do lançamento:

Ative o modo de dispositivo nas ferramentas de desenvolvedor do navegador e cheque pelo menos 375 px (celular), 768 px (tablet) e 1440 px (desktop). Uma barra de rolagem horizontal significa que algo está vazando.
Rode o Lighthouse no Chrome DevTools. Ele dá notas para Performance, Accessibility, Best Practices e SEO e lista avisos concretos.
Navegue pela página só com o teclado (Tab, Enter). Você consegue chegar a todos os links e botões, e consegue ver onde está o foco?

Entregue os avisos direto ao agente:

The Lighthouse accessibility report says: [paste the warnings].
Fix them. Also check that every image has meaningful alt text, every form field
has a label, text/background contrast meets WCAG AA and keyboard focus is visible.

6. O básico de SEO

O agente sabe tudo isso, mas muitas vezes deixa pela metade se você não pedir. Checklist:

Um <title> único por página (cerca de 60 caracteres) e uma meta description (cerca de 150–160 caracteres).
Um <h1> por página, com uma ordem coerente de <h2>/<h3> abaixo dele.
sitemap.xml e robots.txt. No Astro, a integração @astrojs/sitemap gera o sitemap; ela precisa da URL site definida no astro.config.
Tags Open Graph (og:title, og:description, og:image); as prévias de link em apps de chat e redes sociais vêm delas.
Uma URL canônica e o atributo lang correto.
Para um negócio local, escreva endereço, telefone e horário de funcionamento como texto (não dentro de uma imagem) e, se quiser, adicione dados estruturados LocalBusiness.

Run an SEO audit: list every page's title and meta description and fix
any that are missing or too long. Add @astrojs/sitemap, create robots.txt,
put Open Graph tags in the shared layout. Summarise the changes.

7. Um formulário de contato

Um site estático não tem servidor próprio, então os envios do formulário precisam ir para algum lugar. Três opções razoáveis:

Um serviço de formulários: algo como Formspree, ou Netlify Forms se você hospeda na Netlify. O formulário envia para o serviço e você recebe um e-mail. O caminho mais fácil.
Uma função serverless: uma pequena rota de API no Astro ou no Next.js recebe o formulário e o envia por uma API de e-mail. A chave da API fica só no servidor, em uma variável de ambiente.
Só um link mailto:: sem formulário, sem problema. Muitas vezes basta para um pequeno negócio.

Seja qual for a escolha, peça ao agente para adicionar validação no servidor dos campos obrigatórios, uma proteção básica contra spam (um campo honeypot oculto ou o captcha do serviço) e um estado claro de “mensagem recebida”. Como você está coletando dados pessoais, adicione também um aviso curto de privacidade.

8. Domínio e deploy

Primeiro envie o site para o GitHub:

git remote add origin git@github.com:you/cafe-site.git
git push -u origin main

Depois conecte um dos três hosts mais comuns. Todos refazem o build e o deploy a cada push depois que o repositório está conectado, e podem gerar URLs de preview para branches ou pull requests:

Vercel: feita pela equipe do Next.js, também lida bem com Astro. CLI: npx vercel para um preview, npx vercel --prod para produção.
Netlify: muito consolidada para sites estáticos, com formulários integrados. CLI: npx netlify deploy --prod.
Cloudflare Pages: hospeda na rede da Cloudflare; prático se seu domínio já está na Cloudflare. CLI: npx wrangler pages deploy dist.

As configurações de build geralmente são detectadas automaticamente: para Astro, o comando de build é npm run build e a pasta de saída é dist. Adicione seu domínio no painel do host e depois cadastre o registro DNS que ele indicar (geralmente um registro A ou CNAME) no seu registrador. Os certificados HTTPS são emitidos automaticamente.

Depois do lançamento, adicione o site ao Google Search Console e envie a URL do sitemap para que o Google o encontre mais cedo.

O que a IA erra

Cara de template. Sem direção de design, tudo ganha o mesmo gradiente e a mesma grade de cards. Dê cores, fontes e uma lista do que “não fazer”.
Conteúdo inventado. Agentes escrevem sem cerimônia depoimentos falsos, números inventados (“mais de 10.000 clientes satisfeitos”) e prêmios que não existem. Leia cada linha e apague o que não for verdade.
Imagens com risco de licença. Ele pode usar hotlink de imagens aleatórias da web. Use suas próprias fotos ou imagens com licença adequada.
Dependências desnecessárias. Uma biblioteca grande de animação ou de UI para um menu simples. Adicione a regra “pergunte antes de adicionar um pacote novo”.
Links quebrados e hrefs vazios. Procure botões que ficaram com href="#" e clique em todos os links antes do lançamento.
Testar só no desktop. O agente geralmente checa só o tamanho padrão da janela; peça mobile explicitamente.
Cantar vitória antes da hora. Um agente pode dizer que terminou enquanto o build falha. Rode npm run build você mesmo antes do deploy; ele precisa terminar sem erros.

Segurança

Mesmo um site institucional tem algumas regras:

Guarde segredos em um arquivo .env e garanta que .env esteja no .gitignore. No seu host, cadastre os mesmos valores como variáveis de ambiente no painel.
Nunca cole chaves de API no chat. Diga ao agente “a chave está no .env como RESEND_API_KEY”, não o valor em si. O histórico do chat também fica armazenado em algum lugar.
Nada de segredos no código do cliente. Qualquer chave enviada no JavaScript do navegador é uma chave que qualquer um pode ler. Chaves de e-mail e de pagamento ficam só no servidor.
Leia o que o agente executa. Não aprove automaticamente comandos como rm -rf, curl ... | sh, instalações globais ou git push --force.
Olhe o diff antes do commit. git diff é o jeito mais fácil de pegar tanto bugs quanto um segredo que escapou.

Fazendo isso com o AgentVera

Tudo acima funciona com um terminal e um navegador. Algumas coisas deixam o processo mais fluido no meu próprio fluxo de trabalho, e eu as uso no AgentVera:

Agentes em paralelo em worktrees separados. Por exemplo, um agente Claude Code trabalha em conteúdo e SEO enquanto um agente Codex trabalha na UI; cada um fica em seu próprio git worktree, então nenhum sobrescreve o outro. Todos aparecem em uma grade do workspace.
Ambientes de preview. O servidor de desenvolvimento de cada worktree ganha seu próprio endereço; os ambientes de preview podem capturar páginas em tamanhos de celular, tablet e desktop e compará-las pixel a pixel com uma baseline anterior.
Navegador do agente. Os agentes usam um Chrome com perfil separado via Playwright, e você acompanha ao vivo o que eles fazem no navegador do agente.
Revisão e acompanhamento de tokens. Quando um turno termina, o code review faz um segundo modelo ler o que o agente escreveu, e o uso de tokens de cada agente fica visível. Você ainda lê o diff antes do merge.
Vercel. Se o projeto está vinculado à Vercel, a aba Vercel mostra os deploys e os logs de build, e você pode entregar um build com falha a um agente.

Nada disso é obrigatório; só facilita acompanhar tudo quando você trabalha com mais de um agente. Para o método em si, veja agentes de código em paralelo.

Checklist rápido

Stack escolhida (Astro para um site de conteúdo)
O primeiro prompt cobre páginas, conteúdo, cores, fontes e uma lista do que “não fazer”
Um commit depois de cada passo bom
Checado em 375, 768 e 1440 px; avisos do Lighthouse corrigidos
Toda página tem título, meta description e um h1; sitemap e robots.txt existem
Nenhum depoimento, número ou imagem inventados sobrando
O formulário funciona, com proteção contra spam e aviso de privacidade
.env não está no git; segredos só no servidor
npm run build passa; o site está no ar com seu domínio e HTTPS

Conclusão

Criar um site com IA hoje tem menos a ver com escrever código e mais com descrever bem e conferir com cuidado. Escolha a stack certa, coloque direção de design no primeiro prompt, avance em passos pequenos com um commit para cada um e rode as checagens de mobile, acessibilidade e SEO antes do lançamento. O agente escreve rápido; quem decide o que está certo continua sendo você.