vibe-coding核心方法论

天涯明月19932026-06-12 8:57

Vibe Coding 核心方法论 --- 深度研究报告

2025年，AI大神 Andrej Karpathy 造了个新词------Vibe Coding。翻译过来就是"跟着感觉编程"。你描述需求，AI 补代码，你只管点头说"行"或者摇头说"不行"。

一、什么是 Vibe Coding

一句话：编程从「写代码」变成了「验收代码」。

传统开发是你告诉电脑怎么 做。Vibe Coding 是你告诉电脑做什么，电脑写代码，你确认没问题就收工。

维度 传统开发 Vibe Coding
核心动作 手写代码 跟AI对话
思维负担 语法+逻辑+架构全包 只管要什么、对不对
错误处理 自己找bug自己修 AI修，你检查
学习曲线 得会编程语言 会说大白话就行
产出速度 看你打字多快 看你读代码多快

说白了，传统开发是"自己动手干活"，Vibe Coding 是"当产品经理加测试"------你从生产者变成了验收者。

场景对比：

场景：你要给内部管理系统加一个"通知公告"功能。

传统做法：

  1. 打开 IDE，新建 controller/service/model 三个文件
  2. 手写 CRUD，调式接口，联调数据库
  3. 写前端页面，调样式，修 bug
  4. 一下午过去了

Vibe Coding 做法：

  1. 打开 Cursor，敲提示词："给后台管理系统加一个通知公告模块，支持增删改查，用 React + TypeScript，后端用 Express + Prisma，数据库用 SQLite"
  2. AI 生成后端代码 + 前端组件，跑一遍确认能跑通
  3. 微调几个样式细节
  4. 半小时搞定

二、核心工作流程

#mermaid-svg-1RJqI9oMbjZzzG14{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-1RJqI9oMbjZzzG14 .error-icon{fill:#552222;}#mermaid-svg-1RJqI9oMbjZzzG14 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1RJqI9oMbjZzzG14 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1RJqI9oMbjZzzG14 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1RJqI9oMbjZzzG14 .marker.cross{stroke:#333333;}#mermaid-svg-1RJqI9oMbjZzzG14 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1RJqI9oMbjZzzG14 p{margin:0;}#mermaid-svg-1RJqI9oMbjZzzG14 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster-label text{fill:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster-label span{color:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster-label span p{background-color:transparent;}#mermaid-svg-1RJqI9oMbjZzzG14 .label text,#mermaid-svg-1RJqI9oMbjZzzG14 span{fill:#333;color:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 .node rect,#mermaid-svg-1RJqI9oMbjZzzG14 .node circle,#mermaid-svg-1RJqI9oMbjZzzG14 .node ellipse,#mermaid-svg-1RJqI9oMbjZzzG14 .node polygon,#mermaid-svg-1RJqI9oMbjZzzG14 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1RJqI9oMbjZzzG14 .rough-node .label text,#mermaid-svg-1RJqI9oMbjZzzG14 .node .label text,#mermaid-svg-1RJqI9oMbjZzzG14 .image-shape .label,#mermaid-svg-1RJqI9oMbjZzzG14 .icon-shape .label{text-anchor:middle;}#mermaid-svg-1RJqI9oMbjZzzG14 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-1RJqI9oMbjZzzG14 .rough-node .label,#mermaid-svg-1RJqI9oMbjZzzG14 .node .label,#mermaid-svg-1RJqI9oMbjZzzG14 .image-shape .label,#mermaid-svg-1RJqI9oMbjZzzG14 .icon-shape .label{text-align:center;}#mermaid-svg-1RJqI9oMbjZzzG14 .node.clickable{cursor:pointer;}#mermaid-svg-1RJqI9oMbjZzzG14 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-1RJqI9oMbjZzzG14 .arrowheadPath{fill:#333333;}#mermaid-svg-1RJqI9oMbjZzzG14 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-1RJqI9oMbjZzzG14 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-1RJqI9oMbjZzzG14 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-1RJqI9oMbjZzzG14 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-1RJqI9oMbjZzzG14 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-1RJqI9oMbjZzzG14 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster text{fill:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 .cluster span{color:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-1RJqI9oMbjZzzG14 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-1RJqI9oMbjZzzG14 rect.text{fill:none;stroke-width:0;}#mermaid-svg-1RJqI9oMbjZzzG14 .icon-shape,#mermaid-svg-1RJqI9oMbjZzzG14 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-1RJqI9oMbjZzzG14 .icon-shape p,#mermaid-svg-1RJqI9oMbjZzzG14 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-1RJqI9oMbjZzzG14 .icon-shape .label rect,#mermaid-svg-1RJqI9oMbjZzzG14 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-1RJqI9oMbjZzzG14 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-1RJqI9oMbjZzzG14 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-1RJqI9oMbjZzzG14 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Vibe Coding 核心循环
通过
不通过
定义意图
构造提示词
AI生成代码
执行测试
验证结果
集成到项目
分析错误

一步步拆解：

① 定义意图 --- 想清楚你到底要什么。不是"帮我写个登录"，而是"用户微信扫码后，后端验证 code 然后返回 JWT"。

② 构造提示词 --- 把想法写成 AI 能看懂的话。技巧：给够背景、说清限制、举个例子。

③ AI 生成代码 --- 大模型吐出代码片段或者完整文件。这一步你等着就行。

④ 执行测试 --- 跑单元测试、编译检查、lint。每次生成都必须验证，这没得商量。

⑤ 验证结果 --- 通过了就集成到项目。没通过就分析错误、改提示词、再来一轮。

做这件事不是为了偷懒，是把精力从"语法怎么拼"挪到"什么才是对的"上面。

完整示例------给博客加一个"标签云"功能：

来一个完整的例子：给博客加一个"标签云"功能。

第一步------想清楚要什么：

"每篇文章可以打多个标签，首页展示标签云，点击标签可以筛选出所有带这个标签的文章。标签展示文章数量。"

第二步------给 AI 下指令（提示词）：

"我的博客项目用 Next.js + Prisma + PostgreSQL。请在现有 Article 模型上加 Tag 模型（多对多关系），然后在首页加标签云组件，点击标签跳到 /tags/slug 页面展示该标签下的文章列表。"

第三步------AI 生成代码：

AI 生成了 Prisma schema 迁移文件、标签云组件、标签页面路由。你躺着等。

第四步------执行测试：

跑 prisma migrate，启动开发服务器，检查标签云是否渲染，点击标签页面是否正常。

