AI Agent · 第 4 週

GSAP Skills 微互動工作流

適合已經有網站草稿的人，把 hero、CTA、作品卡或滾動段落加上一段剛好的動畫，讓頁面更有手感。

交付成果

一段可驗收的網站微互動與操作紀錄

動畫只能做體驗補強；正式頁面要尊重 reduced motion、手機效能、unmount cleanup 和初始載入大小。新增正式相依套件前要先人工確認。

可接到個人品牌網站、作品頁、預約 CTA、案例卡片或下一輪前端作品集。

示範：安裝 GreenSock 官方 GSAP Skills，請 Agent 先判斷要用 gsap-react、gsap-scrolltrigger 或 gsap-performance，再做一段 hero CTA 微互動。

作業：在個人品牌網站挑一個區塊，加上一段可關閉、可驗收、手機不過重的微互動。

Workflow Steps

1

Codex 可用 `npx skills add https://github.com/greensock/gsap-skills --agent codex`；Claude Code 可用 `/plugin marketplace add greensock/gsap-skills`。

2

先選 hero CTA、作品卡 hover、段落進場或簡單 scroll reveal，不碰金流、表單送出或權限流程。

3

要求 Agent 說明會參考哪個 GSAP skill、會改哪些檔案、如何 cleanup、如何處理 reduced motion。

4

確認手機不卡、沒有水平溢出、離開頁面會清掉動畫，且 reduced motion 使用者看得到靜態內容。

Next Workflows

Claude Code 合約產生器工作流

用 Claude Code 做自由工作者合約產生器原型，輸入欄位後產出草稿和檢查清單。

LINE 筆記聊天機器人工作流

把 LINE 訊息整理成標題、摘要、標籤和待辦，先做本機原型再評估串接。