零基础小白实践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数独游戏
- 不需要后端，纯前端HTML+JS就行，双击就能打开
- 必须没有广告，纯净体验
- 支持多种难度，需要自动生成题目
- 基本功能：填数、擦除、检查、解题
- 界面要美观，手机端也要能玩
完整开发过程记录
阶段一：初始版本生成
我给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来实现，专业程序员会去做更复杂更核心的东西。这个趋势已经来了，挡不住的。