【核心】不懂代码也能控盘全栈开发？Vibe Coding实战指南

第一阶段：需求解构与架构设计（用 WorkBuddy 专家团）

在这个阶段，你不需要懂代码，你需要的是把业务逻辑讲清楚。

1. 原型输入（没有 Figma 怎么办？）

现在的 AI 具备强大的多模态视觉能力。如果没有精美的 Figma 设计稿，你完全可以：

白板草图/纸笔画图： 直接拿手机拍下你画的线框图（包含日历、时间段按钮、确认预约按钮）。
竞品截图： 截取其他平台的预约界面，用红笔圈出你要保留的功能。
Markdown/幕布大纲： 用纯文本写下核心字段（例如：课程名称、老师ID、上课时间、消耗积分）。
操作：把这些图片和文档直接拖进 WorkBuddy。

2. 呼叫“软件架构师”

在专家团中召唤“软件架构师”。此时，你只提业务诉求，不提技术实现。

你的输入指令（Prompt）：

“我上传了预约排课界面的草图。这是一个高并发场景，可能会有几百个学生在周五晚上 8 点同时抢一个热门外教的课。请作为软件架构师，帮我输出以下三份基建文档：

数据库 Schema (Prisma 格式)： 包含用户表、排课表、订单表。
API 接口标准 (RESTful)： 明确定义请求路径和返回的 JSON 格式。
高并发防超卖逻辑说明： 告诉我应该用哪种 Redis 和 Postgres 的配合策略。”

结果： 架构师会给你输出标准的表结构和接口契约。这是后续所有开发动作的“法律依据”。

第二阶段：立规矩（配置 .codebuddy/rules）

在用 CodeBuddy 生成代码前，必须在项目根目录建一个 .codebuddy/rules 文件。

这是 AI 编码的“紧箍咒”，用来防范低级错误。对于在线预约课程系统，你的 rules 必须包含这几条致命逻辑：Markdown

核心技术栈：

- 前端使用 Next.js (App Router) + Tailwind CSS。

- 后端使用 Node.js (NestJS 或 Express) + Prisma ORM。

业务逻辑红线 (严格遵守)：

1. 【时间处理】所有 API 接收和返回的时间必须强制使用 UTC 时间戳 (ISO 8601)，严禁在后端直接处理本地时区，时区转换必须在前端发生。

2. 【事务安全】预约扣减积分/课时，必须使用 PostgreSQL 的数据库事务 (Transaction)。要么同时扣除积分并生成订单，要么全部回滚。

3. 【统一响应】所有接口返回格式必须为{ code: 200|400|500, data: any, message: string }。

第三阶段：代码生成（CodeBuddy Plan 模式提示词要素）

现在，架构有了，规矩定了，你可以打开 CodeBuddy 的 Plan 模式了。

一个高质量的 Plan 提示词必须包含 Context（上下文）、Goal（目标）、Steps（拆解要求）。

CodeBuddy Plan 提示词示例：

[Context]：我们正在开发在线课程预约模块。数据库 Schema 已经定义好（见 prisma/schema.prisma），前端基础布局已完成。

[Goal]：实现“用户点击日历上的时间槽，确认扣除 1 个课时并生成预约订单”的全栈功能。

[Steps]：

请生成以下任务计划并逐一执行：

后端： 编写 POST /api/bookings 接口。要求先通过 Redis 校验该时间槽是否被锁，如果未锁，则开启 Postgres 事务：写入订单表 -> 扣减用户课时表 -> 释放 Redis 锁。
前端： 根据草图，在 app/booking/page.tsx 中编写时间选择组件。组件需为 Client Component，包含防抖逻辑（防止用户疯狂点击）。
联调准备： 为该接口生成 Swagger 文档注释，并生成测试用例。

请先输出你的实施计划 (Plan) 供我确认。

审批动作： AI 会生成一个打钩的清单。你作为主导者，扫一眼清单，确认没有漏掉“扣课时”的步骤，然后点击 Accept，AI 就会全自动跨文件写代码。

第四阶段：流程串联与前后端联调

如果你有一支实体团队（或者用多个 AI 专家分工），正确的流程是：