第五步------验证结果：

发现标签云里没有显示文章数量 → 告诉 AI "标签旁边显示文章数量" → AI 修改查询 → 再跑 → 通过。集成到项目。

三、Vibe Coding vs 传统开发

#mermaid-svg-cpXJwvEAvuAWo3w0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-cpXJwvEAvuAWo3w0 .error-icon{fill:#552222;}#mermaid-svg-cpXJwvEAvuAWo3w0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cpXJwvEAvuAWo3w0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .marker.cross{stroke:#333333;}#mermaid-svg-cpXJwvEAvuAWo3w0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cpXJwvEAvuAWo3w0 p{margin:0;}#mermaid-svg-cpXJwvEAvuAWo3w0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster-label text{fill:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster-label span{color:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster-label span p{background-color:transparent;}#mermaid-svg-cpXJwvEAvuAWo3w0 .label text,#mermaid-svg-cpXJwvEAvuAWo3w0 span{fill:#333;color:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .node rect,#mermaid-svg-cpXJwvEAvuAWo3w0 .node circle,#mermaid-svg-cpXJwvEAvuAWo3w0 .node ellipse,#mermaid-svg-cpXJwvEAvuAWo3w0 .node polygon,#mermaid-svg-cpXJwvEAvuAWo3w0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .rough-node .label text,#mermaid-svg-cpXJwvEAvuAWo3w0 .node .label text,#mermaid-svg-cpXJwvEAvuAWo3w0 .image-shape .label,#mermaid-svg-cpXJwvEAvuAWo3w0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-cpXJwvEAvuAWo3w0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .rough-node .label,#mermaid-svg-cpXJwvEAvuAWo3w0 .node .label,#mermaid-svg-cpXJwvEAvuAWo3w0 .image-shape .label,#mermaid-svg-cpXJwvEAvuAWo3w0 .icon-shape .label{text-align:center;}#mermaid-svg-cpXJwvEAvuAWo3w0 .node.clickable{cursor:pointer;}#mermaid-svg-cpXJwvEAvuAWo3w0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .arrowheadPath{fill:#333333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-cpXJwvEAvuAWo3w0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-cpXJwvEAvuAWo3w0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-cpXJwvEAvuAWo3w0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster text{fill:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 .cluster span{color:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-cpXJwvEAvuAWo3w0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-cpXJwvEAvuAWo3w0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-cpXJwvEAvuAWo3w0 .icon-shape,#mermaid-svg-cpXJwvEAvuAWo3w0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-cpXJwvEAvuAWo3w0 .icon-shape p,#mermaid-svg-cpXJwvEAvuAWo3w0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-cpXJwvEAvuAWo3w0 .icon-shape .label rect,#mermaid-svg-cpXJwvEAvuAWo3w0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-cpXJwvEAvuAWo3w0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-cpXJwvEAvuAWo3w0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-cpXJwvEAvuAWo3w0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Vibe模式
不通过
通过
需求分析
写提示词
AI生成
验证结果
审查+集成
部署上线
传统模式
需求分析
架构设计
手写代码
调试排错
代码审查
部署上线

传统模式：每个环节都要人肉操作，花时间最多的是手写代码。

Vibe 模式 ：人的精力集中在"想清楚需求"和"确认结果对不对"上，写代码交给 AI。迭代速度快了很多，但对验证能力的要求也更高。

Vibe Coding 不是什么万能药。架构设计还是得人来拿主意。AI 擅长的是执行，不是决策。

四、五种开发模式

根据论文和社区里的实践，Vibe Coding 慢慢演化出了五种常见玩法：

模式1：无约束自动化模式

#mermaid-svg-PmsPukTaGd9k40aD{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-PmsPukTaGd9k40aD .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-PmsPukTaGd9k40aD .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-PmsPukTaGd9k40aD .error-icon{fill:#552222;}#mermaid-svg-PmsPukTaGd9k40aD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PmsPukTaGd9k40aD .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-PmsPukTaGd9k40aD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PmsPukTaGd9k40aD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PmsPukTaGd9k40aD .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-PmsPukTaGd9k40aD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PmsPukTaGd9k40aD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PmsPukTaGd9k40aD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PmsPukTaGd9k40aD .marker.cross{stroke:#333333;}#mermaid-svg-PmsPukTaGd9k40aD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PmsPukTaGd9k40aD p{margin:0;}#mermaid-svg-PmsPukTaGd9k40aD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-PmsPukTaGd9k40aD .cluster-label text{fill:#333;}#mermaid-svg-PmsPukTaGd9k40aD .cluster-label span{color:#333;}#mermaid-svg-PmsPukTaGd9k40aD .cluster-label span p{background-color:transparent;}#mermaid-svg-PmsPukTaGd9k40aD .label text,#mermaid-svg-PmsPukTaGd9k40aD span{fill:#333;color:#333;}#mermaid-svg-PmsPukTaGd9k40aD .node rect,#mermaid-svg-PmsPukTaGd9k40aD .node circle,#mermaid-svg-PmsPukTaGd9k40aD .node ellipse,#mermaid-svg-PmsPukTaGd9k40aD .node polygon,#mermaid-svg-PmsPukTaGd9k40aD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PmsPukTaGd9k40aD .rough-node .label text,#mermaid-svg-PmsPukTaGd9k40aD .node .label text,#mermaid-svg-PmsPukTaGd9k40aD .image-shape .label,#mermaid-svg-PmsPukTaGd9k40aD .icon-shape .label{text-anchor:middle;}#mermaid-svg-PmsPukTaGd9k40aD .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-PmsPukTaGd9k40aD .rough-node .label,#mermaid-svg-PmsPukTaGd9k40aD .node .label,#mermaid-svg-PmsPukTaGd9k40aD .image-shape .label,#mermaid-svg-PmsPukTaGd9k40aD .icon-shape .label{text-align:center;}#mermaid-svg-PmsPukTaGd9k40aD .node.clickable{cursor:pointer;}#mermaid-svg-PmsPukTaGd9k40aD .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-PmsPukTaGd9k40aD .arrowheadPath{fill:#333333;}#mermaid-svg-PmsPukTaGd9k40aD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-PmsPukTaGd9k40aD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-PmsPukTaGd9k40aD .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PmsPukTaGd9k40aD .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-PmsPukTaGd9k40aD .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PmsPukTaGd9k40aD .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-PmsPukTaGd9k40aD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-PmsPukTaGd9k40aD .cluster text{fill:#333;}#mermaid-svg-PmsPukTaGd9k40aD .cluster span{color:#333;}#mermaid-svg-PmsPukTaGd9k40aD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-PmsPukTaGd9k40aD .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-PmsPukTaGd9k40aD rect.text{fill:none;stroke-width:0;}#mermaid-svg-PmsPukTaGd9k40aD .icon-shape,#mermaid-svg-PmsPukTaGd9k40aD .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PmsPukTaGd9k40aD .icon-shape p,#mermaid-svg-PmsPukTaGd9k40aD .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-PmsPukTaGd9k40aD .icon-shape .label rect,#mermaid-svg-PmsPukTaGd9k40aD .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PmsPukTaGd9k40aD .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-PmsPukTaGd9k40aD .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-PmsPukTaGd9k40aD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 一句话需求
AI自由发挥
生成完整功能
一次验收

