给 Claude Code 装上一套“技能包”：文章一键变电影感演示视频 | garden-skills

📌 项目地址：ConardLi/garden-skills | ⭐ 10,847 颗星 | 🔧 CSS | 📜 未标注

项目地址：ConardLi/garden-skills | ⭐ 10,847 | 主语言 CSS | 有中英日三语文档

先说清楚这是个什么仓库

garden-skills 收集的是 Agent Skills——装进 Claude Code、Cursor、Codex 这类 AI 编码工具的技能包。装上之后，AI 具备某个具体领域的成熟能力，你不用每次现场写 prompt 描述需求。

仓库里有四个 Skill：

• web-video-presentation：把脚本、文章、课程、产品演示变成可点击驱动的 16:9 网页演示，录屏后即成片
• web-design-engineer：设计 / 前端方向
• gpt-image-2：图像生成 / 提示词
• beautiful-article：任意来源素材转成排版精美的文章

README 的绝大部分篇幅给了第一个，它显然是这个仓库的核心。10,847 个 star 大部分是冲它来的。

这个 Skill 解决的问题

把一篇文章变成视频，传统路径是：写脚本、做 PPT、配音频、录屏、剪辑。每一步都要人上手。直接让 AI “生成一个演示网页”也不行——AI 一口气吐出成品，风格随机，结构没法中途调整，改一个配色等于重写。

web-video-presentation 的做法是把流程拆开，中间设硬检查点：文章先转解说脚本，等你确认；然后选主题，等你确认；然后出视觉大纲，等你确认；实现模式和音频合成（可选）同样各停一次。每个检查点你都能改方向，不是抽盲盒。

产出物是一个脚手架好的 Vite + React + TypeScript 项目，不是一堆静态 HTML。舞台固定 1920×1080，自动缩放到视口，保证录屏画面稳定。

几个我认为做得细的地方

画面和台词同步推进。 演示用一个 (chapter, step) 游标驱动，点击或键盘都行，每个视觉步骤对应一个解说节拍。录屏时你按一下键，画面和台词同步走，不需要后期对轴。

23 套内置主题，每套有自己的设计语言。 编辑排版风、终端风、工程风、瑞士国际主义等等。README 给了例子：creative-voltage 适合创意演讲，blueprint 适合技术架构，swiss-ikb 适合数据报告，chalk-garden 适合科普。主语言标 CSS 不是巧合——这个 Skill 的核心资产就是这批预先设计好的主题样式，AI 不需要现场发挥 CSS。

TTS 可插拔。 音频合成与提供方解耦，内置 MiniMax（mmx-cli）和 OpenAI TTS（curl 调用）两个提供方。README 还提供了接入契约和可直接粘贴的代码片段，覆盖 ElevenLabs、edge-tts、Azure、Google Cloud，以及 macOS 自带的 say 命令。音频是可选项，不配 TTS 也能用。

录制细节有考虑。 进度控制条只在 hover 时出现，录制画面保持干净。

安装

README 列了五种方式：

1. skills CLI（通过 npx 调用）
2. Claude Code plugin marketplace
3. 从 Releases 下载固定版本的 .zip——每个 Skill 有独立版本号，web-video-presentation 目前是 v1.2.2
4. 手动复制到项目目录
5. Git submodule

我手头的 README 摘录没有完整命令原文，具体以仓库 Install 章节为准。

使用前提

需要在支持 Agent Skills 的环境里跑，比如 Claude Code、Cursor、Codex。普通网页聊天界面用不了。想合成音频的话，需要自备 TTS 提供方的账号或 CLI。

仓库用开源许可证发布，有中文文档，接受外部贡献。如果手头有值得做成视频的内容，这个仓库值得装上试一次。