4步成形7步搞通：目前最顺畅的一次Vibe开发

这个周末，挑战了一下用最低限度的请求数Vibe一个懒猫应用。

总得来说，三次询问，Claude Sonnet就给我搭完了项目的80%。
大的功能调试用了四次询问，再加上四五次微调，和手动修改，大概只花了半天的时间处理代码。

不过这个应用是我手码的样式，所以码样式花了一天多，这是后话。

这里主要记录一下本次让AI提供高效高质量内容的技巧心得。

https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly

周五晚上跟老王聊天，他说懒猫用了很多黑科技，解决了一般开发要从“种水稻”开始的问题。然后贴了一堆技术我也看不懂，我说反正我也不懂，我就光从你这里买米拿回家煮饭就行了。

怎样最高效利用懒猫的技术，和怎样最高效利用AI的能力，就是我最近的尝试目标。

首先我在Refly中向Claude Sonnet4提交了以下文件做为初始的上下文。

三篇技术文档分别是关于打包、MiniDB...和...MiniDB的，因为AI在理解的时候常出错误，所以我加了一个特别提醒用的避免MiniDB用法出错的文档（当然也是AI写的）。

然后是一篇详细的项目需求和一张界面示意图：

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/583e3031-a892-43f6-8881-24620e95f347.png "image.png")|![image.png](https://dl.playground.lazycat.cloud/guidelines/319/b23da729-feea-4efa-947a-787e790d7029.png "image.png")
|-|-|

第一次提示相当重要，经过多次的实践，我发现不做好规则和规划，AI只会越折腾越乱（其实管理项目不也是这样吗？）

所以我这一次不但让它梳理需求，还要求它把Dom结构和ID及类名也给我定义出来（此时其实有点后悔没有定义JS类和函数变量）：

>请为参考附件中的技术文档和需求文档，以及界面示意图，为我整理这个应用的详细需求文档，梳理逻辑并整理需求描述，增加必要的技术说明。并且预先定义好数据字段名、各区块的元素dom标签及id名称，以及主要样式表中的类名。以制表符开头缩进的文本方式分别表示这些名称的树形结构，而不要绘制树形制表字符。

然后第一次回答，它就给我提供了下图（我手动整理过）这么多的内容：


![image.png](https://dl.playground.lazycat.cloud/guidelines/319/19558fda-0a52-46bb-8cf7-72f7ceaabcda.png "image.png")

结构看上去没有大毛病，除了lzc-build.yml乱写了之外，甚至点lzc-manifest.yml者写得勉强过关。

于是我让它正式开发，但是先做测试页：

>下面请逐步帮我开发这个应用，首先搭建应用包的安装配置，建立后端的JSON接口。同时要制定初始化数据的JSON格式和设置的基本格式。并增加一个测试页面，包含存取文件测试、MiniDB连接，数据初始化、以及设置相关的存储功能测试。测试成功后清理测试数据。先不必开发正式的内容，基本测试跑通之后再做具体开发。

于是它给了我下图这些：


![image.png](https://dl.playground.lazycat.cloud/guidelines/319/7e8884cd-a646-4db7-8225-0fe6a9545d32.png "image.png")

由于在测试的基础上框架基本上也好了，所以我干脆自己写样式表。CSS我多少还算拿手，加上一直看不惯AI的写法，变量也不好好用，嵌套也不嵌套……跟他纠结这么简单的东西图啥呢？于是我最终还是打算自己练练手。

所以我给AI的提示中，强调让它不要乱动Dom(虽然多少还是有动过）

>测试通过，请先构建基本的主流程功能，注意原有index.html中关于测试的部分可以去掉了。
请注意：CSS部分我会手动接管，所以重点是不要改变之前设计好的Dom元素ID和Classname，不要把样式写到HTML或JSON中。
要求每一个JS功能都要有详细的参数说明和功能注释，附带一个简单的调试输出功能，把每一步的操作都在console.log中反馈当前步骤，这个调试功能可以通过简单注释内部而关闭它。

这次给我的文件最少，只有三个，却是最关键的一步，因为有了详细的需求和测试过程前置，这一次就完成了功能的60-70&左右。

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/b3d3ac16-822c-46bc-b389-bb3ae5147304.png "image.png")

此时由于AI对Minidb仍旧理解不太好，所以在数据初始化时产生问题，调试了三个回合。

当然所谓调试其实也就是把问题贴给它：

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/739ae486-b666-40ad-abab-6407344a18c4.png "image.png")

三次调试过后，之前的问题解决了，于是回到开发过程，把剩下的问题开发完：

>初始化的问题已经成功解决了，请继续为我开发之前未开发完成的功能，我在上下文中附上了最新的app.js内容，请在此基础上整理和修改，尽量不要改变已有的程序机制，只参考需求文档开发“手动修改”和“修改公式”两处的功能。除此之外的程序逻辑尽量不要修改以免影响现有的功能。


![image.png](https://dl.playground.lazycat.cloud/guidelines/319/ae0a43ed-3c2d-458d-b562-3e8af40269e3.png "image.png")

然后做了一些收尾的修改，虽然看上去挺多，但实际上都是小问题。


![image.png](https://dl.playground.lazycat.cloud/guidelines/319/cb7caa1b-f96a-4fe5-b824-ab2a4a9061aa.png "image.png")

然后再简单写写CSS……（实际上花了我一天多！）……一个新的应用就开发好了：

这个应用是一个用公式组合AI提示词的工具，敬请期待上线吧。

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/30ea7a91-62d9-4be3-97c4-5a46469efbf8.png "image.png")


附上完整Refly画布，绿色为开发过程，红色为调试过程：

![新提示词工具 (2).png](https://dl.playground.lazycat.cloud/guidelines/319/16c4ea37-ba9c-4377-9dac-14b183c416b2.png "新提示词工具 (2).png")