实测微信开发者工具Skill:所有 AI Builder 的必备提效神器

今年开始，我已经 AI Coding 了 4 个小程序了。

但要说，在这个过程中最烦的，就是 AI IDE 里看不了小程序页面效果，必须得在微信开发者工具和 AI IDE 之间来来回回的切换才行。

而且，这还不算完，如果页面哪报错了，还得手动把错误信息复制到 AI IDE 里。

如果是 UI 错位、不美观这些问题，要不就得手动截图，要不就打字描述问题，但有些UI组件有自己的专有名词，不一定都说得准确，最后只能说个大概，AI IDE 也只能理解个大概，信息就这么一层层的损耗了。

我就一直在想，明明应该是很爽的 Coding 过程啊，怎么就变得这么阻塞呢，要是 AI IDE 可以像预览 H5 项目一样，直接看到小程序页面效果，不用我再当人肉传声桶，该多好啊！

终于，总算盼来了，今天偶然间看到微信开发者工具更新了，出了一个微信小程序 DevTools Skill。

简单说，就是把微信开发者工具的能力，封装成了一套Skill，只要任何 AI IDE 装了它，就像有了眼睛，可以直接边开发，边看小程序页面效果，边调整了。

下面，AI IDE 以 Trae 和我之前做的一个小程序往后日子算一算为例（一个计算退休年龄、退休金的小程序），分享下我的一些使用场景。

第一个，开发一个新功能

我想在退休年龄计算结果后添加一个快捷按钮，点击后去养老金计算页面。在之前的工作流，是这样的：

使用 Skill 后，工作流变成了这样：

我使用的指令很简单：

Trae收到指令后，先是调用了wechatide命令，了解了 Skill 的基本用法。

然后制定了行动计划：

不一会儿就跑完了。

需要说明的是，在 Trae 调用 miniprogram-dev-skill 自动操作我们的微信开发者工具之前，会弹个授权框，我们必须同意才能继续。

同理，像云函数部署、体验版发布，这种危险操作，也都会弹出明确的确认对话框，我们授权后，才能执行，最大程度上保证了操作的安全性。

授权后，Skill 会自动截图，再加多模态分析，而且它还会查看微信开发者工具的控制台里，是不是有报错信息，如果有就直接抓回来给AI IDE，AI IDE看到报错信息，就会直接给修复了。

第二个，真机推送预览小程序页面

在开发小程序的过程中，我们不止要在开发者工具上看效果，还得在真机上看，因为有各种机型兼容问题，还有些API，比如wx.choosePoi（选择位置）开发者工具是不支持。

之前要预览，需要手动在开发者工具上点预览按钮 --> 等几秒钟出个二维码 --> 手动扫码看。

但现在不用了，你只要说 “帮我修改某个功能，然后再推送一下真机预览”，你的AI IDE就会编译好预览版，并且直接推送到，当前登录开发者工具的微信客户端上！

也就是说，不止是帮我们编译完成，就连自己手动扫那一下也不用了，它会直接自动在微信客户端上，弹出要预览的页面，过程无比顺畅。

除了我上面用到的使用场景，miniprogram-dev-skill Skill 还有这些功能：

那具体应该怎么安装这个 Skill 呢，主要分 3 步，下面具体说。

1、下载最新的工具

在这下面地址里，下载Nightly Electron Build 2.02.2607032 及以上版本进行安装。

https://developers.weixin.qq.com/miniprogram/dev/devtools/log.html#nightly-2.02.2607072

2、从微信开发者工具里导出 miniprogram-dev-skill 到本地，它是一个zip包。

3、把 miniprogram-dev-skill zip包，直接导入到你的 AI IDE 里，就大功告成了。

写在最后

这个 Skill 的出现，可以说，真正打通了 AI Coding 小程序的最后一公里。因为，它让 AI IDE 有了“眼睛”，能直接看到开发效果，我们终于可以从繁琐的 CV 大法和反复切换中解放出来了，专注于更有创造性的工作。

AI Coding的下一个阶段，就是让 AI 不仅能写代码，更能像一个真正的开发者一样，独立完成从开发、调试到预览的全流程。

如果你觉得有帮助，欢迎点赞分享，并关注我的后续AI应用探索，我们一起学习探讨。

感谢阅读！如果这篇文章让你也有所启发，不妨点个「赞」和「在看」或「转发」。

如果想第一时间收到推送，也可以给我个关注～谢谢你的支持和鼓励