terminal-screenshots

使用 VHS 工具生成终端截图、GIF 和视频，用于文档与演示。

已扫描

项目

内容

适合谁

开发者撰写技术文档、教育者制作教学视频

不适合谁

无命令行使用经验的用户、需要即时交互式操作的场景

国内可用性

需网络配置。可能需要网络配置或第三方服务可访问。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @ricardodantas/terminal-screenshots

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

使用 VHS 生成终端截图与录制

使用 [VHS](https://github.com/charmbracelet/vhs) 从 Charmbracelet 生成终端截图和动画 GIF/视频。

何时使用此技能

为文档创建终端截图
录制 CLI 演示的动画 GIF
为命令行工具制作视频教程
生成一致且可复现的终端视觉效果
通过黄金文件对比进行集成测试

前置条件

检查安装

# 检查 vhs 是否已安装
which vhs && vhs --version

# 检查依赖项
which ttyd && which ffmpeg

安装方法

推荐：Homebrew（macOS/Linux）

brew install vhs

此方式会安装 VHS 及所有必需依赖（ttyd、ffmpeg）。

其他方法：

# Fedora/RHEL
echo '[charm]
name=Charm
baseurl=https://repo.charm.sh/yum/
enabled=1
gpgcheck=1
gpgkey=https://repo.charm.sh/yum/gpg.key' | sudo tee /etc/yum.repos.d/charm.repo
sudo dnf install vhs ffmpeg
# 同时安装 ttyd：https://github.com/tsl0922/ttyd/releases

# Arch Linux
pacman -S vhs

# Docker（包含所有依赖）
docker run --rm -v $PWD:/vhs ghcr.io/charmbracelet/vhs <cassette>.tape

基本用法

1. 创建一个 Tape 文件

vhs new demo.tape

2. 编辑 Tape 文件

Tape 文件是描述要输入内容及捕获动作的简单脚本。

3. 运行 VHS

vhs demo.tape

Tape 文件语法

输出格式

Output demo.gif          # 动画 GIF
Output demo.mp4          # 视频文件
Output demo.webm         # WebM 视频
Output frames/           # PNG 序列（目录）

可在同一 tape 文件中指定多个输出。

设置项（必须位于文件顶部）

# 终端尺寸
Set Width 1200
Set Height 600

# 字体设置
Set FontSize 22
Set FontFamily "JetBrains Mono"

# 外观
Set Theme "Catppuccin Mocha"
Set Padding 20
Set Margin 20
Set MarginFill "#1e1e2e"
Set BorderRadius 10
Set WindowBar Colorful

# 行为
Set Shell "bash"
Set TypingSpeed 50ms
Set Framerate 30
Set CursorBlink false

常用主题

运行 vhs themes 查看所有可用主题。热门主题包括：

Catppuccin Mocha、Catppuccin Frappe
Dracula
Tokyo Night
Nord
One Dark

命令列表

命令	说明	示例
`Type "text"`	输入字符	`Type "echo hello"`
`Type@500ms "text"`	缓慢输入	`Type@500ms "important"`
`Enter`	按下回车键	`Enter`
`Enter 2`	连续按两次回车	`Enter 2`
`Sleep 1s`	等待指定时长	`Sleep 500ms`
`Backspace`	删除字符	`Backspace 5`
`Tab`	按 Tab 键	`Tab`
`Space`	按空格键	`Space`
`Ctrl+C`	控制序列	`Ctrl+L`
`Up/Down/Left/Right`	方向键	`Up 3`
`Hide`	停止录制帧	`Hide`
`Show`	恢复录制	`Show`
`Screenshot file.png`	捕获当前帧	`Screenshot out.png`
`Wait /regex/`	等待特定文本出现	`Wait /\$\s*$/`
`Env KEY "value"`	设置环境变量	`Env PS1 "$ "`
`Require program`	若程序缺失则失败	`Require git`
`Source file.tape`	引入另一个 tape 文件	`Source setup.tape`

引号转义

使用反引号来转义引号：

Type `echo "hello world"`
Type `VAR='value'`

示例

静态截图

Output screenshot.png

Set Width 800
Set Height 400
Set FontSize 18
Set Theme "Catppuccin Mocha"
Set Padding 20

# 隐藏初始化过程
Hide
Type "clear"
Enter
Show

# 实际内容
Type "ls -la"
Enter
Sleep 500ms

Screenshot screenshot.png

动画演示 GIF

Output demo.gif

Set Width 1000
Set Height 500
Set FontSize 20
Set Theme "Dracula"
Set TypingSpeed 50ms
Set Padding 20
Set WindowBar Colorful

# 清理开始状态
Hide
Type "clear"
Enter
Show

# 演示流程
Type "echo 'Hello from VHS!'"
Sleep 300ms
Enter
Sleep 1s

Type "date"
Enter
Sleep 1s

Type "echo 'That was easy!'"
Enter
Sleep 2s

带干净提示符的 MP4 视频

Output tutorial.mp4

Set Width 1200
Set Height 600
Set FontSize 24
Set Theme "Tokyo Night"
Set Shell "bash"
Set Framerate 30

# 设置简洁的提示符
Hide
Env PS1 "$ "
Type "clear"
Enter
Show

Type "# Welcome to the tutorial"
Enter
Sleep 1s

Type "git status"
Enter
Sleep 2s

Type "git log --oneline -5"
Enter
Sleep 3s

生成清晰输出的技巧

1. 隐藏设置/清理步骤

# 设置阶段（隐藏）
Hide
Type "cd ~/project && clear"
Enter
Show

# 演示内容在此...

# 清理阶段（隐藏）
Hide
Type "cd - && rm temp-files"
Enter

2. 使用简单提示符

Hide
Env PS1 "$ "
Type "clear"
Enter
Show

3. 控制时间节奏

大量使用 Sleep 提高可读性
输入后使用 Sleep 500ms，再按 Enter
命令输出后使用 Sleep 1s 到 2s
最终帧以 Sleep 2s 或更长时间结束

4. 调整打字速度

# 默认速度用于设置
Set TypingSpeed 10ms

# 重要部分放慢速度
Type@100ms "Important command here"

5. 等待输出完成

Type "npm install"
Enter
Wait /added \d+ packages/  # 等待安装完成消息
Sleep 1s

6. 在关键节点截图

Type "make build"
Enter
Wait /Build complete/
Screenshot build-success.png

文档工作流

规划你的演示流程
创建一个 .tape 文件并配置参数
测试：使用 vhs demo.tape 生成输出
迭代调整：修改时间、尺寸、主题等
提交：将 .tape 文件和生成的输出一并提交到仓库

录制真实会话

你可以录制终端操作并生成 tape 文件：

vhs record > session.tape

然后编辑生成的 tape 文件以清理内容。

文件参考

本技能目录中的示例 tape 文件：

basic-screenshot.tape - 简单静态截图
demo-recording.tape - 动画 GIF 演示

[VHS GitHub](https://github.com/charmbracelet/vhs)
[VHS 主题](https://github.com/charmbracelet/vhs/blob/main/THEMES.md)
[示例录像带](https://github.com/charmbracelet/vhs/tree/main/examples)

@ricardodantas

已收录 1 个 Skill