# Criar site com IA: fluxo completo até o deploy grátis

> Published 2026-09-27T14:42:03.930Z on https://www.crazystack.com.br/pt/p/criar-site-com-ia-fluxo-completo-ate-o-deploy-gratis/
> Source video: https://www.youtube.com/watch?v=yndfZHaqOOE

O gargalo de quem quer criar site com IA raramente é o código: é o material visual e a hospedagem. Este guia resolve os três em sequência. Você gera a arte com o Nano Banana, anima o hero com vídeo generativo, deixa o Claude Code escrever o projeto em Next.js e sobe tudo na Vercel sem pagar hospedagem.

## Como criar site com IA em quatro etapas

Você cria site com IA em quatro etapas: gerar a imagem principal, animar essa imagem em vídeo, gerar o código com o Claude Code e publicar na Vercel. O tutorial do canal O Rei dos Sites (publicado em julho de 2026) mostra o fluxo construindo uma loja de joias, e este artigo reconstrói cada passo com os nomes corretos das ferramentas.

A ordem importa. A imagem define a identidade visual e serve de base para o vídeo. O vídeo, por sua vez, vira a seção hero do site. Só depois disso faz sentido pedir o código, porque o Claude Code precisa saber exatamente qual material vai embedar na página.

## Por que o Claude Code fica com a parte do código

O [Claude Code](https://docs.anthropic.com/en/docs/claude-code) é a ferramenta de codificação agêntica da Anthropic que roda no terminal. No vídeo, o criador prefere trabalhar com ele fora de agregadores, abrindo o projeto direto na linha de comando e pedindo: "crie um website moderno para uma loja de joias, use esse vídeo como hero section". O resultado do vídeo foi um projeto completo em Next.js a partir de um único prompt.

O criador é direto sobre os limites: o Claude Code não faz tudo sozinho e não é imbatível em tudo. Para imagens e vídeos, outras ferramentas ganham. Essa divisão de trabalho — código com Claude, mídia com modelos generativos — é o ponto central do fluxo.

Uma dica prática do vídeo: peça explicitamente que o projeto seja construído em [Next.js](https://nextjs.org), o framework React da Vercel. Assim, frontend e backend ficam no mesmo repositório e você hospeda tudo em um lugar só, sem dividir entre dois provedores.

## Imagem e vídeo: Nano Banana, Seedance e Kling

A imagem vitrine nasce no [Nano Banana](https://deepmind.google/models/gemini/image/), o modelo de geração de imagens do Google integrado à família Gemini. O criador cola um prompt pronto (disponibilizado na descrição do vídeo), escolhe a versão Nano Banana 2/Pro dentro da plataforma agregadora e baixa o resultado em segundos. A qualidade da imagem, segundo ele, é o que mais influencia a percepção de valor do site.

Com a imagem em mãos, o próximo passo é animá-la. No vídeo aparecem duas opções: o modelo de vídeo [Seedance](https://www.seedance.ai), da ByteDance, e o [Kling AI](https://klingai.com). O criador nota que o Kling entrega resultado superior, mas consome muito mais créditos, então usa o Seedance em 720p para a maioria dos casos. Ele também remove o áudio gerado, já que o vídeo será fundo mudo do hero.

## Abacus.AI: vale a assinatura de R$ 50 por mês?

Para não pagar assinatura separada de cada modelo, o criador usa o [Abacus.AI](https://abacus.ai), plataforma que reúne vários modelos de imagem, vídeo e texto em uma única assinatura. Segundo a experiência dele no vídeo, paga cerca de R$ 50 por mês — contra os R$ 250 a R$ 300 que dizia gastar no [Higgsfield](https://higgsfield.ai), agregador que usava antes. Esses valores são relato do próprio criador, não uma cotação verificada.

Vale saber o contexto atual: o Abacus.AI também comercializa o ChatLLM Teams, plano voltado a equipes que unifica modelos de linguagem com custo mensal bem abaixo das assinaturas individuais. Se você só precisa de imagem e vídeo, teste primeiro os níveis gratuitos do Gemini e do próprio Kling antes de assinar qualquer agregador.

## Do código ao deploy gratuito na Vercel

Com o projeto gerado, a publicação leva três passos simples. O criador usa o [Visual Studio Code](https://code.visualstudio.com) para enxergar a estrutura de pastas e abrir o terminal, sobe o código para o [GitHub](https://github.com) — hoje com comandos colados direto no terminal, sem decorar Git — e conecta o repositório na [Vercel](https://vercel.com).

Na Vercel, o caminho é New Project, escolher o repositório importado e clicar em Deploy. O site sobe gratuitamente em um subdomínio `*.vercel.app`, já responsivo. O criador testa a renderização em iPhone XR pelo inspetor do navegador e o resultado funciona. Para entregar a um cliente, você pode depois apontar um domínio próprio.

Um aviso honesto: o plano gratuito da Vercel serve para vitrines e portfólios com tráfego modesto. Projetos com muito acesso ou funções de servidor intensivas podem exigir o plano pago. E o domínio gratuito é um subdomínio, o que nem todo cliente aceita como endereço final.

## O que o vídeo promete e o que você deve descontar

O título sugere faturar R$ 3.000 com sites, e o criador afirma ter vendido a loja de joias demonstrada por R$ 4.000. São relatos de experiência dele, sem comprovação independente. Vender sites depende de prospecção, negociação e carteira de clientes — o fluxo de IA resolve a produção, não a venda.

Também há viés promotional: o vídeo inclui link de afiliado do Abacus.AI e divulga um curso pago de R$ 97. Nada disso invalida o tutorial técnico, mas pesa na escolha das ferramentas apresentadas. Compare sempre com as alternativas gratuitas antes de pagar qualquer assinatura.

Por fim, o criador resume bem a mudança de postura: quem já domina engenharia ganha velocidade com IA, e quem está começando ainda precisa entender banco de dados, hospedagem e estrutura geral do projeto. A ferramenta acelera; ela não substitui o entendimento do que está sendo entregue.

## Perguntas frequentes

- **Preciso saber programar para criar site com IA?** Para o fluxo do vídeo, não. Você cola prompts, arrasta arquivos e clica em Deploy. Ainda assim, noções de estrutura de projeto, terminal e Git evitam travar quando algo sai do previsto.

- **O deploy na Vercel é realmente gratuito?** Sim, existe um plano gratuito com subdomínio `*.vercel.app`, usado no tutorial. Projetos com tráfego alto ou recursos de servidor pesados podem precisar do plano pago.

- **Por que pedir o projeto em Next.js?** Porque o Next.js permite manter frontend e backend no mesmo repositório, o que simplifica a hospedagem: tudo sobe na Vercel, sem dividir entre dois provedores.

- **O Abacus.AI é obrigatório?** Não. Você pode gerar imagens no próprio Gemini e vídeos no Kling AI diretamente. O agregador existe para concentrar modelos e reduzir custo quando você usa vários com frequência — o valor de R$ 50 por mês citado é relato do criador do vídeo.

- **Quanto dá para cobrar por um site assim?** O criador relata venda de R$ 4.000 em uma loja de joias, mas esse número não é referência de mercado. O preço depende do escopo, do cliente e da sua capacidade de venda, não da ferramenta usada.

[Source video](https://www.youtube.com/watch?v=yndfZHaqOOE)