👇 今日要闻

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

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

在线网站工具、VS Code 插件、录屏 App ，基本能满足这种创作需求，但都不够智能和高效。

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

• 手动作图体力活较多，复制粘贴和使用插件，逐个点击生成代码截图
• 一篇 Markdown 文章如果有多个代码快，就需要重复机械的手工活
• 录屏软壳录制终端操作动画较为繁琐

本文我尝试使用 Trae Solo 移动端 和桌面应用，只需聊天或语音输入，就能遥控 AI 批量制图，流程自动化，既符合人体工程学，又提高效率。

👉 编程式代码截图

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

首先，我们在 Trae 官网下载 Trae Solo 移动端和桌面应用。

这有两个好处，一是自动化流程通过 AI 来执行脚本即可，且这种编程式方案可以作为其他自动化流程的子流程，配置成功就能在其他场景下反复利用；二是移动端可以解除我们的空间限制，你能远程遥控电脑共享操作，充分压榨硬件的灵活性和算力。

然后，使用 npm 安装工具库，根据你的操作系统选择对应的命令或压缩包，之后可以提问 Trae 是否已经成功安装，如果没有，也可以委托 Trae 联网搜索帮你安装。

在 Trae 移动端的对话框输入，“使用 npm 帮我在本地文件夹安装 snipgrapher 第三方库“：

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

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

之后就可以着手测试，先截图一个代码文件看看生成的代码快照是否符合需求，创建一个代码作为示例。

比如 JS Stage3 的 import defer（延迟导入提案）：

// 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 脚本截图，结果如下：

如果截图不满意，则调整配置或者替换其他工具库，重新测试上述自动化流程，直到基本满足你的需求。

👉 AI 自动化批量制图

单张代码截图成功后，接下来要实现批量截图的自动化。

想象一下，我们写了一篇 Markdown 文章，其中分散有很多代码示例，这最好通过 AI 一次性批量处理，而不是手动截图。

在 Trae 对话框中下达任务，找到目标文件，比如 express.md 文件，识别其中的代码块，然后批量截图：

注意，我踩过的一个坑是，最好按顺序给予不同编号，防止生成的图片先后覆盖，生成结果如下：

这样，我们避免了机械的手动截图，保证截图质量的同时，大大提升了创作效率。

👉 AI 录制终端 gif

这个自动化流程也能用来生成 gif 动图，只要有 GitHub 能找到对应的开源工具库就能无缝迁移，本文以 asciinema 库为例。

让 Trae 安装 asciiinema，这个工具和 snipgrapher 的区别是不使用 npm 安装，所以是从操作系统全局安装。

安装完毕后，让 Trae 尝试录制你的终端操作即可，但 asciinema 不直接生成动图，需要借助其官方插件 agg 来实现。

让 Trae 下载 agg 后，通过执行脚本命令把录制文件转化为 gif ，效果如下：

GitHub 上还有其他生成动画的工具库，比如动画版的 SVG 也能实现终端录制，具体取决于你的需求，但自动化流程始终大同小异。

👇 重点总结

技术分享中常常需要制作精美的代码截图或录制动画 gif ，手动操作太过繁琐，这可以利用 Trae Solo 桌面应用和移动端来解决：

• 基于 GitHub 开源工具，定制自动化制图流程
• 一次性批量制图，最大程度避免手动操作，提高效率
• 迁移自动化流程到其他场景，比如录制终端动画

以上就是今天分享的全部内容了，希望对你有所帮助。

👍 感谢大家按赞跟转发分享本文，你的手动支持是我坚持创作的不竭动力喔。

🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~

👇 参考文献：

• 🔗 Trae 官方文档： https://docs.trae.cn/ide/trae-solo-is-now-available?_lang=zh
• 🔗 snipgrapher 源码仓库： https://github.com/mcollina/snipgrapher
• 🔗 asciinema 源码仓库： https://github.com/asciinema/asciinema