架构师（AI） 定好接口契约。
后端工程师（AI/真人） 立刻根据契约，在 Apifox 或本地跑一个 Mock（假数据）服务。
前端工程师（AI/真人） 拿着 Mock 数据，立刻开始画界面、调接口，这时哪怕后端核心逻辑一行没写，前端也能看到点击预约后弹出“预约成功”的动画。
真实联调： 当后端写完真实的数据库逻辑后，把前端代码里请求的 URL 从“假数据地址”切换到“真服务器地址”。因为大家都是按着架构师定的契约写的，切换过去后，通常 10 分钟内就能跑通，彻底避免了“字段名对不上”的扯皮。

第五阶段：部署上线（截图 2 中的 CI/CD 技能）

你截图中展示的 CI/CD（持续集成/持续部署），是解决“在我电脑上明明是好的，怎么一上线就崩了”的终极武器。

作为系统主导者，你不需要手写复杂的部署脚本。在项目开发进入尾声时，切到 WorkBuddy 的 CI/CD 界面。

给 CI/CD 助手的指令：

“当前项目是一个 Next.js + Node.js + Postgres 的全栈应用。我们需要部署到腾讯云。请帮我生成 GitHub Actions（或 GitLab CI）的工作流配置文件。要求：

每次推送到 main 分支时，自动运行代码格式检查和测试。
测试通过后，自动构建 Docker 镜像，并推送到容器镜像服务。
自动重启测试服务器拉取最新代码。”

核心收益： 只要这个流水线配好了。以后你或者开发伙伴改了任何一行代码，只需要点一下“提交代码”，系统就会全自动走完测试和上线流程。

总结：

用这套流程，你扮演的不再是满头大汗写代码的“码农”，而是在节点上签字盖章的总工。你看好架构师的图纸，写好 .codebuddy/rules 军规，用 Plan 模式发号施令，最后用 CI/CD 让流水线自动打包。这就是 Vibe Coding 的精髓。

为了让你把这套流程彻底固化为可复用的“SOP（标准作业程序）”，我们不谈虚的概念，直接把上述所有步骤，浓缩提炼为一张《全栈项目控盘一页纸看板》。作为主导者，以后每启动一个新项目或新模块，你只需要对着这张看板卡掉这 6 个关键节点，就能彻底用 Vibe Coding 盘活整个技术局。

📋 Vibe Coding 全栈项目控盘看板

【项目启动】
│
├── 1. 输入源头：准备好草图/大纲/脑图
│
├── 2. 召唤大脑：WorkBuddy 软件架构师 (架构通)
│ └── 💡 核心交付物：Prisma Schema (数据表) + OpenAPI (接口契约)
│
├── 3. 锁定底线：编写项目根目录 .codebuddy/rules
│ └── 💡 核心交付物：锁死时区规范、返回格式、事务逻辑
│
├── 4. 兵分两路：
│ ├── 前端路径 (Client Component) ── 拿着 Mock 数据跑 UI 交互
│ └── 后端路径 (RESTful API) ── 基于 ORM 事务写业务逻辑
│
├── 5. 组装契约：前后端自动生成类型定义，一键无缝联调
│
└── 6. 自动飞轮：WorkBuddy CI/CD 自动化流水线部署

🎯 你的“防忽悠”与“控时间”三大核心结论

在团队推进这个在线预约课程系统时，记住以下三个不容妥协的工程逻辑：

先给“长相”，再填“内脏”：
无论开发人员怎么保证，必须先出 API 文档和假数据（Mock）。前端和后端必须在第一天就解耦并行。如果前端说“在等后端接口写完才能画页面”，这就是传统开发的严重内耗，立刻叫停。
数据表（Schema）定生死：
作为半个产品经理，你不需要看懂具体的循环语句（for/if），但你一定要让架构师把 Prisma Schema 解释给你听。只要“用户-老师-课程-订单”这几张表的关联关系（1对多、多对多）对了，AI 生成的代码就绝不会出大方向的系统性错误。
让机器去检查机器：
不要花时间去手动测试部署。利用你截图里的 CI/CD 技能，让 AI 在第一天就配好自动化流水线。每一次代码合并，都让系统自动去跑检查。把人的精力，彻底解放到定义业务边界和打磨产品体验上。

这套模式，就是现代全栈开发中，产品经理实现“降维打击”和“直觉控标”的终极闭环。