GSAP

【AI工具地圖】做網站總是像 AI 模板？我用 GSAP Skills做出高質感互動網站

Claude、Cursor 做網站總是長得一樣？本文實測利用 GSAP Skills 的互動設計思維，打造具有品牌特色的高質感網站 Demo。從參考網站拆解、Prompt 設計到實作完整分享。

教大家用 GSAP Skills 創造高質感網站

用 AI 做網站很快,但做出來總是一股「AI 味」——紫藍漸層、玻璃卡片、千篇一律的 fade in。這次我用 Claude 搭配 GSAP 官方推出的 GSAP AI Skills,再餵它幾個高質感的設計參考,實際做了一個互動網站 Demo。這篇完整記錄我的做法、踩過的坑,以及一個關鍵心得:AI 缺的不是寫程式的能力,而是好的設計品味與參考。

一、為什麼 AI 做出來的網站,都有一股「AI 味」?

你有沒有發現,最近用 AI 生出來的網站,長得都好像?

一打開,紫藍色漸層背景配上幾顆飄來飄去的光球、半透明的玻璃擬態卡片,然後滑到哪、元素就 fade in 到哪。乍看很潮,但看多了會膩,而且你幾乎一眼就能認出:「喔,這是 AI 做的。」

這股「AI 味」不是錯覺,它背後有個很現實的原因——當你沒有給 AI 明確的美學方向時,它會自動選最安全、最常見的那條路。 AI 讀過上萬個網站模板,於是把這些設計的「平均值」吐回給你。結果就是:技術上挑不出毛病,視覺上卻沒有靈魂。

但真正讓人「哇」一聲的網站,靠的從來不是堆特效,而是動畫的節奏感、頁面的敘事感,以及那種「有人用心設計過」的細節。這恰好是專業前端工程師最值錢、也最難被取代的地方。

我自己最近就卡在這裡:想用 AI 做一個產品網站 Demo,第一版生出來……嗯,很有 AI 味。但後來我換了個做法,補上兩塊關鍵拼圖之後,成果完全不一樣了——一塊叫 GSAP(一個專業級動畫引擎),另一塊是它官方剛推出的 GSAP AI Skills。

這篇就來分享我整個「踩坑到做出滿意成品」的實戰過程,以及為什麼我會說:AI 缺的其實不是寫程式的能力,而是好的設計參考。

二、GSAP 是什麼?為什麼它能讓動畫「升級」?

先講結論: GSAP 是目前公認最強的網頁動畫引擎之一,很多你覺得「哇,這網站怎麼這麼順」的作品,背後其實都是它。

GSAP 全名是 GreenSock Animation Platform,是一套專業級的 JavaScript 動畫函式庫。它的招牌口號很直白——「Animate Anything」(萬物皆可動)。不管是按鈕的細微互動、文字逐字浮現、SVG 圖形變形,還是整頁隨著滾動展開的敘事效果,它都能做到,而且主打一個「絲滑順暢」。

它跟一般 CSS 動畫差在哪?簡單說,CSS 動畫適合做小裝飾,但一旦你想要精準控制時間軸、把好幾個動畫串成一段有節奏的「演出」、或是讓動畫跟著滑鼠或滾動連動,CSS 就很吃力了。GSAP 就是專門解決這些「複雜但高級」的需求。

這裡有個對讀者很重要的好消息:GSAP 現在完全免費了。 過去它有些強大外掛(像是平滑滾動的 ScrollSmoother、文字拆分的 SplitText、SVG 變形的 MorphSVG)是要付費的,但在 2024 年被網頁設計平台 Webflow 收購、並提供支援之後,整套工具連同付費外掛全部開放免費使用。對想嘗試的人來說,門檻直接歸零。

它的工具大致分成五條線,看名字就懂在幹嘛:

Core(核心):動畫的基本引擎,控制時間、節奏、緩動。
Scroll(滾動):招牌中的招牌,ScrollTrigger 讓元素隨著捲動觸發動畫,做出「滾動式敘事」。
SVG:讓圖形變形、沿路徑移動,做出有設計感的圖像動畫。
Text(文字):SplitText 把文字拆成一個個字元,做逐字進場那種效果。
UI 互動:拖曳、翻牌(Flip)、慣性滑動等精緻互動。

那……重點來了——它跟 AI 有什麼關係?

