# 如何在一個晚上用 Claude Code 打造動畫網站
> 介紹在 Claude Code 中製作動畫網站時，避免模板化設計的規則、視覺方向、GSAP、無障礙設計與效能測試。
Source: https://ailoot.ai/blog/zh-hant-tw/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/zh-hant-tw/animated-website-claude-code/
Language: zh-Hant-TW
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-d1b73717049be3642a3cb0972ebed97ac650935af1e2e5c00431bdd7a42d83ab
重點摘要
Claude Code 可以在一個晚上打造動畫網站，但如果沒有明確限制，模型就會傾向產出訓練資料中的平均樣貌，讓成品看起來很普通。以下三件事能改善結果：在 `CLAUDE.md` 中加入反模板規則、提供現成的視覺方向而不是模糊的提示，以及在上下文中加入最新的動畫函式庫文件。過程中最大的陷阱是動態效果過多：動畫加得太多，比完全沒有動畫更容易暴露生成痕跡，也會拖慢首屏載入速度。
想進一步了解如何使用模型，請參閱 [Ailoot 文件](https://ailoot.ai/docs/)。
## 為什麼 AI 打造的網站第一眼就看得出來？
重點摘要
如果沒有設定界線，模型就會平均化訓練資料中看過的所有內容。過去的結果是紫色按鈕和 Inter 字型；現在的趨勢則轉向奶油色背景、襯線字體，以及陶土色點綴。Anthropic 在自家 skill 的文件中描述了三種這類標準外觀，並明確稱其為預設行為。
你請 agent 組一個登陸頁面。四十分鐘後，網站就能使用了：各個區塊都已就位，版面能因應不同螢幕，按鈕也能正常運作。但你幾乎立刻就覺得，自己好像在哪裡看過這個網站。
原因出在機制上。模型是以大量完成的網頁訓練而成，而這些資料帶有明顯偏向。
成千上萬篇教學和入門範本都沿用了那個顏色，讓樣本產生偏差，模型也因此學會按鈕就是紫色。同樣的機制也適用於字型、圓角和陰影。
這段時間，「AI 風格」也變了。Anthropic 在 `frontend-design` skill 的文件中，描述了現在流行的不同外觀。
AI 生成的設計現在集中在三種外觀：暖色奶油色背景（約 #F4F1EA），搭配對比鮮明的襯線標題和陶土色點綴；近乎黑色的背景，搭配單一明亮的酸橙綠或朱紅色點綴；以及寬幅報紙式版面，採用極細分隔線、零圓角和密集的報紙欄位。這三種外觀都適合某些任務，但它們是預設行為，不是刻意的選擇，而且不論主題為何都會出現。
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
根本問題是，沒有具體對象可供仿效時就會出現 slop，模型只會把網路上的所有風格平均混在一起。
這裡的「slop」指的是機器生成的作品被平均化，最後變成缺乏鮮明風格的普通結果。
實用的做法是，給 agent 一套範圍明確的設計語彙，而不是開放式任務。如果你說「做得漂亮一點」，它就會取平均值。如果你提供明確的配色、一兩種字型，以及一個具代表性的視覺元素，它就會以這些條件為基礎來打造。
在這種情況下，動態效果是最顯眼的訊號。即使靜態頁面的排版完美，也仍然像個範本，因為有生命力的網站會呼吸：元素會隨著捲動出現，游標會帶來變化，畫面之間的轉場也不會突然中斷。
## 在 Claude Code 中打造動畫網站需要什麼？
重點摘要
整套工具都是免費的。你需要 Claude Code 本身、GSAP 動畫函式庫（自 2025 年 4 月下旬起完全免費，包括過去需付費的 SplitText 和 MorphSVG 等外掛）、Anthropic 的 `frontend-design` skill，以及採用 MIT 授權的現成視覺方向資源。發布網站時再搭配任何免費代管服務即可。只有 agent 的工作需要付費。
我們來逐一看看這些工具，因為價格方面有不少混淆之處。
**GSAP** 是許多知名得獎網站背後使用的動畫函式庫。Webflow 在 2024 年 10 月收購 GSAP，幾乎立刻就傳出所有功能都免費的消息。這並不完全正確：當時 Webflow 確認既有定價會維持不變。直到 3.13 版推出，也就是**2025 年 4 月下旬**，這個函式庫才改為免費。
在 Webflow 的支持下，GSAP 現在對所有使用者完全免費。
— GSAP, https://gsap.com/pricing
3.13 版的發布資訊特別指出，過去需付費的 SplitText 和 MorphSVG 等外掛也改為免費，包括商業用途。截至 2026 年 7 月，最新版本是 `gsap@3.15.0`。
免費不代表開放原始碼。它的授權仍是專有授權，禁止使用 GSAP 打造會與 Webflow 競爭的視覺動畫編輯器。網站、客戶專案或商業作品則不受限制。
**Anthropic 的 `frontend-design` skill** 是一組指示，能改變 agent 處理介面的方式。其儲存庫說明如下：
在建立新介面或重新設計既有介面時，為鮮明且經過深思熟慮的視覺設計提供指引。協助決定美學方向、字體排版，以及選擇不會看起來像預設範本的設計方案。
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
其中包含一套分兩階段進行的方法。首先，agent 會組出一套 token 系統：四到六種有名稱的色彩、至少兩種用途不同的字型、以文字草圖呈現的版面配置，以及一個能代表頁面的視覺元素。接著，它會依照任務檢視並批判自己的計畫。完成這些步驟後才開始寫程式碼。
貼文說有 75 個 skill，儲存庫說明列出 78 個，而目前檔案樹中則有 91 個。作者對此也很坦率：說明已經過時，請使用搜尋命令檢查儲存庫。
## 如何讓 Claude Code 不再產出範本？
重點摘要
分兩步驟。首先，在 `CLAUDE.md` 中列出禁止事項：不要使用標準配色、標題和內文不要用同一種字型，而且只能對不透明度和變形套用動畫。接著安裝 `frontend-design` skill，讓 agent 在寫程式碼前先組出 token 系統並檢視自己的計畫。
先從規則檔開始，因為每個請求都會套用這些規則，而且完全免費。
一段實用的起點是反模板防護規則。邏輯很簡單：列出模型預設容易偏向的具體選擇，並直接點名禁止。
```markdown
## 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 可以透過外掛安裝：
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
有一點要注意：設計類 skill 無法個別安裝；`example-skills` 外掛會一次安裝全部 12 個。如果你只想要一個，可以手動複製資料夾，Claude Code 不需要重新啟動工作階段就會載入：
```bash
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](https://ailoot.ai/blog/zh-hant-tw/choose-claude-code-skills/)。
規則和 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 的唯一指示是：
以下是一種安裝方式。這個指令並未收錄在儲存庫中，而是安裝建議：
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## 如何用一行指令提供 GSAP 最新文件給 agent？
重點摘要
GSAP 有一個 `llms.txt` 檔案——這份 25 KB 的文件摘要是專為語言模型製作的。把連結提供給 agent，它就能依據最新的方法說明工作，而不是依靠過去記住的內容。每個文件頁面也都有 Markdown 版本。Motion 函式庫也有相同的檔案，而且內容更多。
動畫函式庫常見的問題是，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。
ScrollTrigger 讓任何人都能用最少的程式碼打造出色的捲動動畫。
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
也有不使用函式庫、只靠瀏覽器的選項。透過 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 官方伺服器可以用一行指令安裝：
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
安裝後，開啟新的工作階段，從清單中選取伺服器，並在瀏覽器中登入。agent 就能存取實際運作中應用程式的螢幕截圖，清單中列出超過 621,500 個畫面。這些是完成品的截圖，不是元件或程式碼。重要提醒：Mobbin 伺服器不支援免費方案，只能在付費方案中使用（截至 2026 年 7 月）。另一篇文章介紹 [Google Stitch](https://ailoot.ai/blog/zh-hant-tw/google-stitch-claude-code-design/)，說明如何用相同方式將外部服務連接到 agent，並將設計系統帶入 Claude Code。
## 步驟說明：一個晚上打造動畫網站
重點摘要
步驟依序是：加入反模板規則、安裝設計 skill、選擇一個視覺方向、打造靜態頁面，最後才加入一個動畫場景。動畫要等到最後才加，而且一次一種效果。否則出問題時，根本不知道該從哪裡開始檢查。只要不試圖一次替所有內容加入動畫，以下八個步驟一個晚上就能完成。
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 生成？
重點摘要
Anthropic 在設計 skill 文件中明確指出，過多動態效果會加深頁面由生成而來的印象。agent 預設會依序替每個區塊加入顯現效果，結果就是整個頁面到處抖動，卻沒有任何焦點。相反地，只在首屏安排一個刻意設計的場景，其餘部分保持克制，效果會更好。
幾乎所有接觸這個主題的人，都會在這裡想錯：動畫太少看起來很廉價，所以應該多加一些。
有時候少即是多，過多動畫會加深設計是生成而來的感覺。
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
這句話就寫在你為了改善設計而安裝的 `frontend-design` skill 中。Anthropic 在 agent 用來裝飾頁面的工具裡，提醒使用者不要做得太過火。
它也列出其他制式手法：不論什麼任務，都放上一個大數字、小段說明文字和漸層點綴；或是使用 01 / 02 / 03 這類編號區塊，但只有在內容確實有順序時才適合。
實際上，過度使用動畫會是這個樣子：agent 收到「加上動畫」的任務後，就替每個區塊加入捲動顯現效果。標題滑入、三張卡片接連跳出、推薦內容從側邊滑入，頁尾再淡入。每個效果單獨看都沒問題，但放在一起，整個頁面就會動個不停，也沒有任何重點。
有生命力的網站做法不同：通常只在首屏安排一個刻意設計的場景，後續保持克制。動態效果就像強調文字一樣，只要落在一個單字上才有意義。
因此，提示詞可以這樣寫：「在首屏設計一個場景，其他內容都保持靜止。」它只比「加上動畫」多幾個字，結果卻好上好幾個數量級。
## 動畫如何拖慢網站速度？
重點摘要
最大的陷阱是：不透明度為 0 的元素甚至不會被瀏覽器列入 Largest Contentful Paint 的候選項目。在首屏套用「隱藏區塊，等捲動時再顯示」這種常見技巧，會直接損害關鍵速度指標。此外，只對變形和不透明度套用動畫——其他屬性都會觸發版面重新計算。
Google 用來評估頁面的指標有三項：最大元素的渲染時間不超過 2.5 秒、互動回應時間不超過 200 毫秒，以及版面位移不超過 0.1。這些指標是以實際造訪的第 75 百分位數計算。
我們來看看這件事為什麼重要。agent 預設會先將區塊的不透明度設為 0，等區塊進入視窗後再移除設定。如果首屏使用這種顯現效果，即使圖片已完全載入並解碼，直到開始渲染前仍不會列入指標。若腳本在載入後才移除不透明度，情況會更糟——指標必須等到整個腳本執行完才開始計算。
有兩種解決方式。第一種是從一個很小但非零的不透明度開始顯現，讓初始渲染能納入計算。另一種是讓首屏的不透明度維持不變，只為位移加入動畫。
另一個問題是哪些屬性適合用於低成本動畫，哪些成本較高。
情況允許時，請將動畫限制在不透明度和 transform 屬性，讓它們留在渲染管線的合成階段。
— web.dev, https://web.dev/articles/animations-guide
簡單來說，瀏覽器會分層組合影像，而位置和不透明度的變化發生在最後、成本最低的步驟。其他變化都會迫使瀏覽器重新計算頁面。同一份文件中的測量結果顯示，以 top 和 left 位移製作動畫，版面配置花費 37 毫秒，渲染花費 79 毫秒；使用 transform 做出相同視覺效果，兩者都花費 0 毫秒。
還有一個值得記住的矛盾：不透明度的合成成本很低，卻會讓元素失去速度指標的候選資格。因此，對瀏覽器而言成本低的動畫，和對效能而言安全的動畫，是兩回事。
還有 `will-change` 屬性，agent 很喜歡大量加入並稱之為「最佳化」。MDN 文件說的恰好相反：
過度使用 will-change 會消耗過多記憶體，也會迫使瀏覽器執行更複雜的渲染程序，試圖為可能發生的變化預先準備。這會降低效能。
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
文件也指出，這項屬性是為了處理已存在的效能問題而設計的最後手段，不能用來預防問題。對 50 個元素都加上 `will-change: transform, opacity`，就是生成程式碼常見的明顯跡象。
版面位移的問題比較簡單。Google 文件沒有將問題歸咎於動畫；相反地，細緻的轉場有助於更新內容，又不會驚擾讀者。做法相同：使用 transform 改變縮放，而不是寬度和高度；使用位移值移動，而不是改動座標。
## 動態效果可能傷害身體不適的人，該怎麼辦？
重點摘要
美國 40 歲以上的成年人中，最多有 35% 曾經歷前庭疾病。對他們而言，捲動動畫可能造成噁心和偏頭痛。所有瀏覽器支援系統的「減少動態效果」設定已超過五年，但如果你不提出要求，agent 就不會加入。CSS 規則與 JavaScript 動畫設定的明確分支都需要；只讀偏好不會停止時間軸。
這個部分不只是出於禮貌。向企業主購買產品的受眾，正是 40 歲以上的人。
對有前庭功能障礙的人來說，捲動動畫會帶來不適。W3C 聯盟毫不避諱地描述了可能的後果：噁心和偏頭痛，有時嚴重到必須躺下休息。
你可以加入三行樣式來處理：
```css
@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 的元素可見，只在允許動態時建立動畫：
```js
// 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 生命週期與清理文件](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/)。
另外還有一項正式的無障礙準則需要留意。WCAG 2.2.2 是一項 A 級準則，規定如果內容會自動移動、閃爍或捲動，持續超過五秒，而且與其他內容同時顯示，使用者就必須能停止它。這適用於自動輪播的輪播區和無限跑馬燈，而 agent 很容易加入這些元素。
## 最容易出問題的七個地方
重點摘要
幾乎所有錯誤都能歸納為三個原因：首屏加入動畫、動態效果過多，或動畫套用在錯誤的屬性上。捲動劫持是另一個問題——使用者體驗研究指出這種做法有害。適當的動畫時間為 100 到 400 毫秒，而 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 陷入無止盡的修改循環：它看到動畫進行中的影格，以為是錯誤並加以修正，接著又看到另一個進行中的影格。此外，每張截圖都會消耗上下文。
## 費用多少？如何避免只做一個網站就耗盡整個月的額度？
重點摘要
這套工具全部免費；你只需支付 agent 工作本身的費用。動畫比一般版面工作更快耗盡使用額度，因為你無法只看程式碼確認結果：每次修改都得重新讀取檔案，並進一步反覆調整。一次製作一個場景、讓 `CLAUDE.md` 保持精簡，以及停用動畫元素的截圖循環，都能有所幫助。
英語系 vibe-coding 社群常有一種故事：有人打造一個可以在太空中穿梭捲動的炫目頁面，貼出成品後，討論才發現光是這個網站就耗盡了整個月的額度。
這是意料之中的事。動畫比一般版面工作更耗費資源，原因有好幾個：無法只讀程式碼確認結果，需要反覆調整；每次修改都得重新讀取檔案；對動態元素執行截圖循環，也會額外增加不必要的處理。
以下做法有所幫助：
一次製作一個場景，並確認結果。一口氣要求「替整個網站加上動畫」一定會超出預算。你可以關閉動畫元素的截圖驗證，自己查看視覺效果。讓 `CLAUDE.md` 保持精簡，避免規則在每次請求中消耗上下文。並事先把函式庫的 `llms.txt` 提供給 agent，否則它會臆造過時的連接方式，接著還得花時間除錯自己編造的內容。
文章[為什麼 Claude Code 會重新讀取整個專案](https://ailoot.ai/blog/zh-hant-tw/claude-code-rereads-project/)說明專案工作時 token 都花在哪裡；文章[如何避免耗盡 Claude Code 使用額度](https://ailoot.ai/blog/zh-hant-tw/claude-code-token-limits-saving/)則介紹控制用量的方法。
## 接下來呢？
重點摘要
這個方法有效：加入反模板規則、選擇一個視覺方向、製作一個動態場景、檢查速度，並尊重讀者的設定。複雜之處在於，事先將正確資訊放入 agent 的上下文，讓它有依據可以建構。動畫本身反而是最簡單的部分。
照著八個步驟打造你的第一個頁面。選擇一個視覺方向，在首屏設計一個場景，然後檢查速度。
### 來源
- [anthropics/skills](https://github.com/anthropics/skills) - Anthropic 官方 skills，包含 frontend-design
- [GSAP：定價](https://gsap.com/pricing) - 確認 GSAP 免費
- [GSAP 3.13 版發布資訊](https://gsap.com/blog/3-13) - 2025 年 4 月下旬改為免費的內容
- [GSAP：llms.txt](https://gsap.com/llms.txt) - 語言模型專用文件
- [GSAP：ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - 捲動動畫外掛
- [Motion](https://motion.dev/) - 採用 MIT 授權的開放原始碼替代方案
- [web.dev：動畫指南](https://web.dev/articles/animations-guide) - 動畫應使用哪些屬性
- [MDN：will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - 不應預先設定的原因
- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - 減少動態效果設定
- [WCAG 2.2.2：暫停、停止、隱藏](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - 無障礙準則
- [W3C：互動觸發的動畫](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - 對前庭障礙的影響
- [Mobbin MCP](https://mobbin.com/mcp) - 提供 agent 介面參考的函式庫
下一步：[Ailoot](https://ailoot.ai/)。
## 常見問題：如何在一個晚上用 Claude Code 打造動畫網站
### reduced-motion CSS 規則為什麼沒停掉 GSAP？
CSS duration 不會取消 JavaScript timeline。應在 matchMedia 的 no-preference 分支建立 GSAP 動畫，並保持元素基礎樣式可見，減少動態時才是靜態頁面。
### 如何避免導覽後動畫越積越多？
頁面或元件移除時呼叫動畫設定回傳的 cleanup。範例 mm.revert() 會還原樣式並移除該 matchMedia 收集的動畫。
## Ailoot · 公司及其專案組合
Ailoot以累積的營運經驗、廣大的客戶群、穩定的服務及持續的KPI管理為基礎。
公司及其專案組合：數百萬客戶，每月銷售額達數十億。
Ailoot將這些營運經驗用於API存取，讓客戶的產品、代理、應用程式及自動化流程使用AI功能。