👇 今日要闻
打破信息壁垒，走近全球前端。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
Select Language