特点： 给 AI 极大的自由度，适合快速验证想法。但小心------代码质量不可控，容易翻车。

适用场景： 快速原型、一次性脚本、个人小工具。

【示例】 你想快速验证一个想法：用 Python 把文件夹里的图片批量改成 800x600 尺寸。敲一句："写个 Python 脚本，把当前目录下所有 jpg/png 批量缩放到 800x600，保持比例，不够的补白。" AI 五秒出代码，跑一下完事。质量不用太讲究，用完就扔。

模式2：迭代对话协作模式

#mermaid-svg-0idohgqglYB3FzqX{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0idohgqglYB3FzqX .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0idohgqglYB3FzqX .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0idohgqglYB3FzqX .error-icon{fill:#552222;}#mermaid-svg-0idohgqglYB3FzqX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0idohgqglYB3FzqX .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0idohgqglYB3FzqX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0idohgqglYB3FzqX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0idohgqglYB3FzqX .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0idohgqglYB3FzqX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0idohgqglYB3FzqX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0idohgqglYB3FzqX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0idohgqglYB3FzqX .marker.cross{stroke:#333333;}#mermaid-svg-0idohgqglYB3FzqX svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0idohgqglYB3FzqX p{margin:0;}#mermaid-svg-0idohgqglYB3FzqX .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0idohgqglYB3FzqX .cluster-label text{fill:#333;}#mermaid-svg-0idohgqglYB3FzqX .cluster-label span{color:#333;}#mermaid-svg-0idohgqglYB3FzqX .cluster-label span p{background-color:transparent;}#mermaid-svg-0idohgqglYB3FzqX .label text,#mermaid-svg-0idohgqglYB3FzqX span{fill:#333;color:#333;}#mermaid-svg-0idohgqglYB3FzqX .node rect,#mermaid-svg-0idohgqglYB3FzqX .node circle,#mermaid-svg-0idohgqglYB3FzqX .node ellipse,#mermaid-svg-0idohgqglYB3FzqX .node polygon,#mermaid-svg-0idohgqglYB3FzqX .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0idohgqglYB3FzqX .rough-node .label text,#mermaid-svg-0idohgqglYB3FzqX .node .label text,#mermaid-svg-0idohgqglYB3FzqX .image-shape .label,#mermaid-svg-0idohgqglYB3FzqX .icon-shape .label{text-anchor:middle;}#mermaid-svg-0idohgqglYB3FzqX .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0idohgqglYB3FzqX .rough-node .label,#mermaid-svg-0idohgqglYB3FzqX .node .label,#mermaid-svg-0idohgqglYB3FzqX .image-shape .label,#mermaid-svg-0idohgqglYB3FzqX .icon-shape .label{text-align:center;}#mermaid-svg-0idohgqglYB3FzqX .node.clickable{cursor:pointer;}#mermaid-svg-0idohgqglYB3FzqX .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0idohgqglYB3FzqX .arrowheadPath{fill:#333333;}#mermaid-svg-0idohgqglYB3FzqX .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0idohgqglYB3FzqX .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0idohgqglYB3FzqX .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0idohgqglYB3FzqX .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-0idohgqglYB3FzqX .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0idohgqglYB3FzqX .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0idohgqglYB3FzqX .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0idohgqglYB3FzqX .cluster text{fill:#333;}#mermaid-svg-0idohgqglYB3FzqX .cluster span{color:#333;}#mermaid-svg-0idohgqglYB3FzqX div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0idohgqglYB3FzqX .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0idohgqglYB3FzqX rect.text{fill:none;stroke-width:0;}#mermaid-svg-0idohgqglYB3FzqX .icon-shape,#mermaid-svg-0idohgqglYB3FzqX .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0idohgqglYB3FzqX .icon-shape p,#mermaid-svg-0idohgqglYB3FzqX .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-0idohgqglYB3FzqX .icon-shape .label rect,#mermaid-svg-0idohgqglYB3FzqX .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0idohgqglYB3FzqX .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-0idohgqglYB3FzqX .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-0idohgqglYB3FzqX :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 不行，这里改一下
行
初始需求
AI生成初版
你觉得行吗？
补充反馈
完成

特点： 像跟一个会写代码的同事结对编程，你指哪他打哪。这是用得最多的模式。

适用场景： 日常开发、功能迭代、修 bug。

【示例】 你在写一个 React 表格组件，让 AI 先出一个基础版。看了之后说："第一列加一个复选框，表头加全选功能。" AI 改了。你又觉得："行高太挤了，再加一个行点击展开详情。" 几个来回，组件就差不多了。就像你在跟一个实习生说"这里改改，那里调调"。

模式3：计划驱动模式

