Vibe Coding开发后台系统需三步：先写强制约束文档【.vibe-rules.md】明确技术栈、目录结构和响应格式；再分层引导AI按路径生成骨架与模块代码；最后强制加入参数校验、SQL注入防护和前端错误兜底。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要用Vibe Coding快速开发一个可用的后台管理系统，必须避开“一句话需求直接喂AI”的陷阱，否则生成的代码会目录混乱、接口不统一、缺少异常处理，第二天联调就崩。
第一步：写好项目约束文档
新建一个名为 【.vibe-rules.md】 的纯文本文件，放在项目根目录下。这个文件不是可选附件，是AI编码前必须读取的强制依据，没有它，所有后续生成都属于无锚点漂流。
在文件中明确写出技术栈、目录结构、响应格式三项硬性要求：前端用 Vue3 + Vite + Element Plus，后端用 Node.js + Express；src 下必须包含 /api /views /components /utils /tests 五个一级子目录；所有接口返回统一为 { code: number, data: any, msg: string } 格式，code=0 表示成功。
这一步不能跳过，也不能合并到后续Prompt里——AI模型对 Markdown 文件头部的规则识别率远高于自然语言段落中的嵌套描述。
第二步：分层引导AI生成代码
方法一：先搭骨架再填肉
在 Cursor 或支持 .cursorrules 的编辑器中，先向AI发送指令：“按 .vibe-rules.md 规范，生成一个空项目骨架，只创建目录结构和基础配置文件（vite.config.ts、app.ts、main.ts），不写任何业务逻辑。”
方法二：按模块逐个击破
在克隆的 Git 仓库中驱动完整的规格驱动开发生命周期（init→需求→架构→流程设计→项目计划→编码→测试→缺陷修复→代码审查→发布）。阶段门控、产物强制输出、多语言支持，内置提交机制。
确认骨架生成无误后，再分三次分别提交需求：① “在 /api/user.ts 中实现用户列表查询接口，使用 MySQL 查询，字段含 id、name、email、status，需做分页”；② “在 /views/UserList.vue 中调用该接口并渲染表格，使用 Element Plus 的 el-table”；③ “在 /components/UserStatusBadge.vue 中封装状态标签，status=1 显示‘启用’绿色，status=0 显示‘禁用’灰色”。
注意：每次只提一个模块需求，且必须指明文件路径。混着说“把用户管理页面做出来”会导致AI把接口、视图、组件全塞进一个文件，破坏已定义的目录约束。
第三步：强制加入校验与兜底逻辑
第一步：在生成接口代码时，必须显式要求“所有入参需校验非空、长度、类型，非法参数直接返回 code=400”。
第二步：在生成数据库查询逻辑时，追加指令“查询语句必须使用参数化查询，禁止字符串拼接，防止SQL注入”。
第三步：在生成前端调用代码时，补充要求“el-table 加载失败时显示友好提示，不抛未捕获异常，控制台输出 error.stack”。
这三步缺一不可。测试阶段暴露的17处问题里，有12处源于这三类缺失——不是AI不会写，而是你没说清楚边界。
