Guia completo para criar sites premium com vídeos gerados por IA,…

INEMA

Aqui estão os principais prompts usados no processo, organizados por etapa (reescritos de forma clara e direta):

🧠 1. Prompt para gerar a IMAGEM (base do vídeo)⌗

Exemplo usado:

“Preciso de uma imagem de um blueprint (planta) em papel de rascunho. Deve ser um arranha-céu que esteja cerca de 75% desenhado.”

🔹 Ideia:

Criar uma imagem inicial que depois será animada
Já pensar no formato (16:9)

🎬 2. Prompt principal para gerar o VÍDEO⌗

Esse é o mais importante — criado com ajuda da skill:

“Analise a imagem de referência (blueprint). Quero um vídeo em loop contínuo para um site. O desenho deve começar sendo completado com novas linhas. Depois deve fazer transição para uma cidade real, mostrando o prédio sendo construído. A construção deve evoluir até ficar pronta. Durante o processo, deve aparecer um texto grande: ‘Turn your ideas into reality’. O texto deve ser bem visível e permanecer tempo suficiente para leitura. No final, o vídeo deve dar zoom out e voltar ao blueprint inicial.”

🔹 Ideia:

Começo → desenho
Meio → construção real
Texto → mensagem principal
Final → volta ao início (loop)

⚙️ 3. Prompt para o Claude gerar o prompt de vídeo (uso da skill)⌗

“Olhe a imagem chamada blueprint.jpg. Me ajude a criar um prompt de vídeo em loop para meu site.”

🔹 Ideia:

Delegar a escrita do prompt detalhado para a IA

🌐 4. Prompt para CRIAR O SITE⌗

“Te enviei um vídeo que será usado no site. Quero que a seção principal (hero) seja só esse vídeo. Sem texto no hero. O site é para uma empresa de arquitetura. Deve parecer profissional, moderno e confiável. Depois do vídeo, complete o restante do site automaticamente.”

🧩 5. Prompt de PLANEJAMENTO (definir estilo)⌗

“Faça perguntas sobre o negócio e o estilo do site. Não comece a construir até ter 95% de certeza do que quero.”

🔹 Isso faz a IA:

perguntar nome da empresa
estilo visual
tipo de arquitetura
sensação da marca

🏗️ 6. Respostas usadas no planejamento⌗

Exemplos:

“Não tenho branding ainda, crie tudo do zero.”
“Foco em arquitetura comercial de prédios altos.”
“Quero um site completo.”
“Estilo claro e minimalista.”
“Sensação: prestigioso e estabelecido.”

🎨 7. Prompt para ADICIONAR vídeos em outras partes⌗

“Adicione esse vídeo abaixo deste texto e acima dessas estatísticas. Não deixe em tela cheia, apenas como complemento visual.”

🔄 8. Prompt para REDESIGN baseado em referência⌗

“Pegue essa imagem de referência e faça o design da parte abaixo do vídeo ficar parecido com esse estilo.”

🚀 9. Prompt para PUBLICAR (GitHub)⌗

“Me ajude a criar um repositório no GitHub, privado, e enviar todo o projeto para lá.”

🛠️ 10. Prompt para ALTERAÇÕES futuras⌗

Exemplo:

“Mude o texto de 58 anos para 60 anos.”

🧠 RESUMO DOS TIPOS DE PROMPT⌗

No processo inteiro, ele usa basicamente 5 tipos:

Imagem → cria base visual
Vídeo → transforma imagem em animação
Site → gera layout e estrutura
Design → ajusta estilo
Edição → pequenas mudanças depois

Os produtos e serviços citados no conteúdo foram estes:

Ferramentas principais⌗

Claude Code
Visual Studio Code
Seedance 2.0 / Cance 2
Kie.ai
GitHub
Vercel

Modelos e recursos citados dentro da plataforma⌗

NanoBanana / Nano Banana 2
Qwen
GPT
Gemini 3

Recursos/itens⌗

front-end design skill
seedance loop prompt skill
settings.local.json
claude.md
API key

Links e sites mencionados⌗

Google Usado para procurar e baixar o Visual Studio Code.
Visual Studio Code Para instalar o editor e usar a extensão.
Kie.ai Para gerar imagem e vídeo e acessar os modelos.
GitHub Para criar o repositório privado e versionar o projeto.
Vercel Para publicar o site na web.
Dribbble Para buscar referências visuais de design.
Awwwards Também citado como fonte de referência de design.

Extensões / comandos / integrações mencionados⌗

Extensão Claude Code no VS Code
Comando /plugins
Comando /reload plugins
Comando /frontend-design
Comando /init

O que cada um faz no fluxo⌗