#mermaid-svg-0EO0nwovKyQhDrR0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0EO0nwovKyQhDrR0 .error-icon{fill:#552222;}#mermaid-svg-0EO0nwovKyQhDrR0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0EO0nwovKyQhDrR0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0EO0nwovKyQhDrR0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0EO0nwovKyQhDrR0 .marker.cross{stroke:#333333;}#mermaid-svg-0EO0nwovKyQhDrR0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0EO0nwovKyQhDrR0 p{margin:0;}#mermaid-svg-0EO0nwovKyQhDrR0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster-label text{fill:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster-label span{color:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster-label span p{background-color:transparent;}#mermaid-svg-0EO0nwovKyQhDrR0 .label text,#mermaid-svg-0EO0nwovKyQhDrR0 span{fill:#333;color:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 .node rect,#mermaid-svg-0EO0nwovKyQhDrR0 .node circle,#mermaid-svg-0EO0nwovKyQhDrR0 .node ellipse,#mermaid-svg-0EO0nwovKyQhDrR0 .node polygon,#mermaid-svg-0EO0nwovKyQhDrR0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0EO0nwovKyQhDrR0 .rough-node .label text,#mermaid-svg-0EO0nwovKyQhDrR0 .node .label text,#mermaid-svg-0EO0nwovKyQhDrR0 .image-shape .label,#mermaid-svg-0EO0nwovKyQhDrR0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-0EO0nwovKyQhDrR0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0EO0nwovKyQhDrR0 .rough-node .label,#mermaid-svg-0EO0nwovKyQhDrR0 .node .label,#mermaid-svg-0EO0nwovKyQhDrR0 .image-shape .label,#mermaid-svg-0EO0nwovKyQhDrR0 .icon-shape .label{text-align:center;}#mermaid-svg-0EO0nwovKyQhDrR0 .node.clickable{cursor:pointer;}#mermaid-svg-0EO0nwovKyQhDrR0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0EO0nwovKyQhDrR0 .arrowheadPath{fill:#333333;}#mermaid-svg-0EO0nwovKyQhDrR0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0EO0nwovKyQhDrR0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0EO0nwovKyQhDrR0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0EO0nwovKyQhDrR0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-0EO0nwovKyQhDrR0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0EO0nwovKyQhDrR0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster text{fill:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 .cluster span{color:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0EO0nwovKyQhDrR0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0EO0nwovKyQhDrR0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-0EO0nwovKyQhDrR0 .icon-shape,#mermaid-svg-0EO0nwovKyQhDrR0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0EO0nwovKyQhDrR0 .icon-shape p,#mermaid-svg-0EO0nwovKyQhDrR0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-0EO0nwovKyQhDrR0 .icon-shape .label rect,#mermaid-svg-0EO0nwovKyQhDrR0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0EO0nwovKyQhDrR0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-0EO0nwovKyQhDrR0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-0EO0nwovKyQhDrR0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 需求文档
AI生成实现计划
计划走查与调整
分步骤生成代码
逐模块验证

特点： 先出计划再写代码。适合复杂功能，有时候 AI 能整出比你预期还好的架构。

适用场景： 复杂业务逻辑、多模块协同、新项目启动。

【示例】 要做一个支付订单管理模块。先让 AI 出计划：数据库设计 → API 路由 → 后台页面 → 权限控制。看完计划觉得"退款流程漏了"，让 AI 补上。确认计划没问题了，再让 AI 按步骤生成代码。每一步生成的代码都跑测试验证，确保不跑偏。

模式4：测试驱动模式

#mermaid-svg-CmzcspwzcD2V6xv9{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-CmzcspwzcD2V6xv9 .error-icon{fill:#552222;}#mermaid-svg-CmzcspwzcD2V6xv9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-CmzcspwzcD2V6xv9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-CmzcspwzcD2V6xv9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-CmzcspwzcD2V6xv9 .marker.cross{stroke:#333333;}#mermaid-svg-CmzcspwzcD2V6xv9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-CmzcspwzcD2V6xv9 p{margin:0;}#mermaid-svg-CmzcspwzcD2V6xv9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster-label text{fill:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster-label span{color:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster-label span p{background-color:transparent;}#mermaid-svg-CmzcspwzcD2V6xv9 .label text,#mermaid-svg-CmzcspwzcD2V6xv9 span{fill:#333;color:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 .node rect,#mermaid-svg-CmzcspwzcD2V6xv9 .node circle,#mermaid-svg-CmzcspwzcD2V6xv9 .node ellipse,#mermaid-svg-CmzcspwzcD2V6xv9 .node polygon,#mermaid-svg-CmzcspwzcD2V6xv9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-CmzcspwzcD2V6xv9 .rough-node .label text,#mermaid-svg-CmzcspwzcD2V6xv9 .node .label text,#mermaid-svg-CmzcspwzcD2V6xv9 .image-shape .label,#mermaid-svg-CmzcspwzcD2V6xv9 .icon-shape .label{text-anchor:middle;}#mermaid-svg-CmzcspwzcD2V6xv9 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-CmzcspwzcD2V6xv9 .rough-node .label,#mermaid-svg-CmzcspwzcD2V6xv9 .node .label,#mermaid-svg-CmzcspwzcD2V6xv9 .image-shape .label,#mermaid-svg-CmzcspwzcD2V6xv9 .icon-shape .label{text-align:center;}#mermaid-svg-CmzcspwzcD2V6xv9 .node.clickable{cursor:pointer;}#mermaid-svg-CmzcspwzcD2V6xv9 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-CmzcspwzcD2V6xv9 .arrowheadPath{fill:#333333;}#mermaid-svg-CmzcspwzcD2V6xv9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-CmzcspwzcD2V6xv9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-CmzcspwzcD2V6xv9 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-CmzcspwzcD2V6xv9 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-CmzcspwzcD2V6xv9 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-CmzcspwzcD2V6xv9 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster text{fill:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 .cluster span{color:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-CmzcspwzcD2V6xv9 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-CmzcspwzcD2V6xv9 rect.text{fill:none;stroke-width:0;}#mermaid-svg-CmzcspwzcD2V6xv9 .icon-shape,#mermaid-svg-CmzcspwzcD2V6xv9 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-CmzcspwzcD2V6xv9 .icon-shape p,#mermaid-svg-CmzcspwzcD2V6xv9 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-CmzcspwzcD2V6xv9 .icon-shape .label rect,#mermaid-svg-CmzcspwzcD2V6xv9 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-CmzcspwzcD2V6xv9 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-CmzcspwzcD2V6xv9 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-CmzcspwzcD2V6xv9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 失败
全部通过
写测试用例
AI生成通过测试的代码
运行测试
代码审查

特点： TDD 的 AI 版本。你写测试，AI 负责让测试变绿。质量最有保障的模式。

适用场景： 核心模块、安全敏感代码、需要严格回归覆盖的项目。

【示例】 要写一个"计算订单总价"的函数，需要考虑满减、优惠券、会员折扣。你先写好测试用例：

  • 普通订单：3件商品共 100 元 → 预期 100
  • 满 200 减 50：订单 220 元 → 预期 170
  • 会员 8 折 + 满减：订单 300 元 → 预期 190
    然后让 AI 写出通过这些测试的代码。测试全绿，收工。

模式5：上下文增强模式

