不用懂代码，一个被逼疯的普通家长如何在周末用 AI 搓出自己的第一个上线网页？

我的折腾初衷：别把“做个产品”想得太高深。在这个时代，只要你生活里遇到了真真切切的烦心事，AI 就能帮你把念头变成任何人在手机上都能打开的真实小网页。
做出来的作品：先别急 · ChillFirst (chill-first.vercel.app)

---

气到手抖时冒出的念头

网上的技术博主总喜欢把“独立开发”讲得神乎其神：什么商业模式闭环、融资计划书、技术架构选型、敏捷迭代……

但对于普通人来说，很多真正打动人的小东西，往往诞生于被生活琐事逼到抓狂的某一个瞬间。

上个周末，在辅导二年级数学题再次气到心跳加速、躲进卫生间喘气的十分钟里，我看着镜子发愣，心里憋着一口气： 我实在受够了那些教我“深呼吸放平心态”的虚伪软件，我要一个100% 偏心我、教我怎么把话顶回去、还能放段舒缓声音帮我降血压的小网页。

我平时不是专职程序员，也没有预算雇人开发。但在这个时代，一个普通人只要学会跟 AI 对话，就相当于身边坐着一个随时待命的前端小帮手。

利用周六周日两天零散的几个小时，我真的把【先别急 · ChillFirst】从一个念头，做成了一个任何人点开链接就能用的小网页。

---

第一步：别急着要代码，先跟 AI 把想法聊透

很多没学过编程的朋友让 AI 写东西，最容易犯的错误就是一上来就发一句：“帮我写个网站”。AI 没有前因后果，只能吐出一堆谁也看不懂的空洞模板。

正确的第一步是：把你当下的痛点、想要的界面感觉、以及必须有的几个功能，老老实实当面讲清楚。

我给 AI 发的第一条需求特别口语化：

我是一个被家庭琐事和辅导孩子作业搞到快崩溃的普通家长。我想做个纯单页、阳光治愈风格的网页应急解压小窝，名字叫【先别急 · ChillFirst】。

我的要求：
1. 界面风格：看起来要像一块刚出炉的面包，温暖柔和，暖米白和浅陶土色，千万别用冷冰冰的科技蓝；
2. 核心功能 1【倒垃圾解气】：用户在框里打一段抱怨的大白话，由 4 个常驻角色（小熊、律师、老道、小和尚）按各自风格接住情绪；
3. 核心功能 2【缓口气】：放一个深呼吸按钮，点一下能播放一段舒缓的 432Hz 嗡鸣声；
4. 严格保护隐私：全在用户手机本地运行，绝不存任何聊天记录，用户关掉网页就没有任何痕迹。

先不要急着写整页代码，帮我理一理这个页面该分成哪几个小部分？

AI 很快帮我理出了思路：页面只需要四个部分——顶部的治愈大标题、中间的输入吐槽框、下方的四人回复卡片、以及一个随时能点开的声音呼吸按钮。

---

第二步：遇到了难题，交给 AI 一点点解决

在动手搭页面的过程中，我遇到了两个以前自己绝对搞不定的难题，全靠 AI 帮我支招：

难点 1：怎么不用下载庞大的音频文件，就能发出舒缓的声音？

如果网页里放很多 MP3 音频，加载起来又慢又卡，还有版权麻烦。
AI 给了我一个特别绝的招数：直接用浏览器自带的声音合成功能（Web Audio API），只要十几行简单的代码，就能在用户手机本地当场算出一阵平稳舒缓的 432Hz 纯净正弦波，根本不需要联网下载任何音频文件！

难点 2：怎么让按钮看起来软乎乎的，像真的可以按下去？

我想要界面看起来有种“软泥玩具”的手感，让人看了心情放松。
我把这个想法告诉 AI，AI 帮我写了几个细腻的阴影样式，还给按钮加上了“手指按上去微微下陷一圈”的物理手感。哪怕是第一次点开网页的人，都会忍不住想戳一下那个圆滚滚的按钮。

---

第三步：把它免费发到网上，任何人都能打开

页面写好之后，怎么让身边的朋友、或者在手机上随时能打开？现在这件事简单得不可思议，完全免费，三步搞定：

1. 存进 GitHub：把 AI 帮我们写好的这几个文件，上传到自己的 GitHub 账号里；
2. 连接到 Vercel 平台：打开免费的网站托管平台（Vercel.com），用 GitHub 账号直接登录，选中刚才的项目；
3. 点一下「Deploy（部署）」：等待不到一分钟，平台就会自动生成一个专属的专属网址（比如 chill-first.vercel.app）。

你可以直接把这个链接发到微信里，或者在手机浏览器里点一下 “添加到主屏幕”。它就会像一个正式的 App 图标一样安安静静躺在你手机桌面上，随时点开就能用。

---

一个普通人折腾完的真实体会

1. 别等自己“把代码全学会”再动手：今天 AI 的能力，足够帮任何不懂编程的人把脑子里的小想法做成能用的东西；
2. 从自己身上最真实的烦恼出发：那些在深夜让你烦躁抓狂的生活细节，往往也是千千万万人心里共同的痛点；
3. 保持干净纯粹：不搞注册，不弹广告，不偷窥隐私。在这个四处充斥着算法算计的时代，一个纯净的小工具，往往最让人安心。

生活难免有委屈。当外面的世界让人抓狂时，不妨用 AI 亲手给自己搭个避雨的小棚子。

---

💡 项目说明：「先别急 · ChillFirst」是作者个人的业余小实验，主要是想记录普通人借 AI 动手做小工具的过程，不包含任何商业医疗或心理诊疗保证。