VIDEO
HIGHLIGHT
Log InSign up
Como criar sites animados com IA (Claude Design + Claude Code)
SummaryTranscriptChat

Como criar sites animados com IA (Claude Design + Claude Code)

Como Criar um Site Animado Usando Cloud Design e Cloud Code

Introdução ao Projeto

  • O vídeo apresenta um tutorial sobre como criar um site animado utilizando as ferramentas Cloud Design e Cloud Code, abordando desde a ideação até a publicação.
  • O apresentador promete compartilhar dicas para otimizar o uso de tokens no Cloud Design durante o processo de criação.

Referências de Design

  • É fundamental buscar referências externas para inspirar o design do site, além de preparar antecipadamente o texto que será utilizado na página.
  • Sites recomendados para busca de referências incluem Ben e Dribbble, onde é possível explorar projetos por tema.
  • O repositório Awesome Design MD no GitHub é sugerido como uma fonte valiosa para encontrar sistemas de design das principais empresas do mercado digital.

Criação do Design System

  • O apresentador utiliza prints do site Mir como inspiração e inicia a criação do design system no Cloud Design.
  • Para desenvolver a cópia da página, ele usa um GPT específico que gera textos otimizados com base nas informações fornecidas sobre a empresa.

Revisão do Design System

  • Após gerar o design system, é necessário revisar cada parte, incluindo cores e tipografia. Ajustes são feitos conforme necessário.
  • A logo inicial é substituída pelo nome correto da marca após feedback sobre sua aparência.

Criação do Protótipo

  • Com o design system pronto, o próximo passo é criar um protótipo no Cloud Code. É importante publicar o design system antes dessa etapa.
  • O apresentador solicita a criação de várias páginas (home, serviços, contato), enfatizando que deseja focar mais no design do que na cópia textual.

Finalização e Publicação

  • Após completar as páginas solicitadas, ajustes são feitos em relação ao modo claro e escuro.
  • O apresentador destaca que as animações serão tratadas posteriormente no Cloud Code para não gastar tokens desnecessariamente.

Uso do Cloud Code

  • Ele abre o Cloud Code Desktop para adicionar animações ao site criado anteriormente. Um prompt específico é enviado para construir o site usando NextJS com animações apropriadas.

Testes Finais e Ajustes

  • Após alguns minutos de processamento, ele visualiza as animações implementadas e faz ajustes necessários nos modos claro e escuro.

Adicionando Elementos Visuais Atrativos

  • Para tornar a hero section mais interessante, ele busca vídeos animados como fundo através do site Motion Sites.

Publicação em Hospedagem

  • O apresentador explica os passos necessários para hospedar o site publicamente usando a Hosinger. Ele recomenda planos específicos pela boa relação custo-benefício.

Conclusão da Apresentação

  • Ao final, ele menciona métodos automáticos adicionais para conectar domínios personalizados ao projeto hospedado.
Video description

✅ Hospedagem Hostinger com 10% de desconto em QUALQUER plano ➜ https://www.hostg.xyz/SHJER Aplique no checkout o cupom: *PNP* ⚡ Curso Vibe Coding na Prática Crie sites, apps e automações com IA sem saber programar ➜ https://link.vibecodingnapratica.com.br/208 --- 🔗 *LINKS ÚTEIS*: 🎨 Claude Design ➜ https://claude.ai/design 💻 Claude Code Desktop ➜ https://claude.com/download 🖼️ Dribbble (referências de design) ➜ https://dribbble.com 📚 Awesome Design MD (design systems de grandes empresas) ➜ https://github.com/VoltAgent/awesome-design-md 🎬 Motion Sites (vídeos animados para background) ➜ https://motionsites.ai/ 🤖 GPT Copy para Sites (comunidade School) ➜ https://www.skool.com/vibe-coding-base-3189 Neste vídeo você aprende a criar um site animado do zero usando Claude Design e Claude Code, duas ferramentas de inteligência artificial que juntas entregam um resultado visual impressionante. O processo começa pela criação de um design system personalizado com base em referências reais de mercado, garantindo que o site tenha identidade visual coerente antes de qualquer linha de código. Além do design, você vai ver como usar um GPT especializado em copy para estruturar todos os textos da página, das headlines aos depoimentos, antes mesmo de abrir o editor. Essa combinação de boa copy com bom design é o que separa um site bonito de um site que converte. Para quem quer publicar projetos web com vibe coding e inteligência artificial, o vídeo cobre ainda a etapa de deploy na Hostinger usando Node.js Web App, com dicas para economizar tokens e uma hero com vídeo animado usando a biblioteca GSAP. --- 📌 *O que você vai aprender nesse vídeo:* 00:00 - Introdução: site animado com Claude Design e Claude Code 00:33 - Como buscar referências de design (Dribbble, Pinterest, Awesome Design MD) 02:04 - Criando o design system no Claude Design com inspiração no Miro 02:48 - Usando GPT de copy para estruturar os textos da landing page 04:06 - Revisando e aprovando o design system gerado 05:14 - Criando o protótipo com design system publicado 06:01 - Ajustando o prompt e enviando a copy para o Claude Design 08:05 - Gerando o site no Claude Code com Next.js e animações GSAP 11:01 - Ajustando dark mode e corrigindo problemas visuais 11:40 - Adicionando vídeo animado na hero com Motion Sites 12:51 - Publicando o site na Hostinger (Node.js Web App) 14:53 - Deploy concluído e conectando domínio personalizado (Timestamps estimados, ajuste conforme a edição final do vídeo) --- *CONTATOS* 📩 Parcerias ➜ contato@paginasnapratica.com.br 💼 Orçamentos para serviços ➜ https://projetos.vibecodingnapratica.com.br/f/solicitacao-de-servicos