#mermaid-svg-0gGQkILKUa3cdCMv{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-0gGQkILKUa3cdCMv .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-0gGQkILKUa3cdCMv .error-icon{fill:#552222;}#mermaid-svg-0gGQkILKUa3cdCMv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0gGQkILKUa3cdCMv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0gGQkILKUa3cdCMv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0gGQkILKUa3cdCMv .marker.cross{stroke:#333333;}#mermaid-svg-0gGQkILKUa3cdCMv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0gGQkILKUa3cdCMv p{margin:0;}#mermaid-svg-0gGQkILKUa3cdCMv .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0gGQkILKUa3cdCMv .cluster-label text{fill:#333;}#mermaid-svg-0gGQkILKUa3cdCMv .cluster-label span{color:#333;}#mermaid-svg-0gGQkILKUa3cdCMv .cluster-label span p{background-color:transparent;}#mermaid-svg-0gGQkILKUa3cdCMv .label text,#mermaid-svg-0gGQkILKUa3cdCMv span{fill:#333;color:#333;}#mermaid-svg-0gGQkILKUa3cdCMv .node rect,#mermaid-svg-0gGQkILKUa3cdCMv .node circle,#mermaid-svg-0gGQkILKUa3cdCMv .node ellipse,#mermaid-svg-0gGQkILKUa3cdCMv .node polygon,#mermaid-svg-0gGQkILKUa3cdCMv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0gGQkILKUa3cdCMv .rough-node .label text,#mermaid-svg-0gGQkILKUa3cdCMv .node .label text,#mermaid-svg-0gGQkILKUa3cdCMv .image-shape .label,#mermaid-svg-0gGQkILKUa3cdCMv .icon-shape .label{text-anchor:middle;}#mermaid-svg-0gGQkILKUa3cdCMv .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-0gGQkILKUa3cdCMv .rough-node .label,#mermaid-svg-0gGQkILKUa3cdCMv .node .label,#mermaid-svg-0gGQkILKUa3cdCMv .image-shape .label,#mermaid-svg-0gGQkILKUa3cdCMv .icon-shape .label{text-align:center;}#mermaid-svg-0gGQkILKUa3cdCMv .node.clickable{cursor:pointer;}#mermaid-svg-0gGQkILKUa3cdCMv .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-0gGQkILKUa3cdCMv .arrowheadPath{fill:#333333;}#mermaid-svg-0gGQkILKUa3cdCMv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0gGQkILKUa3cdCMv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0gGQkILKUa3cdCMv .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0gGQkILKUa3cdCMv .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-0gGQkILKUa3cdCMv .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0gGQkILKUa3cdCMv .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-0gGQkILKUa3cdCMv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0gGQkILKUa3cdCMv .cluster text{fill:#333;}#mermaid-svg-0gGQkILKUa3cdCMv .cluster span{color:#333;}#mermaid-svg-0gGQkILKUa3cdCMv div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0gGQkILKUa3cdCMv .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-0gGQkILKUa3cdCMv rect.text{fill:none;stroke-width:0;}#mermaid-svg-0gGQkILKUa3cdCMv .icon-shape,#mermaid-svg-0gGQkILKUa3cdCMv .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-0gGQkILKUa3cdCMv .icon-shape p,#mermaid-svg-0gGQkILKUa3cdCMv .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-0gGQkILKUa3cdCMv .icon-shape .label rect,#mermaid-svg-0gGQkILKUa3cdCMv .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-0gGQkILKUa3cdCMv .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-0gGQkILKUa3cdCMv .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-0gGQkILKUa3cdCMv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 不合
合
项目代码库
提取相关上下文
构造增强提示词
AI生成
检查是否符合现有架构
集成

特点： 把整个项目的背景信息喂给 AI，生成的代码更贴合现有架构。效果最好，但也是最烧 token 的。

适用场景： 大型项目、遗留系统维护、重构。

【示例】 公司有一个 5 年历史的 Spring Boot 项目，要在订单列表页加一个"导出 Excel"按钮。你把项目中已有的 FileController.java、OrderService.java 和相关的数据库表结构扔给 AI，告诉它："按照项目现有的导出模式，加一个订单 Excel 导出功能。" AI 参考了项目中已有的 CSV 导出代码，写出来的 Excel 导出跟项目风格完全一致。

五、智能体架构图

#mermaid-svg-w1ljeTQ6QaIlrCVr{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-w1ljeTQ6QaIlrCVr .error-icon{fill:#552222;}#mermaid-svg-w1ljeTQ6QaIlrCVr .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-w1ljeTQ6QaIlrCVr .marker{fill:#333333;stroke:#333333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .marker.cross{stroke:#333333;}#mermaid-svg-w1ljeTQ6QaIlrCVr svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-w1ljeTQ6QaIlrCVr p{margin:0;}#mermaid-svg-w1ljeTQ6QaIlrCVr .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster-label text{fill:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster-label span{color:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster-label span p{background-color:transparent;}#mermaid-svg-w1ljeTQ6QaIlrCVr .label text,#mermaid-svg-w1ljeTQ6QaIlrCVr span{fill:#333;color:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .node rect,#mermaid-svg-w1ljeTQ6QaIlrCVr .node circle,#mermaid-svg-w1ljeTQ6QaIlrCVr .node ellipse,#mermaid-svg-w1ljeTQ6QaIlrCVr .node polygon,#mermaid-svg-w1ljeTQ6QaIlrCVr .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .rough-node .label text,#mermaid-svg-w1ljeTQ6QaIlrCVr .node .label text,#mermaid-svg-w1ljeTQ6QaIlrCVr .image-shape .label,#mermaid-svg-w1ljeTQ6QaIlrCVr .icon-shape .label{text-anchor:middle;}#mermaid-svg-w1ljeTQ6QaIlrCVr .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .rough-node .label,#mermaid-svg-w1ljeTQ6QaIlrCVr .node .label,#mermaid-svg-w1ljeTQ6QaIlrCVr .image-shape .label,#mermaid-svg-w1ljeTQ6QaIlrCVr .icon-shape .label{text-align:center;}#mermaid-svg-w1ljeTQ6QaIlrCVr .node.clickable{cursor:pointer;}#mermaid-svg-w1ljeTQ6QaIlrCVr .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .arrowheadPath{fill:#333333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-w1ljeTQ6QaIlrCVr .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-w1ljeTQ6QaIlrCVr .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-w1ljeTQ6QaIlrCVr .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster text{fill:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr .cluster span{color:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-w1ljeTQ6QaIlrCVr .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-w1ljeTQ6QaIlrCVr rect.text{fill:none;stroke-width:0;}#mermaid-svg-w1ljeTQ6QaIlrCVr .icon-shape,#mermaid-svg-w1ljeTQ6QaIlrCVr .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-w1ljeTQ6QaIlrCVr .icon-shape p,#mermaid-svg-w1ljeTQ6QaIlrCVr .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-w1ljeTQ6QaIlrCVr .icon-shape .label rect,#mermaid-svg-w1ljeTQ6QaIlrCVr .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-w1ljeTQ6QaIlrCVr .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-w1ljeTQ6QaIlrCVr .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-w1ljeTQ6QaIlrCVr :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 项目层
基础设施层
智能体层
用户层
开发者
IDE / 聊天界面
编排智能体
代码生成智能体
代码审查智能体
测试智能体
大语言模型
RAG向量库
Git仓库
部署环境

