Claude Code 做網站實戰：shadcn/ui、Lottie 與 ScrollTrigger 完整工作流

by Rain Chu | 8 月 24, 2026 | AI, claude

Claude Code 已經能在很短時間內完成網站骨架、元件組合、響應式版面與互動原型。真正拉開品質差距的地方，卻不是「會不會叫 AI 寫前端」，而是能否先定義網站要說服誰、希望對方採取什麼行動，再選擇正確的素材與技術。

一套實用的 AI 網站工作流，可以用 Claude Code 負責程式與整合，用 shadcn/ui 建立元件基礎，再依需求加入 Lottie、Three.js 或捲動圖片序列。最後仍要回到效能、無障礙、後端、安全與維護，才能把吸睛展示變成真的可用網站。

AI 做網站的真正分水嶺

如果只輸入「幫我做一個現代感網站」，AI 很容易回到訓練資料中最常見的版型。常見結果是大標題、三張功能卡、藍紫漸層、圓角按鈕與制式頁尾。這不是程式沒有寫好，而是需求沒有提供受眾、目的、內容優先順序與視覺判斷標準。

因此，Skill、設計規則與參考資料會直接影響生成結果，像 用 Impeccable 改善 AI 網站設計，就是把審美與常見問題整理成可重複使用的規則。它能減少模板感，但最後仍要由人判斷設計是否符合目的。

先決定網站屬於哪一種策略

同一份公司資料，可以做成完全不同的網站，寫程式前，我會先選擇下面三種策略之一，再決定資訊架構、動效密度與追蹤指標。

動畫工作室可以用高密度動效展示能力，但代價可能是載入速度和無障礙表現，法律、醫療或在地服務網站通常更需要清楚、可信任與快速聯絡。設計不是把所有效果都放進來，而是保留最能支持目標的部分。

Claude Code 與網站工具分工

Google Whisk 原本能以主體、場景與風格圖片快速探索視覺方向，Google 已在 2026 年 2 月的 Flow 更新中宣布把 Whisk 與 ImageFX 的主要能力整合到 Flow，因此新專案可直接從 Flow 開始。想了解原本的操作概念，仍可閱讀 Google Whisk 官方介紹。

完整工作流一：先做策略與規格

第一步不要急著叫 Claude Code 產生首頁。先把商業目標、受眾、內容和成功標準整理成一頁規格。以下提示詞可直接交給 Codex、Claude 或 Gemini。

你是一位網站策略師與資深產品設計師。

請先不要寫程式，根據下面資料建立網站策略。

品牌或產品：［填入名稱］
主要受眾：［填入使用者］
希望完成的行動：［購買、預約、聯絡或訂閱］
現有內容：［貼上文字與素材清單］
限制：［技術、時程、品牌或法規限制］

請輸出：
1. 一句清楚的價值主張
2. 建議採用說服漏斗、敘事閱讀或最短路徑，並說明原因
3. 從首頁到主要行動的資訊架構
4. 每個區塊的目的、必要內容與 CTA
5. 建議追蹤的三個指標
6. 不應加入的內容與效果
7. 桌面版與行動版的驗收條件

資訊不足時先列出問題，不要自行虛構客戶、獎項或數據。

這一步完成後，再請 AI 挑戰規格中的假設，例如「為什麼一定要輪播圖」或「使用者能否在五秒內找到聯絡方式」。好的規格應該能回答為誰設計、為何這樣排，以及如何判斷有效。

完整工作流二：拆解參考網站但不複製

參考 Awwwards 等設計網站時，應拆解規則，不應下載別人的品牌素材後直接換字，可觀察版面比例、閱讀節奏、元素定位、字體層級、動效觸發條件與素材格式，再用自己的內容重建。

請分析我提供的參考網站截圖與網址，建立一份可實作的設計規格。

請拆解：
1. 頁面區塊順序與每個區塊的目的
2. 網格、最大寬度、留白與對齊方式
3. 字體層級、行高與閱讀節奏
4. 色彩角色，不只列出色碼
5. 圖片、Lottie、影片與 3D 素材的使用位置
6. 捲動、游標、進場與狀態切換的觸發方式
7. 行動版需要刪除、簡化或改排的內容
8. 可能使用的前端技術與效能風險

只提取設計原則與互動邏輯。
不要複製原站文案、Logo、商標、插圖、照片或可識別的品牌元素。
請提出三個能保留體驗但形成原創差異的方向。

這種方法比要求「做得一模一樣」更能長期使用，也降低著作權與品牌混淆風險。若想進一步建立 AI 設計規則，可以參考 UIUX Pro Max 與 WordPress 外觀設計。

完整工作流三：用 Claude Code 與 shadcn/ui 起底

Claude Code 可從終端機讀取整個專案。安裝完成後進入網站資料夾，再啟動互動工作階段。

npm install -g @anthropic-ai/claude-code
cd my-website
claude