VS Code: ambiente de trabalho
Claude Code: ajuda a planejar e construir o site
Kie.ai: gera imagem e vídeo
Seedance: cria o vídeo animado
Nano Banana 2: cria a imagem base
GitHub: guarda o código
Vercel: publica o site
Dribbble / Awwwards: servem de inspiração visual

em uma seção específica da página.

20. Uso de referências visuais⌗

Também é possível usar referências de design para alterar o estilo do site. Basta mostrar uma imagem de inspiração e pedir que a página siga aquela linguagem visual.

21. Redesign com base em referência⌗

Com isso, a página pode ganhar:

novas formas,
novo estilo gráfico,
composição mais refinada,
visual mais alinhado com o tipo de marca desejada.

22. Publicação do site⌗

Depois de aprovado, o site deixa de existir só localmente e passa a ser publicado online.

23. Fluxo de publicação⌗

A publicação segue este caminho:

o projeto é enviado para um repositório privado,
a plataforma de hospedagem se conecta a esse repositório,
o site é colocado no ar automaticamente.

24. Atualizações futuras⌗

Após isso, qualquer mudança no projeto pode ser enviada novamente, e o site online pode ser atualizado sem precisar refazer tudo do zero.

25. Mensagem central do conteúdo⌗

A mensagem principal é que hoje é possível criar sites visualmente fortes, modernos e com aparência cara usando IA, prompts bem feitos e ferramentas de código, com muito menos tempo, custo e esforço do que antes.

26. Resumo final em uma frase⌗

O conteúdo ensina um fluxo completo para criar, refinar e publicar um site moderno usando IA para gerar os visuais e uma ferramenta de código para transformar esses materiais em uma experiência web pronta para uso.

Resumo mais estruturado por tópicos:

1. Objetivo geral⌗

Mostrar como criar um site com aparência sofisticada e profissional usando IA para gerar os elementos visuais e uma ferramenta de código para montar a página.

2. Ideia principal⌗

A proposta é substituir produções caras e demoradas por um processo rápido, em que:

uma imagem é criada com IA,
essa imagem vira um vídeo,
o vídeo vira a base visual do site,
e a ferramenta de código monta o site a partir desse material.

3. Tipo de site proposto⌗

O foco está em sites:

modernos,
visuais,
mais imersivos,
com animações e movimento,
pensados para prender a atenção do visitante.

4. Ferramentas usadas no processo⌗

O fluxo apresentado combina:

um editor de código,
uma extensão de assistente de código,
uma skill para gerar prompts melhores,
um gerador de imagem,
um gerador de vídeo,
uma plataforma para hospedar o site,
e um repositório para guardar o projeto.

5. Preparação do ambiente⌗

Antes de criar o site, é feita a configuração inicial:

instalar o editor,
instalar a extensão,
abrir uma pasta vazia,
criar a estrutura básica do projeto,
adicionar a skill que ajuda a escrever os prompts.

6. Função da skill⌗

A skill serve para orientar a criação de prompts de vídeo de forma mais eficaz. Ela funciona como um conjunto de instruções prontas para ajudar a gerar vídeos com melhor resultado visual.

7. Criação do material visual⌗

O processo visual começa com uma imagem-base. Essa imagem é pensada já no formato ideal para servir de referência ao vídeo que será usado no site.

8. Transformação da imagem em vídeo⌗

Depois, essa imagem é transformada em um vídeo em loop, ou seja:

o vídeo começa de um ponto,
evolui visualmente,
e volta ao estado inicial,
criando uma repetição suave.

9. Exemplo mostrado⌗

No exemplo:

começa com um desenho técnico de um prédio,
esse desenho evolui para uma cena realista,
aparece um texto de destaque,
o prédio é concluído,
e depois tudo volta ao esboço inicial.

10. Ajustes e testes⌗

O conteúdo destaca que não basta gerar uma vez. É preciso testar e ajustar:

duração,
ritmo,
clareza do texto,
qualidade visual,
custo de geração.

11. Escolha da melhor versão⌗

São comparadas versões diferentes do vídeo para decidir qual funciona melhor. A escolha considera velocidade, impacto visual e custo.

12. Uso do vídeo no site⌗

Depois de pronto, o vídeo vira o elemento principal da página inicial. Ele ocupa o hero da página e fica rodando continuamente como fundo principal.

13. Planejamento do site⌗

Antes da construção automática, a ferramenta de código entra em modo de planejamento e faz perguntas sobre:

nome da empresa,
estilo da marca,
área de atuação,
sensação desejada,
seções que o site deve ter.

14. Construção da identidade⌗

Como não havia marca pronta, o processo também inclui criar:

nome fictício da empresa,
direção visual,
posicionamento,
sensação de confiança e sofisticação.

15. Estrutura do site⌗

