《极简识谱练习》是我在业余时间纯 VibeCoding 开发的一个网页 App，随机音符显示在五线谱上，屏幕钢琴键作答。在线访问：https://piano.quitw.org/ ，项目地址：https://github.com/purple4pur/piano-practice 。
有效开发时长大约六七晚，全程使用 deepseek-v4-flash + qwencoder 完成。自认为这是我第一个完成度比较高的从零开始的 VibeCoding 项目，开发过程很有意思，同时也积累了一些经验和想法，在这里记录和分享。
- 1. 好的模仿是最好的开始
做这个网页的想法很简单，但是要从这个简单的想法落实到给 Agent 的 plan 非常难。粗略的、含糊不清的想法只会让 AI 生成一堆垃圾，我在之前的其他项目上有过几次失败的尝试。关于在线识谱练习，我已经在网上找到过其他开发者做得相当完善的 Web App：TypePiano，因此我最开始的动作就是让 AI 帮我做两件事：
- 分析它的技术栈
- 假设它是由 AI 生成的，反推出它的 prompt
分析技术栈是因为我不太懂前端，但我知道前端有无数多的框架。既然师傅用这套技术栈能做，那我就跟师傅学。而反推出的 prompt 就是一份有细节的 plan，在它的基础上删掉不需要的功能，就是一份相当好的初始 plan。
从零到一永远是最难的，但只要有了大致符合预期的初步的页面，后续再增改功能和细节相对就简单很多。
- 2. 让 Agent 记录每一次修改
关于这一点，我的想法是这样的：Agent 会在一个 session 里改非常非常多的代码，通常还涉及到多个不同的功能。我希望所有这些改动都不只停留在对话里，而是要像正式代码一样记录在 git history 里，同时又不能过于频繁地往 main branch 上拉屎。
为了解决这个问题，我设计了一个简单的模型。Agent 工作在一个独立的 branch 上，每一次对话产生的代码改动都要 commit，当整个改动告一段落，比如 fix 或者新功能完成了，再一次性 squash contribute 到 main branch。
这样做带来的好处显而易见，Agent 能独立于 session 上下文读取到它所做的所有尝试，中间步骤对于 main 来说其实是没有用的，main 只会看到最终成功的结果，既保证了上下文的稳定和干净，也保证了 main 的整洁。
我把整个模型打包成了一个 skill - record-each-step，实际体验还不错。
- 3. 避免 XY 问题：告诉 AI 要做什么，以及这样要求的最终目的
包括我在内，在指挥 AI 干活的时候，很容易陷入 XY 问题：我遇到了 X 问题，我觉得 Y 可以解决它，于是我让 AI 去实现 Y。
这里的陷阱在于，Y 只是在我认知范围里的解决方案，Y 有效吗？Y 是效率最高的办法吗？其实不一定，甚至大概率不是。
避免 XY 问题的关键是，要把动作和目的同时告诉 AI。动作是我引导它首先去尝试的方向，但目的才能让 AI 判断这样做合不合理，或许它知道更好的方法呢？
- 4. 简单好用的 Skill: ponytail, caveman
ponytail：用最少的代码改动实现功能。虽然它的出发点是尽可能少的代码改动，但实际用下来，我觉得它对于提高整体代码质量是相当有帮助。
caveman：AI 其实经常输出长篇大论，我不得不在一大片文字里找到我真正想看到的那一两句话，而 caveman 让 AI 的每个输出都变成 TL;DR 。
两个 Skill 是可以互相配合的，ponytail 优化输出的代码，caveman 优化输出的对话和文本。
简单、有效、万金油，就是我的评价。
- 5. 引导 AI 增加打印提供 Debug 信息
AI 一般似乎不太喜欢主动增加打印，遇到的一切问题，它只会倾向于读 source code。开发的过程中，其实需要我经常打开网页实际上手测试，如果没有打印，我想帮忙提供 debug 信息都无从下手。
顺手让 AI 增加一些打印，debug 起来轻松很多。
- 6. 优化 UI 的超级捷径：interface-kit
interface-kit 是我在 caveman 主页看到的同作者的推广，抱着试一试的心态用了，结果我直接惊了。
简单来说，interface-kit 就是教会 AI 怎样才是好的设计、优秀的设计，教会它审美。我很难描述第一次用它的感受，就是看着自己的网页突然从毛坯房变成简易装修房。自从用了它之后，我脑海中的 UI 想法，三步之内必有解法。
没什么说的，UI 设计用就是了。
- 7. 从古法手搓代码到完全的 VibeCoding，我的角色发生了什么变化？Coding 经验还有用吗？
古法手搓代码的时候，我有至少 80% 的时间在研究具体代码实现，跟其他很多人的体验一样，为了学习代码里的某个函数到底怎么用，开好几个搜索框和一大堆网页，解决之后通通关掉，然后在下一个 blocker 上重复这个过程。即使在 VibeCoding 盛行的大背景下，我也不会说这样的学习是毫无用处毫无意义的，但不可否认的是时间成本巨大。
VibeCoding 就是纯纯的产品经理思维，90% 的时间我根本不看 AI 怎么实现的，能做出来就行。从想法到落地的时间前所未有的短，我只负责创意输出，勤勤恳恳的 Agent 自然会帮我实现。
而我自己的 Coding 经验，至少在目前这个阶段我觉得很有用，而且还比较重要。虽然 90% 的时间我不看，但剩下的 10% 我会仔细看，Coding 经验让我有一些能力能判断 AI 是不是在拉屎，真正碰到问题的时候我也还有一些经验能引导 AI 去怎么做。