# 策展 · X (Twitter) 🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Viktor Oddy (@viktoroddy) · 平台：X (Twitter) · 日期：2026-07-05

> 原始來源：https://x.com/viktoroddy/status/2073745079257235473

## 中文摘要

Claude Fable 5 讓使用者能快速設計專業網站。

**核心觀點與市場定位**
許多人誤以為 Fable 5 只能產出大眾化、缺乏特色的網站，但事實上，產出品質的高低取決於使用者的「品味」與「指令精確度」。Fable 5 本身僅是執行工具，真正的價值在於使用者如何定義設計風格與細節，這也是目前市場上能將網站專案報價拉抬至 3,000 到 8,000 美元的關鍵。

**設計準備與精確指令**
在啟動 Fable 5 之前，切勿直接開始，應先建立參考資料庫。
- 透過 Pinterest 搜尋產業相關設計，收集 10-15 個具備 3D 效果、互動性或動畫的參考案例。
- 撰寫提示詞時必須極度具體，避免使用「看起來現代」等模糊字眼。
- 範例指令：
  > "dark background #0A0A0A, sans-serif headline at 72px with -2% letter spacing, 16px body text at 60% opacity."

**客製化 asset 的重要性**
使用現成的圖庫素材會讓網站顯得廉價。建議透過 GPT Image 或 Midjourney 生成 Hero 圖片，再利用 Kling 或 Seedance 將靜態圖轉換為細膩的動態循環影片（例如行星旋轉或粒子漂浮）。
- 提示詞公式：`[style] + [subject] + [environment] + [lighting] + black background`
- 務必加入限制指令：「do not zoom in or zoom out」與「do not change size or position」，以確保 asset 產出符合預期。

**動畫與細節優化**
要讓網站從「不錯」提升至「令人難忘」，必須加入以下三種動畫：
1. 捲動時的文字揭露（Text reveal on scroll）：標題隨捲動淡入並滑入視線。
2. 視差深度（Parallax depth）：前景元素移動速度快於背景，創造空間感。
3. 滑鼠懸停微互動（Hover micro-interactions）：按鈕發光、卡片傾斜等回應。
- 針對動畫的精確指令範例：
  > "fade up with 30px translate, 0.6s duration, ease-out timing, triggered at 20% viewport intersection."

**專業細節的累積**
網站的高級感源自於細微的視覺選擇，這些細節會產生加乘效果：
- 避免使用純黑（#000），改用 `#0A0A0A` 或 `#111`。
- 內文文字避免純白，改用 `#E5E5E5`，將純白保留給標題。
- 桌面版區塊間距維持 120-160px，行動裝置則為 80px。
- 按鈕內距（padding）至少維持垂直 16px、水平 32px。
- 保持圓角（border radius）的一致性（如 4px、8px 或全圓角）。

**分階段開發策略**
為了避免 Fable 5 因負載過重而產出平庸的結果，建議採取兩階段開發：
1. 第一階段：專注於骨架（Skeleton），確認區塊、佈局與內容位置，忽略動畫與視覺修飾。
2. 第二階段：逐區塊加入視覺魔法，包括字體、間距、動畫、懸停狀態及影片背景。

透過上述流程，設計師能在 2 到 4 小時內完成原本需要數週才能達成的設計專案。相關的提示詞與 asset 資源可參考 [motionsites.ai](https://motionsites.ai) 以獲取更多實作指引。

## 標籤

Skills, AIGC, 教學資源, Anthropic, Claude