A partir das respostas, a ferramenta monta um site com:

seção principal com vídeo,
menu de navegação,
textos institucionais,
métricas ou números da empresa,
áreas de serviços,
blocos de credibilidade,
contato.

16. Papel da skill de front-end⌗

Uma skill específica de front-end é usada para melhorar o design da página. Ela ajuda a ferramenta a gerar um layout com mais qualidade estética e mais coerência visual.

17. Primeira versão do resultado⌗

Mesmo com pouca informação, a primeira versão do site já entrega:

aparência profissional,
identidade consistente,
sensação de empresa séria,
base pronta para refinamento.

18. Iterações posteriores⌗

Depois da primeira versão, o site pode ser melhorado aos poucos com:

novas seções,
novos vídeos,
mudanças de texto,
ajustes visuais,
elementos mais dinâmicos.

19. Adição de novos vídeos⌗

O método pode ser repetido para criar outros blocos animados no site. Por exemplo:

gerar uma nova imagem,
transformar em vídeo,
inserir esse vídeo

O conteúdo mostra como criar sites com aparência premium, moderna e altamente visual usando IA para gerar os elementos visuais e uma ferramenta de código para transformar isso em um site funcional. A ideia central é substituir produções caras e demoradas por um fluxo muito mais rápido, usando imagens, vídeos e prompts.

Primeiro, é apresentada a proposta de criar páginas mais envolventes com fundos animados, efeitos de movimento e seções visuais que prendem mais a atenção do usuário e ajudam na conversão. Em vez de gravar cenas reais, a abordagem usa IA para gerar tudo isso.

Depois, é explicado o fluxo principal: usar uma ferramenta de código para ajudar a escrever prompts de vídeo, enviar esses prompts para um gerador de vídeo, pegar o material gerado e pedir que a ferramenta transforme isso em um site completo.

Em seguida, mostra-se a configuração inicial do ambiente de trabalho. Isso inclui instalar o editor, adicionar a extensão necessária, abrir uma pasta vazia e organizar um espaço onde serão colocados arquivos, configurações e uma skill, que funciona como um conjunto de instruções em linguagem natural para orientar a criação dos prompts.

Após isso, o processo passa para a geração do material visual. Primeiro, cria-se uma imagem-base no formato ideal para o site. Depois, essa imagem é usada para gerar um vídeo em loop contínuo, pensado para funcionar como fundo do hero da página. O exemplo mostrado parte de um esboço de arranha-céu, evolui para uma construção real, exibe um texto de destaque e termina retornando à imagem inicial para dar sensação de loop sem interrupção.

Também é destacada a importância de iterar no prompt e ajustar detalhes como duração do vídeo, ritmo, legibilidade do texto e custo de geração. O conteúdo compara versões de 15 e 10 segundos e escolhe a mais rápida por funcionar melhor visualmente e custar menos.

Com o vídeo pronto, ele é levado de volta para a ferramenta de código, que passa a ser usada para planejar o site. Antes de construir, a ferramenta faz perguntas sobre nome da empresa, identidade visual, área de atuação, seções desejadas e sensação que a marca deve transmitir. A partir dessas respostas, ela monta um plano do site.

Na etapa de design, é usada uma skill de front-end para melhorar o nível estético da página. O site gerado tem um hero com vídeo em loop, navegação simples, textos institucionais, métricas da empresa, seções de prática, reconhecimento e contato. Mesmo com poucas informações iniciais, o resultado já apresenta aparência profissional.

O conteúdo também mostra como enriquecer o site depois da primeira versão. É possível adicionar novos vídeos em seções específicas, como animações menores entre blocos de texto, e ir refinando a experiência visual conforme necessário.

Outro ponto abordado é o uso de referências de design externas para ajustar o estilo da página. Basta fornecer uma imagem de referência e pedir que a parte inferior do site siga aquela linguagem visual, preservando a identidade já criada. Isso permite adaptar o layout para um visual mais geométrico, sofisticado ou alinhado com determinado padrão de mercado.

Por fim, é explicado como publicar o site. O projeto é enviado para um repositório privado, e depois conectado a uma plataforma de deploy que coloca o site no ar em um domínio real. A vantagem desse fluxo é que, sempre que o código for atualizado no repositório, o site publicado também pode ser atualizado automaticamente.

Em resumo, os tópicos principais são: criação de sites premium com IA, geração de imagens e vídeos, uso de prompts com skills, planejamento guiado do site, construção automática do front-end, iteração visual com referências, adição de novos elementos animados e publicação online com integração entre repositório e deploy.

Simples, mas deixo aqui o q o Nate Compartilhou, pois é bem basico para iniciantes

youtube.com/watch ↗

Crie Sites Premium com Videos

chatgpt.com ↗