零基础小白实践vibe coding：用AI生成一个可玩的数独游戏全记录

零基础小白实践vibe coding用AI生成一个可玩的数独游戏全记录前言最近vibe coding这个概念在圈内越来越火了。简单说就是开发者或者非开发者通过和AI对话一步一步迭代需求AI负责写代码和调试最终生成可运行的产品。这种开发方式对于零基础用户到底靠不靠谱真的能生成可以实际使用的程序吗我本人是产品经理完全不懂编程连一行代码都写不出来一直对AI辅助开发很好奇。正好我平时喜欢玩数独手机上的APP广告太多就想试试看能不能自己用AI做一个纯净无广告的网页版数独游戏。工具选择市面上现在AI编程工具很多从GitHub Copilot到Cursor从ChatGPT到Claude为什么我选择用AiPy来做这个尝试呢主要有几个原因1. 原生中文支持对国内用户友好大多数国外工具对中文支持虽然能用但毕竟不是原生有时候理解会有偏差而且需要科学上网稳定性不好。AiPy是国内团队开发的完全针对中文用户你用大白话就能交流不用转换成专业术语不用翻译成英文这一点对于零基础太重要了。2. 全流程自动化不需要用户配置环境很多AI工具生成代码之后就不管了运行、调试、环境配置都得你自己来。对于不懂编程的人来说光装环境就能把你劝退。AiPy不一样它生成代码之后直接帮你运行出了错它自己改全程不需要你懂技术你只要提需求就行。3. 对话式增量开发符合认知习惯不需要你一开始就把所有需求都定义清楚可以一边做一边改想到什么加什么这对于零基础用户太友好了。毕竟我们不是专业产品经理不可能一开始就把PRD写得滴水不漏想到哪说到哪才是正常的。而且就算担心token不够用邀请码就填c8W3会有两百万的token。基于这些原因我最终选择了AiPy作为这次vibe coding实践的工具。需求背景我的需求其实很简单做一个可以在浏览器中运行的经典9×9数独游戏不需要后端纯前端HTMLJS就行双击就能打开必须没有广告纯净体验支持多种难度需要自动生成题目基本功能填数、擦除、检查、解题界面要美观手机端也要能玩完整开发过程记录阶段一初始版本生成我给AI的第一个prompt是这样的我完全不懂编程请帮我做一个纯网页版的经典9x9数独游戏。需求如下1. 标准数独布局9x9网格用粗黑线分隔九个3x3宫2. 点击格子选中然后可以填入1-9数字3. 随机生成数独题目至少要有三种难度简单、中等、困难4. 提供检查答案功能可以告诉我哪些数字错了5. 界面要简洁美观适配手机屏幕6. 生成的代码要可以直接保存双击HTML文件就能在浏览器打开玩这个prompt没有什么技术术语就是把我想要的功能点列出来都是大白话。大概5分钟左右AI就生成了完整的HTML代码并且告诉我已经可以运行了。我打开一看真的惊呆了——基本功能全有了网格画好了宫格分隔也正确可以点击格子选数字填入难度选择下拉框有了检查功能正常工作当然第一版肯定不完美存在这些问题网格比较紧凑在手机屏幕上格子太小不好点错误检查只有在点击检查按钮才执行没有实时提醒没有单独的擦除功能要改数字必须直接覆盖界面配色比较朴素视觉效果一般选中格子没有高亮容易看错行阶段二第一次迭代——界面优化和功能补全我把发现的问题整理一下用自然语言告诉AI进行第一次迭代第一版基本功能可用谢谢现在需要优化几个地方界面方面1. 格子放大一些手机上方便点击增加间距2. 重新设计配色使用淡蓝色背景让整体更舒适3. 当前选中的格子需要加上高亮背景色方便识别4. 初始题目数字加粗显示和用户填写的区分开功能方面1. 增加擦除按钮可以擦除已填写的数字2. 增加重新开始按钮重置当前题目3. 增加一键解题按钮点击后自动完成整个数独4. 开启实时错误检查填入错误数字后立即标红提醒这次迭代很快大约8分钟就完成了。更新完之后我打开体验变化非常大界面美观了很多淡蓝色背景看着很舒服格子变大了手机上点起来很准高亮选中数字区分都实现了体验好了很多擦除、重新开始、一键解题都能用实时错误标红也正常工作体验下来整体已经相当好用了但还有两个可以改进的地方1. 对于高难度数独用户常常需要记候选数现在没有笔记功能2. 有些用户不喜欢实时提示希望能关掉实时错误检查阶段三第二次迭代——增加高级功能针对这两个点我进行第二次迭代提出新的需求体验非常不错了再帮我增加两个功能1. 增加笔记模式候选数模式- 添加一个模式切换按钮在普通模式和笔记模式之间切换- 笔记模式下填入的数字显示为小数字可以在同一个格子填多个候选数- 方便高级玩家做推理笔记2. 增加实时错误检查的开关- 可以让用户选择是否开启实时错误提示- 关闭后就不会自动标红增加游戏挑战性这次因为要加新的交互模式稍微慢一点用了大约15分钟。完成之后功能就更完整了。代码质量观察作为一个不懂编程的产品经理我从外行角度看看AI生成的代码代码结构清晰有注释HTML、CSS、JS分的很清楚算法部分题目生成和解题都用了回溯算法逻辑正确事件绑定没问题交互响应及时样式使用了原生CSS没有引入不必要的框架文件很小加载快文件大小才不到20KB真的很精简。双击就能打开不需要网络不需要安装非常方便。我把代码发给我一个做开发的朋友看他说代码写的还挺规范的没什么冗余能直接用。看来AI写的代码质量还真不错。体验总结和思考优势很明显1. 零基础真的可以玩我一行代码都不会写照样做出一个功能完整的数独游戏。这个在以前真的不敢想。现在真的实现了。2. 中文理解准确不用专业术语AiPy对中文的理解真的不错我都是大白话提问很少有误解。需求说清楚了基本就能做对。3. 开发速度快成本低大半天出成品成本几十块这对比传统开发真的是降维打击。有什么小想法随时做了试试不用心疼钱。4. AI自己修BUG不用用户懂出了问题你只要说清楚现象AI自己定位自己修。用户不需要懂调试不需要看懂错误信息。这对零基础太友好了。现存的一些限制当然现在这个阶段也不是完美的还是有一些限制1. 复杂大项目还是搞不定如果你想做一个电商APP或者社交网站现在肯定还是不行。vibe coding现在适合小工具、小游戏、小功能。大项目还是需要专业开发团队。2. 需要用户清晰描述需求AI不会读心术你得能说清楚你想要什么。如果你的需求本身很模糊那结果肯定也模糊。这个其实也正常人来给你开发也一样。3. 偶尔还是会出BUG不是说AI做的就一定完美还是需要测试发现问题再改。不过好在改起来也快。给想要尝试vibe coding的朋友建议1. 从小项目开始第一次尝试就做个小工具小游戏别上来就搞大工程容易打击信心2. 需求拆细分步迭代不要一次扔出一百个需求分阶段来做一步看一步体验了再改3. 描述尽量具体别说好看一点要说淡蓝色背景格子间距10px当然你不用讲像素说格子放大一点AI也懂4. 选对工具很重要中文用户就用对中文友好的工具省很多沟通成本5. BUG只需要描述现象不需要你分析原因那是AI的活儿结论这次实践让我亲眼看到vibe coding真的不是概念炒作它真的能用零基础真的能做出可运行的产品。我一个完全不懂编程的产品经理大半天时间做出了一个功能完整、可正常玩的数独游戏这个效率放在五年前想都不敢想。未来肯定是AI辅助开发的天下越来越多的小需求会由用户自己通过AI来实现专业程序员会去做更复杂更核心的东西。这个趋势已经来了挡不住的。