【AI工具地圖】做網站總是像 AI 模板？我用 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 缺的其實不是寫程式的能力,而是好的設計參考。