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

✅ Hostinger hosting with 10% discount on ANY plan ➜ https://www.hostg.xyz/SHJER Apply coupon code PNP at checkout ⚡ Vibe Coding in Practice Course Create websites, apps, and automations with AI without knowing how to program ➜ https://link.vibecodingnapratica.com.... --- 🔗 *USEFUL LINKS*: 🎨 Claude Design ➜ https://claude.ai/design 💻 Claude Code Desktop ➜ https://claude.com/download 🖼️ Dribbble (design references) ➜ https://dribbble.com 📚 Awesome Design MD (design systems from large companies) ➜ https://github.com/VoltAgent/awesome-... 🎬 Motion Sites (Animated videos for background) ➜ https://motionsites.ai/ 🤖 GPT Copy for Websites (School community) ➜ https://www.skool.com/vibe-coding-bas... In this video you will learn how to create an animated website from scratch using Claude Design and Claude Code, two artificial intelligence tools that together deliver an impressive visual result. The process begins with the creation of a customized design system based on real market references, ensuring that the website has a coherent visual identity before any line of code. In addition to design, you will see how to use a GPT specialized in copywriting to structure all the text on the page, from headlines to testimonials, even before opening the editor. This combination of good copywriting with good design is what separates a beautiful website from a website that converts. For those who want to publish web projects with a coding and artificial intelligence vibe, the video also covers the deployment stage on Hostinger using Node.js Web App, with tips for saving tokens and a hero animated video using the GSAP library. --- 📌 What you will learn in this video: 00:00 - Introduction: animated website with Claude Design and Claude Code 00:33 - How to find design references (Dribbble, Pinterest, Awesome Design MD) 02:04 - Creating the design system in Claude Design with inspiration from Miro 02:48 - Using GPT copy to structure the landing page text 04:06 - Reviewing and approving the generated design system 05:14 - Creating the prototype with the published design system 06:01 - Adjusting the prompt and sending the copy to Claude Design 08:05 - Generating the website in Claude Code with Next.js and GSAP animations 11:01 - Adjusting dark mode and correcting visual problems 11:40 - Adding animated video to the hero with Motion Sites 12:51 - Publishing the website on Hostinger (Node.js Web App) 14:53 - Deployment complete and connecting to custom domain (Estimated timestamps, adjust as per final video edit) --- CONTACTS 📩 Partnerships ➜ [email protected] 💼 Service quotes ➜ https://projetos.vibecodingnapratica....