# Como criar um site com IA: guia passo a passo

URL: https://agentvera.dev/pt/blog/build-website-with-ai/ · Publicado: 2026-10-11

Crie um site com IA: escolha a stack, escreva o primeiro prompt com direção de design, itere com screenshots, cheque mobile e SEO e faça deploy na Vercel ou Netlify.

**Resumo:**

- Para um site de conteúdo, Astro é um bom padrão; use Next.js quando precisar de login, painel ou banco de dados, e HTML e CSS puros para uma única página.
- Dê ao primeiro prompt páginas, cores e fontes concretas e uma lista do que “não fazer”, depois corrija uma coisa por vez a partir de screenshots e faça commit a cada passo bom.
- Antes do lançamento, cheque as larguras de 375, 768 e 1440 px e o Lighthouse, adicione títulos, meta descriptions e sitemap, remova conteúdo inventado e garanta que npm run build passa.

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](/pt/glossary/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](/pt/blog/best-ai-coding-cli-tools/).

## 1. Instale o básico

Você precisa de três coisas:

1. **Node.js** (a versão LTS). Astro e Next.js rodam nele.
2. **Git** e uma conta no **GitHub**. É o seu botão de desfazer e o jeito mais fácil de conectar à hospedagem.
3. Um **[agente de código](/pt/glossary/coding-agent/)**, por exemplo:

```bash
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:

```bash
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:

```text
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:

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

```text
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](/pt/glossary/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:

```text
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`.

```text
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:

1. **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.
2. **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.
3. **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:

```bash
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](/pt/download/):

- **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](/pt/glossary/git-worktree/), então nenhum sobrescreve o outro. Todos aparecem em uma grade do [workspace](/pt/features/workspace/).
- **Ambientes de preview.** O servidor de desenvolvimento de cada worktree ganha seu próprio endereço; os [ambientes de preview](/pt/features/preview-environments/) 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](/pt/features/agent-browser/).
- **Revisão e acompanhamento de tokens.** Quando um turno termina, o [code review](/pt/features/code-review/) faz um segundo modelo ler o que o agente escreveu, e o uso de [tokens](/pt/glossary/token/) de cada agente fica visível. Você ainda lê o diff antes do merge.
- **Vercel.** Se o projeto está vinculado à Vercel, a [aba Vercel](/pt/features/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](/pt/blog/parallel-coding-agents/).

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

## Perguntas frequentes

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

---

**Sobre o AgentVera.** AgentVera é um app desktop para macOS, Windows e Linux, desenvolvido pela Solviera Teknoloji. Ele roda 18 agentes de programação com IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) lado a lado, por projeto, em terminais reais com as instalações e logins de CLI do próprio usuário. O plano gratuito tem agentes ilimitados. Baixar: https://agentvera.dev/pt/download/ · Preços: https://agentvera.dev/pt/pricing/