用户通过 IDE 或聊天界面发指令 → 编排智能体拆解意图、调度子智能体 → 代码生成、审查、测试各干各的 → 结果落到 Git 仓库并部署。所有智能体背后都是大语言模型和 RAG 向量库在撑着。

六、数据流图

#mermaid-svg-jigpPoVuCcNo6R4n{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-jigpPoVuCcNo6R4n .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-jigpPoVuCcNo6R4n .error-icon{fill:#552222;}#mermaid-svg-jigpPoVuCcNo6R4n .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jigpPoVuCcNo6R4n .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jigpPoVuCcNo6R4n .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jigpPoVuCcNo6R4n .marker.cross{stroke:#333333;}#mermaid-svg-jigpPoVuCcNo6R4n svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jigpPoVuCcNo6R4n p{margin:0;}#mermaid-svg-jigpPoVuCcNo6R4n .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jigpPoVuCcNo6R4n .cluster-label text{fill:#333;}#mermaid-svg-jigpPoVuCcNo6R4n .cluster-label span{color:#333;}#mermaid-svg-jigpPoVuCcNo6R4n .cluster-label span p{background-color:transparent;}#mermaid-svg-jigpPoVuCcNo6R4n .label text,#mermaid-svg-jigpPoVuCcNo6R4n span{fill:#333;color:#333;}#mermaid-svg-jigpPoVuCcNo6R4n .node rect,#mermaid-svg-jigpPoVuCcNo6R4n .node circle,#mermaid-svg-jigpPoVuCcNo6R4n .node ellipse,#mermaid-svg-jigpPoVuCcNo6R4n .node polygon,#mermaid-svg-jigpPoVuCcNo6R4n .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jigpPoVuCcNo6R4n .rough-node .label text,#mermaid-svg-jigpPoVuCcNo6R4n .node .label text,#mermaid-svg-jigpPoVuCcNo6R4n .image-shape .label,#mermaid-svg-jigpPoVuCcNo6R4n .icon-shape .label{text-anchor:middle;}#mermaid-svg-jigpPoVuCcNo6R4n .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-jigpPoVuCcNo6R4n .rough-node .label,#mermaid-svg-jigpPoVuCcNo6R4n .node .label,#mermaid-svg-jigpPoVuCcNo6R4n .image-shape .label,#mermaid-svg-jigpPoVuCcNo6R4n .icon-shape .label{text-align:center;}#mermaid-svg-jigpPoVuCcNo6R4n .node.clickable{cursor:pointer;}#mermaid-svg-jigpPoVuCcNo6R4n .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-jigpPoVuCcNo6R4n .arrowheadPath{fill:#333333;}#mermaid-svg-jigpPoVuCcNo6R4n .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jigpPoVuCcNo6R4n .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jigpPoVuCcNo6R4n .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jigpPoVuCcNo6R4n .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-jigpPoVuCcNo6R4n .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jigpPoVuCcNo6R4n .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-jigpPoVuCcNo6R4n .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jigpPoVuCcNo6R4n .cluster text{fill:#333;}#mermaid-svg-jigpPoVuCcNo6R4n .cluster span{color:#333;}#mermaid-svg-jigpPoVuCcNo6R4n div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-jigpPoVuCcNo6R4n .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-jigpPoVuCcNo6R4n rect.text{fill:none;stroke-width:0;}#mermaid-svg-jigpPoVuCcNo6R4n .icon-shape,#mermaid-svg-jigpPoVuCcNo6R4n .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jigpPoVuCcNo6R4n .icon-shape p,#mermaid-svg-jigpPoVuCcNo6R4n .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-jigpPoVuCcNo6R4n .icon-shape .label rect,#mermaid-svg-jigpPoVuCcNo6R4n .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jigpPoVuCcNo6R4n .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-jigpPoVuCcNo6R4n .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-jigpPoVuCcNo6R4n :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 输出
反馈
验证
处理
输入
失败
通过
自然语言需求
上下文数据
代码库快照
提示词组装
LLM推理生成
代码提取与格式化
语法检查
类型检查
单元测试
集成检查
错误信息结构化
构造修复提示
差异对比
人工确认
代码提交

整个流程是这样的：提示词带着需求和上下文进 LLM → 生成的代码一层层过语法检查、类型检查、测试 → 没过就反馈回提示词层再来一遍 → 过了就进入 diff 对比，等人确认，最后落地。

七、实战示例

示例 1：用 Vibe Coding 构建 REST API

需求： 一个用户注册/登录的 Express API，MongoDB 存储，JWT 鉴权。

提示词：

用 Node.js + Express + TypeScript 写一个 REST API，包含：

  • POST /api/register --- 注册（用户名、密码、邮箱），密码 bcrypt 加密
  • POST /api/login --- 登录，返回 JWT
  • GET /api/profile --- 需要 Bearer token 鉴权
    用 MongoDB（mongoose），错误处理用 express-async-errors。
    先写 package.json 和 tsconfig.json，再写入口文件和路由。

AI 生成（关键片段）：

typescript 复制代码 
import express from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcrypt';
import { User } from './models/User';

const app = express();
app.use(express.json());

app.post('/api/register', async (req, res) => {
  const { username, password, email } = req.body;
  const hash = await bcrypt.hash(password, 12);
  const user = await User.create({ username, email, password: hash });
  res.status(201).json({ id: user._id, username: user.username });
});

验证过程：

  1. npm install → 装依赖 ✅
  2. npx tsc --noEmit → 类型检查 ✅
  3. npm test → 写 3 个测试用例（注册/登录/鉴权）→ 全部通过 ✅

示例 2：用 Vibe Coding 调试 Bug

