关于我 vibecoding 了一个 vibecoding 模拟器这件事

关于我 vibecoding 了一个 vibecoding 模拟器这件事

标题不是绕口令,是真的。

我会的代码就是 HTML、CSS、JavaScript 三件套。React 我没用过,Vue 我没用过,Node 我没动过,npm 怎么让一个项目跑起来这件事我研究了一会儿。

但是过去一段时间,我做出了一个能跑的网页游戏。开篇有一段会让人停下来读完的故事,里面接入了 AI 模型做实时对话,有访客统计、有本地存档、有 PWA 安装、绑了我自己想要的子域名、过了 CDN 也加了 SSL 证书。

这一切是我跟 AI 一句一句聊出来的。我没有手敲过一行业务逻辑代码。

这件事现在被叫做 vibe coding。一个有点点基础但绝对算不上工程师的人,用嘴写出一个网站。

然后我把这件事本身做成了一个游戏,叫 VibeCoding 模拟器。在游戏里,你扮演一个考公三战失败、存款 4000 块的文科毕业生,去试一下这件叫 vibe coding 的新鲜事。


一、我是怎么走到这一步的

去年这个时候,我对自己的判断很简单:我就是个会用 HTML 写一个静态页面的人。

懂的代码差不多就是这样:

  • 知道 <div> 是什么,能写嵌套
  • 大致看得懂 CSS 的 flex 和 grid
  • JS 能写个点击事件、能拼字符串、能调一个 fetch

仅此而已。框架我永远是『听过名字』的状态。后端、数据库、部署、域名解析、SSL 证书------这些我以前甚至没有打开过对应的网站。

这个游戏的开篇文案,其实就是我自己的状态做了一些扩写。一个文科毕业、就业不顺、考公失败、看着别人靠 AI 做出小工具的人。区别只是------我比他们多会三件套。

但你也知道,三件套和"做一个能上线的产品"之间,差了大概一万公里。中间那些问题真的很多:怎么写一个能用的页面状态管理、怎么调一个 AI 接口、怎么做存档、怎么部署上线、怎么让别人能在浏览器里访问到、怎么把一个奇怪的二级域名指过去。

这些问题,过去一年我一个都没真正学会

我都是问 AI。


二、vibe coding 是什么意思

如果你在读这篇文章之前没听过这个词,我用一句最直白的话讲:

就是你想做一个东西,然后你把你想要它怎么样、长什么样、点了之后会发生什么------这些都用人话告诉 AI,AI 帮你把代码写出来。

写完了你点一下,能跑就行。跑不了你接着告诉它『不对,这里点了没反应』,它再改。

整个过程你不太需要真的看懂中间那些代码,更不会去逐行 review。你的工作不是『写代码』,你的工作是『描述你想要什么』和『判断 AI 给的对不对』。

是的,这看起来不太像传统意义上的『开发』。在程序员圈子里,对这个事的态度是分裂的:

一拨人觉得这是大解放------一个人能干以前一队人才能干的事; 一拨人觉得这是大灾难------做出来的东西底层是黑盒,安全性和可维护性都没保障,迟早出大事。

我不打算在这里站队。我只想说一件事:

在 vibe coding 出现之前,我们这种『只会三件套又想做点东西』的人,连犯错的资格都没有。

我们根本走不到能做出一个完整产品的那个位置。


三、所以我做了什么

一开始我并没有想做这么大的东西。

我只是想做一个『AI 帮我评估一下我的产品创意』的小工具。我有过太多那种『要是有人做个 XX 就好了』的念头,每次都到此为止。我想做一个东西,让自己以后每次冒出这种念头时,至少能立刻知道------这个想法到底靠不靠谱。

后来这个小工具变成了一个独立模式,叫创意点评

  • 输入产品名和创意描述
  • AI 会给你一个像游戏成就的『锐评标题』,比如『轮子再造大师』、『风口上的猪 2.0』、『赛道尽头的勇士』
  • 一个 0 到 10 分的评分,加上为什么给这个分的理由
  • 历史上最像这个想法的真实产品是什么(产品考古)
  • 潜在问题、核心亮点、可以延伸的功能、应该重点关注的点
  • 最后还有 6 路模拟锐评:科技媒体、应用商店用户、知乎博主、投资人、独立开发者社区、友商 PM

但只做这一个工具我后来觉得不够。我想让人在玩这个东西的时候,多少能体验到一点 vibe coding 这件事本身的质感

所以又加了一个完整的创业模式


四、创业模式:你来当那个文科生

打开网站点『开始 Coding』,你会先看到一段叙事开篇。

这段开篇我当时写得挺认真的:

  • 你是一个汉语言文学专业的 211 毕业生
  • 考公三次,第三次面试被关系户挤掉
  • 简历投了三百多份,面试官看了眼你的专业说『你们学这个能干啥』
  • 后来做新媒体运营,月薪 4500,三个月后公司倒闭
  • 你搬进月租 800 的出租屋
  • 家里不再催你了

