2026-11-12 AI 學習日誌

今日最有感的事

今天整理的AI卡有15張，都是11/12收進來的。整批看下來主題很集中，幾乎都在講「怎麼讓AI做出好看、會動的東西」：網站prompt庫、UI元件庫、3D引擎、剪片指南。Bear在其中兩張留了註記，剛好都跟動畫有關：一張是用MotionSites的skill做出可以拖拉的大頭貼，一張是把奧斯卡影片畫風整理成skill的lemo-opuscar。今天就圍繞這兩張來寫。

MotionSites skill：以前刻3天的動畫，30分鐘做完

偉騰（@wayturn_）做了一個個人網站wayturn.dev，上面的大頭貼可以被拖拉、捏出各種表情。他自己的說法是：「以前做這種動畫自己刻要弄3天，現在怎麼下幾個prompt然後30分鐘就搞定了」。

他在留言分享的做法大概是這樣：

1. 到MotionSites的官網市集motionsites.ai挑一個免費模板，按「Copy prompt」
2. 先把這段prompt貼給AI討論：「我有這段prompt，想做到這個效果需要準備什麼，我們先討論一下再來開工」
3. 官網寫的是適配Lovable、Bolt、v0、Cursor和Claude，他實際用的是ChatGPT加Codex，因為要用GPT的生圖功能，從自己上傳的照片延伸出60幾張表情
4. 開工、調整，大約5個對話就完成開發

幫非工程師補一下背景。MotionSites開源的是一個Claude skill，裡面有40幾種範例。skill可以想成一份「做事說明書」，裝進AI之後，它就知道某一類東西該怎麼做；這一份專門教AI做帶動態效果的網頁。

真正值得看的是第2步。偉騰特別註明「這段很重要，使用AI開發建議先事前規劃」。拿到別人寫好的prompt先別急著丟下去跑，先問AI「要做到這個效果，我得準備什麼」，像這次就是要先準備好60幾張表情圖。這個習慣跟模板本身一樣值得學。

Bear的判斷：「好玩耶」。

成品：https://wayturn.dev/?view=portrait

GitHub：https://github.com/Motionsites-AI/claude-skill

lemo-opuscar：把一支動畫的畫風，整理成可以重複用的skill

IG帳號AI平凡人創業學院介紹了lemo-opuscar。貼文說，有人用Claude做了一支六分半的動畫，把98部奧斯卡最佳影片各用一種畫風重畫；貼文強調這支片沒用AI影片模型，全靠Claude寫程式一格一格畫出來。

作者後來把這些風格整理成skill。照貼文的介紹：

• 內含66種影片風格，例如新聞紀錄、衛星紀錄、卡通、浮世繪、蠟筆繪本
• 每種風格都附一支範例影片，先看效果再挑
• 挑一種風格講你的故事，例如「用蠟筆手繪風格，做一支45秒的繪本故事影片」
• Claude會自己寫旁白、配音，逐格把片畫出來
• 安裝方式是打開Claude Code，貼一段話讓它自己裝好

幾個保留要先講清楚。貼文說九月底上GitHub、已有九千多顆星，但貼文本身沒附repo連結，要留言「短片」換懶人包。後來拆解影片時也發現，介紹片裡的數字有三處對不上，成品比較偏示意。所以這張卡值得看的地方是它的做法，數字先打個問號。

更直白地說，這張卡示範的是「把風格抽出來變成skill」。一支片做完，作者沒有停在成品，把每種畫風怎麼畫寫成AI讀得懂的規則，別人挑一種就能套到自己的故事上。

Bear的判斷：「分析動畫入skill」。

這句註記跟今天另一張潘奕兆的卡放在一起看更清楚。潘奕兆說他的AI剪輯師內建「拆片學心法」的功能，搭配剪輯手冊就能訓練出符合自己期待的剪輯風格。MotionSites把動態網頁寫成skill，lemo-opuscar把畫風寫成skill，潘奕兆把剪輯習慣寫成手冊。三者的共通點是：先把喜歡的作品拆開、講清楚，AI才能照著做。照Bear註記的方向，下一步就是挑一支自己欣賞的動畫，讓AI先分析它的節奏、畫風、轉場，再把分析結果整理成skill。

原文：https://www.instagram.com/aistart_up/reel/DfRhujvAKQJ/

今日收集的資源

Emil Kowalski開源的gestures與break-ui

• 連結: https://www.aiposthub.com/emil-gestures-break-ui/
• AI郵報介紹設計工程師Emil Kowalski開源的AI Skills：gestures讓AI照規則做拖曳、滑動、底部抽屜這類手勢互動，break-ui用超長姓名、Emoji、空白欄位、零筆資料、超大數字去測介面，抓出版面溢出和文字截斷；貼文說適合搭配Claude Code、Codex。