需求： React 组件里的 useEffect 死循环了，组件无限 re-render。

提示词：

我有一段 React 代码，useEffect 造成了无限循环。帮我分析为什么，并修复。

tsx 复制代码 
const [user, setUser] = useState(null);
useEffect(() => {
  fetchUser().then(setUser);
}, [user]);

给出修复后的代码，并解释根因。

AI 分析：

问题：user 在依赖数组里，fetchUser 完了又 setUser → user 变了 → 再次触发 effect，死循环就来了。

修复：去掉 user 依赖，加上 || !user 的初始守卫。

tsx 复制代码 
const [user, setUser] = useState(null);
useEffect(() => {
  if (!user) fetchUser().then(setUser);
}, []); // 只在挂载时执行一次

验证过程： 用 React DevTools 看 re-render 次数，从 ∞ 降到了 2 ✅

示例 3：用 Vibe Coding 重构遗留代码

需求： 把 500 行的 jQuery 面条代码重构为 React 组件。

提示词：

以下是一个管理后台的 jQuery 代码，负责增删改表格数据。请重构为 React + TypeScript 组件化代码。

约束：

  • 拆分为至少 3 个组件：Table、TableRow、TableToolbar
  • 用 axios 替代 $.ajax
  • 保持原有功能不变
  • 给出每个组件的 Props 类型定义
javascript 复制代码 
// 500行 jQuery 代码略...

AI 生成的组件结构：

复制代码 
components/
  DataTable/
    index.tsx        --- 主组件，管 state 和 API 调用
    TableRow.tsx     --- 单行渲染，编辑/删除按钮
    TableToolbar.tsx --- 搜索、批量操作、新增按钮
    types.ts         --- 接口定义

验证过程：

  1. 对比功能列表：新增行 ✅ / 编辑行 ✅ / 删除行 ✅ / 搜索 ✅ / 分页 ✅
  2. React DevTools 检查组件树 → 结构清晰 ✅
  3. npm run build → 零错误 ✅

八、最佳实践清单

1. 规范驱动开发

别让 AI 放飞自我。先定规矩再写代码：

  • 用 .cursorrules 或 CLAUDE.md 定好技术栈和编码风格
  • 提示词里写清楚"用 TypeScript，函数式组件，别用 class"
  • 提前说好命名规范和文件夹结构

【提示词对比：好的跟不好的】

❌ 不好的提示词：

"帮我写个登录页面"

✅ 好的提示词：

"在 React + TypeScript 项目里加一个登录页面。已有 UserContext（见 @/contexts/UserContext），后端 POST /api/auth/login 接受 {email, password} 返回 {token, user}。页面要：邮箱输入框 + 密码输入框 + 登录按钮 + 表单验证 + 错误提示。用 Ant Design 组件。登录成功后存 token 到 localStorage，跳转到 /dashboard。参考现有 pages/Register.tsx 的风格写。"

差别在哪？不好的提示词 AI 只能猜，出来的东西大概率跟你的项目对不上。好的提示词把背景、约束、参考都说清楚了，AI 一次就能交出能用的东西。

2. 上下文管理

AI 记不住太多东西。每次对话都要带上足够的背景信息：

  • 当前文件用到的接口定义
  • 项目里已有的类似代码当参考
  • 数据库结构或 API 文档片段

3. 代码审查

AI 写的代码跟人写的一样，都得审。重点关注：

  • 安全漏洞（SQL 注入、XSS、密钥写死在代码里）
  • 性能问题（N+1 查询、内存泄漏）
  • 边界情况（空值、超大数值、并发）

【真实案例】 有开发者让 AI 写了一个文件上传功能，AI 生成的代码直接用了文件名作为存储路径------没有做任何安全过滤。结果用户上传了一个文件名带 .../.../.../etc/passwd 的文件，直接把系统关键文件覆盖了。这就是 AI 写代码不安全的典型例子------AI 不会主动考虑安全问题，你得在提示词里明确要求。比如在提示词里加一句："注意安全防护，防止路径穿越攻击、限制文件类型和大小。"

4. 版本控制

AI 生成代码后，立刻 commit。理由很简单：

  • 对比 diff 更容易发现问题
  • 随时能回滚到某次生成
  • commit message 里标上"AI 生成的"，方便以后追踪

5. 安全审查

永远别 blindly 相信 AI 写的代码。 特别留神：

  • eval() 和动态执行
  • 密钥、密码硬编码
  • 权限校验漏了
  • 依赖版本太老

九、常见陷阱与应对

末日循环（Doom Loop）

症状： AI 修了一个 bug → 带进来两个新 bug → 修新 bug 又带进来三个 → 无限循环，代码越来越烂。

应对：

  • 设个上限（最多 5 轮，过了就重开对话）
  • 每轮只让 AI 改一个文件
  • 卡住了就退回上一个验证过的版本重新来

【真实对话还原------末日循环】

你："给这个按钮加一个 loading 状态"

AI：加了 loading，但把按钮的 onClick 事件搞丢了

你："onClick 没了，加上"

AI：加回 onClick，但样式错乱了，按钮变成了蓝色方形

你："样式不对，改回圆角带阴影的"

AI：修好了样式，但 loading 动画用了新依赖包，跟项目现有的动画库冲突了

你："不要新增依赖，用项目里自带的动画库"

AI：换了动画实现，但 loading 时长的计算逻辑写错了，一直在转不停

......这时候你已经跟 AI 来回拉扯了 8 轮，代码比最初还烂，你心态也崩了。

正确的做法：第 3 轮还没搞定 → git checkout -- 回滚到改之前 → 重新写一条更清楚的提示词，一次性把所有需求说全。

上下文崩溃

症状： 对话长了以后 AI 开始"失忆"，忘了之前聊了什么，生成的代码前后矛盾。

应对：

  • 每次发提示词都带上关键的背景摘要
  • 重要决定记到 CHANGELOG 或 AGENTS.md 里
  • 适时开新对话，别让一条对话扯太长

提示债务

症状： 提示词越来越长、越来越绕，跟祖传代码一样没人敢碰。

应对：

  • 提示词也要写注释
  • 把常用的提示词做成模板
  • 定期清理、重构你的提示词库

技术债务加速

症状： AI 倾向"能用就行"，不管长远架构，技术债务比手写代码攒得还快。

应对：

  • 每周安排"清理日"，专门还 AI 欠下的技术债
  • 严格守住架构规范，别给 AI 走捷径的机会
  • 代码审查标准不因为"是 AI 写的"就放水

