前言
现在也是进入Vibe coding时代，这几月使用来下也是收获颇丰，推荐几个比较好的工具。 CodeGraph、OpenSpec 和 Impeccable。它们分别帮我处理三件事：排查问题时理清代码关系，开发功能时梳理目的和方案，功能落到页面上以后继续打磨UI呈现。
这些事情经常出现在同一个项目里，但需要解决的问题并不一样。出了问题，要找到原因；准备做功能，要想清楚为什么做、这次做到哪里；页面做出来了，还要看信息是否清楚、布局是否合适。
这篇文章就围绕这些实际用途，聊聊我的使用思路。
正文
CodeGraph：顺着代码关系排查问题
GitHub 仓库：colbymchenry/codegraph
简单来说，CodeGraph 就像给代码库整理了一张可以查询的地图。它把代码放在哪里、彼此怎么联系梳理出来，方便 AI 找到相关内容，理解一个功能是怎么运转的。
其实主要为了官方说它省token。
OpenSpec：让功能的目的、方案和改动有迹可循
GitHub 仓库：Fission-AI/OpenSpec
OpenSpec 对我来说，最有价值的地方，是围绕一个完整功能，把"为什么做"和"怎么实现"记录下来，留给后续开发参考。但是OpenSpec要整个团队使用才有意义。不然人家干了什么并没有文档记录。
通俗地说，就是先把要做的事情讲清楚，整理成方案和任务，再让 AI 按任务实现，最后检查结果、保存记录。下面按默认工作流，把这个过程展开说一下。
安装 OpenSpec 后，先在项目目录的终端里运行 openspec init，按提示选择使用的 AI 编程工具。后面的 /opsx:... 命令，则是在 AI 助手的对话框里输入。
- 先聊清楚需求。 如果还没想好具体怎么做，可以用
/opsx:explore，和 AI 一起看现有代码、讨论问题和可选方案。已经明确要做什么，就可以直接进入下一步。 - 把需求整理成方案。 用
/opsx:propose加上需求描述，启动一次改动。AI 会整理为什么做、这次改什么、功能应该怎样表现、准备用什么方式实现，以及需要完成哪些任务。这些内容会保存在项目的改动目录里。 - 看一遍方案，确认理解一致。 重点检查有没有遗漏需求、扩大范围，或者把实现方式理解错了。比如要加一个搜索功能，就应该先说清楚搜哪些内容、没有结果时怎么显示。需要调整时，可以通过
/opsx:update更新方案和任务。 - 按任务实现功能。 方案明确后，用
/opsx:apply让 AI 按任务清单修改代码，并更新完成状态。如果开发中发现原来的方案不合适，也可以回头调整相关文档，再继续实现。 - 对照需求检查结果。 任务勾完以后，还要实际运行功能，检查正常操作、异常情况和相关测试。发现遗漏就继续修改；如果最终做法发生了变化，也要更新记录，让文档和代码对应起来。
- 同步说明并归档。 检查完成后，用
/opsx:sync把本次新增或调整的功能要求合并到项目的正式说明中，再用/opsx:archive归档这次改动。以后就能分别查到功能目前应该怎样工作，以及当时为什么这样改。
上面的命令和流程可参考 OpenSpec 官方工作流文档。
我看重的就是这样一个过程：开发前有明确的目的和方案，开发时有任务可跟进，完成后有记录可回顾。下次需求涉及已有功能时，可以先看看之前做了什么、为什么这样做，再结合当前代码确定新的改动范围。
Impeccable：让页面更好地承载功能
GitHub 仓库：pbakaus/impeccable
Impeccable 我主要用来优化页面。
功能落到页面上以后，还有许多细节需要调整。内容怎样组织，重点是否突出，布局是否方便理解，都会影响用户接触和使用这个功能的过程。
排版、间距和视觉层级，是我观察页面时常用的几个切入点。比如，哪些信息应该优先被看到，哪些元素可以弱化，哪里需要留出空间，都要结合页面的内容和用途来判断。
Impeccable 在我的使用中，就处在这个继续打磨的环节，帮助我把注意力放到功能的呈现上。
结尾
这三个工具，我会根据当前的工作来选择：
- 排查问题时，用
CodeGraph辅助定位和理解代码。 - 推进完整功能时，用
OpenSpec梳理目的、范围和方案，并留下改动记录。 - 优化页面时，用
Impeccable继续调整内容组织和视觉呈现。
其中，OpenSpec 留下的记录还有一层长期价值：功能完成以后，当时的背景仍然能帮助下一次开发。知道以前做了什么、为什么这样做，新的改动才更容易接上项目已有的思路。
还是强烈推荐都去用用。