前端工程師失業倒數？AI 一句話就能生出整個網站

Without writing a single line of code, I used AI to build over 14 websites — e-commerce platforms, food ordering systems, music streaming apps, data analytics dashboards, and more. I even took on the challenge of recreating Awwwards-winning animated websites — Lottie, Three.js, and ScrollTrigger, all done with zero code. But as I kept going, I realized flashy animations aren't the point. Using the same brand website, I broke it down into three completely different design strategies to show you: understanding WHO your website is for matters more than any visual effect. 📌 What you'll see in this video: 1️⃣ From 1995 to 2018 — AI redesigns websites in the style of each era 2️⃣ Why AI-generated websites look stuck in 2014, and how Skills break through style limitations 3️⃣ Using shadcn-ui to build 14 different types of websites in one go 4️⃣ Full workflow for recreating Awwwards-winning sites: Extract & deconstruct → swap assets → rebuild animations 5️⃣ Scroll animations without 3D models: image-to-video → ezgif frame extraction → ScrollTrigger 6️⃣ Same brand, three design strategies — which one is the "right" website? 📌 Tools Used Claude Code / shadcn-ui / Lottie / Three.js / Hyper3D / Google Whisk / Google Flow / Gemini / ezgif 📌 Related Links Claude Code: shadcn/ui: https://ui.shadcn.com/ Lottie: https://lottiefiles.com/ Hyper3D: Google Whisk: Google Flow: Gemini: https://gemini.google.com/ ezgif: https://ezgif.com/ 0:00 Intro: Building websites without writing a single line of code? 0:16 1995–2000: Table layouts and visitor counters 0:36 2000–2005: The era of Flash intro animations 0:54 2005–2010: The CSS float layout revolution 1:13 2010–2014: Responsive design and Bootstrap 1:36 How Skills change AI's design style 1:52 2015–2018: SPAs and shadcn-ui 2:24 Two key takeaways 2:38 Building 14 websites with shadcn-ui 3:09 Challenge: Recreating Awwwards-winning websites 3:42 Building a custom Extract tool to deconstruct animated sites 4:13 Recreating a Three.js site and swapping 3D models 4:43 No 3D needed: Image-to-video animation workflow 5:33 ScrollTrigger frame-by-frame animation results 5:57 Animations aren't the point: Three design strategy breakdowns 6:25 Version 1: Persuasion funnel — getting clients to work with you 6:57 Version 2: Narrative-driven — making people understand what you do 7:43 Version 3: Minimalist — getting to the point as fast as possible 8:15 Conclusion: Getting back to the essence of web design #ClaudeCode #AIWebDesign #FrontEndDev #NoCode #Awwwards #shadcnui #WebDesign #ScrollTrigger #Lottie #ThreeJS #WebDevelopment #AI #UIDesign