用变更预览页来审查 AI 生成的代码

既然我们已经开始使用 AI 工具来生成代码，瓶颈就在于审查这些改动，以确保智能体确实做出了正确的操作。我花在手动测试、代码差异对比以及阅读 AI 摘要上的时间明显增多了。

这需要频繁地在不同任务之间切换：你可能正在查看代码差异，接着又想读一读 AI 对变更的总结，然后又想为当前的工作树启动一个开发服务器，最后还想回退到变更之前的某个 Git 提交，以便再次确认之前的行为。

这让我开始思考：如果把这些功能都整合在一起会怎样？于是，我创建了 变更预览 这个技能，它能够生成一个预览页面，其中包含：

• 变更前后的截图和/或视频
• 如果无法提供截图，则显示相关图表
• 在截图上标注 UI 中发生的变化
• 代码差异，并附带 AI 对代码变更原因的摘要
• 如果需要手动测试变更，还会提供重现步骤

这样一来，你可以让智能体并行处理多个功能，完成后只需逐一审查这些变更预览。如果一切满意，就可以让智能体基于变更预览直接创建拉取请求，这样评审者也能在 PR 描述中看到诸如变更前后录屏等信息。

以下是针对我最近在 openenrichment.org 项目中进行的一些改动的示例：我将数据集重构为多个区域。

我还添加了一个切换按钮，用于在现代的 OpenAI 风格与经典的 Claude 风格之间切换。当然，也支持深色模式！

你可以在 https://github.com/steveharrison/change-preview 找到这个技能。