如何在一個晚上用 Claude Code 打造動畫網站

想進一步了解如何使用模型，請參閱 Ailoot 文件。

為什麼 AI 打造的網站第一眼就看得出來？#

你請 agent 組一個登陸頁面。四十分鐘後，網站就能使用了：各個區塊都已就位，版面能因應不同螢幕，按鈕也能正常運作。但你幾乎立刻就覺得，自己好像在哪裡看過這個網站。

原因出在機制上。模型是以大量完成的網頁訓練而成，而這些資料帶有明顯偏向。

成千上萬篇教學和入門範本都沿用了那個顏色，讓樣本產生偏差，模型也因此學會按鈕就是紫色。同樣的機制也適用於字型、圓角和陰影。

這段時間，「AI 風格」也變了。Anthropic 在 frontend-design skill 的文件中，描述了現在流行的不同外觀。

根本問題是，沒有具體對象可供仿效時就會出現 slop，模型只會把網路上的所有風格平均混在一起。

這裡的「slop」指的是機器生成的作品被平均化，最後變成缺乏鮮明風格的普通結果。

實用的做法是，給 agent 一套範圍明確的設計語彙，而不是開放式任務。如果你說「做得漂亮一點」，它就會取平均值。如果你提供明確的配色、一兩種字型，以及一個具代表性的視覺元素，它就會以這些條件為基礎來打造。

在這種情況下，動態效果是最顯眼的訊號。即使靜態頁面的排版完美，也仍然像個範本，因為有生命力的網站會呼吸：元素會隨著捲動出現，游標會帶來變化，畫面之間的轉場也不會突然中斷。

在 Claude Code 中打造動畫網站需要什麼？#

我們來逐一看看這些工具，因為價格方面有不少混淆之處。

GSAP 是許多知名得獎網站背後使用的動畫函式庫。Webflow 在 2024 年 10 月收購 GSAP，幾乎立刻就傳出所有功能都免費的消息。這並不完全正確：當時 Webflow 確認既有定價會維持不變。直到 3.13 版推出，也就是2025 年 4 月下旬，這個函式庫才改為免費。

3.13 版的發布資訊特別指出，過去需付費的 SplitText 和 MorphSVG 等外掛也改為免費，包括商業用途。截至 2026 年 7 月，最新版本是 gsap@3.15.0。

免費不代表開放原始碼。它的授權仍是專有授權，禁止使用 GSAP 打造會與 Webflow 競爭的視覺動畫編輯器。網站、客戶專案或商業作品則不受限制。

Anthropic 的 frontend-design skill 是一組指示，能改變 agent 處理介面的方式。其儲存庫說明如下：

其中包含一套分兩階段進行的方法。首先，agent 會組出一套 token 系統：四到六種有名稱的色彩、至少兩種用途不同的字型、以文字草圖呈現的版面配置，以及一個能代表頁面的視覺元素。接著，它會依照任務檢視並批判自己的計畫。完成這些步驟後才開始寫程式碼。

貼文說有 75 個 skill，儲存庫說明列出 78 個，而目前檔案樹中則有 91 個。作者對此也很坦率：說明已經過時，請使用搜尋命令檢查儲存庫。

如何讓 Claude Code 不再產出範本？#

先從規則檔開始，因為每個請求都會套用這些規則，而且完全免費。

一段實用的起點是反模板防護規則。邏輯很簡單：列出模型預設容易偏向的具體選擇，並直接點名禁止。

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

這段內容刻意使用英文撰寫，因為模型在文件所用的語言中，能更精確地遵循簡短的技術指示。

動畫這一條之所以和配色、陰影等禁止事項並列，是有原因的。正如稍後會說明的，在首屏使用不透明度會直接影響速度指標。

接著是 skill。Anthropic 官方 skills 可以透過外掛安裝：

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

有一點要注意：設計類 skill 無法個別安裝；example-skills 外掛會一次安裝全部 12 個。如果你只想要一個，可以手動複製資料夾，Claude Code 不需要重新啟動工作階段就會載入：

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

