PR演示动图制作

技能简介

pr-demo 是一套用于创建终端演示动图的工作流，将 asciinema 录屏转换为 GIF 或 SVG 格式，方便嵌入 GitHub Pull Request 或技术文档。

能做什么

• 录制终端操作并保存为 .cast 格式
• 将录屏转换为 GitHub 原生支持的 GIF 文件
• 生成体积更小的 SVG 矢量动画（可选）
• 验证演示文件大小、时长和内容安全性

使用说明

安装依赖

# macOS
brew install asciinema
cargo install --git https://github.com/asciinema/agg
npm install -g svg-term-cli  # 可选，用于SVG输出

使用步骤

1. 编写脚本：规划 20-30 秒的演示流程，明确展示的核心功能点
2. 准备环境：设置简单提示符 export PS1='$ '，调整终端尺寸为 100×24
3. 开始录制：asciinema rec demo.cast --cols 100 --rows 24
4. 执行演示：按脚本操作，完成后按 Ctrl+D 结束
5. 转换格式：agg demo.cast demo.gif 或 svg-term --in demo.cast --out demo.svg
6. 验证检查：确认文件小于 5MB，时长在范围内，无敏感信息泄露
7. 嵌入文档：将 GIF 放入 docs/demos/ 目录，用 Markdown 图片语法引用

输入与输出

见下方输入与输出表格。

风险提示

• 录制前务必清理终端环境，避免暴露 API 密钥、本地路径等敏感信息
• .cast 文件以明文 JSON Lines 存储所有输入内容，需单独检查后再分享
• GIF 文件超过 5MB 时 GitHub 可能无法渲染，建议控制时长或改用 SVG
• 编辑 .cast 文件较为复杂，录制出错时建议重新录制而非后期修改

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/paulpete/pr-demo/SKILL.md
来源类型：开源社区技能库