demo-changes
自动生成带AI旁白的PR变更演示视频
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：demo-changes。 它的用途是：自动生成带AI旁白的PR变更演示视频 完整的 Skill 内容见：https://321skill.com/skills/demo-changes/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'/demo --output=新登录页演示'，它会分析你最近关于登录页面的代码改动，自动启动浏览器，模拟用户登录流程并录制屏幕，最后生成一个带有AI解说、名为'新登录页演示.mp4'的视频文件，清晰展示新功能。
介绍
demo-changes 是一个 Claude Code 技能，旨在解决开发者在提交 Pull Request (PR) 时，向非技术团队成员或评审者直观展示界面变更效果的难题。传统方式依赖文字描述或截图，难以清晰传达交互流程和视觉变化。
使用时，只需在开发服务器运行状态下，在 Claude Code 中执行 /demo 命令。该技能会分析你的 Git 差异，自动生成一个 Playwright 测试脚本，录制屏幕操作过程，并利用 AI 生成同步的语音旁白，最终合成一个完整的演示视频。
这个技能非常适合需要频繁进行界面迭代的前端、全栈开发者，以及产品经理、项目经理等角色。他们可以利用生成的视频，高效地向客户、设计师或管理层汇报工作进展，或在团队内部进行代码评审和知识分享。
使用前请确保已安装 Node.js 18+、pnpm，并推荐安装 ffmpeg 以获得最佳视频合成效果。如果需要 AI 旁白，还需配置 ElevenLabs API 密钥。注意，它主要适用于展示 UI/前端相关的变更，对于纯后端逻辑的改动，生成的演示内容可能不够直观。
核心特点
与仅生成代码或文档的同类技能不同，它通过自动化录制和AI旁白，将代码变更直接转化为生动、易懂的视频演示，极大降低了制作技术演示视频的门槛。
注意事项
不适合展示纯后端逻辑、算法或底层架构等非可视化代码的变更。
常见问题
如何只演示已暂存的变更？
使用命令 `/demo --staged` 即可。
生成的视频清晰度可以调整吗？
可以，在 config.json 中修改 videoDimensions 字段的 width 和 height 值。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/demo-changes/raw/index.md 读取 demo-changes 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/demo-changes/raw/index.md（查看排版版本）