對電商、預約、點餐、聊天室或儀表板這類常見介面，shadcn/ui 能快速提供表單、按鈕、對話框、表格與導航元件。不過它只是原始碼與設計系統的起點。若沒有重新調整字體、密度、色彩、狀態和內容層級，網站仍會有明顯套版感。

請先閱讀現有專案結構與套件，不要重建整個專案。

根據已確認的網站策略，建立首頁與主要操作流程。

實作要求：
1. 優先沿用現有框架與元件模式
2. 使用 shadcn/ui 作為基礎，但重新定義色彩、字體、間距與互動狀態
3. 使用語意化 HTML，完整支援鍵盤與螢幕閱讀器
4. 桌面、平板與手機都要有明確版面
5. 不使用虛構數據、假客戶、假按鈕或沒有結果的表單
6. 不加入無助於目標的漸層、裝飾光球與過量動畫
7. 建立 loading、empty、error、success 與 disabled 狀態
8. 完成後執行測試，並列出尚未串接的後端功能

先提出實作計畫與檔案變更清單，確認後再開始修改。

對常見產品而言，先讓 AI 建立可操作底稿，再逐步替換品牌內容，通常比從空白專案慢慢刻元件更有效。若專案容易在連續修改後失控，可以搭配 Superpowers 開發紀律，把規格、測試與驗收拆成較小步驟。

Lottie、真 3D 與假 3D 怎麼選

如果訪客不需要自由旋轉物件，真正的 3D 不一定划算。固定鏡位的產品炸開、植物生長、書本展開或日夜轉換，都可以先生成影片，再拆成圖片序列，用捲動位置控制幀數。這種方法的重點是首尾畫面的構圖、光線和物件位置必須一致。

產生首尾關鍵畫面的提示詞

建立兩張 16 比 9 的產品關鍵畫面，作為首尾幀動畫素材。

主體：一個放在深色石材桌面的精緻漢堡
起始畫面：漢堡完整組裝，置於畫面中央
結束畫面：麵包、蔬菜、起司與肉排沿垂直方向均勻分離，形成清楚的爆炸分解圖

兩張圖必須維持完全相同的攝影機位置、焦段、光線、背景、陰影與物件比例。
產品邊緣清楚，材質寫實，構圖適合網站主視覺。
不要文字、Logo、手、餐具、額外食材或鏡頭移動。

Flow 首尾幀轉場提示詞

固定攝影機與背景不動。
讓完整漢堡平順地分解成尾幀中的爆炸結構。
每一層食材只沿垂直方向緩慢移動，保持形狀、材質、光線與比例一致。
動作由慢到快再自然減速，沒有旋轉、彈跳、變形或新增物件。
首幀和尾幀必須精準對齊，適合拆成連續圖片序列。

轉場完成後，可用 ezgif 的 Video to JPG 或 Video to WebP 拆幀，只保留足以讓動作平順的圖片，統一尺寸和命名，再交給 Claude Code。圖片越多不一定越好，行動裝置的下載量與解碼記憶體必須一起評估。

用 ScrollTrigger 控制圖片序列

GSAP ScrollTrigger 的 scrub 能讓動畫進度直接跟著捲動位置。實作時可把 Canvas 固定在視窗內，依進度換算目前幀數。這裡最容易被忽略的是預載、視窗縮放、圖片比例與減少動態效果設定。

請在現有頁面建立捲動控制的圖片序列動畫。

素材位置：public/sequence
檔名規則：frame-0001.webp 到 frame-0120.webp

需求：
1. 使用 Canvas 繪製，不要一次建立 120 個 img 元素
2. 預載第一幀並立即顯示，再於背景載入其餘圖片
3. 顯示真實載入進度，載入失敗時提供靜態首圖
4. 使用 GSAP ScrollTrigger，將動畫區塊固定並用 scrub 對應捲動進度
5. 依照裝置像素比與容器尺寸重繪，圖片維持完整比例
6. resize 後重新計算 Canvas 與 ScrollTrigger
7. 支援 prefers-reduced-motion，停用動態時顯示最有資訊的靜態幀
8. 行動裝置使用較少幀數或較小圖片
9. 元件卸載時清除 ScrollTrigger、事件與圖片參照
10. 完成後檢查首頁載入量、記憶體與捲動是否流暢

先說明檔案與元件架構，再修改程式。

若畫面真的需要讓訪客旋轉、縮放或更換材質，才改用 Hyper3D 產生模型並匯出 GLB，再由 Three.js 載入。模型要先減面、壓縮貼圖並測試手機 GPU。寫實模型能帶來更自由的互動，也會增加載入、除錯與相容性成本。

漂亮原型不等於正式網站

AI 可以快速做出電商、點餐、音樂串流、旅遊規劃、預約與資料儀表板的外觀，要判斷能不能真的使用，不能只看畫面。每一個按鈕、表單、登入、付款與資料狀態都必須有完整路徑。