這個集合中還有其他可能實用的 skill：theme-factory 提供十種現成主題，套用前必須先取得人類確認；web-artifacts-builder 可使用現成元件以 React 建置；algorithmic-art 則用於生成圖形。另一篇文章詳細說明如何依任務選擇 skill：如何為 Claude Code 選擇 skill。

規則和 skill 會相互搭配：規則禁止不好的選擇，skill 則規定流程——先建立系統，再檢視，最後才寫程式碼。

這裡的所有重要工作都發生在提出請求之前。你預先把 agent 將依據建構的限制放進上下文，提示文字本身就不再那麼重要。這種做法稱為上下文工程，而 CLAUDE.md 檔案就是第一個基礎。

到哪裡可以找到現成的視覺方向和動畫提示？#

其中包含的動態技巧有：animation-on-scroll、gsap、gsap-scrolltrigger-storytelling、cinematic-gsap-lenis-motion-system、cinematic-scroll-storytelling、marquee-loop、masked-reveal、staggered-word-reveal、reveal-hover-effect、scroll-progress-timeline、scroll-scrubbed-visual-sequence、scroll-scrubbed-word-reveal、scroll-world-storytelling。

對非程式設計師來說，現成的視覺方向更重要。不要再用模糊的「做得現代一點」，而是從以下選一個，給模型原本缺少的明確設計語彙：

• clean-minimal-beige-light-mode - 淺色米色極簡風格
• dark-glass-clean-layout - 深色玻璃風格
• documentary-brutalist-agency - 紀錄片式粗獷主義
• editorial-portfolio-chapters - 像雜誌般分章呈現的作品集
• orange-clean-paper-saas - 帶有橘色點綴的紙感服務網站
• solar-duotone-bold - 大膽的雙色設計
• tech-green-dark-mode-modern - 搭配綠色的深色科技風格
• light-mode-paper-technical - 淺色技術文件風格

此外也有 3D 圖形和效果相關的技術 skill：threejs、matterjs、globe-gl、vantajs、unicorn-studio、progressive-blur、beautiful-shadows、css-border-gradient。

儲存庫裡沒有安裝指令——作者在路線圖中明確表示，等整合方式確定後才會加入。給 Claude Code 的唯一指示是：

以下是一種安裝方式。這個指令並未收錄在儲存庫中，而是安裝建議：

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

如何用一行指令提供 GSAP 最新文件給 agent？#

動畫函式庫常見的問題是，agent 記得的連接方式已經過時。它可能從舊路徑匯入、用兩年前的方式註冊外掛，結果程式碼無法執行。

解決方式是自行把文件放入上下文。GSAP 提供了方便機器讀取的格式：

https://gsap.com/llms.txt

截至目前，這個檔案約 25 KB。每個文件頁面也都有 Markdown 版本，只要在 URL 後面加上 .md 即可。

實際用法如下：

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

Motion 函式庫（原名 Framer Motion）也有相同的檔案，而且內容更多。Motion 採用 MIT 授權發行，仍是真正的開放原始碼；目前版本為 motion@12.42.2。如果專案使用 React，而且只需要簡單的顯現效果，可以選 Motion；若要製作複雜的捲動場景，則使用搭配 ScrollTrigger 外掛的 GSAP。

也有不使用函式庫、只靠瀏覽器的選項。透過 View Transitions API 實現的頁面狀態轉場，於 2025 年 10 月 14 日進入 Baseline 支援範圍，但只限單一頁面內；跨頁版本完全不受 Firefox 支援。CSS 捲動動畫尚未進入 Baseline 支援範圍：Chrome 支援，Safari 最近才支援，而 Firefox 必須在設定中手動啟用，因此一般讀者無法使用。請 agent 先檢查瀏覽器是否支援；如果不支援，就保留標準轉場。

如何把喜歡的網站轉成提示詞？#

最常見的需求說明方式是提供範例，但直接拿範例給 agent 看行不通：它看不到網站，只看得到文字。

video-to-superprompt skill 可以填補這個落差。依照儲存庫的說明，它能把影片參考轉成適合重現或汲取靈感的詳細提示詞。它會分層分析錄影內容：敘事、版面、動態效果、字體排版和 3D 圖形，最後產生一份可直接使用的提示詞。

