今日要闻打破信息壁垒走近全球前端。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.jsconsole.log(1模块先导入但延迟执行);exportconstvalue42;// main.js// 导入模块代码不执行importdefer*asdeferredfrom./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?_langzh snipgrapher 源码仓库https://github.com/mcollina/snipgrapher asciinema 源码仓库https://github.com/asciinema/asciinema