講座 · 線上 · (Asia/Taipei)
AI 輔助品牌動態：工作坊筆記
從品牌個性與分鏡開始，整理 AI 協作、網站技術、動態效果、媒體效能與現場問答。
重點結論
先讓動態交代資訊與操作的關係，再安排節奏、選擇工具；緩動曲線、物理模型與繪圖工具各有不同職責。
沿著演講時間，從想法走到作品
以下依錄音中的教學順序整理。每章先交代課堂談到這裡的原因，再補白話解釋與可試做的例子。時間採錄音相對位置；教材與官方文件的補充放在各章筆記中，來源集中於文末。
01 · 先選載體，再決定觀眾要看到什麼
課堂脈絡 — 開場先談動態放在哪裡。先知道觀眾是在逛網頁、操作 App，還是看解說影片，才好決定要帶出哪個重點。
白話筆記・教材與文件補充
網頁開場適合建立第一印象；捲動揭露可以分段說故事；App 的載入、切頁與通知用來交代狀態；產品解說影片則把操作流程濃縮成容易看懂的情節。每一段先選一個重點，安排視線、節奏與回應，讓前後內容接得起來。
試著這樣做
先挑作品集的一張卡片，寫下「讀者先看到作品名稱，按下展開後看到成果」。接著再決定這個變化要多快。
參考：工作坊簡報
02 · 緩動曲線與彈簧
課堂脈絡 — 從 App 的載入、按鈕與通知，課堂帶到動作快慢。下面搭配 Material 與彈簧文件，說清楚速度曲線和回位反應。
白話筆記・教材與文件補充
緩動控制變化速度；物理模型則另外處理彈力、阻尼等參數。舊版 Material 常用進場減速、離場加速；Standard 為 cubic-bezier(0.4, 0, 0.2, 1)，Sharp 為 cubic-bezier(0.4, 0, 0.6, 1)，用途和曲線各有差異。Damping 是阻尼，用來抑制震盪；阻尼足夠時，物件可以平穩抵達目標。選擇時先想使用者需要什麼回應。
試著這樣做
讓通知卡片進場後慢慢停穩，方便閱讀；若做拖曳後回位，再評估彈簧反應。先選互動目的，才調速度或阻尼。
參考：Material：時長與緩動；彈簧見補充來源
03 · 把操作錄影整理成產品故事
課堂脈絡 — 講者接著用產品解說示範：操作錄影提供素材，分鏡幫觀眾抓住輸入、操作與結果。
白話筆記・教材與文件補充
課堂以報價工具的解說動畫談操作簡化：先保留觀眾需要理解的輸入、動作與結果，再整理成分鏡。原始錄影、截圖與文字都能提供內容線索；畫面可以突出主要操作、淡化次要介面，最後留時間讀結果。示範另提到約 35 秒的 UI 流程需求，以及銀行動畫案例的短提示詞；可帶走的方法是先說清楚內容與目的，再決定鏡頭。
試著這樣做
把一次操作拆成「輸入需求 → 按下產生 → 看見結果」三張卡。拿掉與這次重點無關的介面細節，再檢查讀者能否看懂流程。
參考：課堂案例與共筆
04 · 效果速查：視線、轉場與節拍
課堂脈絡 — 產品案例之後，課堂從視線、操作回應與連續感檢查動作。這裡搭配共筆的效果詞彙，幫這些設計目的找到具體做法。
白話筆記・教材與文件補充
推近（push-in）把注意力帶向細節；打字與游標讓操作過程看得見；逐項出場（stagger）讓資訊有閱讀順序。掃動（sweep）、形變（morph）、形狀銜接（match cut）與圓形開合（iris）用來連接畫面。弧線移動、輕微擠壓（squash）與過沖可帶出重量感；停留時以小幅呼吸、視差或慢推維持生命感。配樂可用 BPM 與重拍標記重要變化，再預覽確認節奏。
試著這樣做
先讓游標移到按鈕，再讓結果卡片出現。先後順序讓讀者看懂因果；選效果時就以這個目的為準。
參考：教材效果詞彙整理
05 · 把可愛、俐落、沉穩寫成具體動作
課堂脈絡 — 談完資訊的引導，講者轉向「想讓人感受到什麼」。感受先有方向，後面的腳本與工具才有共同目標。
白話筆記・教材與文件補充
先選品牌個性，再描述顏色、形狀、出場順序、移動距離與停留時間。可愛可以從圓潤造型、柔和配色與輕巧回應開始；俐落可以用清楚的對齊和短轉場；沉穩可以用較小位移與充足閱讀時間。這些是整理後的設計起點，依內容與品牌調整。課堂的粉紅色案例示範了配色與角色動態如何形成一致感。
試著這樣做
把「可愛一點」改寫成「圓角圖形、柔和配色、輕巧進場，標題最後停穩」。下面就能把這些條件放進分鏡。
參考：工作坊共筆
06 · 分鏡先過一輪，再生成動畫
課堂脈絡 — 課堂在選工具前先談腳本：每一幕要說什麼、留下什麼感受。後面的 00:35:49–00:37:16 問答再把它落實成分鏡交付。
白話筆記・教材與文件補充
需求先交代用途、觀眾、橫式或直式比例、長度、素材與風格參考，再請 AI 列出每個鏡頭的內容、時間、動作、轉場和停留點。可要求 HTML 預覽與 PNG 分鏡，檢查資訊順序後再製作動畫。修改時一次指出一個鏡頭、問題與期待結果，例如「第二段先顯示按鈕回應，再揭露結果卡片」。
試著這樣做
用四欄小表寫「畫面、文字、動作、停留時間」。請 AI 先交這張表和靜態預覽，確認後再動起來。
參考：工作坊共筆
07 · 依作品選工具
課堂脈絡 — 用途、感受與腳本確定後，講者才開始選工具。初學者可以先把「畫什麼」「怎麼動」「最後交什麼」分開看。
白話筆記・教材與文件補充
p5.js 適合創意繪圖與互動；GSAP 適合補間、時間軸與協調動作；Motion for React（前稱 Framer Motion）提供 React 的介面、手勢與捲動動畫；Three.js 提供 3D 場景能力。影片工作流程可搭配 After Effects 的動態圖像與合成，以及 DaVinci Resolve 的剪輯、調色與音訊。以輸出與既有專案需求決定組合。
試著這樣做
要做跟著滑鼠移動的圓點，可先看 p5.js；要安排幾張網頁卡片依序出場，可看 GSAP。沿用現有專案，挑能完成這一步的工具。
參考：Motion for React 官方文件；其他工具見來源
08 · 把風格限制寫進驗收
課堂脈絡 — 粉紅色角色案例把前面的品牌感受變成畫面。這裡用教材的風格條件，整理成初學者可以逐項檢查的規格。
白話筆記・教材與文件補充
色票、字體、直排或橫排、字距與素材比例一起形成風格。材質顆粒、柔光、描邊、陰影和線條描繪可用來加強層次；背景動作保持一致，主要文字要有足夠對比與閱讀時間。教材中的 outCubic／outExpo、inOutCubic、outBack 分別提示進場減速、平順銜接與過沖感；實作時對照所選工具的 easing 名稱與預覽。
試著這樣做
選定一組色票與一種標題字體，先做靜態分鏡。檢查主標題是否清楚，再加入一種轉場，看風格能否維持一致。
參考：GSAP：緩動曲線；教材用語見共筆
09 · Canvas：用時間算出每一個畫面
課堂脈絡 — 介紹製作工具後，課堂進一步談圖層與時間。下面用公開文件補齊 Canvas 的基本模型，方便理解畫面如何產生。
白話筆記・教材與文件補充
Canvas 是網頁的繪圖表面。動畫會更新位置、大小或透明度，再重畫畫面；分層能安排前景、背景和文字的先後。瀏覽器中的即時動畫常配合 requestAnimationFrame 更新。Mografy 的公開場景模型以絕對時間驅動畫面，方便預覽、定位與輸出指定影格；選用的 Three.js 圖層可處理 3D 場景。
試著這樣做
想像圓點從左往右移：先決定現在的時間，再算出圓點位置，最後畫出這一格。前景文字放在後面繪製，形成清楚層次。
參考：Mografy：場景模型
10 · 把預覽、輸出與網站驗收分成三步
課堂脈絡 — 現場談到分鏡預覽與輸出等待時間。這裡把交付拆成三次檢查，讓初學者知道每一步該看什麼。
白話筆記・教材與文件補充
預覽先看文字、節奏、層次與轉場；輸出再檢查解析度、幀率、音訊與檔案大小；放進網站後，確認手機裁切、下載量、互動與可讀性。講者提到的製作和匯出分鐘數是個案經驗，可把自己的生成、算圖與編碼分別計時。補充實作時，也要保留鍵盤操作與減少動態效果的閱讀方式。
試著這樣做
先看分鏡是否說清楚故事，再看輸出的文字和節奏，最後放回網頁看手機呈現。每次只記一個具體問題，方便回頭修改。
參考：MDN：減少動態效果
11 · AI 協作：把設計決策和實作交付分開
課堂脈絡 — 分鏡與預覽的提問接著帶出 AI 工具怎麼合作。重點是把已確認的設計決策留給下一個製作步驟。
白話筆記・教材與文件補充
課堂分享先討論分鏡、再生成動畫的流程，也有人分享由 Claude 主導需求、Codex 協助實作的經驗。可以用相同需求比較工具是否照指定順序交付、分鏡是否清楚、修改是否方便。講者偏好的模型與等待時間屬於當次使用經驗；選擇時以自己的素材、預覽與交付品質做判斷。
試著這樣做
先固定一份需求與分鏡，請工具只改第二幕的文字和停留時間。檢查其他畫面是否保留，再比較修改品質。
參考：Mografy 公開專案
12 · 先載入眼前需要的內容
課堂脈絡 — 現場開始問網頁效能，先談圖片載入。以下依官方文件整理下載資源與顯示動作的做法。
白話筆記・教材與文件補充
畫面下方的非關鍵圖片可用 loading="lazy" 延後載入；首屏主視覺與 LCP 圖片優先載入，並設定寬高來預留版面。載入時機和出場動畫可以分開規劃：資源準備好，再依捲動或互動揭露。影片可依目標瀏覽器選擇 preload、poster 與延後載入策略。
試著這樣做
作品集最上方的重要圖片先載入；下方作品圖再安排延後載入。替每張圖保留尺寸，接著檢查手機下載了哪些檔案。
參考：web.dev：瀏覽器圖片延遲載入
13 · 響應式圖片：版面大小與像素密度一起看
課堂脈絡 — 延後載入之後，講者接著談手機、平板、桌面的圖片大小。回應式圖片就是讓瀏覽器有合適尺寸可選。
白話筆記・教材與文件補充
手機、平板和桌面的顯示需求不同。srcset 可提供不同寬度的檔案，sizes 描述圖片在版面中預計佔多寬，交由瀏覽器挑選；固定顯示尺寸也可用 1x、2x 密度候選。需要不同裁切或格式時，再用 picture。檢查手機實際下載哪張圖，讓清晰度與傳輸量配合。
試著這樣做
為同一張作品圖準備較小與較大的版本，再描述它在版面上的寬度。用手機檢查實際選到的檔案，兼顧文字清楚與下載量。
參考：MDN：響應式圖片
14 · 圖片與影片：格式、品質、相容性
課堂脈絡 — 尺寸確定後，課堂再談 WebP、WebM 與壓縮。下面用格式文件整理各自特性，讓選擇有可檢查的依據。
白話筆記・教材與文件補充
WebP 提供有損與無損壓縮；PNG 本身採無損壓縮，另行縮圖或減色會影響結果。WebM 是影片容器，可搭配不同編碼器；檔案大小受長度、解析度、幀率、內容和編碼設定影響。Safari 已有 WebP 支援，影片則要一起檢查瀏覽器版本、容器與編碼器。用實際素材比較畫質、大小與播放結果，再決定格式和備援。
試著這樣做
用同一張圖比較 PNG 與 WebP 的細節和檔案大小；影片則一起記錄容器與編碼。最後在目標手機和瀏覽器確認播放結果。
參考：Google WebP FAQ；PNG／影片規格見來源
15 · Mografy 的交付與其他工具入口
課堂脈絡 — 效能討論之後，現場分享延伸工具與學習資源。這裡按交付與學習用途整理入口，方便選一條路繼續。
白話筆記・教材與文件補充
Mografy 公開文件提供預覽與輸出流程，首頁列出 MP4、WebM、Lottie、SVGA；其 Lottie／SVGA 輸出採影格圖片封裝，適合先核對交付需求。延伸工具包括 HyperFrames 和 Jitter：前者以網頁技術建立影片專案；後者是網頁動態設計工具，官方另提供 MCP 連接 AI 工具。Hera 與 Motion UX 分別可作生成工具和設計學習入口。
試著這樣做
想做第一支作品，先照 Mografy 文件走預覽與輸出；想練動態設計，先從 Motion UX 挑一個相關主題。先確認自己的交付需求，再選格式。
參考：Mografy；其他官方入口見來源
16 · 讓動畫與捲動接得起來
課堂脈絡 — 收尾問答回到網頁：多種動態放在同一頁時，要交代它們何時出現。01:12:17–01:13:30 的追問再次聚焦先後順序。
白話筆記・教材與文件補充
先定義觸發事件：進入頁面、捲動到區塊、點擊或狀態改變。再排先後順序、播放範圍與結束狀態。課堂最後的問答特別強調「何時出現」和連貫性。可以把開場動畫、段落揭露、按鈕回饋分開描述，再寫出交接關係，讓同一時間的視覺重點清楚。
試著這樣做
寫成「開場標題停穩 → 捲到作品時揭露卡片 → 按下按鈕才展開細節」。逐步預覽，確認每個動作都有清楚的觸發條件。
參考：GSAP ScrollTrigger；課堂時序整理
把方法用在自己的作品：自寫提示詞
以下是整理後的練習規格，可換成自己的素材與目的。狀態：待實作。
請先規劃一支直式 9:16、約 20 秒的作品集介紹。對象是第一次認識我的合作夥伴，素材有標誌、三張作品截圖與已確認自介。沿用既有配色與字體，以『問題 → 作品如何回應 → 成果 → 作品集入口』安排內容。先交分鏡表與靜態預覽，列出各段文字、主角、動作和閱讀停留時間；分鏡確認後再製作。預覽請檢查手機文字大小、轉場遮擋及片尾閱讀時間。
- JavaScript
計算位置與行為 - p5.js
呼叫繪圖與互動函式 - Canvas / WebGL
在瀏覽器畫出結果 - 畫面與互動
下一次更新再重畫
現場 Q&A 整理
依課堂提問重述，技術補充連到上方章節與官方來源。
多張圖片能串成動畫嗎？
可以先交代圖片的用途與順序，再請 AI 規劃逐格或分鏡內容。課堂以產品操作素材說明這個方向，製作時仍要檢查畫面之間的連續性。
先做分鏡，有什麼幫助？
分鏡讓內容順序、畫面重點和停留時間先變得可討論。課堂提到直接生成動畫時容易略過這一步；可在提示詞列明「先交分鏡，確認後再做動畫」，並寫出希望收到的檔案。
提示詞之前要準備什麼？
先整理用途、畫幅、秒數、素材與想傳達的感受，再要求分鏡。短提示詞也能搭配完整的專案規則和素材說明，讓 AI 取得足夠上下文。
模型選擇可以看哪些條件？
講者討論 Sonnet／Opus 在討論速度、細節與成本上的取捨。可以拿相同的小案例比較：是否先交分鏡、是否保留風格、修改是否集中、等待時間是否合適。
需要另外接 Canvas API 服務嗎？
Canvas 是瀏覽器提供的繪圖 API。依 Mografy 公開流程，可讓程式代理讀取本機專案和相關操作說明，再產生場景、預覽與輸出。AI 服務的存取需求另依所選工具處理。
可以把流程自動化嗎？
課堂示範的方向是讓 AI 讀取專案規則，以內容、秒數和素材產生分鏡與場景。仍可保留需求、分鏡、預覽與輸出的檢查點，讓每次修改有明確位置。
Claude 與 Codex 可以如何分工？
現場有人分享由 Claude 討論需求、Codex 配合實作，再透過 Mografy 預覽的流程。可把規劃結果整理成共同規格，讓接手的工具知道已確認內容與下一個交付。
需要額外串接多個代理嗎？
課堂建議先讓既有代理讀取專案，走通需求、分鏡、預覽與輸出。之後再依重複工作和交接需求安排分工。
只有聲音、簡報或文字，也能規劃嗎？
可以先整理敘事順序、關鍵訊息和可用素材，再請 AI 提出鏡頭與畫面需求。課堂討論了這些輸入方式；實作時還要確認工具能讀取提供的檔案，以及每個鏡頭需要的圖片或圖形。
動態網站的效能從哪裡開始看？
先檢查素材大小、首屏載入、下方圖片的延遲載入與響應式圖片，再看動畫執行與輸出設定。上方格式與載入章節已整理官方做法，可逐項對照自己的頁面。
後續可以從哪些資源學？
從工作坊簡報與共筆回看方法，再用 Mografy 文件查操作、Motion UX 看動態設計教學。Hera 是課堂分享的 AI 動態圖像入口，GSAP 可查網頁動畫 API。依想完成的作品挑一個方向延伸。
動畫和網頁特效怎麼安排？
分別寫出兩者的觸發、出場、停留和結束狀態，再安排交接。最後的追問把重點收在先後順序與連貫性；速度和比例則配合畫面焦點調整。
只有錄影和截圖，怎麼開始？
先整理素材和主要操作，告訴 AI 觀眾要看懂什麼，請它簡化流程、列分鏡並提供 HTML／PNG 預覽。確認後再製作動畫，輸出完成再檢查網站中的呈現。
延伸 Q&A：p5.js 與工具分工
以下延伸先前的技術提問，與現場問答分開整理。
p5.js 是什麼？
p5.js 是用於創意編碼、繪圖與互動的 JavaScript 程式庫。它在瀏覽器建立畫布，支援 2D 與 WEBGL 繪圖模式，也能製作 3D 內容。
參考：p5.js：createCanvas
setup() 和 draw() 怎麼運作？
setup() 在 sketch 開始時執行一次；之後 draw() 重複執行，更新畫面。noLoop() 可以停止迴圈，loop() 可以恢復；實際幀率仍受執行環境影響。
參考：p5.js：draw（含 setup、noLoop 與 loop 參照）
p5.js、GSAP 與 Three.js 互相取代嗎？
它們的職責可以重疊。p5.js 提供繪圖與互動；GSAP 對物件屬性做補間並安排動畫時序；Three.js 提供 3D 程式庫。可以依作品的繪製與時間控制需求組合使用。
參考：GSAP 官方文件
個人心得
個人心得尚待補充。
實作狀態
尚無可公開的實作與執行驗證紀錄。
來源清單
課堂教材與技術文件集中在這裡，每個資源保留一個連結。Hera 是動態生成工具入口，Motion UX 提供動態設計教學；GSAP 的首頁、API、緩動與捲動文件各有不同用途。
- 公開報名表（活動來源）
- 工作坊簡報
- 工作坊共筆
- Mografy
- p5.js: setup()
- Three.js
- GSAP
- Hera
- Motion UX · YouTube
- HyperFrames
- Jitter · MCP
- PNG · W3C
- WebP · Google
- Video codecs · MDN
- WebM · Safari 17.4
- Spring animation · Android
- After Effects · Adobe
- DaVinci Resolve · Blackmagic Design
- Canvas animation · MDN
- Material：時長與緩動；彈簧見補充來源
- Motion for React 官方文件；其他工具見來源
- GSAP：緩動曲線；教材用語見共筆
- Mografy：場景模型
- MDN：減少動態效果
- web.dev：瀏覽器圖片延遲載入
- MDN：響應式圖片
- GSAP ScrollTrigger；課堂時序整理
- p5.js：createCanvas
- p5.js：draw（含 setup、noLoop 與 loop 參照）
- GSAP 官方文件