先打个预防针:标题有点吹牛的成分。实际可操作的业务场景当前仍然十分有限,文章后面会做总结。如果你对这个方向感兴趣,请根据自己的场景理性选型。
起因
1 月初,有个业务团队发了一个需求过来——希望做一个小工具,解决一项团队里没有明确分工、但又费时枯燥的工作。
场景
他们需要把一段产品动效视频,转换成基于"时间"和"元素点位亮度"两个维度的数据表。
原来的流程是这样的:
- 设计团队给出动效视频
- 有人把视频按帧率拆成图片,录入 PPT,逐帧标注每个元素的亮度
- 下游团队拿到标注结果,形成一个 Excel 表,描述每个元素在每一帧的时序和亮度信息
步骤 2 就是那个"谁都不想干但总得有人干"的活。他们的期望是:把步骤 1 的视频作为输入,通过一个工具自动完成步骤 2 和 3。
红色部分就是痛点——手动拆帧标注,费时且枯燥。
为什么这个需求不好推
按正常流程,这种需求要先评估 ROI,然后上会审批,通过后才能进入开发。
产品经理草拟了方案后来找我和后端沟通。拆解下来,主要做这几件事:
- 将视频抽帧
- 对目标元素进行标记(热点区域)
- 根据标记识别每帧图片中热点区域的颜色值
- 将所有帧、所有标记形成数据记录,并支持导出
如果用传统开发模式,虽然功能不复杂,但也有些工作量。而从业务收益看,这个工具不会节省很多人天——它的核心价值其实是解决一项实操人员觉得很麻烦、且归属不清楚的工作。
基于这些信息,这个项目走立项预期会比较坎坷。
恰巧这时候我刚接触了一些 AI 辅助开发的工具,就提出:先不考虑数据落库,用纯前端的方式调研一下。
工具选型
这次用到的两个工具:
- 通义灵码(https://lingma.aliyun.com/)——阿里的 AI 编程助手,有"AI 程序员"功能
- OnDemand(https://app.on-demand.io/)——海外平台,有类似 Devin 的 AI 工程师
两个工具都支持通过一个 prompt 让 AI 生成一组完整的前端文件——不只是一个函数,而是多个文件组成的可运行页面。
写给 AI 程序员的需求 Prompt
根据产品给的信息和自己的理解,我写了这样一个 prompt:
通过 ts+vue3 以组合式风格,制作一个 web 应用。
1. 上传一个视频文件,按帧率对视频进行截图。帧率可配置,
值为 1 表示每秒截取一张图。上传过程中展示进度,
截取后的图片保存在浏览器缓存中。
2. 实现一个图片播放器组件,有播放/暂停按钮和可拖动进度条,
按帧率依次展示截取的图片。
3. 播放器上允许通过点击增加可操作的热点。
热点可拖拽移动、可调整大小。
热点能获取当前图片中对应位置的颜色值。
热点左上角有删除按钮,右上角展示序号。
4. 播放器获取当前图片所有热点的颜色值,通过 change 事件传出。
5. 实现一个数据表,行是帧序号,列是热点,
单元格是对应热点的颜色值。
6. 实现一个按钮,依次获取所有图片所有热点的颜色值并填入表格。
7. 实现一个按钮,将表格数据导出为 Excel 文件。
这个 prompt 花了大概十几分钟写。写的时候我有意把每一步的输入输出关系说清楚——不是模糊地描述"做一个工具",而是把数据怎么流转、组件怎么交互都交代了。
通义灵码:从生成到调试
生成阶段
把 prompt 丢给通义灵码的 AI 程序员之后,它会生成多个文件。接受生成结果后,自己建一个 Vite 的本地应用,把文件放进去就能跑。
不过每次生成的文件结构、目录位置可能不一样——我碰到过把所有文件都生成到根目录,但 import 路径还带着子目录的情况。不太稳定,但大多数时候主要功能都能出来。
调试阶段
一次性就满意的情况有,但更常见的是需要调试。这时有两种选择:
选择一:修改需求,让 AI 重新做。适合改动多的情况。好处是需求会逐渐完整,坏处是每次重新来都得重新调试。
选择二:在当前会话里追问迭代。适合小改动。好处是有上下文、改得快。坏处是多次迭代后文件定位可能出错,关闭会话后上下文丢失就更麻烦。
我多数时候选择追问迭代——因为调试过程中也会手动改代码,为了让结果更可预期,尽量在同一个上下文里做到位。
踩到的坑
-
上下文污染:AI 程序员会被之前的对话深度影响。比如我先让它做了一个"导出 Excel"的按钮,后来追加一个"导出 JSON"的需求,无论怎么说,它都去改 Excel 那个按钮。血压直接拉满。
-
上下文丢失:关闭会话再回来,前面的上下文就没了。对之前生成的代码做迭代时效果远不如第一次,有时还不如从头来一遍。
-
操作历史丢失:接受修改后,文件的编辑历史没了。想回退对比很不方便。生成代码多的时候我不会逐行看 diff,但接受后发现有问题又回不去。
-
多文件关联容易出错:虽然能生成多个文件并建立引用关系,但文件间的事件绑定、数据传递经常对不上。
另一个选手:OnDemand
在用通义灵码的过程中发现了 OnDemand,它提供了一个模仿 Devin 的 AI 工程师,底层用 Claude Sonnet,注册送 150 刀额度。
整体代码生成能力用下来比通义灵码强一些,但也有问题:比较慢、需要翻墙、生成结果不知道从哪里导出(我是一个个文件复制出来的)、不能预览。有兴趣可以自己试试。
结果
断断续续加起来大概 4-5 个小时,工具就做出来了。界面丑了点,但用户看了效果还比较满意,提了些优化建议,也很快用同样的方式完成了。
如果用传统方式开发,这个需求怎么也得花好几天。而且后续只有产品跟进沟通,设计、后端、测试都没有投入——也就不需要走立项审批了。
冷静一下:哪些场景能用,哪些不能
虽然结果看起来有点神奇,但从执行过程中也能看出,想要 AI 程序员达到这种效果是有很多前提的:
适合的场景:
- 相对独立的工具型需求,不依赖复杂的后端逻辑
- 功能具体、输入输出明确
- 不追求精致的 UI
不适合的场景:
- 和现有系统深度耦合的业务功能
- 对 UI 还原度要求高的需求
- 需要长期维护和迭代的产品
仍然需要的能力:
- 写 prompt 需要开发经验——你得知道"视频抽帧"和"热点标记"怎么拆成前端可实现的步骤
- AI 犯蠢时需要能手动介入调试
- 对生成代码的质量要有预期管理
这两个还只是当时免费或限时免费的产品。市面上还有 Devin、Trae、Bolt 等更多工具在发展。
既让人期待,又让人感到危机。