十、工具生态全景图

#mermaid-svg-xuel2GMxWklpYpr4{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xuel2GMxWklpYpr4 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xuel2GMxWklpYpr4 .error-icon{fill:#552222;}#mermaid-svg-xuel2GMxWklpYpr4 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xuel2GMxWklpYpr4 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xuel2GMxWklpYpr4 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xuel2GMxWklpYpr4 .marker.cross{stroke:#333333;}#mermaid-svg-xuel2GMxWklpYpr4 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xuel2GMxWklpYpr4 p{margin:0;}#mermaid-svg-xuel2GMxWklpYpr4 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xuel2GMxWklpYpr4 .cluster-label text{fill:#333;}#mermaid-svg-xuel2GMxWklpYpr4 .cluster-label span{color:#333;}#mermaid-svg-xuel2GMxWklpYpr4 .cluster-label span p{background-color:transparent;}#mermaid-svg-xuel2GMxWklpYpr4 .label text,#mermaid-svg-xuel2GMxWklpYpr4 span{fill:#333;color:#333;}#mermaid-svg-xuel2GMxWklpYpr4 .node rect,#mermaid-svg-xuel2GMxWklpYpr4 .node circle,#mermaid-svg-xuel2GMxWklpYpr4 .node ellipse,#mermaid-svg-xuel2GMxWklpYpr4 .node polygon,#mermaid-svg-xuel2GMxWklpYpr4 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xuel2GMxWklpYpr4 .rough-node .label text,#mermaid-svg-xuel2GMxWklpYpr4 .node .label text,#mermaid-svg-xuel2GMxWklpYpr4 .image-shape .label,#mermaid-svg-xuel2GMxWklpYpr4 .icon-shape .label{text-anchor:middle;}#mermaid-svg-xuel2GMxWklpYpr4 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-xuel2GMxWklpYpr4 .rough-node .label,#mermaid-svg-xuel2GMxWklpYpr4 .node .label,#mermaid-svg-xuel2GMxWklpYpr4 .image-shape .label,#mermaid-svg-xuel2GMxWklpYpr4 .icon-shape .label{text-align:center;}#mermaid-svg-xuel2GMxWklpYpr4 .node.clickable{cursor:pointer;}#mermaid-svg-xuel2GMxWklpYpr4 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-xuel2GMxWklpYpr4 .arrowheadPath{fill:#333333;}#mermaid-svg-xuel2GMxWklpYpr4 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xuel2GMxWklpYpr4 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xuel2GMxWklpYpr4 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xuel2GMxWklpYpr4 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-xuel2GMxWklpYpr4 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xuel2GMxWklpYpr4 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-xuel2GMxWklpYpr4 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xuel2GMxWklpYpr4 .cluster text{fill:#333;}#mermaid-svg-xuel2GMxWklpYpr4 .cluster span{color:#333;}#mermaid-svg-xuel2GMxWklpYpr4 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xuel2GMxWklpYpr4 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-xuel2GMxWklpYpr4 rect.text{fill:none;stroke-width:0;}#mermaid-svg-xuel2GMxWklpYpr4 .icon-shape,#mermaid-svg-xuel2GMxWklpYpr4 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xuel2GMxWklpYpr4 .icon-shape p,#mermaid-svg-xuel2GMxWklpYpr4 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-xuel2GMxWklpYpr4 .icon-shape .label rect,#mermaid-svg-xuel2GMxWklpYpr4 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xuel2GMxWklpYpr4 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-xuel2GMxWklpYpr4 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-xuel2GMxWklpYpr4 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 辅助设施
AI模型
GPT-4o / o1
Claude 3.5/4
DeepSeek-Coder
CLI工具
Claude Code
Aider
OpenCode
IDE集成
👉 Cursor
👉 GitHub Copilot
👉 Windsurf
👉 Continue.dev
向量数据库
语言服务器
静态检查

工具 类型 特点
Cursor IDE Vibe Coding 体验最好，深度上下文感知
Copilot IDE 插件 微软出品，GitHub 生态打通
Windsurf IDE 新秀，天然支持多文件编辑
Continue.dev IDE 插件 开源，可以自己托管模型
Claude Code CLI Anthropic 官方，强项是长上下文
Aider CLI 开源，支持 git 自动 commit
OpenCode CLI 阿里系，中文场景表现好

写在最后： Vibe Coding 不是说你就完全不用写代码了，而是让你把精力从"怎么写"挪到"写什么"上。它降低的是编程的门槛，不是思考的门槛。用得好的，往往是那些架构能力强的工程师，而不是提示词写得花里胡哨的人。

工具一直在变，但基本功不变：理解需求、设计架构、验证质量------这三件事，AI 暂时还替代不了你。

相关推荐
暗夜猎手-大魔王1 小时前
hermes源码学习7--会话存储
人工智能·学习
蓝速科技1 小时前
蓝速科技立式 AI 数字人一体机落地实战指南
人工智能·科技
张飞飞飞飞飞1 小时前
目标检测-根据YOLO格式标签统计目标尺寸分布
人工智能·yolo·目标检测
AI客栈1 小时前
云原生 AI 平台：Kubernetes 智能调度器如何让 GPU 利用率翻倍
人工智能
翼达口香糖1 小时前
在普通笔记本上加速大模型：我的OpenVINO异构计算实践
人工智能·边缘计算
Rocky Ding*1 小时前
Token Merging for Fast Stable Diffusion：一篇读懂 Stable Diffusion 的免训练加速机制
论文阅读·人工智能·深度学习·机器学习·stable diffusion·aigc·ai-native
李燚1 小时前
Workflow 编排：字段映射、数据流分离
agent·chain·workflow·graph·aiagent·eino
虾壳云官方1 小时前
【一步到位】OpenClaw 2.7.9 Windows 部署 + 激活 + 使用 (含安装包)
人工智能·windows·自动化·openclaw·小龙虾·openclaw安装·openclaw一键安装
椒颜皮皮虾྅1 小时前
OpenVINO™ C# API 3.3 全新发布！正式接入 OpenVINO GenAI，C# 本地大模型开发全面启航！
人工智能·开源·c#·openvino
热门推荐
01《置身钉内》原文-可播放阅读02【AI】2026 年具身智能模型和世界模型总结03Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析04AI科技热点日报 | 2026年6月1日052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06GitHub 镜像站点072026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf08Codex 下载安装指南：Windows 和 macOS 官方版下载092026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？10【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法