成功了!
Vibe打金计划的第一个作品终于打包1.0.0提交审核了，运气好的话应该能与本文同时上线。
由于本标题党的作风一贯实诚，这里还是要特别说明一下：说是24小时，就是真的24小时。只不过实际跨度约为不到三天，因为要除去吃饭睡觉去超市以及陪娃和摸鱼的时间，是指坐下工作的时间加起来应该大约在24个小时以内。
（以后的开发中我会试着缩短这个时间。）
当然这24小时中也还不包括预先研究的时间，《Vibe打金计划》系列大约开始于两周前，而这个项目大约也是在一周前就开始研究了。只不过如同我在之前说过，原本是打算用MySQL服务的，由于各种原因，中间除了研究MySQL又研究了minidb和file-pickers两个懒猫官方插件，所以绕了点弯路多花了些时间。
正式重启这个应用的开发大约刚好是三天前的现在写攻略的这个时间。
Milka！
应用名称为《喵卡 Milka》，是一款记忆卡片的小应用。
稍后我会试着编辑文章并加入应用的链接，现在先讲述一下我用这24小时（工作时间）人工构思、指挥以及几乎完全依靠AI开发这个应用的完整过程。
整个过程使用Refly及Claude sonnet 4组织提示和编写代码，大约只手动修改了很少的部分（却花了不少时间）。
---
整理需求
在[《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806)中，其实我已经写了关于这个应用的基本需求生成过程，当时它的代码也已经写好了大半，但由于始终觉得MySQL启动有点慢（也可能是我机器的问题），最终决定换用官方插件minidb，完全推倒重写这个应用。
最终的Refly画布大约是这个样子的，但是只有绿色的三组节点是整个开发过程，其中红色区是之前第一步MySQL版的内容，紫色区是minidb研究，蓝色区是file-pickers研究。
于是我在绿色区的开头引用了红色区的旧对话记录，以便尽可能的利用AI现有的记忆，然后导入了minidb和file-pickers导出的文档，写了如下的注释：
我准备完全重构这个项目，从零开始架构。但要去掉使用MySQL的镜象部分，改用懒猫官方提供的minidb插件，并使用lzc-file-pickers插件管理更新数据和增加数据包的操作，先不要编码，请先根据以上情况修改需求文档，需包含上述两个插件的简述，以及一个分步式开发的计划。等我确定需求文档的内容之后才会需要正式编码。
AI给我的第一个方案并不理想，包括把file-pickers的植入放在了太前会占用较多开发时间，另外开发计划是沿用（预测）了传统开发的惯例时长，分了五步计划，总共计划了最多11周的开发时间！**（但从另一个角度看，我是不是用vibe节省了近三个月的时间？）**
调整需求
于是我决定第一期先不用从网盘选择文件，先弃用file-pickers的植入。
文件选择器的插入并不急切，因为保存的部分还是在数据库，导出为数据包也用传统方式下载到本地即可实现。所以从网盘中选择文件并升级数据包是后面的事情，可以放在较后执行。
另外全程将使用AI编程，所以期望可以在很快的时间内开发完成，计划中的时间天数没有什么用。
步骤尽量控制在三步左右。
从上一次开发得出经验，其实需求和开发计划还是相当重要的，尤其是在Refly中，AI可以全程（基本）遵守需求和计划进行开发。如果你有比我更多的开发规则经验，应该可以用更好的需求和计划指导AI进行更有效的开发。
所以我在这之后又调整了一些细节，包括整理及精简项目结构和修改配置文件，以求在开始时更好地限制和指导AI。
---
正式编码
计划基本满意之后，由于有详细文档的导入，我只需要一个简单的命令就可以让它开始开发了：
>现在编写生成全部位于app下的文件的代码，基于第一期计划
所以虽然它在最初的计划中第一期的时间写了“1-3周”，但实际上AI只在一个交互回合中用了20-30秒就给我把大致的框架写出来了，包括每一个必要文件的完整代码。
-
以上代码只包含了很少的错误，其中包括AI常出现的写出来的代码有被打断导致语法错误的情况，这时只需要让它重新提供单个文件就行了。
关于Service Workers
不过另外有一个问题是AI自动加入了Service Workers机制，这玩意让我有点头痛。可能是我不会用，也可能是因为SW太过强大了。它直接在浏览器中生成缓存，并用缓存去截断真实路由，所以一旦处理不好尤其是如果AI失忆或犯神经导致没有注销或更新记录，这个页面就会一直刷新不到修改的内容，在调试时非常麻烦。
在浏览器中还可以从开发者工具中绕过它，再清不干净可以新开一个窗口。可是在懒猫应用中，据我的猜测似乎每个应用对应的就只是一个窗体，缓存很可能是保存在本地系统对应这个窗体ID的记录里，也找不到地方清理这个缓存，要么就要写专门代码清空所有SW缓存（或许还清不干净），要么只能修改项目包id启动新的窗体才能刷到新的版本。
对大神们这可能很简单，但以我小白水平来说，我不想折腾那么多，而且懒猫基本上四舍五入算是本地(至少大多数情况下是本局域网)应用，对缓存没那么大要求，这个应用又没有太多的数据流，所以实在没必要搞这玩意。于是我在提示中严格强调了不允许使用SW。
---
第二期开发
除了上述的两个问题，我大约只和AI进行了三四轮有效问答回合（有效是指刨除我为了发现问题问的关于SW的几个支线问题），就把一个可用的Demo给架好了。
抱歉我对整个开发中间环节的界面都没有截图，但说实话界面基本70%符合我的要求，于是我打算让它进行下一步的开发。但是首先要确定，它是否还能记住开发计划：
目前一切功能正常，请先确认下一步的开发计划
调整计划 & 美化界面
但是很明显AI又想太多了，我发现计划不太符合我的要求，于是临时修改计划（从后果看也许并不是个好的决定）
这个规划有点太长了，首先去掉社区功能。数据导入和导出，以及从网盘选择文件也先延后。这一步首先完善界面，让它基本可用，将创建主题和卡片的体验从系统对话框改为页面表单。优化体验让卡片有3D翻转的效果。请给我更新的计划。
又是用了几十秒增加了新的功能，第二期的“几周”时间又节省出来了。其实最基本的功能已经都运行正常了，于是我开始优化界面：
现在让我们做一些页面美化，首先目前的卡片显示还有一些问题，当卡片翻转时，反面没有显示卡片的背面，而是显示了水平镜面翻转的正面，可能是层次样式的问题，需要解决。然后，整个页面改为一体化，不分页头和主题，而是统一的一个浅灰色纯色背景。所有的字体用细体，不要用加粗。LOGO从现在的emoji改为assets/logo.png，限制大小为60x60px。不需要面包屑导航，不需要卡片左下方的编号显示。
嘿，记得这个icon吗？
我在[《边画边体验：用SVG-Edit绘制应用图标》](https://lazycat.cloud/playground/guideline/818)中，也是使用了懒猫中的应用SVG-Edit用矢量绘制了它。
由于它的中间有一个代表卡片的空白空间，我直接把导航第二层页面中的返回按钮加在了上面，如果需要返回到首页，猫的“嘴”中会显示一个返回箭头的图标。
---
喵卡功能说明
至此，随着界面的优化，加上一些细节的调试和修改，一个应用的雏形其实已经基本搭好了。
首先，在喵卡应用中，你可以创建无限个“主题”，至于什么主题完全由你来定。
最张见的不外乎是背英语单词，但除此之外的各种语言或其他知识，比如数学公式、历史事件、科学概念……各种知识可能都需要用记忆闪卡来强化记忆。
然后每个主题中你又可以建立多张卡片。
每张卡片都有正反两面，其实是一样的数据结构，用关联表把它们互相以及和主题联系起来。正面和反面都包含主体内容和备注两个主要字段（但显示有区别）。
你可以根据需要填写卡片内容，比如英文单词就可以在主体中分别填写中英文单词，以及助记提示和详细解释；比如历史就可以正面写简单事实，背面写时间和详情。
这样你在使用的时候会先看到正面的提示信息，在心中默记之后，点击将卡片翻过来，查看和对比背面的答案内容。
它目前有列表和幻灯片两种显示模式，适合不同的学习习惯和场景。同时也有“太空白”和“星辰灰”（是的我故意的）两种风格可以切换。
这个应用对于和小朋友做学习游戏互动来说也会很有用处，就像听写一样，可以让小朋友根据正面的提示说出或写下答案，再与背面的答案对照。
甚至多人进行趣味问答，或团队性质的脑筋急转弯或百科知识抢答赛，也是很有创意的玩法。
---
好了，以上的过程已经比较完整地展现了我在Vibe编码的过程的主要要点和心得。如果你要开发一款与这相当或比这更简洁的应用，相信可以从中参考经验，希望能找到合适的方法以更快得到结果。
但同时，以上也只是喵卡应用开发的“顺畅”部分，时间其实只用了全部24小时中的15-16个小时。在后续的攻略中我会继续展开写一些“不顺畅”的部分，包括手动调整代码以及怎样与AI分离又同步的痛苦故事，以及如何（用AI）开发主体功能以外的功能和后期调试的经验。
所以不要走开，呯！（请）呯！（看）呯！（下）呯！（集）（还有人懂这梗吗？）
Related links: This article's
Refly Canvas