它的主要規則寫得十分直接：

第二個 skill html-to-interaction-prompts 會分析原始碼：找出所有會動的元素——游標反應、3D 圖形、捲動效果、以不同速度移動的圖層——再將頁面拆成不同提示詞，分別對應各個區塊、按鈕、懸停狀態或效果。它的原則是將來源中的實際行為視為依據；既然有程式碼，就不要根據螢幕截圖自行想像效果。

第三個 skill stitched-full-page-capture 解決了一個實務問題。對使用延遲載入和 3D 圖形的網站拍攝一般的全頁螢幕截圖，常會得到一片灰色空白，因為畫面是在渲染完成前就被擷取。這個 skill 會逐個畫面捲動網頁，等待內容穩定後，再將結果拼接起來。

不用螢幕錄影也有方法：透過 MCP 將 agent 連接到即時介面範例函式庫。Mobbin 官方伺服器可以用一行指令安裝：

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

安裝後，開啟新的工作階段，從清單中選取伺服器，並在瀏覽器中登入。agent 就能存取實際運作中應用程式的螢幕截圖，清單中列出超過 621,500 個畫面。這些是完成品的截圖，不是元件或程式碼。重要提醒：Mobbin 伺服器不支援免費方案，只能在付費方案中使用（截至 2026 年 7 月）。另一篇文章介紹 Google Stitch，說明如何用相同方式將外部服務連接到 agent，並將設計系統帶入 Claude Code。

步驟說明：一個晚上打造動畫網站#

1. 設定專案

   如果你還沒有專案，先從空資料夾開始。建立資料夾，在終端機中開啟，然後在該目錄執行 claude。第一個提示詞可以要求建立基本架構：「為我的事業（描述內容）建立一個單頁網站骨架，使用純 HTML 和 CSS，不要使用函式庫。」接著會出現一組檔案——那就是專案根目錄，之後的所有工作都在這裡進行。

2. 將規則放入 CLAUDE.md

   將 Anti-Generic Guardrails 區塊複製到專案根目錄中的 CLAUDE.md 檔案。如果檔案不存在，就請 agent 建立。這些規則是針對 Tailwind 撰寫的；如果基本架構使用純 CSS，請告訴 agent：「將這些原則套用到一般 CSS」——規則的意思不會改變。如何使用這個檔案以及還能放入哪些內容，請參閱 CLAUDE.md 四項規則解析。

3. 安裝 frontend-design skill

   使用 example-skills 外掛，或依照上文說明複製 frontend-design 資料夾。你可以執行 /doctor 命令，確認 skill 是否已載入。

4. 選擇一個視覺方向

   只選一個，不是兩個或三個。把紀錄片式粗獷主義和米色極簡風格混在一起，得到的正是你想避免的平均化結果。

5. 建立靜態頁面

   不要加入任何動畫。先處理字體排版、間距和格線。請 agent 啟動本機預覽，並開啟它提供的網址。如果想在手機上查看，請說：「啟動時讓網路上的其他裝置也能開啟」，agent 就會提供網址。

6. 加入一個動態場景

   只加一個。通常是第一個畫面：標題出現，背景圖層移動得比前景慢。把函式庫的 llms.txt 提供給 agent，並具體描述哪些元素會移動、移動位置和所需時間（以毫秒計）。首屏不要使用不透明度；下文會另行解釋原因。

7. 加入減少動態效果的規則

   套用無障礙章節的 CSS 與 JavaScript reduced-motion 設定，發布前啟用減少動態偏好檢查頁面。

8. 發布並檢查速度

   將網站發布到任何免費的靜態代管服務，例如 Vercel、Netlify 或 GitHub Pages。請 agent：「將這個專案發布到 Vercel 並提供連結。」只有發布後，才能用 PageSpeed Insights 檢查結果 URL：這項服務只能檢查公開網址，看不到本機頁面。請查看「Largest Contentful Paint」——也就是最大元素的渲染時間；2.5 秒以下才是綠色範圍。發布前，agent 可以測量本機版本：Chrome DevTools MCP 會在 Chrome 中開啟頁面，並顯示相同指標。

