Claude Fable 5 網站設計完整教學：由品牌 Brief、Claude Code 到響應式 QA

這段來源教學實際建立的是一個深色冥想應用程式 landing page：先搜尋視覺參考並放入 Figma moodboard，再把不同參考的版面、枝條、色彩和質感交給圖像模型重組；其後分離背景與文字／UI、在 Claude Code 建立 hero、把靜態枝條生成動畫、嵌入網站，再擴展 feature、divider、mobile、testimonial 與 footer。本文按這條真實操作線重寫，而不是以抽象示意圖代替操作畫面。

來源片名以「US$50,000 websites」作定位，但模型或一次示範不會保證網站售價、成交或正式交付。可收費的網站仍要有原創策略、合法素材、正確內容、工程、測試、部署、合約和維護。本文把畫面視為工作流證據，不把任何價格口號當成結果承諾。

媒體披露：文章封面是 ImageGen 製作的編輯圖片；內文使用獲授權的真實來源教學截圖與影片片段，所有畫面均裁走來源身份、帳戶、個人路徑及社交平台推廣區。四段預覽片均為靜音，只展示動畫、頁面整合、捲動與響應式行為。全部內文媒體已於 2026-07-26 逐張、逐段人工檢查。

25 分鐘來源教學時間軸

步驟一：把參考拆成「可以借鑑的設計屬性」

來源先花時間搜尋網站、色彩、枝條、蝴蝶與 3D 物件，把截圖集中到 Figma。Figma 在這一步只是 moodboard，不是逐像素重畫工具。真正要記錄的是每張參考提供甚麼：第一張可能提供文字層級，第二張提供苔蘚枝條，第三張提供紫色光影，另一張提供留白或浮動物件。

不要把整個網站、logo、文案和獨有互動一起交給模型要求複製。較安全的做法是為每張參考加註「只取色板」「只取枝條質感」「只取左右文字位置」，再寫明需要建立原創品牌、原創文字和不同的最終構圖。

來源示範的參考整理節奏

1. 先選一個大方向：冥想應用程式 landing page。
2. 找一張提供 hero 文字與留白關係的網站參考。
3. 另找枝條／苔蘚的物件參考，不要求保留原圖色彩。
4. 再找深紫背景、橙色點綴或蝴蝶等氣氛參考。
5. 每張圖寫明只採用哪一個屬性，避免模型混入不需要的 logo、navbar 或文案。

步驟二：用三張參考寫一個可檢查的 multimodal prompt

來源把第一張圖指定為網站版面，第二、第三張圖指定為枝條素材，然後要求把內容改成冥想應用程式、移除原本 navbar 和中央樹、用枝條跨越整個 hero，並把枝條背景統一成第一張圖的環境。重點是逐張說明角色，而不是一次上載多張圖後只寫「combine these」。

來源由三個初版結果中挑一個最接近方向的版本，再進入下一輪；不是把第一張生成結果直接交給 Claude Code。每輪只改一個主要變項，才看得到指令造成的差異。可使用以下核對表：

• 構圖是否保留預期文字區與 CTA 區？
• 枝條是否真的跨越 hero，而不是變成中央獨立物件？
• 是否混入參考圖的 logo、navbar 或原文案？
• 背景是否留出足夠對比放真正 HTML 文字？
• 物件邊緣是否適合後續動畫與裁切？

步驟三：由淺色初稿改成深色方向，再分離背景與 UI

第二輪指令不重做全部內容，而是把枝條質感改成參考圖的苔蘚感、背景換成深色漸層、文字改成淺色，並明確排除不需要的黃色圓形。獲選結果形成深紫色枝條、橙色小花、白色襯線標題和簡潔 icon 的 hero。

接着要把一張「看似網站」的圖片拆成真正可開發資產。來源分兩次要求：

1. 背景版本：保留同一視覺與構圖，但移除文字、按鈕、icon、圓形和 logo，只留下高解像度背景。
2. UI 位置版本：移除圖片與漸層，只保留文字及 icon 的位置關係，放在純黑背景，讓 coding agent 容易辨認層級。

這一步很重要：若直接把完整 hero JPG 當網站，標題無法選取、mobile 無法重新排版、搜尋引擎和輔助技術讀不到內容，圖片內文字亦可能錯。背景可以是媒體，navbar、標題、CTA 和 feature 應由真正 HTML／CSS 建立。

步驟四：先找對字體，再讓 Claude Code 建第一版 Hero

來源先以 Google Fonts 圖片比較襯線字型，最後把字型名稱連同參考圖交給 Claude Code；同時建立新專案，要求純黑背景、文字與內容按參考位置排列、由 Google Fonts 匯入字體、用 icon library 建立三個 icon，並明確要求 mobile responsive。選定 Fable 5 後才送出。

一個來源忠實而較安全的第一輪 prompt 應包含：

• 先讀現有專案，不任意換 framework 或 package manager。
• 建立 hero、navbar、標題、描述、三個 feature icon 和 CTA。
• 把生成背景當 media layer；所有文字仍用 HTML。
• 指定字型、fallback、最大文字寬度、對比與 mobile 斷點。
• 要求 320px 起不出現水平溢出，導覽與 icon 可鍵盤操作。
• 完成後列出修改檔案並跑現有 lint、test、build；未執行的項目不得寫成已通過。

來源以縮小預覽檢查初版可否響應式收窄，並看到 icon hover 效果。這只能證明畫面初步適配，不能代替完整 browser、keyboard、console 和 production build 測試。Fable 5 是模型，Claude Code 是操作 repository 的工具；可參考 Anthropic 的Fable 5 模型說明與Claude Code 常見用例。

步驟五：把靜態枝條轉成影片，Prompt 要約束鏡頭

