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

Описание: 不寫任何一行程式碼，我用 AI 做出了電商平台、點餐系統、音樂串流、數據分析後台等超過 14 個網站，甚至還挑戰復刻 Awwwards
得獎等級的動畫網站——Lottie、Three.js、ScrollTrigger 全部零程式碼完成。

但做到最後我發現，動畫特效再炫都不是重點。同一個品牌網站，我拆出三種完全不同的設計策略，告訴你：搞懂「網站是做給誰看的」，比任何特效都
重要。

📌 這支影片你會看到：

1️⃣ 從 1995 到 2018，AI 重新設計每個年代的網站風格
2️⃣ 為什麼 AI 做出來的網站像 2014 年？用 Skill 突破風格限制
3️⃣ 用 shadcn-ui 一口氣做出 14 個不同類型的網站
4️⃣ 復刻 Awwwards 得獎網站的完整流程：Extract 拆解 → 素材替換 → 動畫重製
5️⃣ 不用 3D 模型也能做滾動動畫：圖片生影片 → ezgif 拆幀 → ScrollTrigger
6️⃣ 同一個品牌，三種設計策略拆解——哪個才是「對的網站」？

📌 使用工具
Claude Code / shadcn-ui / Lottie / Three.js / Hyper3D / Google Whisk / Google Flow / Gemini / ezgif

📌 相關連結
Claude Code：https://claude.ai/
shadcn/ui：https://ui.shadcn.com/
Lottie：https://lottiefiles.com/
Hyper3D：https://hyper3d.ai/
Google Whisk：https://labs.google/fx/tools/whisk
Google Flow：https://labs.google/flow/about
Gemini：https://gemini.google.com/
ezgif：https://ezgif.com/

0:00 開場：不寫一行程式碼就能做網站？
0:16 1995～2000 年：Table 排版與訪客計數器
0:36 2000～2005 年：Flash 開場動畫的年代
0:54 2005～2010 年：CSS float 排版革命
1:13 2010～2014 年：響應式與 Bootstrap
1:36 Skill 如何改變 AI 的設計風格
1:52 2015～2018 年：SPA 與 shadcn-ui
2:24 兩個關鍵發現
2:38 用 shadcn-ui 做出 14 個網站
3:09 挑戰復刻 Awwwards 得獎網站
3:42 自製 Extract 工具拆解動畫網站
4:13 Three.js 網站復刻與 3D 模型替換
4:43 不用 3D：圖片生影片動畫工作流
5:33 ScrollTrigger 逐幀動畫成果
5:57 動畫不是重點：三種設計策略拆解
6:25 第一版：說服漏斗——讓客戶找你合作
6:57 第二版：敘事式——讓人看懂你在幹嘛
7:43 第三版：極簡——最快看懂重點
8:15 結語：回歸網站的本質

#ClaudeCode #AI做網站 #前端開發 #零程式碼 #Awwwards #shadcnui #網頁設計 #ScrollTrigger #Lottie #ThreeJS #WebDesign #NoCode #AI
#網站設計