• 後端與資料：API、資料庫、搜尋、檔案上傳與交易一致性。
• 身分與權限：登入、角色、授權、工作階段與密碼重設。
• 安全：輸入驗證、輸出編碼、金鑰管理、速率限制與安全標頭。
• 可靠性：錯誤狀態、重試、備份、監控、日誌與復原方式。
• 品質：響應式、鍵盤操作、螢幕閱讀器、色彩對比與減少動態效果。
• 效能：圖片壓縮、程式分割、第三方腳本、Core Web Vitals 與低階手機測試。
• 維護：套件更新、文件、測試、部署流程與內容管理權限。

請把目前網站視為準備上線的正式產品，執行一次完整稽核。

逐項檢查：
1. 所有按鈕、表單、連結與導覽是否有真實結果
2. API、資料庫、登入、權限與錯誤處理是否完整
3. 是否暴露金鑰、個資、內部網址或敏感日誌
4. 是否存在 XSS、CSRF、未驗證輸入與越權風險
5. 鍵盤、螢幕閱讀器、對比與減少動態效果是否可用
6. 手機、平板與桌面是否出現溢位、遮擋或版面跳動
7. 首頁下載量、LCP、CLS、INP 與圖片序列記憶體是否合理
8. SEO、Open Graph、結構化資料與 404 頁面是否完成
9. 測試、部署、監控、備份與回復流程是否存在

請把結果分成阻擋上線、上線前修正、可以後續改善三個等級。
每個問題要提供檔案位置、重現方式與建議修改，不要只給原則。

熟悉前端與系統的人通常更能把 AI 用好，因為他們知道哪些地方看似完成，其實只是靜態假象。AI 壓縮的是產生程式碼的時間，需求澄清、架構、除錯、安全、效能與長期維護仍需要工程判斷。

如何整合到 WordPress

Claude Code 產生的網站不會自動變成 WordPress，但有三種常見整合方式。內容型網站可以做成自訂佈景主題或 Gutenberg 區塊。需要 React 互動但仍由 WordPress 管理內容時，可以採用 Headless WordPress，只有單一活動頁時，也能把整理後的 HTML、CSS 與 JavaScript 放進專用頁面模板。

• Lottie 與 GSAP 應透過佈景主題或外掛載入，不要在每篇文章重複塞入完整套件。
• 表單、會員、購物與預約要串接 WordPress API 或成熟外掛，不能只保留前端畫面。
• Three.js 與圖片序列要測試 Divi 或其他頁面編輯器是否重複載入腳本。
• 內容編輯者需要可理解的欄位，不應每次修改文案都回頭改程式。

如果想用 Codex 製作可互動的 HTML 視覺內容，也可以延伸閱讀 Open Design 與 HTML 簡報實戰，理解設計規格如何轉成可執行的前端成果。

我會怎麼安排這套流程

1. 先寫受眾、目標、內容與成功指標。
2. 選擇說服漏斗、敘事閱讀或最短路徑。
3. 拆解參考網站的規則，不複製品牌素材。
4. 用 Claude Code 和 shadcn/ui 建立可操作骨架。
5. 依互動需求選擇 Lottie、Three.js 或圖片序列。
6. 先完成一段代表性動效，再決定是否擴大使用。
7. 以真實內容、資料與操作流程完成整合。
8. 執行安全、無障礙、效能與跨裝置驗收。
9. 部署後追蹤轉換與使用行為，再依數據調整。

這套流程的價值不在於證明前端工程師會消失，而是把工作重心從手動堆疊元件，推向需求判斷、設計系統、技術選型與品質保證。AI 可以讓第一版非常快，真正有價值的專業則是知道第一版離可用、可信任與可維護還差多少。

工具與官方資源

• Claude
• Claude Code 入門文件
• shadcn/ui
• LottieFiles
• Three.js
• Hyper3D
• Google Flow
• Gemini
• ezgif
• GSAP ScrollTrigger

FAQ

Claude Code 可以一句話完成整個網站嗎

它可以快速建立完整度很高的原型與常見介面，但正式網站還需要真實內容、資料來源、後端、權限、安全、效能與部署驗收。一句話適合起步，不適合直接當成上線規格。

用了 shadcn/ui 就能消除 AI 模板感嗎

不能。shadcn/ui 提供高品質元件原始碼與良好基礎，但網站仍需要自己的字體、色彩、密度、內容層級、互動和品牌素材。設計策略比元件名稱更重要。

Lottie、Three.js 和圖片序列該怎麼選

簡單向量動效選 Lottie。需要自由旋轉或即時互動選 Three.js。只有固定動作且希望由捲動控制時，圖片序列通常更容易穩定呈現。

Google Whisk 現在要到哪裡使用

Google 已把 Whisk 與 ImageFX 的主要能力整合到 Flow。新工作流可以直接使用 Flow 建立圖片與影片，原本的 Whisk 操作概念仍可作為提示詞與視覺探索參考。

這套方法可以用在 WordPress 嗎

可以，但要先選擇自訂佈景主題、Gutenberg 區塊、Headless WordPress 或專用頁面模板。動態資料與會員功能仍要正確串接 WordPress 後端，不能只把 React 畫面貼進文章。