來源先嘗試最簡單版本：「animate this，no zoom in or zoom out」，設定 10 秒及 1080p；之後再測試以一段短參考影片提供「元素如何出現」的動態語法。進階 prompt 明確說只採用第二段參考的動畫效果，不取它的顏色或物件，並描述蝴蝶、枝條和花朵出現的次序。

生成後要播放完整片段，檢查枝條有沒有縮放漂移、花朵是否突然閃現、連接框是否穿越、開頭和結尾能否循環。下面的片段保留實際動態結果，因此不能用單張 still 代替。

步驟六：把影片嵌入 Hero，先解決文字可讀性

來源把下載的動態片交給 Claude Code，要求放到 hero 背景，並先不加 overlay，以便看清真實衝突。結果證明影片能循環，但文字對比和比例受到影響。修正指令把全頁字體約縮小 10–15%，主標題再縮小約 30%，並移除沒有實際作用的 divider。

這是一個值得保留的迭代方法：先以最少處理看媒體與 UI 的真實關係，再針對讀不清的文字、過大的標題和多餘線條修正；不要在影片上先加重遮罩，令問題看似消失。若背景動態過強，可比較較平靜版本，按受眾與內容選擇，而不是永遠選效果最多的一段。

步驟七：Hero 通過後，才擴展 Feature 與 CTA

來源在獲選 hero 方向後，再要求建立其餘頁面內容：先用交錯「棋盤式」版面放影片與文字，加入三組 icon feature、testimonial 和 footer。第一版生成後再把三張大型卡縮成兩張，移除卡片外框與填色、替兩張卡換上不同影片，並在說明下加入白色按鈕。

擴展內容時要防止模型以看似真實的數字、客戶、獎項或健康功效填滿空位。示範文字只能視為 placeholder。正式專案應把 copy 存在可審批的內容檔，標記 Draft／Fact checked／Approved，再由網站讀取。

步驟八：用 Divider 管理兩個段落的接縫

來源先把 hero 尾部與 Experience 開頭截圖放入 Figma，用去背枝條嘗試段落接縫；第一個物件遮住文字便換另一個，而不是強行保留。獲選枝條再交給 Claude Code，要求 Experience 上方增加約 200px 空間，並把 divider 絕對定位在 hero 與下一段的中間。

Desktop 合格後，來源立即查看 mobile，將 hero 內 Relax、Focus、Restore 三項由直向三列改成同一橫列並縮小。這個修正不是「整頁變小」，而是針對窄屏重新排列資訊。手機還要檢查 divider 是否超出、文字是否被背景遮住、影片裁切位置及長內容高度。

步驟九：整理 Testimonial、Footer 與最後間距

來源在最後一輪把 testimonial 卡的填色移除、保留細邊框，移除 testimonial 與 footer 之間多餘 divider，並對齊 feature、testimonial 與 footer 的垂直距離；另加入一段純黑背景影片作為下方接縫。這些都是具體可重現的修改，比「make it premium」更容易驗收。

來源最後停在 landing page 完整版，而不是完整多頁 production 網站。因此交付名稱要誠實：若只完成 landing page prototype，就不要聲稱已完成 CMS、登入、付款、表單後端、analytics、SEO 遷移或正式部署。

Fable 5 與香港使用前的編輯核對

來源示範選擇 Fable 5，但讀者仍要按當日官方資料核對模型、方案、地區和資料政策。Anthropic 的Claude 可用地區頁是地區資格來源；本文核對日香港未列於該名單，因此本文不提供 VPN、借用身份、代購帳戶或其他繞過方式。Fable 5 的方案資格與 usage credits 應查閱官方方案說明和自己的帳單頁。

正式客戶資料亦不能因為模型能處理長 context 便直接上載。先核對合約、組織政策、保留期、第三方素材 licence 和客戶同意；練習時用虛構品牌、匿名文字與測試 secret。Claude in Chrome 或其他 browser agent 可協助查 DOM、console 和 network，但登入、提交表單、付款、部署、DNS 和 production 寫入仍應保留人工批准。

來源流程的發布前 QA

針對這個頁面的實際檢查清單

1. Hero 背景影片不阻擋標題、CTA 或導覽。
2. 影片未載入時仍有可讀背景色或 poster。
3. reduced-motion 使用者不會被強制播放非必要動畫。
4. Relax、Focus、Restore 在窄屏仍可讀且不超出。
5. 枝條 divider 不遮住上下段標題或焦點元素。
6. Feature 影片各自對應正確文字，不重複相同 URL。
7. 所有 CTA 有目的地、focus style 及可理解連結文字。
8. testimonial 只使用真實、已同意、可證明內容；否則刪除。
9. 字體有合法 webfont 使用權及 fallback。
10. 生成參考只抽取設計原則，最終內容與資產為原創或獲授權。
11. production build、route、404、console 及 network 以當次結果核對。
12. 發布、domain、analytics 與真實表單連線由人批准。

延伸閱讀

• n8n、Claude Code、Google AI Studio 怎樣選
• Google AI Studio Build 網站教學
• Gemini Canvas UI 與 Figma 工作流
• Claude 香港訂閱、地區與帳戶風險指南

總結

來源流程的核心可以濃縮成九步：蒐集參考並標註用途；用 multimodal prompt 重組而非照抄；挑選方向後再改色；把背景與 UI 分離；Claude Code 建真正 HTML/CSS hero；把靜態背景生成受約束影片；先修可讀性再擴展內容；以 divider 和 mobile QA 處理段落；最後清理 testimonial、footer 和間距。高能力模型可以加快每一步，但只有版本、測試、授權和人工批准，才能把漂亮 demo 變成可交付網站。