文科生也能用AI开发网页游戏？本文揭秘一种名为vibe coding的新兴开发方式——不需要精通编程框架，仅靠HTML/CSS/JavaScript三件套基础，通过与AI对话就能打造完整产品。
标题不是绕口令，是真的。
我会的代码就是 HTML、CSS、JavaScript 三件套。React 我没用过，Vue 我没用过，Node 我没动过，npm 怎么让一个项目跑起来这件事我研究了一会儿。
但是过去一段时间，我做出了一个能跑的网页游戏。开篇有一段会让人停下来读完的故事，里面接入了 AI 模型做实时对话，有访客统计、有本地存档、有 PWA 安装、绑了我自己想要的子域名、过了 CDN 也加了 SSL 证书。
这一切是我跟 AI 一句一句聊出来的。我没有手敲过一行业务逻辑代码。
这件事现在被叫做 vibe coding。一个有点点基础但绝对算不上工程师的人，用嘴写出一个网站。
然后我把这件事本身做成了一个游戏，叫 VibeCoding 模拟器。在游戏里，你扮演一个考公三战失败、存款 4000 块的文科毕业生，去试一下这件叫 vibe coding 的新鲜事。
去年这个时候，我对自己的判断很简单：我就是个会用 HTML 写一个静态页面的人。
懂的代码差不多就是这样：
仅此而已。框架我永远是『听过名字』的状态。后端、数据库、部署、域名解析、SSL 证书——这些我以前甚至没有打开过对应的网站。
这个游戏的开篇文案，其实就是我自己的状态做了一些扩写。一个文科毕业、就业不顺、考公失败、看着别人靠 AI 做出小工具的人。区别只是——我比他们多会三件套。
但你也知道，三件套和”做一个能上线的产品”之间，差了大概一万公里。中间那些问题真的很多：怎么写一个能用的页面状态管理、怎么调一个 AI 接口、怎么做存档、怎么部署上线、怎么让别人能在浏览器里访问到、怎么把一个奇怪的二级域名指过去。
这些问题，过去一年我一个都没真正学会。
我都是问 AI。
如果你在读这篇文章之前没听过这个词，我用一句最直白的话讲：
就是你想做一个东西，然后你把你想要它怎么样、长什么样、点了之后会发生什么——这些都用人话告诉 AI，AI 帮你把代码写出来。
写完了你点一下，能跑就行。跑不了你接着告诉它『不对，这里点了没反应』，它再改。
整个过程你不太需要真的看懂中间那些代码，更不会去逐行 review。你的工作不是『写代码』，你的工作是『描述你想要什么』和『判断 AI 给的对不对』。
是的，这看起来不太像传统意义上的『开发』。在程序员圈子里，对这个事的态度是分裂的：
一拨人觉得这是大解放——一个人能干以前一队人才能干的事；
一拨人觉得这是大灾难——做出来的东西底层是黑盒，安全性和可维护性都没保障，迟早出大事。
我不打算在这里站队。我只想说一件事：
在 vibe coding 出现之前，我们这种『只会三件套又想做点东西』的人，连犯错的资格都没有。
我们根本走不到能做出一个完整产品的那个位置。
一开始我并没有想做这么大的东西。
我只是想做一个『AI 帮我评估一下我的产品创意』的小工具。我有过太多那种『要是有人做个 XX 就好了』的念头，每次都到此为止。我想做一个东西，让自己以后每次冒出这种念头时，至少能立刻知道——这个想法到底靠不靠谱。
后来这个小工具变成了一个独立模式，叫创意点评：
但只做这一个工具我后来觉得不够。我想让人在玩这个东西的时候，多少能体验到一点 vibe coding 这件事本身的质感。
所以又加了一个完整的创业模式：
打开网站点『开始 Coding』，你会先看到一段叙事开篇。
这段开篇我当时写得挺认真的：
然后某天深夜，你在网上刷到一条帖子：
『文科生用 Vibe Coding 做了个小程序，月入两万』
你打开了那台用了五年的笔记本电脑。
进入正式玩法后，流程是这样的：
这套流程里的每一个事件，都来自我自己一年来的真实经历。哪些坑我踩过，哪些决策我犹豫过，哪些时候差点把账户里最后一点钱花光，都在里面。
你不需要真的辞职、真的把存款 4000 块押上去——你可以在这个游戏里走一遍。五到八分钟。
写到这里我想说几句不那么”宣传”的话。
做这个网站的过程其实并没有传说中那么浪漫。
『一句话生成一个网站』那个画面是真的，但通常只发生在第一个小时。等你想做的东西具体起来——比如你要它有存档、要它有页面间状态、要它在手机上某个尺寸的设备上别变形、要它能调一个具体的 AI 接口、要它部署上去之后真的能跑——你跟 AI 之间的对话就会变得非常长，非常碎，非常多的『不对、再来一次』。
我有过的心情是：
但这件事和我做不出东西之间，本质上是有区别的。
以前的我，停留在『这件事我做不到』。
现在的我，停留在『这件事我能做到，但具体哪一处需要再调三遍』。
这两种状态从外面看好像差不多——都是『还在折腾』。但内部完全不一样。前者是死的，后者是活的。
vibe coding 真正改变的是后者那个阀门。代码这个事，过去的几十年里它一直是有门槛的。这个门槛本身没什么问题，是它客观上把一些人挡在外面。现在这个门槛低了，被挡在外面的人开始能进来了。
进来之后他们会不会出事？会的。会不会犯一些被业内笑话很多年的低级错误？会的。
但他们至少现在站在能犯这些错的地方了。
这是一个目前还很简陋的产品。
我自己测过的话，跑出来评分最高的那一次，做的是一个很奇怪的产品——『AI 帮社畜随机生成请假理由』。系统给的锐评标题叫『打工人灵魂代言人』。我看到的瞬间笑了一下。
后来我在自己的工具里把『VibeCoding 模拟器』本身这个创意丢了进去。结果它给我的评分还行，但模拟锐评里有一条『友商 PM』的评价说：”本质上还是个测试题”。
我看完没改一个字，就当是它说对了。
不打算写教程。但有几个坑想顺手讲一下，纯吐槽。
第一个：dist 目录里有一个 .gitkeep 空文件，0 字节。我用 CLI 部署的时候，它走 base64 上传，空文件编码完是个空字符串，后端校验直接拒了：『fileName and fileData are required』。我盯着错误信息看了半个小时，怀疑是 token 过期、怀疑是接口挂了、怀疑是网络问题。最后是排查的时候打印了一下文件列表，看到那个 .gitkeep，删掉之后秒部署成功。
第二个：自定义域名解析配好了之后，浏览器打开报 Cloudflare 525 错误。SSL 握手失败。查了一下是 DNS 那边把 CNAME 记录的代理打开了，请求走了 Cloudflare 一层之后再回源到 Vercel，Vercel 还没给这个域名签发证书，所以握手就崩。把代理关掉，改成 DNS only，等十几分钟，证书自动签发，就好了。
第三个：写完埋点 SDK 部署上线，第二天看后台数据。事件流里我刷一次出现三条事件（page_view + session_start + session_end），但 KPI 区域不更新。当时怀疑了两天是不是数据被低估。最后发现是面板代码里 KPI 没有自动刷新，只刷了实时事件流。手动按一下『刷新数据』按钮，KPI 立刻就对了。这种坑最磨人——不是 bug，是你自己以为的东西错了。
如果你也准备做点什么，这些事可能会在某个晚上你最累的时候找上你。
这是一个很小的东西。
我会一点 HTML、CSS、JS，没学过框架，没碰过后端，但是过去这段时间我用 vibe coding 这种方式做出来一个能上线的网页游戏。游戏的内容就是关于 vibe coding 这件事本身。它叫 VibeCoding 模拟器。
写这篇没什么深刻立意，就是一件事发生了想分享一下。
如果有人想去试一下，我会在评论区或者后台回复给到入口。这玩意完全免费没广告，就是个一个人凭兴趣搓出来的东西，不打算做大也没在拉融资，只是想看看有多少人会感兴趣。
如果你也是会一点点代码、但远没到能独立上线一个产品的水平，这个东西就是给你这种人做的。
— 屑老板
本文由 @TheWhite 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自 Unsplash，基于CC0协议
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。