一个周日的早晨,我6岁的女儿兴冲冲地跑过来,手里捧着她刚读完的《彩虹魔法仙子》系列童话书。她特别骄傲地跟我分享她读过的每一本,还兴致勃勃地告诉我她最喜欢哪本、接下来想读哪本。
这个系列一共有300多本书。女儿让我一本本帮她搜出来,好让她列个清单。看着她期待的眼神,我突然冒出一个念头:要是能给她做一个App,让她自己管理这些书,那该多酷?
![]()
这个想法,让我彻底迷上了"氛围编程"(Vibe Coding)。
从工作到生活,AI编程无处不在
其实"氛围编程"早就成了我几乎所有工作流程里的核心部分。大多数时候,我不是用它来做最终产品,而是用它来帮我完成其他事情。
- 把SharePoint页面转成Markdown格式?写个小应用搞定。
- 数据转换?扔给GitHub Copilot,让它生成一个交互式HTML文件。
但这次不一样——AI编程第一次闯进了我的个人生活。不是那种"我拿AI做了个玩具"的浅尝辄止,而是真的为了解决一个家庭需求,认认真真做一个能用的东西。
为什么选PWA?因为真的没有更好的选择
开始"氛围编程"时,最好的起点就是Chrome扩展或渐进式Web应用(PWA)。它们有几个关键优势:
- Chrome扩展可以打包成zip分享,或者在Edge商店免费发布(Chrome商店只收一次性的小额费用)
- PWA可以免费托管在GitHub等平台上
- 两者都不需要服务器或后端
- Chrome扩展可以绕过CORS跨域限制访问外部API
- 两者都可以在本地轻松测试,无需构建步骤
- 都使用标准Web技术,所以大语言模型(LLM)对它们非常熟悉
- PWA还可以安装,在笔记本电脑、Android和iOS上就像完整应用一样运行,不用处理不同版本,也不用经历痛苦的App Store或Play Store审核流程
所以我的方案很清晰:给她做一个包含所有书籍的PWA,让她可以浏览和记录阅读进度。然后安装到她的平板上。
需求分析?先问用户
我坐下来跟女儿聊了几分钟,认真问了问她的需求。
她想要的是:能看到所有书、记录读过的书、有自己的最爱清单。
作为程序员老爸,我补充了几个非功能性需求:
- 数据可以导出/导入,方便在不同设备间切换,避免后端和API的复杂性
- 完全离线可用,包括所有书籍封面
我还加了一点游戏化设计——读完一定数量后获得徽章奖励。
第一版提示词,就长这样
我的初始提示词是这样的:
"我想创建一个手机/平板应用来追踪我女儿的阅读进度。我想用渐进式Web应用(简单的HTML/CSS/JS),在本地保存她读过的内容,但数据可以在设备间导出/导入。Web应用应该以彩虹公主书为主题。它应该有每一本书(最好有每本书的封面),如果可能的话,抓取每本书的简介。我女儿应该能搜索书籍、添加到收藏并标记为已读。当她达到某些里程碑时,她会获得徽章/仙子成就。这些成就应该显示在一个屏幕/区域中。书籍可以存储在本地或……"
提示词写到一半就停了。不是因为写不下去,而是因为我已经迫不及待想看看AI能做出什么来。
结果?比我想象中好太多了。
这个App不仅满足了女儿的所有需求,还让她更爱读书了。她每天都会打开App,看看自己读了多少本,距离下一个徽章还差几本。连她妈妈都开始用这个App记录自己读的书了。
一个6岁小女孩的阅读清单,最后变成了全家人的读书追踪器。这就是"氛围编程"的魅力——你永远不知道一个看似简单的小工具,最终会带来多大的改变。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.