--- title: "Claude Code 视频技能：动态图形、发布片和讲解视频的免费技能" description: "什么是面向视频的 Claude Code 技能、怎样安装，以及做 Remotion 视频、发布片、手绘讲解和产品界面时该选哪些免费技能。" robots: "index, follow" canonical: "https://potto.ai/zh/blog/claude-code-skills-for-video" markdown: "https://potto.ai/zh/blog/claude-code-skills-for-video.md" author: "Potto AI Team" category: "Motion graphics" datePublished: "2026-10-12T00:00:00.000Z" language: "zh-CN" dateModified: "2026-10-12T10:46:14.296Z" --- # 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/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/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/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/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/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/skill-or-no-code-video-tool.webp#1200x800) 技能适合已经在终端或代码编辑器里工作、并且想拥有项目的人。如果你只要一支做完的视频，无代码的路线更简单，Potto 在技能库旁边就提供了一条。这是和上面这些技能分开的产品，并不使用它们。 Potto 是面向带旁白动态图形的 [AI 视频生成器](/zh/ai-video-generator)。你描述一支视频、粘贴一个公开网页链接，或附上文档，Potto 会先做出你可以编辑的分镜，然后再导出。Claude Opus 5.5 撰写大纲、逐场分镜和旁白，Potto 用自己的 Remotion 场景组件渲染视频。你不写代码，也看不到代码。[Claude 视频](/zh/claude-video) 页说明了这层关系怎么工作，[AI 动态图形](/zh/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/product-demo-video) 页把截图变成场景。 生成和浏览器预览不使用积分；只有导出才使用，当前价格在 [价格](/zh/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 许可。