一句話總結 TL;DR
Claude Code 加上對的 skill 就能生出各種網站甚至復刻得獎動畫站，但隨意 prompt 只會產出老風格。真正的重點不是動畫特效，而是依受眾與目標量身設計，回歸網站本質。
30 年網站演變 × AI 一鍵拉皮
- 用 AI 生各年代網站再拉皮：一步步看 Claude Code 重新設計 00:00
- 1995-2000 用 table 排版：frameset 分割、閃爍圖示、計數器 00:00
- 2000-2005 Flash 開場動畫：搭 iframe，排版仍靠 table 00:32
- 2005-2010 改用 CSS float：Flash 式微，排版大革命 00:32
- 2010-2014 響應式來臨：Bootstrap 當道，但拉皮沒太大改變 01:06
- 隨意指令只得舊風格：模型大量學過這時期的資料 01:06
Skill 決定 AI 的設計風格
- 裝 impeccable skill 換風格：避免 AI 一直做很類似的設計 01:37
- skill 會影響 Claude Code 表現：成果確實長得很不一樣 01:37
- 2015-2018 改用 SPA：從扁平轉為半扁平設計 01:37
- shadcn-ui 是可貼上的原始碼：非傳統元件庫的 React 元件 02:10
- 建立在 Radix UI＋Tailwind 上：切換套件與框架而已 02:10
- 兩個心得：隨意 prompt 得舊風，靠 skill 才能優化 02:10
用 shadcn-ui 快速起新網站
- 一個 skill 做出多種常見網站：電商、點餐、串流、旅遊 02:42
- 還能做醫療、聊天室、數據分析：涵蓋市面常見型態 02:42
- 有些完整度高可直接用：起手即接近可用狀態 02:42
- 做常見網站別從頭來：請 AI 起一個底最快 02:42
復刻得獎動畫網站的做法
- Awwwards 是設計最高榮譽：由業界設計師與開發者評分 03:14
- 動畫站直丟 AI 容易失敗：做出很像又有點不像的版本 03:14
- 自製 Extract 工具復刻：下載元素、抓定位與 CSS 03:47
- clone 約 95% 像再微調：不能直接抄，須改主題 03:47
- 把狗換成貓、貓換火箭：客製後變成專屬網站 03:47
- Three.js 站換 3D 材質即可：材質請 Gemini 生成替換 04:20
- 模型用 Hyper3D 生成：可傳多圖生成，但需抽卡 04:20
不用 3D：圖生影片做逐幀動畫
- 用戶不會真的轉動模型：固定動作用動畫呈現就夠 04:20
- Whisk 生炸裂漢堡圖：抽到喜歡的圖再丟影片 AI 04:52
- 用 Flow 做首尾幀影片：首幀完整、尾幀炸裂加絲滑轉場 04:52
- Ezgif 把影片轉圖整包下載：再丟給 Claude Code 04:52
- 套 ScrollTrigger 逐幀播：滑動時漢堡一幀幀炸開 05:26
- 同流程可做任意動畫：樹生長、街景日夜等 05:26
動畫不是重點：三種設計策略
- 好網站要量身訂作：針對受眾與目標，非堆動畫 05:58
- 特效的代價：效能不佳、無障礙操作較低 05:58
- 版本一說服漏斗：Hero 講價值到 CTA，追點擊率 06:29
- 版本二敘事型：設計成雜誌，追蹤讀完的比例 07:04
- 版本三極簡型：最短路徑，追蹤手機聯絡轉換率 07:38
- 回歸網站本質：別過度包裝、過度追求特效 08:11
金句與關鍵數據 Quotes & Numbers
- 做常見網站千萬不要從頭來，直接請 AI 起一個底最快 02:42
- 自製 Extract 工具能 clone 出約 95% 像的網站 03:47
- 手機用戶耐心只有 5 秒，能否聯絡到人是關鍵指標 08:11
總結與行動建議 Takeaways
- 做常見網站別從頭寫：請 AI 起一個底最快
- 想脫離老風格：靠對的 skill 調整 AI 產出
- 復刻動畫站用 Extract 工具：別直接丟給 AI
- 不必建 3D 模型：圖生影片＋ScrollTrigger 逐幀就行
- 先定受眾與目標：再決定要不要動畫
- 回歸網站本質：別過度追求華麗特效