AGENTS.md加一句話，減少介面上的AI味

• 連結: https://www.aiposthub.com/agents-md-interface-copy/
• 在專案的AGENTS.md加入「Avoid unnecessary secondary labels and descriptions. Let the layout do the explaining.」，減少AI在每個欄位、按鈕底下塞多餘說明；也提醒要比較修改前後的頁面，確認沒刪過頭。

Jane Street Agent Skills：蘇格拉底式AI家教

• 連結: https://github.com/janestreet/agent_skills
• Threads帳號He & She介紹的開源專案，讓AI一次問一個問題、引導學習者自己推理，附程度診斷、0～5級能力地圖、間隔複習和進度保存；以上是貼文的介紹，repo本身還沒讀。

67js：讓Claude Code自己建3D場景的引擎

• 連結: https://67js.codepawl.com
• 開發者An Xuan開源的WebGL2引擎，提供23個MCP工具，agent可以建場景、改燈光、換材質，渲染出來看過再接著改同一個場景，輸出圖片或MP4，一行npx 67js-mcp就能裝。

Google Gemini Decisions API

• 連結: https://www.threads.com/@google/post/DfnJDdWm4ph
• Google在Google AI Studio推出，背後是Gemini Decision 1模型，拿文字、圖片、音訊、影片、PDF一次對最多1,000個問題做判定，output token不計費；貼文沒寫輸入計價、準確度或實際範例。

潘奕兆的免費AI剪片指南

• 連結: https://madebypan.com/ai-video-guide/
• 主題是讓Claude幫忙剪片；他的AI剪輯師內建「拆片學心法」功能，搭配剪輯手冊可以訓練成自己要的剪輯風格，也有客製化服務。指南頁內容這輪還沒讀。

Claude Design把YouTube影片轉成PPT

• 連結: https://youtu.be/Q8jhXxeFjmg
• 伊森說分享的流程：把YouTube影片連結和字幕檔丟給Claude Design，就能轉成PPT簡報；教學影片還沒看，簡報品質和細節步驟不清楚。

用Opus 5.5做的3D旋轉立體書

• 連結: https://www.threads.com/@zhenzhu600/post/DfoirobBgk5
• Zhen Zhu把愛德華·李爾的童詩《貓頭鷹與小貓》做成可以3D旋轉的立體書互動網頁；用Opus 5.5只有作者自述，沒附連結和prompt，可以參考裡面動詞按鈕、轉書換章這類互動設計。

jiro.build等5個用AI做設計的站

• 連結: https://jiro.build
• jiro.build作者自己列的清單，第一個就是自家產品，號稱有1,400多個用AI建網站的prompt；其餘有recent.design、landdding.com、fontinlogo.com（查品牌用的字型）、60fps.design（手機UI動畫）。

AI設計師常用的5個網站

• 連結: https://www.threads.com/@adsafayet/post/DfmWIAgAJMF
• sceneai.art是AI prompt庫，land-book、60fps.design、recent.design、landdding是落地頁、手機UI動畫與網頁設計的靈感圖庫；只有清單，沒有使用心得。

接案做網站省時的5個資源

• 連結: https://www.threads.com/@jenniesrosse/post/DfnEHHLhSJ8
• promptedsite.com提供互動3D網站的prompt與程式碼，其餘是開源UI元件庫：kokonutui（React）、ui-layouts、shadcn/ui、hyperui（Tailwind）；貼文沒有實測。

MotionSites官網市集

• 連結: https://motionsites.ai/
• 偉騰挑模板的地方，按「Copy prompt」就能拿到做動態網頁的prompt，可以搭配上面那個開源Claude skill一起看。

AI落地頁卡片展示6種

• 連結: https://www.threads.com/@nexora_macauai/post/DfoK07DowqE
• 澳門帳號Nexora AI研究室的示範影片，縮圖看得到編號裝置展示、抽象賣點卡、弧形扇卡、立體環視卡；沒附prompt或程式碼，影片還沒看。

CareerOS的「Claude作品交流」

• 連結: https://www.threads.com/@careeros.cc/post/Dfkxnf0E6SU
• 引用一則Claude剪片的玩笑貼文，附自家「職涯特助」產品宣傳片；沒有做法、工具或prompt，偏廣告，留著當Claude剪片風氣的一個樣本。

lemo-opuscar介紹片

• 連結: https://www.instagram.com/aistart_up/reel/DfRhujvAKQJ/
• AI平凡人創業學院的介紹片，66種影片風格、每種附範例片；貼文沒附repo連結，介紹片數字有幾處對不上，看做法就好。