# Como criar site com IA usando só um prompt?

> Published 2026-09-27T14:40:33.453Z on https://www.crazystack.com.br/pt/p/como-criar-site-com-ia-usando-so-um-prompt/
> Source video: https://www.youtube.com/watch?v=MjzCyVHCkns

Você consegue criar site com IA em poucos minutos combinando duas ferramentas: o Topview gera o vídeo do produto e o Claude Code monta a landing page. O vídeo mostra o fluxo completo, da referência do perfume Scarlet até o deploy gratuito na Vercel. Abaixo, cada etapa com as ressalvas que o criador não enfatizou.

## Criar site com IA com um prompt só: o que o vídeo realmente entrega

Criar site com IA pelo método do vídeo é viável porque o produto final é uma landing page estática de arquivo único, e não um sistema complexo. O canal [O Rei dos Sites](https://www.youtube.com/@oreidossites) mostra, em agosto de 2026, a construção de uma página promocional para o perfume Scarlet, da Virgínia, usando o fluxo de vídeo gerado mais código escrito por agente.

A promessa do título — R$ 4.000 faturados e 5 minutos de trabalho — merece duas ressalvas antes de você reproduzir o processo. O valor faturado é experiência relatada pelo próprio criador, sem nota fiscal ou contrato exibido. E os 5 minutos contam só a execução final, ignorando a preparação de referência, prompt e contas que o vídeo já pressupõe.

O resultado técnico, esse sim, você consegue conferir ao longo do vídeo: um site com animação de vídeo ao rolar a página, gerado em HTML puro e publicado de graça. Nas palavras do criador, o jogo está na qualidade do vídeo e não na complexidade do código.

## Quais ferramentas o fluxo usa e para que serve cada uma

O fluxo combina uma ferramenta de geração de vídeo, um agente de código no terminal, um editor e duas plataformas de hospedagem. Antes de seguir, entenda o papel de cada peça, porque nenhuma delas faz o trabalho sozinha.

O vídeo promocional da página é gerado no [Topview](https://www.topview.ai), uma plataforma web de criação de vídeos com inteligência artificial. Dentro dela, o criador usa o modelo Seedance — família de modelos de vídeo da [ByteDance](https://seed.bytedance.com/en/seedance) — e destaca a timeline, que permite regenerar apenas os segundos indesejados em vez de refazer o vídeo inteiro. O vídeo chama o recurso de "Seedance 2.5" e anuncia 60 dias do modelo no plano anual da plataforma; como esses planos mudam com frequência, confira a oferta atual direto na página do Topview antes de assinar.

O código da página é escrito pelo [Claude Code](https://claude.com/product/claude-code), ferramenta de codificação agêntica da Anthropic que roda no terminal. O criador abre o terminal dentro do [Visual Studio Code](https://code.visualstudio.com), cola o prompt e o agente cria os arquivos `index.html` e `style.css` na pasta do projeto.

A publicação acontece em duas etapas: o código sobe para o [GitHub](https://github.com), que faz o versionamento, e a [Vercel](https://vercel.com) faz o deploy automático a partir do repositório, gerando o domínio do site.

## Passo a passo completo do método mostrado no vídeo

O processo tem cinco etapas ordenadas, e cada uma depende da anterior. Se você pular a referência visual, o vídeo sai genérico; se pular o GitHub, o deploy na Vercel fica mais trabalhoso.

1. **Escolha e capture a referência.** O criador usou a foto do perfume Scarlet do site oficial da Virgínia como imagem de entrada. Você pode usar qualquer produto: joia, carro, loja virtual. A imagem orienta o estilo do vídeo.

2. **Gere o vídeo no Topview.** Cole o prompt junto com a foto, selecione o modelo de vídeo e aguarde a geração. Depois, use a timeline para pedir ajustes pontuais — no vídeo, o criador pediu presença de azul e comparou duas versões antes de escolher. Exporte em MP4, sem marca d'água, e baixe o arquivo.

3. **Prepare a pasta no editor.** Crie uma pasta no computador, abra o [Visual Studio Code](https://code.visualstudio.com), use `File > Open Folder` e abra um terminal novo dentro do editor.

4. **Rode o Claude Code com o prompt.** Abra o Claude Code no terminal, cole o prompt que descreve uma landing page single page com scroll trigger e vídeo de 10 segundos. O agente cria `index.html` e `style.css`. O criador prefere HTML puro para landing pages e reserva o [Next.js](https://nextjs.org), framework React da Vercel, para lojas virtuais.

5. **Publique no GitHub e na Vercel.** Crie um repositório no [GitHub](https://github.com), peça ao Claude Code para subir o código com `git remote` e `push` (aprovando os comandos quando ele pergunta), e depois conecte o repositório a um novo projeto na [Vercel](https://vercel.com). O deploy sai sem configuração extra e o site fica no ar.

## O que o Topview entrega de diferente em geração de vídeo com IA

O diferencial apontado no vídeo é a edição por timeline dentro do Topview, que permite alterar um trecho específico do vídeo sem regerar tudo. Programadores reclamam justamente desse ponto em geradores de vídeo: o resultado vem ruim e não há como consertar só os segundos errados.

No exemplo, o criador aprovou os segundos iniciais do vídeo do perfume e pediu mudança apenas no trecho final, adicionando tons de azul. A plataforma devolveu duas versões — uma azul e uma mais rosa — e ele manteve a original, considerando-a melhor. Isso mostra o fluxo de iteração funcionando, embora o vídeo não mostre quantas tentativas foram necessárias antes dessa aprovada.

Na avaliação honesta do próprio criador, faltou uma interface mais simples para exportar em 4K. Ele ainda compara o Topview favoravelmente a concorrentes de geração de vídeo, mas lembre-se: ele declara que a empresa é parceira do canal, então a comparação é opinião de quem recebe contrapartida, não um teste independente.

## HTML puro ou Next.js: quando cada escolha faz sentido

Para landing pages e sites institucionais de arquivo único, HTML puro performa bem e simplifica o deploy. O criador defende essa escolha com um argumento prático: um site de uma página só não precisa de framework, build step nem estado no cliente.

Já uma loja virtual, segundo ele, pede um framework como o Next.js, porque envolve catálogo, carrinho e integrações que ficam difíceis de manter em arquivos soltos. Essa divisão não é regra absoluta — é a preferência declarada dele —, mas é um bom ponto de partida se você está decidindo a stack do primeiro projeto.

O Claude Code atende aos dois cenários, então a decisão de arquitetura continua sendo sua, não do agente. Se o prompt pedir Next.js, o agente cria o projeto em Next.js.

## Hospedagem: por que a Vercel fecha o fluxo com custo zero

A Vercel encerra o fluxo porque conecta o repositório do GitHub e publica o site sem configuração manual. Você clica em *Add New Project*, escolhe o repositório, confirma o deploy e recebe o domínio em poucos instantes.

O criador diz hospedar alternando entre a Vercel e a Hostinger (citada no áudio de forma confusa), reservando a Vercel para aplicações simples como essa. Para landing pages estáticas, o plano gratuito da Vercel costuma bastar; verifique os limites atuais de banda na [documentação da Vercel](https://vercel.com/docs) antes de escalar tráfego pago.

O GitHub entra como etapa separada porque guarda o histórico do código. Se o cliente pedir alteração depois, você edita, sobe de novo e a Vercel reimplanta sozinha.

## O modelo de venda por trás do vídeo

A estratégia comercial do canal é usar o site como conteúdo de marketing: produz uma página para uma celebridade ou marca conhecida, grava o processo, publica no Instagram e espera que os espectadores perguntem preço. No vídeo, ele menciona páginas feitas para a Virgínia e para a marca Carmed como exemplos dessa vitrine.

Isso explica o formato do vídeo e também o aviso de transparência: além do conteúdo, o criador vende um curso e divulga link de afiliado do plano do Topview. Nenhuma dessas partes invalida o tutorial técnico, mas você deve ler a promessa de renda como parte do funil de vendas dele, e não como garantia de resultado.

Se você quer testar o método, faça a conta com seus próprios números: custo dos planos de IA, horas de iteração no vídeo e preço de mercado de landing pages na sua região. O R$ 4.000 relatado não se transfere automaticamente para o seu caso.

## Perguntas frequentes

- **Preciso saber programar para criar site com IA nesse método?** Não para o primeiro site: o Claude Code escreve o código e a Vercel publica. Conhecer HTML e Git ajuda muito quando algo sai do esperado, como um comando que falha no push.

- **O site sai pronto em 5 minutos mesmo?** Os 5 minutos do título cobrem a execução final, sem contar a preparação. Com referência pronta, prompt testado e contas criadas, o fluxo é rápido; do zero, reserve mais tempo para iterar no vídeo.

- **Dá para trocar o Topview por outra ferramenta de vídeo?** Sim. O papel dela é gerar o MP4 do produto; qualquer gerador que exporte vídeo sem marca d'água serve. A timeline do Topview é o diferencial citado, não um requisito técnico.

- **O prompt do Claude Code funciona com ChatGPT ou outro agente?** O criador afirma que sim, já que o prompt descreve a página em texto. O resultado depende da capacidade do agente em seguir instruções de layout e animação.

- **Quanto custa manter um site assim no ar?** O deploy estático na Vercel tem plano gratuito, e o GitHub também. Os custos reais ficam nas assinaturas das ferramentas de IA usadas na criação.

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