1. 终端录屏转 GIF 这件事为什么值得让 Claude 自己写 Skills如果你经常写技术文档、录 demo、做教程一定遇到过这个尴尬终端操作明明很流畅但截图是静态的录屏又太重发到博客或群里没人愿意点开一个 30MB 的 mp4。GIF 才是终端演示的最优解——体积小、自动循环、贴到哪都能播。问题是手动录 GIF 太麻烦要调窗口大小、控制打字节奏、处理光标闪烁录完还得压缩。Claude Code 的 Skills 机制刚好能解决这类重复劳动。简单说Skills 就是给 Claude 准备的「工作手册 工具箱」SKILL.md告诉它怎么做scripts/放可执行脚本references/存参考资料assets/放模板素材。Claude 不会一次性把所有技能塞进上下文而是先看技能简介判断该用哪个确定后再读手册、按需调用脚本。这种分层加载让它可以挂载几十个技能而不混乱。这篇要做的是一件更「套娃」的事不只用一个现成的录屏 Skill而是让 Claude 依据终端输出自己生成一个可复用的录屏转 GIF Skill。跑通之后你下次只要说一句「把这个命令录成 GIF」它就能自动完成。适合谁有 Claude Code 环境、想让终端演示自动化的开发者以及想理解 Skills 编写套路的同学。下面从环境准备到验证闭环一步步来。2. 前置准备TaoToken 接入 Claude Code 与 Skills 目录骨架Claude Code 需要一个可用的模型接入点。我用的是 TaoToken 的 API它兼容 Anthropic 接口格式配置起来比较直接。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。先去控制台拿一个 Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。拿到 Key 之后Claude Code 通过环境变量读取接入信息。在~/.claude/settings.json里写入下面这段配置把ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址ANTHROPIC_AUTH_TOKEN换成你自己的 Key{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-5-20250929 } }注意ANTHROPIC_BASE_URL只写到/api不要在后面拼/v1Claude Code 会自己补路径。写错了会报 404。Skills 的目录结构建议这样组织放在项目根目录下的.claude/skills/.claude/ └── skills/ └── terminal-gif-recorder/ ├── SKILL.md # 工作手册描述技能用途和调用方式 ├── scripts/ │ └── record.sh # 录屏转 GIF 的执行脚本 ├── references/ │ └── vhs-syntax.md # VHS 语法参考 └── assets/ └── theme.json # 终端主题配置SKILL.md是核心它的开头必须有 YAML frontmatter声明技能名和描述Claude 靠这段描述判断什么时候该加载这个技能--- name: terminal-gif-recorder description: 将终端命令录制为 GIF 动画。当用户要求录制终端演示、生成 CLI 动画、把命令输出转成 GIF 时使用。 --- # 终端录屏转 GIF ## 使用方式 调用 scripts/record.sh传入要录制的命令和输出文件名。 ## 参数 - -c: 要录制的命令可重复 - -o: 输出 GIF 路径 - --title: 动画标题这套骨架搭好Claude 就能识别并调用它。接下来让 Claude 自己把这个技能补全。3. 可复制配置让 Claude 依据终端输出生成录屏 Skill这一步是「套娃」的关键——我们不手写脚本而是让 Claude 读终端输出、自己生成脚本。先安装官方的 skill-creator它是「生成技能的技能」/plugin marketplace add daymade/claude-code-skills /plugin marketplace install daymade/claude-code-skills#skill-creator装好后在 Claude Code 终端里用自然语言下达指令。下面这段可以直接复制注意把技能名和需求换成你自己的在 ~/my-skills 目录创建一个名为 terminal-gif-recorder 的新技能。 这个技能的作用是接收一段终端命令用 VHS 录制执行过程并输出 GIF。 要求脚本支持 -c 传入命令、-o 指定输出文件、--title 设置标题。 生成后验证技能结构是否完整。Claude 会先读 skill-creator 的手册然后生成SKILL.md、scripts/record.sh等文件。生成的脚本大致长这样核心是调用 VHS 的 tape 文件#!/usr/bin/env bash set -euo pipefail OUTPUTdemo.gif TITLETerminal Demo COMMANDS() while getopts c:o:-: opt; do case $opt in c) COMMANDS($OPTARG) ;; o) OUTPUT$OPTARG ;; -) case $OPTARG in title) TITLE${!OPTIND}; OPTIND$((OPTIND1)) ;; esac ;; esac done TAPE$(mktemp /tmp/demo-XXXX.tape) { echo Output $OUTPUT echo Set FontSize 18 echo Set Width 900 echo Set Height 500 echo Set TypingSpeed 50ms echo Type \# $TITLE\ echo Enter echo Sleep 500ms for cmd in ${COMMANDS[]}; do echo Type \$cmd\ echo Enter echo Sleep 1s done } $TAPE vhs $TAPE rm -f $TAPE echo 已生成: $OUTPUT如果终端提示VHS is not installed!直接让 Claude 帮你装。它会根据系统判断用 brew 还是 apt这个过程大概几分钟。装完后vhs --version能输出版本号就说明就绪。4. 验证请求跑通一次终端录屏转 GIF 的完整闭环技能生成后先验证结构再实际录制。在 Claude Code 里输入验证我在 ~/my-skills/terminal-gif-recorder 的技能Claude 会检查 frontmatter、脚本权限、依赖是否齐全。通过后直接用它录一段真实命令。下面这条录制 lodash 安装和使用的演示~/my-skills/terminal-gif-recorder/scripts/record.sh \ -c npm install lodash \ -c node -e const _ require(\lodash\); console.log(_.chunk([1,2,3,4], 2)) \ -o lodash-demo.gif \ --title lodash 安装演示执行后终端会依次「打字」执行两条命令最后在当前目录生成lodash-demo.gif。用ls -lh lodash-demo.gif看下体积通常几百 KB 到 1MB 之间。打开 GIF应该能看到标题、命令逐字输入、输出结果完整呈现。如果想让 Claude 直接根据你刚才的终端输出生成技能可以这样下指令读取我上一条命令的终端输出把它封装成一个可复用的录屏技能 放到 ~/my-skills 下技能名用我这次的操作命名。这就是「AI 自学成才」的闭环你操作一次Claude 观察输出生成技能下次直接复用。我试过把 Chrome 插件图标裁剪的流程录进去之后每次只要说「用那个技能裁图标」它就能自动跑完三种尺寸。5. 本篇常见错排查VHS 报错、GIF 空白与技能不加载报错一VHS is not installed!脚本找不到 vhs 命令。让 Claude 执行安装或手动brew install vhsmacOS/sudo apt install vhs部分 Linux 发行版需先加 tap。装完确认which vhs有输出。报错二GIF 生成但内容是空白或只有标题多半是TypingSpeed太快命令还没渲染完就截帧了。在 tape 文件里把Set TypingSpeed 50ms调大到80ms并在每条命令后加Sleep 1s。另外确认Set Width和Set Height足够容纳输出太窄会截断。报错三技能不加载Claude 说找不到检查SKILL.md的 frontmatter 是否有name和description且 description 里包含触发关键词如「录屏」「GIF」「终端演示」。目录层级必须是.claude/skills/技能名/SKILL.md多一层或少一层都不会被扫描到。报错四ANTHROPIC_BASE_URL配置后仍报连接失败确认 URL 结尾是/api而不是/api/v1Key 没有多余空格。改完settings.json后要重启 Claude Code 会话环境变量不会热加载。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有完整的字段说明。报错五脚本权限不足record.sh需要可执行权限跑一次chmod x ~/my-skills/terminal-gif-recorder/scripts/record.sh。Claude 生成的文件有时默认不带执行位。6. 把录屏技能接进你的日常工作流跑通一次之后这个技能就能反复用了。做技术分享前把要演示的命令列出来一条record.sh批量生成 GIF写文档时让 Claude 直接调用技能录制省掉手动录屏和压缩。如果你经常做长期编码或 Agent 类任务可以考虑 TaoToken 的 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 适合高频调用场景。想先验证模型对话效果用 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 试几句也行。真正省事的地方在于复用技能写一次之后用自然语言触发即可。你可以照着这个套路把财务分析、文档转换、图标查找这些重复流程都封装成 Skills。Claude Code 的插件市场里还有markdown-tools、llm-icon-finder等现成技能安装命令是/plugin marketplace install daymade/claude-code-skills#技能名作者更新后用git pull origin main拉取即可。先从录屏这一个跑通再慢慢扩展你自己的技能库。