夜雨聆风
今天接下来就做一件事——盯着AI把代码写出来。
没看上篇的，点这里👇
第三步，前端代码。
这次前端我选在 Google AI Studio 里搭。
前端管的事很简单——用户怎么跟页面打交道。点这个按钮跳转到那个页面，点头像框弹出登录页，都归它管。
其实从 Stich 导进 AI Studio 之后，基本的页面框架和跳转逻辑，AI 已经帮你整得七七八八了。剩下的就是微调：确保每个按钮点了都有反应，去到该去的地方。
如果你对交互有特殊需求——比如想要更炫酷的动画效果——直接在左下角对话框里跟 AI 说就行。
编辑模式主要有三种：
第一种，整页修改。 调整整体布局，改大框架。
第二种，单个组件修改。 选中某个按钮、导航栏，只改它自己。
第三种，批注模式。 框选页面某个区域，让 AI 照着改。
整个流程跟你在 Stich 里改 UI 很像：一步一步让 AI 调页面，反复检查页面连接对不对。
第四步，后端逻辑。
前端页面改完，AI 的前端代码就写完了。
接下来写后端。
一个产品，前端管交互，后端管逻辑。就这两回事。
操作也不复杂——切到 Code 模式，下载工程 zip 文件。
或者直接导出到 Antigravity（Google 自家的 AI 开发平台，得买会员才能用）。
第五步，后端代码。
大模型我选了 OpenAI 的 Codex，主打性价比高，其中5.5性能不输Opus4.7，而5.3-codex量大管饱。
先在 Codex 里建个文件夹。一个文件夹对应一个工程。养成这个习惯。后续就让 AI 在这个小天地里尽情发挥。
先交代下接下来会用到的几个工具：
Supabase：云端数据库。存用户信息，前两个项目可以免费使用。
Terminal：本地终端。在本地把产品跑起来，看看 AI 写的东西行不行。访问地址一般是 http://localhost:3000/——3000 就是本地端口。
好了，开始写后端。
先给大模型套个马甲：
“你是资深全栈工程师。前端页面已经完成，现在需要基于现有前端代码、需求文档和详细设计，开始实现后端逻辑。”
还是按老办法来——目标→输入→输出→步骤，一个环节一个环节指挥 AI 干活。
项目如果比较大，就让 AI 自己先拆任务，写 checklist 和验收标准。
然后分模块，多个 Agent 同时开工。
Promot样式如下
## 目标你是资深全栈工程师。前端页面已经完成，现在需要基于现有前端代码、需求文档和详细设计，开始实现后端逻辑。## 输入请阅读：- `doc/proposal.md`- `doc/detailed-design.md`- 现有前端代码- 项目配置和环境依赖## 第一步：拆任务请先不要写代码。先分析前端需要哪些后端能力，然后把后端工作拆成最小可执行任务，生成：- `doc/tasks/progress.md`- `doc/tasks/<module-name>.md`每个模块任务文件需要包含：- 要做什么- 涉及哪些前端页面或接口- 需要实现哪些后端逻辑- 是否需要数据库 / Supabase 配置- checklist- 验收标准`progress.md` 用 checklist 跟踪所有模块进度。## 第二步：生成 Coding Prompt基于任务拆分，生成：- `doc/prompt.md`这个 prompt 用来让主 Agent 开始 coding。要求写清楚：- 主 Agent 负责整体进度- 可以创建子 Agent 分模块实现- 每个子 Agent 只负责一个模块- 每个模块都要写测试- 完成后要运行测试- 完成后要启动服务：`npm run dev`- 如果项目使用 Supabase，要配置数据库、权限和环境变量## 重要规则如果有不明确、会影响实现的问题，必须先问我。如果只是小问题，可以先写假设，但要记录在任务文件里。## 输出最终生成：- `doc/tasks/progress.md`- `doc/tasks/<module-name>.md`- `doc/prompt.md`生成这些文件之前，不要开始写后端代码。
指令准备好了，就把 Prompt 喂给 AI 去生成代码。一直跑到全部代码生成完，并且通过它自己的检查。
要是你稍微懂点代码规则，可以单独写一份自检清单丢给它。
不过按我的使用经验来看——现在 Codex 的大模型已经自带自检能力，输出的代码质量还不错，不用操心太多。
如果涉及数据库或 AI 生成的内容，AI 会让你生成数据库表或添加环境变量。
听着玄乎，其实不复杂。让它一步一步教你怎么做。
把当前页面截图丢给 AI，无脑照着它说的操作就行。
第五步，产品验收。
代码生成完，记得让 AI 在 terminal 里启动服务：
npm run dev
然后打开浏览器，看看实际成果。
眼见为实。用最严标准要求 AI，哪里不满意就改哪里，改到满意为止。
其实你发现没有——我们让 AI 写代码的时候，基本是边写边测，把问题消灭在源头。
在 Codex 里操作更简单：直接跟它说打开 localhost，你要看最终效果。Codex 会在右侧栏弹出实际页面。
（可能有朋友会问：上面 UI 生成的是绿色，怎么实际出来是红色页面？
这里解释下——主要是我让 AI 参照政府网站的设计风格重新调整了一遍。所以即使在后期，所有内容仍然可以调整，包括 UI 和前端。）
如果一切顺利，你的产品就在本地手搓完成了。
零代码。纯手搓。
只要你按前面的步骤一步步走，前期准备做到位——出来的东西，是能拿得出手的好东西。
好东西当然要拿出去挣钱。
接下来我会聊手搓产品之外的一些事——代码部署、接入支付和登录、做数据看板、搞 SEO。每走一步，都是在放大咱们赚钱的成功概率。
（未完待续）
