--- title: "Claude Code 影片技能：動態圖像、發表影片和解說影片的免費技能" description: "什麼是面向影片的 Claude Code 技能、怎樣安裝，以及做 Remotion 影片、發表影片、手繪解說和產品介面時該選哪些免費技能。" robots: "index, follow" canonical: "https://potto.ai/zh-Hant/blog/claude-code-skills-for-video" markdown: "https://potto.ai/zh-Hant/blog/claude-code-skills-for-video.md" author: "Potto AI Team" category: "Motion graphics" datePublished: "2026-10-12T00:00:00.000Z" language: "zh-Hant" dateModified: "2026-10-12T10:46:14.270Z" --- # Claude Code 影片技能：動態圖像、發表影片和解說影片的免費技能 面向影片的 Claude Code 技能，是一個帶有 `SKILL.md` 的資料夾，有時還附帶指令稿。它教程式代理如何做出某一類影片：Remotion 發表影片、手繪解說，或一段會動的產品介面。安裝方式是把資料夾放到 `~/.claude/skills/` 或 `.claude/skills/`，也可以把安裝提示貼進代理，然後用日常語言提出你要的影片。按用途來選：用程式碼做出的動態圖像用 Remotion 技能，產品發表用發表影片技能，把一件事講清楚用手繪或解說技能，影片裡要出現真實介面時用產品介面技能。 Potto 把這些技能收在 [代理技能](/skills) 頁上，並且免費提供：登入後複製安裝提示，或下載 ZIP，再在你自己的代理裡執行，用你自己的模型和自己的金鑰。技能由獨立作者編寫，不是 Potto 寫的，也不是 Anthropic 寫的。**Potto 與 Anthropic 沒有官方關係**，本指南中的任何內容都未經 Anthropic 認可。下文的技能細節來自 Potto 技能頁在 2026-10-12 的狀態，技能的定義來自 Anthropic 的文件。 ## 技能是什麼，為什麼適合做影片 ![什麼是代理技能：一個 SKILL.md 資料夾，內含代理會讀的說明、指令稿與範例](https://potto.ai/blog/claude-code-skills-for-video/zh-Hant/what-is-an-agent-skill.webp#1200x800) [Anthropic 的 Claude Code 文件](https://code.claude.com/docs/en/skills) 寫得很直白：「Skills extend what Claude can do. Create a `SKILL.md` file with instructions, and Claude adds it to its toolkit. Claude uses skills when relevant, or you can invoke one directly with `/skill-name`.」技能不是一個自己就能算圖的外掛。它是寫好的指引，加上可選的輔助檔案；當你的請求對上技能描述時，代理會去讀它。 這種設計適合影片，有三個原因。 - **影片程式碼裡的約定很多。** 按影格做的動畫需要時間規則、彈簧參數、安全邊距、字型處理和一條算圖指令。技能把這些存一次，就不必每次對話都再貼一遍。 - **脈絡保持很小。** Anthropic 的 Agent Skills 概述講的是漸進揭露：觸發之前，脈絡裡只有每個技能的名稱和描述；觸發之後才載入 `SKILL.md` 正文，打包檔案只在被引用時才載入。你可以裝很多影片技能，而不必在每次工作階段裡為全部技能付出脈絡的代價。 - **指令稿承擔可重複的部分。** 技能可以附帶指令稿，由代理去執行，於是重複步驟按程式碼執行，而不是每次都讓模型重新發明。 Claude Code 文件還指出，技能遵循開放的 Agent Skills 標準，所以同一個技能可以在 Potto 頁面上列出多個代理：Claude Code、Codex 和 Cursor 都理解 `SKILL.md`。 ## 如何在 Claude Code 裡安裝影片技能 ![在 Claude Code 用三個步驟安裝技能：取得 ZIP、執行安裝、放到 skills 資料夾](https://potto.ai/blog/claude-code-skills-for-video/zh-Hant/install-a-skill-in-claude-code.webp#1200x800) 安裝有三種做法，終點相同：技能目錄裡有一個包含 `SKILL.md` 的資料夾。 ### 做法 1：從 Potto 複製安裝提示 打開某個技能的頁面，登入，選擇 **Copy install prompt**。把提示貼進 Claude Code、Codex 或 Cursor，代理會替你裝好。Potto 上的每個技能都免費，登入是唯一的步驟；不要求綁卡，也不收費。也可以選擇 **Download ZIP**，把檔案留在本機，或在團隊裡分享。 ### 做法 2：把資料夾放到 Claude Code 會查找的位置 Anthropic 的文件列出了這些位置。個人技能放在 `~/.claude/skills//SKILL.md`，這台機器上的所有專案都能用。專案技能放在儲存庫裡的 `.claude/skills//SKILL.md`，可以提交進版本庫，讓團隊共用。如果下載的是 ZIP，解壓後讓技能資料夾（頂層就是 `SKILL.md`）落在上述位置之一。工作階段進行中，Claude Code 會拾取技能資料夾的改動。如果你新建了一個頂層技能目錄，執行 `/reload-skills`。 ### 做法 3：安裝官方 Remotion 技能 [Remotion](https://www.remotion.dev/docs/ai/skills) 自己維護一套在 Remotion 專案裡工作的 Agent Skills，安裝指令是 `npx skills add remotion-dev/skills`。文件點名 Claude Code、Codex、Kimi Code 和 Cursor 可以使用它們。下面若干第三方影片技能寫明可以和官方技能一起用，所以凡是基於 Remotion 的技能，先裝 Remotion 這套是穩妥的底子。 ### 裝好之後怎麼用 當你的請求對上描述時，Claude 可以自動載入技能；你也可以輸入 `/skill-name`，需要的話再帶參數。想確定跑的是哪一個，就按名稱呼叫。 ## 執行任何技能之前先核對三件事 技能是代理會在你的機器上遵照執行的說明和程式碼，所以先讀再跑。Anthropic 的 Agent Skills 概述要求只使用可信來源的技能，並警告：惡意技能可以讓 Claude 呼叫工具或執行程式碼，其行為與它聲稱的用途不符。對第三方技能，這意味著打開 `SKILL.md` 和附帶指令稿，查看有沒有意料之外的網路請求或檔案存取。Potto 的技能頁提供 `SKILL.md` 預覽，方便這第一遍閱讀。 然後用技能頁上的欄位判斷它是否適合你的工作。 1. **Runs in。** 作者列出的代理，例如 Claude Code、Codex 或 Cursor。 2. **Needs。** 技能期望的環境變數。很多影片技能什麼都不需要。有的需要旁白服務或影像模型的金鑰，費用由該服務商向你收取，不是 Potto 收取。 3. **Output 與 generates with。** 技能產出什麼（MP4、可編輯 HTML、字幕、音訊），以及哪一個模型做創作。多數影片技能的答案是「你代理自己的模型」，也就是成本和品質都跟著你在代理裡執行的模型走。 ## 按影片類型看 Claude Code 技能 ![依影片類型分類的 Claude Code 技能：Remotion 影片、發表影片、說明影片與產品畫面](https://potto.ai/blog/claude-code-skills-for-video/zh-Hant/skills-by-video-type.webp#1200x800) 下表按這些技能實際承擔的工作分組。每一項都連到它的頁面，作者、代理、金鑰和產出都列在那裡。細節以 2026-10-12 頁面所示為準，作者更新技能後可能變化。 | 工作 | 技能 | 作者 | 執行於 | 需要 | 產出 | | --- | --- | --- | --- | --- | --- | | Remotion 成片 | Remotion Director | Zane-0x5a | Claude Code、Codex | 無 | MP4 | | Remotion 成片 | Remotion Video Director | BayramAnnakov | Claude Code | 旁白服務金鑰 | MP4 | | Remotion 成片 | Apple Motion | IskakovDamir | Claude Code | 無 | MP4、音訊 | | 發表影片 | Product Launch Video Skill | memex-lab | Claude Code | 無 | MP4 | | 發表影片 | Remotion Ad Video Skill | leosssvip-dot | Claude Code、Codex、Cursor | 無 | MP4、可編輯 HTML、PNG 靜幀 | | 解說、手繪 | Hand Drawn Explainer Video Nikola | hi-nikola | Claude Code、Codex | 旁白服務金鑰 | MP4、可編輯 HTML、SRT 字幕 | | 解說、手繪 | Claude Animation Skill | buildwithhanif | Claude Code | 無 | MP4、音訊 | | 解說、手繪 | Manim Skill | adithya-s-k | Claude Code、Cursor | 無 | 影片 | | 產品介面 | Onboarding Video Generator | gorkem-bwl | Claude Code | 無 | MP4、WebM | | 產品介面 | Guizang Product Video Skill | op7418 | Claude Code、Codex | 無 | MP4、可編輯 HTML、音訊 | | 產品介面 | Appshot | trunghaiy | Claude Code、Codex | 無 | MP4 | ### 面向 Remotion 成片的技能 Remotion 把影片寫成 React 元件，一幀一幀地畫，所以一個懂 Remotion 約定的技能，能讓代理少去猜時間和版面。先用上面的官方技能打底，再按某一種工作風格加上下面其中一個。 **[Remotion Director](/skills/remotion-director)**，作者 Zane-0x5a，可在 Claude Code 和 Codex 中執行，不需要額外金鑰，產出 MP4。頁面描述的是一條「先設計再製作」的流程：從一份簡報出發，先列出幾個在想法層面上就不同的方向，每個方向先算出一版完整初剪，你挑出最有希望的底子，再對選中的那一版跑評審迴圈。預設畫幅是直式 1080×1920，橫式和方形也支援。適合想先看幾個方案再定方向的人，並接受設計階段會多用一些模型用量。 **[Remotion Video Director](/skills/remotion-video-director)**，作者 BayramAnnakov，在 Claude Code 中執行，產出 MP4。它是一份互動式指引，從策略概念走到算圖完成的影片：專家推敲、情境設計、製作與複查。描述寫明它可以和官方的 `remotion-dev/skills` 一起用。它需要一個旁白服務的 API 金鑰，也就是你自己開通並付費的那個。 **[Apple Motion](/skills/apple-motion)**，作者 IskakovDamir，在 Claude Code 中執行，產出 MP4 和音訊。它按短而輕快的回顧片風格寫 Remotion 影片，包含節奏、動態字、彈簧與緩動、轉場、裝置和介面鏡頭、音樂以及響度設定。作者說這些數字來自對六支回顧片的逐幀測量。選它是為了主題演講回顧那種節奏，不是中性的統一風格。 ### 面向發表和上線影片的技能 發表影片的形狀比較穩定：一個鉤子、產品本身、三到四個功能、收尾。這一組技能把這個結構寫進了說明。 **[Product Launch Video Skill](/skills/product-launch-video-skill)**，作者 memex-lab，在 Claude Code 中執行，產出 MP4。它用 Remotion 設計和製作衝擊力強的發表影片，描述裡寫明可用於產品發表影片、宣傳片、示範影片、功能公告和品牌揭曉，也包括分鏡。 **[Remotion Ad Video Skill](/skills/remotion-ad-video-skill)**，作者 leosssvip-dot，可在 Claude Code、Codex 和 Cursor 中執行。它把產品連結、應用商店列表、到達頁或產品簡報做成廣告影片，專案可以是 Remotion 或 HyperFrames。頁面列出的產出是 MP4、可編輯 HTML 和 PNG 靜幀，並寫到分鏡、算圖檢查和交接素材。起點是一個頁面或一條商店列表、而不是一份空白簡報時，選它。 先定交付畫幅再選技能：給到達頁用的發表影片通常是橫式，同一條故事放到社群動態裡則是直式。在簡報裡寫明，因為技能猜不到影片會在哪裡播放。 ### 面向解說和手繪風格的技能 解說靠清楚的順序和旁白，多於靠場面。手繪風格再加一層視覺簽名：筆觸、紙、墨。 **[Hand Drawn Explainer Video Nikola](/skills/hand-drawn-explainer-video-nikola)**，作者 hi-nikola，可在 Claude Code 和 Codex 中執行，產出 MP4、可編輯 HTML 和 SRT 字幕。它做的是中文「邊講邊畫」的白板解說，並提供兩條路線：一筆一筆的白板動畫，或用 HTML 和 SVG 做流程卡片和示意圖的程式化路線。它的預設旁白服務需要 API 金鑰，描述還寫明你的機器上需要 FFmpeg、Node.js 和瀏覽器。它以中文為先，拿去做其他語言之前先看頁面。 **[Claude Animation Skill](/skills/claude-animation-skill)**，作者 buildwithhanif，在 Claude Code 中執行，不需要額外金鑰，產出 MP4 和音訊。它完全用 JavaScript 做短的手繪 2D 動畫，故事書或有肌理的編輯風格，帶紙紋和排線，用 node canvas 和 ffmpeg 逐幀算圖，並合成聲音。描述把邊界寫得很明確：它不是用來做介面微互動、投影片或口播剪輯的。 **[Manim Skill](/skills/manim-skill)**，作者 adithya-s-k，可在 Claude Code 和 Cursor 中執行，是面向 Manim 的三個技能包。Manim 是 3Blue1Brown 風格數學動畫背後的函式庫。解說的是方程式、圖形或幾何、需要一張逐步長出來的圖來承載內容時，選它。講的是產品或流程時，Remotion 或手繪技能更貼近。 無論選哪一個，一支 [解說影片](/zh-Hant/explainer-video) 能立住，靠的是一場一個意思、先寫旁白再做畫面，以及一個告訴觀眾下一步做什麼的收尾。 ### 面向產品畫面和介面影片的技能 影片要展示軟體時，難的是讓真實介面動起來，又不要看起來像一段螢幕錄製。 **[Onboarding Video Generator](/skills/onboarding-video-generator)**，作者 gorkem-bwl，在 Claude Code 中執行，產出 MP4 和 WebM。它用 Remotion 做短的導引影片，動的是介面裡被單獨切出來的部分：你提供的截圖上的裁切元件，而不是整頁。預設產出是欄寬尺寸，適合放在行銷頁雙欄區塊裡文案的旁邊。選它來做嵌在頁面裡的功能片段。 **[Guizang Product Video Skill](/skills/guizang-product-video-skill)**，作者 op7418，可在 Claude Code 和 Codex 中執行，產出 MP4、可編輯 HTML 和音訊。它從產品自己的程式碼儲存庫生成一條產品更新宣傳片：讀取最近的提交，掛上真實的介面元件，用 GSAP 做場景分鏡動畫，創作原創音樂和音效，再用 React、esbuild、Playwright 和 FFmpeg 算圖。適合由擁有程式碼的團隊來做更新日誌影片。 **[Appshot](/skills/appshot)**，作者 trunghaiy，可在 Claude Code 和 Codex 中執行，產出 MP4。它用一份 TypeScript 設定，在 Remotion、React 和 Tailwind 上製作 App Store 與 Google Play 的預覽影片和截圖，並以四個技能組成的套件交付。目的地是商店列表時用它。 ### 關於 Taste Skill 這類設計技能 有些流行技能並不是影片技能，但能改善代理做出來的外觀。Taste Skill 由 Leonxlnx 以 MIT 授權發布在 GitHub 上，是一組用來改進 AI 做出的介面的 Agent Skills，涵蓋版面、字型、動效和間距。它沒有影片內容，所以把它當作同伴：如果影片裡的介面是代理設計的，可以先用設計技能把畫面品質提上去，再讓影片技能去讓它們動起來。儲存庫列在文末來源裡；和任何技能一樣，先讀它的 `SKILL.md`。 ## 第一次跑通：從技能到算圖完成的影片 這張清單上的多數技能，步驟是一樣的。 1. **裝好底座。** 如果技能使用 Remotion，用 `npx skills add remotion-dev/skills` 加上官方 Remotion 技能，並確認已安裝 Node.js。有的技能還需要 FFmpeg 或瀏覽器，技能頁或 `SKILL.md` 會寫明。 2. **安裝技能。** 從它的 Potto 頁面複製安裝提示，貼進你的代理；或把解壓後的資料夾放到 `~/.claude/skills/`。 3. **設定金鑰。** 如果頁面在 Needs 下列出了金鑰，按技能頁的說明，在執行前把它設進代理的環境。 4. **寫簡報。** 同一組六項對每個技能都適用：目的、受眾、在哪裡播放以及多長、必須出現的事實、意思的順序、最後一幀。[Claude Motion 的替代方案](/zh-Hant/blog/claude-motion-alternative) 裡的簡報逐項說明了這些。 5. **執行技能並複查。** 按名稱呼叫，在代理寫程式碼之前先讀它提出的分鏡，再核准或修改。然後預覽專案並算圖。 一份能跨發表類技能使用的簡報可以長這樣： ``` Use the product-launch-video skill. Make a 30-second landscape launch video for a budgeting app. Audience: freelancers. Three features in this order: invoice reminders, expense tagging, tax summary. Facts that must appear: "12,000 freelancers" and "free for the first 3 invoices". Close on the app name and the line "Get paid on time". Show the storyboard before writing code. ``` 簡報給出了時長、比例、受眾、順序和確切數字。技能能改善結構和手藝，但無法知道你沒有提供的事實。 ## 技能做不到的事 - **它們不在雲端算圖。** 代理在你的電腦上建專案，算圖也發生在那裡，用的是技能點名的執行環境。 - **它們不保證品質。** 產出取決於你執行的模型、技能作者和你的簡報。 - **費用就是你的代理費用。** Potto 對技能不收費，但你的代理方案或 API 用量仍然適用，技能要求的旁白金鑰也一樣。 - **它們留給你一個要維護的專案。** 如果你想要原始碼，這是好處；如果你只要一支做完的影片，這是負擔。 想看看這類作品長什麼樣，可以瀏覽 Potto 上的 [動態圖像影片](/videos) 作品集。這些片子由獨立創作者用 Claude Opus 5.5 等工具製作，每一支都署名原作者，沒有任何一支是 Potto 生成的。 ## 如果你不想用代理或程式碼 ![代理技能與無程式碼影片工具並排比較](https://potto.ai/blog/claude-code-skills-for-video/zh-Hant/skill-or-no-code-video-tool.webp#1200x800) 技能適合已經在終端機或程式碼編輯器裡工作、並且想擁有專案的人。如果你只要一支做完的影片，無程式碼的路線更簡單，Potto 在技能庫旁邊就提供了一條。這是和上面這些技能分開的產品，並不使用它們。 Potto 是面向帶旁白動態圖像的 [AI 影片生成器](/zh-Hant/ai-video-generator)。你描述一支影片、貼上一個公開網頁連結，或附上文件，Potto 會先做出你可以編輯的分鏡，然後再匯出。Claude Opus 5.5 撰寫大綱、逐場分鏡和旁白，Potto 用自己的 Remotion 場景元件算圖。你不寫程式碼，也看不到程式碼。[Claude 影片](/zh-Hant/claude-video) 頁說明了這層關係怎麼工作，[AI Motion Graphics](/zh-Hant/ai-motion-graphics) 是你可以從一段描述開始做影片的頁面。 你會得到： - **11 種場景類型**（鉤子、標題、截圖、功能、清單、數據、對比、圖表、插畫、引語，以及收尾行動號召），以及 **12 種內建風格**，外加用於顏色、字型和你的標誌的品牌套件。 - **32 種語言的旁白**，或自動偵測語言；字幕按句子顯示；配樂來自 Potto 的音樂庫，是原創音軌。 - **時長** 為 15、30、45、60 或 90 秒，匯出為 1080p MP4，每秒 30 幀，比例為 16:9、9:16 或 1:1。 - **輸入** 可以是一段描述、一個公開連結，或文件（PDF、PPTX 或 DOCX，每個不超過 20 MB，最多 8 個附件），以及產品截圖等圖片。[產品示範影片](/zh-Hant/product-demo-video) 頁把截圖變成場景。 生成和瀏覽器預覽不使用點數；只有匯出才使用，目前價格在 [價格](/zh-Hant/pricing) 頁。 它不做的事：不把影片背後的程式碼交給你，不生成實拍畫面或數位主持人，不編輯你已經有的影片，也沒有公開 API。如果你需要原始碼、自訂視覺風格或自動化流程，用技能。如果你需要從已有材料做出帶旁白的解說或發表影片，並且不想維護程式碼庫，用 Potto。本指南不對兩者排名；它們回答的是不同的需要。 ## 常見問題 ### 面向影片的 Claude Code 技能是什麼？ 面向影片的 Claude Code 技能，是一個帶有 `SKILL.md`、有時還附帶指令稿的資料夾，用來教程式代理如何做出某一類影片，例如 Remotion 發表影片或手繪解說。當你的請求對上它的描述，或你輸入 `/skill-name` 時，Claude 會載入這個技能。代理仍然在你的電腦上編寫並算圖專案。 ### 怎樣安裝一個 Claude Code 技能？ 把技能資料夾（裡面有 `SKILL.md`）放到 `~/.claude/skills//`，供你的全部專案使用；或放到 `.claude/skills//`，只給一個儲存庫用。在 Potto 上，登入後用 Copy install prompt，讓你的代理去安裝，或下載 ZIP。工作階段進行中，Claude Code 會拾取改動；新建了頂層技能目錄時用 `/reload-skills`。 ### Potto 上的技能免費嗎？ 是的。Potto 上的每個技能都免費：登入，然後複製安裝提示或下載 ZIP。Potto 對此不收費。技能在你自己的代理裡、用你自己的模型執行，所以你的代理方案或 API 用量仍然適用；技能在 Needs 下列出的金鑰，例如旁白金鑰，用的是你在該服務商那裡持有的帳戶。 ### 技能是誰寫的，是 Anthropic 做的嗎？ 技能由獨立作者編寫，每個頁面都寫了作者。它們不是 Anthropic 做的，Potto 與 Anthropic 也沒有官方關係。Potto 只是收集並提供它們。因為它們是第三方程式碼，執行之前先打開 `SKILL.md` 和任何指令稿，這與 Anthropic 文件對「不是你自己建立的來源」所給的建議一致。 ### 做產品發表影片，該從哪個 Claude Code 技能開始？ 如果你想從一份簡報做出 Remotion 發表影片，從 Product Launch Video Skill 開始：它不需要額外金鑰，並在 Claude Code 中執行。起點是到達頁或商店列表時，選 Remotion Ad Video Skill；影片應該使用你自己儲存庫裡的真實產品介面時，選 Guizang Product Video Skill。 ### Potto 和 Claude Code 是同一個東西嗎？ 不是。Claude Code 是 Anthropic 的程式代理。Potto 是獨立產品，與 Anthropic 沒有官方關係。Potto 提供一個免費的第三方技能庫，這些技能在你自己的代理裡執行；它還有自己的影片生成器，用 Claude Opus 5.5 撰寫大綱、分鏡和旁白，用 Remotion 算圖 MP4。 ## 來源 全部來源於 2026-10-12 核對。 - Anthropic，Claude Code 文件，[Extend Claude with skills](https://code.claude.com/docs/en/skills)。用於技能的定義、技能存放位置、自動呼叫與 `/skill-name` 呼叫、`/reload-skills`、輔助檔案，以及 Claude Code 技能遵循 Agent Skills 標準這一說明。 - Anthropic，[Agent Skills 概述](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview)。用於漸進揭露（中繼資料、說明、資源）、`SKILL.md` 結構，以及「使用可信來源的技能並加以審查」的安全指引。 - Remotion 文件，[Agent Skills](https://www.remotion.dev/docs/ai/skills)。用於官方技能是什麼、支援的代理，以及指令 `npx skills add remotion-dev/skills`。 - Potto 的技能頁，以及上文連結的各個技能詳情頁。用於每個技能的作者、代理、所需金鑰、產出和描述，以及安裝與下載步驟。細節以 2026-10-12 所示為準。 - GitHub，[Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill)。用於把 Taste Skill 描述為改進 AI 所做介面的 Agent Skills，以及它的 MIT 授權。