AI 遥控代码截图，录制终端动画，定制自动化批量制图流程，解放你的双手～

👇 今日要闻

打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。

技术分享的常见需求之一，就是 DIY 精美主题的代码截图，或录制炫酷的 gif 动图，比如终端命令动画。

大部分在线网站工具、IDE 插件（比如 VS Code 扩展市场）、录屏工具，基本能解决这种创作需求，但都不够优雅和高效。

最让我头大的主要有几个执行痛点：

制作流程手动体力活较多，自己复制粘贴，自己使用插件，逐个点击生成代码截图
一篇 Markdown 文章有多个代码截图，就需要重复多次枯燥的实在是手动操作
视频软件录制终端命令动画操作流程较为繁琐

随着 AI 工具的流行，我尝试使用 Trae Solo 移动端 来联动桌面应用，只需聊天或语音输入，就能遥控 AI 来让流程自动化和批量制图，既符合人体工程学，又明显提升生产效率。一起来看看基本流程吧。

👉 编程式 DIY 代码截图

GitHub 上有很多代码截图库和终端录制工具，包括但不限于本文使用的 snipgrapher 和 asciinema 等，我们先使用它们把流程打通，后续可以再测评其他工具，按需把它们替换为更符合你个人喜好的工具。

首先在 Trae 中国官网下载 Trae Solo 移动端和桌面应用。这样做有两个好处，一个是后续的自动化流程通过 AI 编程来自动执行脚本即可，而这种编程式方案可以作为其他自动化流程的子流程或子脚本，一旦配置成功就能在其他场景下反复利用。另一个是移动端可以解除我们的空间限制和，哪怕你是在蹲坑也能远程遥控电脑共享操作，充分压榨硬件的灵活性和算力。

第一步是使用 npm 安装代码截图库，文档会根据你的操作系统给你对应的安装命令或压缩包，之后可以提问 Trae 当前文件夹是否已经成功安装，如果没有，也可以委托 Trae 联网搜索帮你安装。

举个栗子，在 Trae 移动端的对话框输入，"使用 npm 帮我在本地文件夹安装 snipgrapher 第三方库"，就能让 AI 帮我们安装依赖：

大部分代码高亮截图工具都支持自定义配置，包括编程字体、高亮主题、截图格式等等，我比较喜欢吸血鬼主题和 JetBrains 免费的等宽编程字体：

json 复制代码

{
  "theme": "dracula",
  "format": "svg",
  "fontFamily": "JetBrains Mono",
  "fontSize": 14,
  "lineNumbers": true
}

配置完成后，就可以着手测试截图工具，先截图一个代码文件看看生成的图片是否符合配置需求，创建一个代码示例。

比如 JS Stage3 的 import defer（延迟导入提案），模块能不运行其顶层代码加载，这样该模块只在首次访问其导出成员时才被执行。

js 复制代码

// defer.js
console.log("1：模块先导入，但延迟执行");
export const value = 42;

// main.js
// 导入模块，代码不执行
import defer * as deferred from "./deferred.js";

console.log("2：访问模块前：内部代码尚未执行");
// => "1：模块先导入，但延迟执行"
console.log(`3：访问模块时：${deferred.value}`);

// 执行顺序：2 -> 1 -> 3

在 Trae 移动端让它通过 CLI 脚本截图，结果如下：