這就要講到這次的主角:GSAP AI Skills。

三、GSAP AI Skills

前面說 AI 做網站容易有「AI 味」,其中一個技術原因是:AI 不一定會「正確地」使用 GSAP。 它可能寫得出能動的程式碼,但用的不是最佳寫法,效能差、結構亂,動畫質感自然出不來。

於是 GSAP 官方在 2025 年做了一件很聰明的事——推出 GSAP AI Skills,把他們多年累積的「動畫最佳實踐」整理打包,變成一份 AI 看得懂的教材。你可以把它想成:官方親自幫 AI 上了一堂動畫課,教它什麼時候該用時間軸、滾動觸發怎麼寫才對、效能怎麼優化、外掛怎麼搭配。

它最棒的一點是不綁定特定工具。GSAP AI Skills 採用一種叫「Agent Skills」的通用格式,可以裝在 Claude Code、Cursor、GitHub Copilot、Codex、Windsurf 等 40 多種 AI 編碼工具上。也就是說,不管你慣用哪一家 AI,幾乎都能讓它「學會」這套技能。

安裝也很簡單,基本上一行指令就搞定:

bash

npx skills add https://github.com/greensock/gsap-skills

如果你用的是 Claude Code,也可以直接透過外掛市集安裝:

bash

/plugin marketplace add greensock/gsap-skills

裝好之後,這套 Skills 其實是由 8 個小技能組成,每個負責一塊:

gsap-core:核心動畫語法與緩動。
gsap-timeline:時間軸,把多個動畫排成有節奏的序列。
gsap-scrolltrigger:滾動觸發,做滾動式敘事的關鍵。
gsap-plugins:各種外掛(平滑滾動、文字拆分、SVG 變形等)。
gsap-utils:好用的工具函式。
gsap-react:在 React 裡正確使用 GSAP。
gsap-performance:效能優化,讓動畫真的「順」。
gsap-frameworks:Vue、Svelte 等其他框架的整合。

裝上這套 Skills 之前,你得自己懂 GSAP 才能指揮 AI;裝上之後,你只要說「幫我做一個滾動視差效果」,AI 就會照官方標準把它寫出來。 它把「動畫的專業 know-how」這道門檻,幫你跨過去了。

不過——光有這套 Skills 就夠了嗎?我自己實測下來,發現還差一塊。下一段就是我的實戰過程。

四、Claude + GSAP Skills + 設計參考:我的實戰流程

裝好 GSAP AI Skills 之後,我直接拿 Claude 來實戰,目標是做一個產品網站 Demo。我選的題目是幫 AIPost 設計官網。

一開始製作,為了應驗是否有差別，我丟prompt給AI後還是有模板味。能動,但就是那種「安全牌」的感覺。於是我調整做法,真正讓成果脫胎換骨的,是下面這三步。

第一步:給它正確的 GSAP Skills

這步前面講過了——有了 GSAP AI Skills,Claude 寫出來的動畫不再是亂湊的,而是照官方標準:該用時間軸的地方用時間軸,滾動效果用 ScrollTrigger,效能也有顧到。這解決了「技術正確」的問題。

第二步:餵它高質感的「設計參考」(這步最關鍵)

技術對了,但品味還是平庸。所以我做了一件事:直接丟幾個我覺得很有創意的網站給 Claude 參考,例如設計師作品集 belenjones.com 這類 creative developer 風格的站。

我給的指令也刻意把「不要什麼」講得很死,逼它跳出 AI 的安全區。我的 prompt 大概是這樣:

請幫我設計一個 AI Post 網站 Demo,使用 GSAP。
不要做成一般 AI SaaS 模板、不要紫藍漸層球、不要玻璃擬態卡片、不要普通 fade in、不要制式 landing page。
我要的方向:像 creative developer portfolio + AI intelligence dashboard + digital magazine 的混合體。
請先不要寫 code,先產出完整設計方案(視覺風格、Hero 進場分鏡、ScrollTrigger 滾動敘事、Dashboard 動畫、Login→Dashboard 轉場、要用哪些 GSAP 技術、要避免哪些老套效果),我確認後再開始寫。

這裡有兩個關鍵技巧:一是用「負面表列」把 AI 的壞習慣明確擋掉;二是先讓它出設計方案、不要急著寫 code——先對齊美學方向,再進工程,省下大量反覆重做的時間。