Claude Fable 5 Higgsfield MCP 工作流程，把高階 3D 滾動網站從設計參考、影像產生、影片產生到本機預覽，壓成一段可反覆改寫的提示詞。 - 2026 年創作者做網站原型的新分工：語言模型負責讀圖、規劃、寫程式；Higgsfield MCP 負責把 Nano Banana Pro、Seedance 2.0、Kling 等影像與影片模型接進同一個對話。
核心流程：兩個外掛，一個技能，一段提示詞
第一，使用 Claude Code 或 Claude 介面，並選用 Claude Fable 5。作者強調 Fable 5 對截圖理解、設計讀取與長上下文任務更強。這點和 Anthropic 對 Fable 5 的定位一致：它面向長時程代理式工作與困難推理。
第二，接上 Higgsfield MCP。Higgsfield 官方頁示範的連接方式是打開 Claude settings，進入 Connectors，新增 custom connector，命名為 Higgsfield，貼上遠端 MCP URL：
https://mcp.higgsfield.ai/mcp
完成 OAuth 登入後，Claude 會看到可用工具。逐字稿建議把常用權限設為 always allow，減少生成過程中的確認中斷。企業團隊採用時，建議先用測試帳號和測試專案驗證，不要一開始就授權到正式品牌資產。
第三，加入 scroll cinematic skill。作者提供一個 zip 檔，內含 SKILL.md，用來指示 Claude 如何把影片切成多張 scroll frames，並把影像序列接回網站捲動動畫。這是整段教學最關鍵的部分。MCP 只提供影像與影片生成能力；真正把影片變成滾動互動的，是這份技能指令和前端實作。
第一段可重用提示詞
逐字稿裡的提示詞有口語停頓。我保留原意，並整理成可以直接貼進 Claude Code 的版本：
Use the scroll cinematic skill to build a 3D scroll website for a new car brand with incredible colors.
Generate a high-end cinematic hero plus two 3D clips with the Higgsfield MCP at 1080p.
Slice them into scroll frames and build a polished multi-section brand site that matches the visual vibe.
Launch it on localhost when complete.
這段提示詞有四個清楚任務：指定技能、指定主題、指定素材規格、指定交付方式。它沒有要求 Claude 只輸出設計稿，而是要求它完成可看的本機網站。這也是它比一般「幫我做一個網站」提示詞更有效的原因。
若要套到其他品牌，可以替換主題句：
Use the scroll cinematic skill to build a 3D scroll website for [brand/category].
Visual direction: [cinematic mood, material, color, motion reference].
Generate a high-end cinematic hero plus [number] 3D clips with the Higgsfield MCP at 1080p.
Slice them into scroll frames and build a polished multi-section site.
Launch it on localhost and give me the local URL.
參考 Awwwards 時，重點在結構，不在照抄
逐字稿示範到 Awwwards 類型的得獎網站找參考。這個做法適合用來觀察版面節奏、鏡頭語言、互動密度與轉場手感。它不適合拿來做高相似度複製。
比較安全的做法，是把參考拆成可描述的設計語言。例如：
| 參考維度 | 可以提取 | 應避免 |
|---|---|---|
| 動態 | 球體旋轉、水波、液體爆裂、滾動切片 | 完整照搬動畫順序 |
| 版面 | 滿版 hero、中央物件、短句 overlay | 複製品牌視覺識別 |
| 技術 | scroll-linked frames、影片切片、WebGL 或 canvas | 複製原站程式碼 |
| 內容 | 新品牌、新產品、新敘事 | 使用原品牌文案 |
如果要做客戶案，請把「像某站」改寫成「使用同等級的互動密度」。這會保留設計目標，也降低法律和品牌風險。
實作後怎麼檢查第一版
作者的第一版是新車品牌。他在本機預覽 localhost:8094 左右的連接埠，看到一個具有高質感首頁、3D 車體和滾動旋轉效果的網站。這裡建議用五個檢查點評估：
| 檢查點 | 合格標準 |
|---|---|
| Hero | 3 秒內看懂產品類型與品牌氣質 |
| Scroll animation | 捲動時影格平順，沒有忽快忽慢 |
| Typography | 文字不擋住主視覺，不在行動版破版 |
| Performance | 影片切片大小合理，首次載入不拖慢 |
| Accessibility | 重要文字可讀，背景影片不影響資訊辨識 |
這些檢查比「看起來很酷」更重要。高階網站最後仍要服務商業目標。訪客要知道這是什麼、為何值得看、下一步該去哪裡。
第二段迭代提示詞：加入色彩爆炸段落
逐字稿接著示範怎麼回到 Claude Code 增加第二段。原始口語指令可以整理成：
Can you add a color explosion 3D scrolling video on the second page, right after the landing page?
Make it have a strong wow effect.
Use the Higgsfield MCP to generate the images and videos with the best available AI models.
這段提示詞的好處，是它指出位置、效果和工具。Claude 接著生成「car frozen inside a burst of liquid iridescent paint」之類的 keyframe，再用 Higgsfield MCP 產生影像與影片，最後更新前端頁面。
實務上，建議把效果要求再具體一點：
Add a second section after the hero.
Scene: the car is suspended in midair while liquid iridescent paint bursts outward from the rear wheels.
Motion: slow 180-degree camera orbit, then paint particles expand toward the viewer.
Keep the text overlay short: "COLOR UNLEASHED".
Use the generated video as scroll-linked frames.
具體的鏡頭、物件、動作和文字，會比「要有 wow effect」更穩。模型可以自由發揮，但自由度要落在清楚的邊界內。
這套工作流程真正改變的是 agency 成本結構
逐字稿提到，過去 agency 會為這類網站收數千美元，現在只需 Token 的費用就能生成一版。這句話要拆開看。
AI 的確降低了第一版視覺原型的成本。Claude 可以讀取截圖、寫前端、呼叫 Higgsfield 產生視覺素材，再把結果送到本機預覽。創作者不用在 Gemini、Kling、Seedance、剪輯軟體和前端專案之間手動搬素材。
但客戶真正付費的部分，仍包含策略、資訊架構、轉換設計、效能優化、授權管理、可維護程式碼、QA、部署和後續迭代。AI 讓原型變便宜，沒有讓專業判斷消失。
對 agency 來說，新的優勢會轉向三件事：能不能寫出好 brief，能不能快速判斷哪一版值得留下，能不能把炫技原型整理成可靠網站。
給團隊的採用建議
如果你要把這套流程帶進團隊，不要先追求最炫的 3D 效果。先建立一個小型標準流程：
- 建立測試品牌，不使用客戶商標。
- 只接一個 Higgsfield 測試帳號。
- 固定輸出尺寸，例如 1080p。
- 限制每輪只生成一張 keyframe 和一段短影片。
- 每輪都記錄成本、生成時間、檔案大小與本機效能。
- 用 Lighthouse 或瀏覽器效能工具檢查載入速度。
- 確認行動版文字不破版。
這樣做可以避免團隊被視覺震撼帶走。炫目的原型有價值，但可重複的流程才會變成服務能力。
FAQ
Claude Fable 5 的適用場景
適合做高複雜度原型。Anthropic 文件把 Fable 5 定位為長時程代理式工作模型，並列出 1M context 與最高 128k output。這有利於讀取截圖、維持設計脈絡和修改前端。
Higgsfield MCP 在這裡扮演什麼角色？
Higgsfield MCP 把影像與影片模型接進 Claude 工作流程。逐字稿用它呼叫 Nano Banana Pro 產生影像，再用 Seedance 2.0 或 Kling 類影片模型產生動態片段。
Awwwards 得獎網站的安全參考方式
不建議。可以學習互動結構、鏡頭節奏與版面密度，但應改成自己的品牌、文案、素材與互動組合。商業案更要注意授權與商標風險。
每輪生成成本的判讀
這是逐字稿作者的個人觀察。Higgsfield 官方說工具使用同一套 credit system，不同模型、解析度和時長會有不同成本。正式使用前應先做成本表。
權威引用
- Anthropic — Claude Fable 5 and Claude Mythos 5
- Claude API Docs — Models overview
- Higgsfield — Higgsfield MCP
- ByteDance Seed — Seedance 2.0
- Google — Nano Banana Pro
- Model Context Protocol — Introduction
- Tenten — AI 時代的程式設計：Vibe Coding 如何革新軟體開發流程？
- Tenten — 2026 年 Prompt Engineering 工程完整指南
- Tenten — 設計中的「哇！」因素是什麼？
Author Insight
這份逐字稿最有價值的地方，是它把網站設計從「等設計稿」改成「即時生成可檢查的互動版本」。但我會把它看成原型工作流程，而非完整交付流程。真正成熟的團隊，會把提示詞、素材權利、效能檢查、行動版 QA 和成本紀錄都納入標準作業。
Tenten 長期協助品牌把 AI 工具接進內容、網站與成長工作流程，重點放在可維護的系統，而非單次展示效果。如果你想把 Claude Code、MCP 和生成式影音工作流導入品牌網站或電商專案，可以和 Tenten 團隊預約諮詢。
術語表
| 術語 | 本文用法 |
|---|---|
| Claude Fable 5 | Anthropic 於 2026-06-09 發布的高階 Claude 模型 |
| Higgsfield MCP | 讓 Claude 等 MCP client 呼叫 Higgsfield 影像與影片工具的連接方式 |
| Scroll frames | 從影片切出的連續影格，用於捲動觸發動畫 |
| Keyframe | 生成影片前的關鍵視覺畫面 |
| Awwwards | 收錄高水準網站案例的設計獎項與靈感平台 |
