Pular para o conteúdo
← Voltar para o Skalablog

Artigo publicado

Como criar site com IA usando só um prompt?

Engenharia de SoftwareVercelClaude CodeNext.js

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 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, 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 — 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, ferramenta de codificação agêntica da Anthropic que roda no terminal. O criador abre o terminal dentro do Visual Studio Code, 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, que faz o versionamento, e a Vercel 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, 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, framework React da Vercel, para lojas virtuais.

5. Publique no GitHub e na Vercel. Crie um repositório no GitHub, 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. 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 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