然后某天深夜,你在网上刷到一条帖子:

『文科生用 Vibe Coding 做了个小程序,月入两万』

你打开了那台用了五年的笔记本电脑。

进入正式玩法后,流程是这样的:

  1. 选 AI 模型:每个模型有不同价格和能力倾向
  2. 选平台:网页、小程序、APP,每个平台启动成本不一样
  3. 输入你的创意:产品名、想做什么
  4. AI 帮你做规划
  5. 进入开发阶段:每一轮你会遇到一个事件,需要你做决策------加个新功能?修一个 bug?改一下 UI?这些选择会影响产品的功能、体验、UI、bug 这四个分数,也会影响你剩多少钱
  6. 资金不够会被迫上线,资金够就完整开发完上线
  7. 上线后看最终评分、AI 写的项目类型标签、还有一份『复盘』

这套流程里的每一个事件,都来自我自己一年来的真实经历。哪些坑我踩过,哪些决策我犹豫过,哪些时候差点把账户里最后一点钱花光,都在里面。

你不需要真的辞职、真的把存款 4000 块押上去------你可以在这个游戏里走一遍。五到八分钟。


五、我自己的体感

写到这里我想说几句不那么"宣传"的话。

做这个网站的过程其实并没有传说中那么浪漫。

『一句话生成一个网站』那个画面是真的,但通常只发生在第一个小时。等你想做的东西具体起来------比如你要它有存档、要它有页面间状态、要它在手机上某个尺寸的设备上别变形、要它能调一个具体的 AI 接口、要它部署上去之后真的能跑------你跟 AI 之间的对话就会变得非常长,非常碎,非常多的『不对、再来一次』。

我有过的心情是:

  • 早上九点觉得『卧槽这玩意行啊』
  • 中午十二点觉得『等一下这地方好像有点不对』
  • 下午三点觉得『这一段我让它改了第六遍了为什么还不对』
  • 下午五点把整段删掉重新写 prompt
  • 晚上八点终于跑通然后发现首页还有个 bug

但这件事和我做不出东西之间,本质上是有区别的。

以前的我,停留在『这件事我做不到』。 现在的我,停留在『这件事我能做到,但具体哪一处需要再调三遍』。

这两种状态从外面看好像差不多------都是『还在折腾』。但内部完全不一样。前者是死的,后者是活的。

vibe coding 真正改变的是后者那个阀门。代码这个事,过去的几十年里它一直是有门槛的。这个门槛本身没什么问题,是它客观上把一些人挡在外面。现在这个门槛低了,被挡在外面的人开始能进来了。

进来之后他们会不会出事?会的。会不会犯一些被业内笑话很多年的低级错误?会的。

但他们至少现在站在能犯这些错的地方了。


六、这个游戏现在的状态

这是一个目前还很简陋的产品。

  • 创业模式跑一遍大概 5 到 8 分钟
  • 创意点评跑一遍大概 1 到 2 分钟
  • 整个网站永久免费、没有广告、不会收费
  • 历史项目可以本地存档查看
  • 支持添加到主屏幕,像 APP 一样使用
  • 后续我会慢慢加一些更复杂的玩法,比如游戏公司式的团队开发、运营推广、收购退出之类的,已经在做了

我自己测过的话,跑出来评分最高的那一次,做的是一个很奇怪的产品------『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 模拟器

写这篇没什么深刻立意,就是一件事发生了想分享一下。

如果有人想去试一下,我会在评论区或者后台回复给到入口。这玩意完全免费没广告,就是个一个人凭兴趣搓出来的东西,不打算做大也没在拉融资,只是想看看有多少人会感兴趣。

如果你也是会一点点代码、但远没到能独立上线一个产品的水平,这个东西就是给你这种人做的。

--- 屑老板

相关推荐
jcccccc18 小时前
Claude Code接DeepSeek后,缺的那块Web搜索我补上了
vibecoding
用户223586218202 天前
用ClaudeCode从0搭建一个优雅的CR助手 - claude_12
chatgpt·claude·vibecoding
DigitalOcean3 天前
AI 推理产品省钱指南:如何通过基建优化降低 80% 推理成本?
aigc·agent·vibecoding
mCell3 天前
批判性思维:AI 时代程序员最容易忽视的能力
ai编程·claude·vibecoding
Captaincc4 天前
vibecoding 最适合上古就开始的小黄鸭调试法
vibecoding
广东王多鱼4 天前
一个人 + Claude = 全栈开发团队:从零构建 AI 自动化开发系统的技术实现
后端·vibecoding
libokaifa5 天前
Claude Code的工程化落地:MCP 篇
ai编程·claude·vibecoding
用户223586218205 天前
MCP 是 Claude 的 什么? - claude-10
人工智能·claude·vibecoding
努力干饭中5 天前
Vibe Coding 第二弹:做一个 Canvas K线图
前端·canvas·vibecoding