最容易毀掉前五個步驟成果的，就是第六步。

為什麼動畫過多會讓網站看起來更像 AI 生成？#

幾乎所有接觸這個主題的人，都會在這裡想錯：動畫太少看起來很廉價，所以應該多加一些。

這句話就寫在你為了改善設計而安裝的 frontend-design skill 中。Anthropic 在 agent 用來裝飾頁面的工具裡，提醒使用者不要做得太過火。

它也列出其他制式手法：不論什麼任務，都放上一個大數字、小段說明文字和漸層點綴；或是使用 01 / 02 / 03 這類編號區塊，但只有在內容確實有順序時才適合。

實際上，過度使用動畫會是這個樣子：agent 收到「加上動畫」的任務後，就替每個區塊加入捲動顯現效果。標題滑入、三張卡片接連跳出、推薦內容從側邊滑入，頁尾再淡入。每個效果單獨看都沒問題，但放在一起，整個頁面就會動個不停，也沒有任何重點。

有生命力的網站做法不同：通常只在首屏安排一個刻意設計的場景，後續保持克制。動態效果就像強調文字一樣，只要落在一個單字上才有意義。

因此，提示詞可以這樣寫：「在首屏設計一個場景，其他內容都保持靜止。」它只比「加上動畫」多幾個字，結果卻好上好幾個數量級。

動畫如何拖慢網站速度？#

Google 用來評估頁面的指標有三項：最大元素的渲染時間不超過 2.5 秒、互動回應時間不超過 200 毫秒，以及版面位移不超過 0.1。這些指標是以實際造訪的第 75 百分位數計算。

我們來看看這件事為什麼重要。agent 預設會先將區塊的不透明度設為 0，等區塊進入視窗後再移除設定。如果首屏使用這種顯現效果，即使圖片已完全載入並解碼，直到開始渲染前仍不會列入指標。若腳本在載入後才移除不透明度，情況會更糟——指標必須等到整個腳本執行完才開始計算。

有兩種解決方式。第一種是從一個很小但非零的不透明度開始顯現，讓初始渲染能納入計算。另一種是讓首屏的不透明度維持不變，只為位移加入動畫。

另一個問題是哪些屬性適合用於低成本動畫，哪些成本較高。

簡單來說，瀏覽器會分層組合影像，而位置和不透明度的變化發生在最後、成本最低的步驟。其他變化都會迫使瀏覽器重新計算頁面。同一份文件中的測量結果顯示，以 top 和 left 位移製作動畫，版面配置花費 37 毫秒，渲染花費 79 毫秒；使用 transform 做出相同視覺效果，兩者都花費 0 毫秒。

還有一個值得記住的矛盾：不透明度的合成成本很低，卻會讓元素失去速度指標的候選資格。因此，對瀏覽器而言成本低的動畫，和對效能而言安全的動畫，是兩回事。

還有 will-change 屬性，agent 很喜歡大量加入並稱之為「最佳化」。MDN 文件說的恰好相反：

文件也指出，這項屬性是為了處理已存在的效能問題而設計的最後手段，不能用來預防問題。對 50 個元素都加上 will-change: transform, opacity，就是生成程式碼常見的明顯跡象。

版面位移的問題比較簡單。Google 文件沒有將問題歸咎於動畫；相反地，細緻的轉場有助於更新內容，又不會驚擾讀者。做法相同：使用 transform 改變縮放，而不是寬度和高度；使用位移值移動，而不是改動座標。

動態效果可能傷害身體不適的人，該怎麼辦？#

這個部分不只是出於禮貌。向企業主購買產品的受眾，正是 40 歲以上的人。

對有前庭功能障礙的人來說，捲動動畫會帶來不適。W3C 聯盟毫不避諱地描述了可能的後果：噁心和偏頭痛，有時嚴重到必須躺下休息。

你可以加入三行樣式來處理：

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

有三點需要記住。

將動畫設為預設行為，並在這項規則內停用。這樣一來，頁面比起反過來做能更安全地降級。

