Claude Design 的優勢
相比 Claude Code，Design 版具有更佳的審美與排版基礎，內建「設計品味」能大幅減少生成錯誤與 Token 浪費。
Claude Design + New Design Skill = $10,000 3D Animated Websites
✓ 這篇在你的庫裡
在摘要庫開啟 →
這部在講什麼教學
介紹如何結合 Claude Design、Hicksfield 及 Scroll World 技術，在短時間內建立具備 3D 空拍穿梭效果的高級預訂網站，並透過自動化工具一鍵部署。
適合誰想提升接案單價、不懂技術但想製作 3D 網站的設計師。
你會學會學會 AI 生成 3D 穿梭動畫、掌握 Claude Design 高階工作流、實現 MCP 自動化部署。
最值得看10:15 展示如何呼叫 Scroll World 技能將靜態室內圖轉換為流暢動畫。
實作路線
照著做的重點意義優先，時間戳用來導航
提供參考圖的重要性
不要只用文字描述；從 Pinterest 或 Dribbble 截圖作為視覺參考，Claude 才能精確捕捉色彩、字體與風格。
Hicksfield MCP 自動化
透過連接 MCP，Claude 能直接在背景調度 Hicksfield 生成符合網頁內容的圖片與影片，無需手動切換工具。
Scroll World 實作 3D 動畫
利用 GitHub 開源 Repo 賦予 Claude 新技能，將多張室內照片「縫合」成如同空拍機穿梭房內的捲動特效。
Hostinger 一鍵部署
透過專屬 MCP 連接器，只需在對話框輸入指令，Claude 就會自動處理後端並將網站推送上線，無需技術背景。
看完可以做什麼
到 Pinterest 找一個喜歡的網頁設計，試著用影片提供的 Prompt 資源，利用 Claude Design 復刻出第一個帶有 3D 動畫的 Landing Page。需要留意：由於 AI 缺乏真實房屋平面圖，3D 穿梭的動線是隨機合成的；建議先手動審核生成的室內圖片質量，再執行合成影片指令以確保連貫性。
生成於 昨天
檢舉
觀眾怎麼看
整理 19 則有效留言信心 中觀眾對教學內容表示高度肯定，並針對技術實作細節、商業應用可行性及工具整合提出討論。
多數觀眾認為影片教學結構清晰，成功將複雜的 3D 網頁設計效果簡化，對開發本地服務網站極具參考價值。
觀眾詢問如何處理實際的預訂功能後端，以及在開發過程中應如何平衡 AI 生成與手動提示詞的使用比例。
部分觀眾認為此類動畫網頁雖視覺效果佳，但實際操作體驗不佳且難以應對產品圖片變更，不適合商業生產環境。
有觀眾指出影片中提到的電子報資源連結目前無法正常開啟，建議確認連結狀態。
本摘要僅基於 19 則留言樣本，可能無法完全代表全體觀眾觀點。