## 👇 今日要闻

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

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

![dance](https://developer.qcloudimg.com/http-save/yehe-11296652/00277edb60bf146df8c6b030e330d931.gif)

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

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

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

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

## 👉 编程式代码截图

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

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

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

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

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

![trae](https://developer.qcloudimg.com/http-save/yehe-11296652/bda77c73f380175136b205c76718ad28.gif)

代码截图工具一般都支持自定义配置，包括编程字体、高亮主题、截图格式等等，我比较喜欢吸血鬼主题和 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 脚本截图，结果如下：

![code](https://developer.qcloudimg.com/http-save/yehe-11296652/7d3eaccd3228c815802366896421f463.webp)

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

## 👉 AI 自动化批量制图

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

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

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

![batch](https://developer.qcloudimg.com/http-save/yehe-11296652/1f5c3f66faef0b68678edcbf742d30c8.gif)

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

![order](https://developer.qcloudimg.com/http-save/yehe-11296652/d580f5ba90a1c7630b61e7c07541b254.webp)

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

## 👉 AI 录制终端 gif

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

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

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

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

![term](https://developer.qcloudimg.com/http-save/yehe-11296652/9cda1c1dfd719561e9ec4cc2e5657a1b.gif)

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

## 👇 重点总结

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

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

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

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

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

![cat](https://developer.qcloudimg.com/http-save/yehe-11296652/0dfafde3d05235fac457c908f297d2cf.gif)

**👇 参考文献：**

- **🔗 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

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

AI 遥控代码截图，录制终端动画，自动化批量制图，告别手动做图～

使用 Trae Solo 桌面应用和移动端，联手打造自动化代码截图流程，支持一次性批量制图，支持录制终端动画 gif，避免重复的手动操作，提高生产力。

人工智能

前端

开发工具

学习如何使用TraeSolo搭配AI自动化制作代码截图与终端GIF。无需手动重复操作，利用snipgrapher和asciinema等工具，实现批量截图和动画录制，提升技术分享效率。支持自定义主题与字体，解放双手，专注创作。

GitHub

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

AI 遥控代码截图，录制终端动画，自动化批量制图，告别手动做图～-腾讯云开发者社区-腾讯云

AI 遥控代码截图，录制终端动画，自动化批量制图，告别手动做图～

AI 遥控代码截图，录制终端动画，自动化批量制图，告别手动做图～

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