規範使用的說法是「移除、減少或替換」——完全移除甚至不是第一個選項。將突兀的滑入效果替換成短暫淡入，比完全切掉效果更好：停用所有動畫會讓載入指示器和進度列無法運作。

JavaScript 動畫需自行處理偏好，CSS duration 不會取消 GSAP timeline；只把 matchMedia(...).matches 存成變數也沒有作用，設定必須分支。GSAP 應讓一般 HTML／CSS 的元素可見，只在允許動態時建立動畫：

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

標題基礎樣式不能隱藏或位移。減少動態時應可見且靜止；頁面開啟中偏好改變，query 不匹配時 GSAP 會還原動畫，卸載時 mm.revert() 也會清除。Motion 需在其設定實作等效分支，CSS 本身不足。請看 GSAP matchMedia 生命週期與清理文件。

另外還有一項正式的無障礙準則需要留意。WCAG 2.2.2 是一項 A 級準則，規定如果內容會自動移動、閃爍或捲動，持續超過五秒，而且與其他內容同時顯示，使用者就必須能停止它。這適用於自動輪播的輪播區和無限跑馬燈，而 agent 很容易加入這些元素。

最容易出問題的七個地方#

1. 首屏先被隱藏，等淡入後才顯示。 不透明度為 0 的元素不會列入渲染指標的候選項目。這是代價最高的錯誤，因為它會損害影響搜尋排名的指標。

2. 所有元素都加入動畫。 每個區塊都滑入，每張卡片都跳出。Anthropic 明確指出，這會加深設計是生成而來的印象。

3. 捲動劫持。 網站將滑鼠滾輪的正常行為替換成自訂的「電影式」動態效果。

同一項研究中，大多數參與者都感受到至少輕微的迷失感。

4. 為版面屬性加入動畫。 使用座標和尺寸，而不是 transform。耗時分別是 37 和 79 毫秒，相較之下使用 transform 則是 0 毫秒。

5. 動畫時間太長。 適當的動畫時間為 100 到 400 毫秒，其中 400 毫秒已經很慢，只適合大幅度的移動。Agent 預設常常會使用整整一秒。

根據他的研究，適當的範圍是 100 到 400 毫秒；400 毫秒已經很慢，只適合大幅度移動。agent 預設常常使用整整一秒。

6. 沒有減少動態效果的規則。 agent 不會自行加入。

7. 網站每互動一次就變得更慢。 這是 React 特有的問題：如果建立動畫時沒有參照元素，也沒有清理機制，元件每次更新都會讓動畫增加。頁面會在不明原因下逐漸變慢。

第八個陷阱是「讓 agent 截圖並修正它看到的內容」。這種方法在靜態頁面上很有效，但遇到動畫元素就會讓 agent 陷入無止盡的修改循環：它看到動畫進行中的影格，以為是錯誤並加以修正，接著又看到另一個進行中的影格。此外，每張截圖都會消耗上下文。

費用多少？如何避免只做一個網站就耗盡整個月的額度？#

英語系 vibe-coding 社群常有一種故事：有人打造一個可以在太空中穿梭捲動的炫目頁面，貼出成品後，討論才發現光是這個網站就耗盡了整個月的額度。

這是意料之中的事。動畫比一般版面工作更耗費資源，原因有好幾個：無法只讀程式碼確認結果，需要反覆調整；每次修改都得重新讀取檔案；對動態元素執行截圖循環，也會額外增加不必要的處理。

以下做法有所幫助：

一次製作一個場景，並確認結果。一口氣要求「替整個網站加上動畫」一定會超出預算。你可以關閉動畫元素的截圖驗證，自己查看視覺效果。讓 CLAUDE.md 保持精簡，避免規則在每次請求中消耗上下文。並事先把函式庫的 llms.txt 提供給 agent，否則它會臆造過時的連接方式，接著還得花時間除錯自己編造的內容。

文章為什麼 Claude Code 會重新讀取整個專案說明專案工作時 token 都花在哪裡；文章如何避免耗盡 Claude Code 使用額度則介紹控制用量的方法。

接下來呢？#

照著八個步驟打造你的第一個頁面。選擇一個視覺方向，在首屏設計一個場景，然後檢查速度。

下一步：Ailoot。