轻松上手 Vibe Coding如何与 AI 协作写出靠谱代码前言1. Vibe Coding 解决的不是写代码而是协作失控2. 第一步规划就是一切2.1 先规划再编码2.2 规划要写到什么程度3. 用 React Todo 看懂规划如何落地4. 第二步用胶水编程降低幻觉风险4.1 胶水编程不是盲目装库4.2 拖拽排序里的胶水代码长什么样5. 第三步用元方法论让 AI 自我进化5.1 Alpha 提示词规定怎么干活5.2 Omega 提示词复盘生成结果6. Claude 终端实战从规划到拖拽排序6.1 进入 Claude 终端6.2 确认规划后再让 AI 编码6.3 追加拖拽排序需求7. 一套适合新手的 Vibe Coding 工作流8. 参考资料总结前言很多人第一次用 AI 写代码体验并不轻松。你明明只是想让它写一个页面它可能一口气给你塞进登录、接口、状态管理、本地缓存、动画、权限控制。代码看起来挺完整一跑就报错就算能跑也像一团临时拼出来的东西后面想改一个字段都不知道从哪里下手。这就是 Vibe Coding 新手最容易踩的坑把 AI 当成自动打字机而不是协作对象。真正靠谱的 AI 编程不是让 AI “直接帮我写完”而是让 AI 先进入项目语境理解边界、技术栈、数据结构和模块拆分再逐步实现。换句话说Vibe Coding 的重点不是“怎么写代码”而是怎么与 AI 协作写出可维护的代码。1. Vibe Coding 解决的不是写代码而是协作失控AI 写代码的问题通常不在于它不会写语法而在于它不知道你的项目边界。如果你直接说帮我写一个 React 待办清单页面支持新增、删除任务。AI 很可能会自行脑补很多东西例如要不要本地存储要不要远程 API要不要拖拽排序要不要筛选、搜索、优先级数据字段叫text、title还是content组件应该拆几个状态放在父组件、Context还是第三方状态库这些问题如果没有提前约束AI 就会自己做主。它不是故意乱写而是大模型会根据训练经验去补全“看起来合理”的答案。补全一多代码就开始膨胀字段一乱后面就开始幻觉逻辑一散项目就慢慢变成难以维护的屎山。Vibe Coding 的第一原则不要急着让 AI 写代码先让 AI 和你一起确定“什么不做”。对新手来说Codex、Claude Code 这类工具不要只当成“代码生成器”更应该当成一个刚入职的新同事。新同事进入公司不会第一天就改核心业务代码他需要先看员工手册、技术规范、业务流程和项目文档。AI 也是一样越早让它读懂规则后面生成的代码越稳定。2. 第一步规划就是一切规划的本质不是写一份漂亮文档而是给 AI 建立一个稳定的上下文。在 Codex 里经常会有类似/init的初始化动作用来让 AI 读取项目结构、技术栈、已有约定并生成项目说明文件。这个文件可以是AGENTS.md、CLAUDE.md、docs/plan.md也可以是你自己维护的需求规划文档。它的价值在于后续每次对话都能带着同一份项目约束前进。AI 不再每轮重新猜而是围绕同一个规划持续迭代。2.1 先规划再编码以一个 React Tailwind CSS 的员工任务清单页面为例新手最好的第一条提示词不是“帮我写代码”而是遵守胶水编程优先使用成熟方案避免凭空造逻辑。 第一个阶段只做规划禁止输出任何代码。 1. 确认技术栈 React 19 Tailwind CSS useState。 2. 梳理功能边界 - 新增待办 - 删除待办 - 切换完成状态 - 不做本地持久化 - 不做远程 API - 不做筛选 - 不做拖拽排序 3. 拆分模块 - TodoInput输入新任务 - TodoItem展示单个任务 - TodoList展示任务列表 - TodoPage管理整体状态 4. 定义数据流 使用 useState 存储 task 数组。 数据结构固定为 { id, text, completed } 5. 输出这份完整规划等待我确认无误后再分段实现代码。这条提示词看起来比“帮我写一个 Todo”麻烦但它能提前解决 AI 最容易失控的几个点。约束项解决的问题如果不约束会怎样技术栈限定实现方式AI 可能擅自引入状态库、UI 库或后端接口功能边界控制需求范围一个简单页面被扩展成复杂应用模块拆分保持代码可读所有逻辑堆进一个大组件数据结构减少字段幻觉一会儿用title一会儿用text等待确认给人类审核入口错误规划直接进入实现阶段这里最关键的不是格式而是思维方式先让 AI 写规划再由人审核规划确认后再写代码。2.2 规划要写到什么程度一份有效规划不需要很长但必须回答四类问题。第一类是技术栈。比如这个项目明确使用React 19、Tailwind CSS和useState那 AI 就不应该擅自引入Redux、Zustand或复杂路由。第二类是功能边界。新增、删除、切换完成状态属于第一阶段本地存储、接口同步、拖拽排序、筛选搜索属于后续阶段。边界不是限制能力而是保护项目节奏。第三类是模块结构。组件拆分要像乐高一样清晰每个模块只负责一件事。比如TodoInput不负责渲染列表TodoItem不负责维护全局数组TodoPage才是状态管理的中心。第四类是数据结构。对于 Todo 项提前约定{id:string,text:string,completed:boolean}这可以从根上减少 AI 的字段幻觉。因为很多 Bug 不是逻辑错而是组件 A 传了title组件 B 却读text。3. 用 React Todo 看懂规划如何落地规划确认之后再进入实现阶段。这个时候 AI 的任务不再是自由发挥而是按照规划逐段交付。下面这段不是完整项目代码而是用来说明数据流如何被规划约束住。import{useState}fromreact;functionTodoPage(){const[tasks,setTasks]useState([]);functionaddTask(text){consttrimmedTexttext.trim();if(!trimmedText)return;setTasks((currentTasks)[...currentTasks,{// id 只负责唯一标识不参与展示文案避免后续排序和删除时找错对象id:crypto.randomUUID(),text:trimmedText,completed:false,},]);}functiontoggleTask(id){setTasks((currentTasks)currentTasks.map((task)task.idid?{...task,completed:!task.completed}:task));}functiondeleteTask(id){setTasks((currentTasks)currentTasks.filter((task)task.id!id));}return(TodoList tasks{tasks}onToggleTask{toggleTask}onDeleteTask{deleteTask}onAddTask{addTask}/);}这段代码的重点不是useState本身而是它体现了规划里的几个约束。tasks是唯一状态源子组件只通过props接收数据和事件。addTask、toggleTask、deleteTask都围绕固定字段{ id, text, completed }工作。这样一来AI 继续生成TodoInput、TodoItem时也会自然沿着同一个数据结构写不容易突然冒出另一个字段名。这就是“先规划”的价值它把 AI 的生成空间从无限开放压缩到一个可审核、可维护的范围内。4. 第二步用胶水编程降低幻觉风险规划解决的是“方向失控”胶水编程解决的是“实现失控”。很多新手会让 AI 从零手写复杂功能例如帮我给 React 待办清单写一个拖拽排序功能。这条指令的风险很高。因为拖拽排序看起来只是“拖一下换位置”但真实边界非常多鼠标事件、触摸事件、键盘可访问性、碰撞检测、滚动容器、列表动画、拖拽取消、移动端行为、焦点管理。让 AI 从零手写这些底层逻辑很容易生成一套能看但不稳的代码。胶水编程的思路正好相反轮子别人造好你只做胶水。胶水不生产零件只负责联通零件。也就是说不要让 AI 去重新发明拖拽系统而是指挥它调研成熟库把成熟库和现有组件粘起来。4.1 胶水编程不是盲目装库胶水编程有一个重要前提先判断需求是否真的需要第三方库。新增、删除、切换完成状态用useState足够不需要引入复杂状态库。但拖拽排序属于交互边界复杂的功能就应该优先使用成熟方案。比如拖拽排序就可以优先使用react-beautiful-dnd这类已经被大量项目验证过的拖拽库。它把拖拽上下文、拖拽区域、拖拽元素这些复杂交互封装好了我们只需要把现有TodoList的数据结构接进去。当然React 生态里还有dnd-kit这样的方案也可以让 AI 顺手了解。但这篇实战先用react-beautiful-dnd演示胶水编程因为它的 API 结构非常适合初学者理解外层是拖拽上下文中间是可投放区域里面是每一个可拖拽条目。一个更稳的提示词可以这样写遵守胶水编程原则绝不从零自研底层拖拽逻辑优先选择社区成熟开源组件。 当前需求给 TodoList 增加拖拽排序。 1. 先调研 React 生态成熟拖拽库。 2. 优先使用 react-beautiful-dnd 实现 sortable list。 3. 本阶段只实现 react-beautiful-dnd 方案dnd-kit 作为延伸了解即可。 4. 不要自己手写鼠标坐标监听、碰撞检测和排序底层逻辑。 5. 输出内容顺序 - 安装依赖命令 - 解释依赖作用 - 说明如何把现有 TodoList 和 react-beautiful-dnd 衔接 - 只写模块之间适配、数据流转的胶水代码这条提示词的本质是把 AI 从“发明者”切换成“集成工程师”。4.2 拖拽排序里的胶水代码长什么样如果使用react-beautiful-dnd安装命令通常是pnpmi react-beautiful-dnd这个依赖的核心价值是把底层拖拽交互封装成三个组件DragDropContext、Droppable和Draggable。我们不用自己监听鼠标坐标也不用自己处理拖拽过程中的占位、移动和释放只需要在拖拽结束时更新tasks数组顺序。依赖作用为什么需要react-beautiful-dnd提供拖拽上下文、可投放区域和可拖拽元素不手写底层拖拽交互DragDropContext包裹整个拖拽区域监听拖拽开始和结束统一管理拖拽生命周期Droppable定义任务列表这个“可放置区域”告诉库哪些地方可以放下任务Draggable定义每一个可拖拽任务条目告诉库哪个元素可以被拖动在实现层面胶水代码只做三件事。第一把列表包进DragDropContext让库接管拖拽生命周期。第二用Droppable标记任务列表用Draggable标记每个任务条目。第三在onDragEnd里根据source.index和destination.index更新tasks数组顺序。import{DragDropContext,Droppable,Draggable}fromreact-beautiful-dnd;functionSortableTodoList({tasks,onReorderTasks,renderTask}){functionhandleDragEnd(result){const{source,destination}result;// destination 为空说明任务被拖到了列表外面此时不改变顺序if(!destination)return;if(source.indexdestination.index)return;constnextTasks[...tasks];const[movedTask]nextTasks.splice(source.index,1);nextTasks.splice(destination.index,0,movedTask);// 排序只改变数组顺序不修改 task 字段避免拖拽逻辑污染业务数据onReorderTasks(nextTasks);}return(DragDropContext onDragEnd{handleDragEnd}Droppable droppableIdtodo-list{(droppableProvided)(ul ref{droppableProvided.innerRef}{...droppableProvided.droppableProps}{tasks.map((task,index)(Draggable key{task.id}draggableId{task.id}index{index}{(draggableProvided,snapshot)(li ref{draggableProvided.innerRef}{...draggableProvided.draggableProps}{...draggableProvided.dragHandleProps}className{snapshot.isDragging?opacity-60:undefined}{renderTask(task)}/li)}/Draggable))}{/* placeholder 用来保留拖拽时的列表占位避免布局突然塌陷 */}{droppableProvided.placeholder}/ul)}/Droppable/DragDropContext);}这段代码没有手写拖拽底层逻辑。真正复杂的拖拽生命周期、占位元素、拖拽元素位置变化都交给react-beautiful-dnd我们只负责把自己的tasks数据结构接进去。这就是胶水编程的核心少造轮子多做适配少写底层多写连接。5. 第三步用元方法论让 AI 自我进化当项目越来越大只靠单次提示词是不够的。你需要让 AI 不断吸收反馈把好的经验沉淀下来把差的输出模式纠正掉。这就是元方法论不只是让 AI 完成任务还要让 AI 学会“以后怎么更好地完成类似任务”。5.1 Alpha 提示词规定怎么干活可以把Alpha理解成开工前的工作规范。它规定 AI 每次进入任务时必须遵守什么流程。你是这个项目的协作工程师。 每次实现功能前必须先完成 1. 阅读项目规划文档。 2. 复述当前需求边界。 3. 判断是否需要第三方成熟方案。 4. 给出模块拆分和数据流设计。 5. 等待确认后再写代码。 编码时必须遵守 - 不擅自新增规划外功能 - 不更改已约定字段名 - 不从零手写成熟库已经解决的底层逻辑 - 修改后说明影响范围 - 能跑测试就跑测试不能跑要说明原因这类提示词适合放进项目级记忆文件例如AGENTS.md或CLAUDE.md。它的作用不是让 AI “变聪明”而是让它在每次任务里都沿着同一套工程习惯工作。5.2 Omega 提示词复盘生成结果Omega则是收尾阶段的评估提示词。它不负责写代码而是负责审查结果。请对刚才生成的代码进行复盘评分。 从 1 到 5 分评估 1. 是否符合原始规划 2. 是否出现规划外功能 3. 是否复用了成熟方案 4. 是否存在字段名或数据结构不一致 5. 是否有明显可维护性问题 如果低于 4 分 - 说明具体问题 - 给出修正建议 - 更新项目规划或提示词规范这个流程的价值很大。因为 AI 不是只会“生成”它也可以参与“评估生成”。你可以让它在每次任务后检查自己有没有偏离规划有没有引入不必要复杂度有没有写出难维护的代码。长期下来项目会形成一套越来越清晰的协作规范。AI 不再只是每次临时发挥而是在持续积累项目经验。6. Claude 终端实战从规划到拖拽排序理解方法论之后最好的练习方式就是在真实终端里跑一遍。下面用claude命令行演示一次完整流程先让 AI 规划 React 待办页面再让它按规划编码最后追加拖拽排序需求。这个实战的关键不在于 Todo 页面本身而在于观察 AI 的工作方式有没有被约束住。第一轮要求它只做规划不输出代码第二轮才允许它编码第三轮增加拖拽功能时要求它优先复用成熟库只做胶水代码。6.1 进入 Claude 终端先在项目目录里打开终端进入claudeclaude进入后不要马上让 AI 写代码。第一条指令要先把边界、技术栈、组件拆分和数据结构说清楚。帮我写一个 React 待办清单页面支持新增、删除任务。 - 先规划再编码 遵守胶水编程优先使用成熟方案避免凭空造逻辑。 第一个阶段只做规划禁止输出任何代码。 1. 确认技术栈 React 19 Tailwind CSS useState。 2. 梳理功能边界 - 新增待办 - 删除待办 - 切换完成状态 - 不做本地持久化 - 不做筛选 - 不做拖拽功能 3. 拆分模块乐高组件 - 输入框组件 - 待办条目组件 - 列表容器组件 4. 定义数据流 useState 存储 task 数组。 数据结构固定为 { id, text, completed } 5. 输出这份完整规划等待我确认无误后再分段实现代码。这条提示词里有两个非常重要的控制点。第一第一个阶段只做规划禁止输出任何代码它把 AI 从“立即生成代码”的惯性里拉出来让它先完成需求理解。第二等待我确认无误后再分段实现代码它给人类保留了审核入口。AI 输出规划之后不要急着继续先检查功能边界有没有越界、组件拆分是否合理、字段名是否统一。检查项应该看到什么如果有问题怎么处理技术栈React 19、Tailwind CSS、useState让 AI 移除多余技术功能边界只包含新增、删除、完成状态切换删除本地存储、筛选、拖拽等规划外内容组件拆分输入框、条目、列表容器避免所有逻辑堆进单个组件数据结构{ id, text, completed }统一字段名不允许混用title、content6.2 确认规划后再让 AI 编码当 AI 输出的规划没有问题后再输入第二条指令让它进入实现阶段规划确认无误现在开始编码。 请按刚才的规划分段实现 1. 先实现 TodoPage 的状态管理和数据流。 2. 再实现 TodoInput、TodoItem、TodoList 三个组件。 3. 使用 Tailwind CSS 完成基础样式。 4. 不要新增规划外功能。 5. 每段代码后说明它和规划中的哪个模块对应。这一步的重点是“分段实现”。不要让 AI 一次性输出一整个大文件因为大块代码不利于审查。更好的方式是让它先写状态管理再写输入组件再写条目组件最后写列表容器。每一步都能和规划中的模块对应起来后面出了问题也更容易定位。如果 AI 在实现过程中擅自加入localStorage、接口请求、筛选按钮或拖拽排序就直接让它回滚到规划边界这部分超出了当前规划。 请移除本地持久化、筛选和拖拽相关逻辑只保留新增、删除、切换完成状态。 字段结构必须继续使用 { id, text, completed }。这就是 Vibe Coding 里的“过程控制”。你不是被动接收 AI 的结果而是在不断校准它的输出方向。6.3 追加拖拽排序需求当基础 Todo 页面已经能跑之后再进入第二阶段给待办列表增加拖拽排序。这时不要直接说“帮我写拖拽排序”。更稳的提示词是当前需求给待办列表增加拖拽排序。 1. 先调研 React 生态成熟的拖拽库优先选用 react-beautiful-dnd业内广泛使用。 安装命令 pnpm i react-beautiful-dnd 目标结构 react-beautiful-dnd ...list /react-beautiful-dnd 2. 不要自己手写拖拽底层代码只做粘合工作。 3. 输出内容顺序 - 安装依赖命令 - 把现有 TodoList 组件和 react-beautiful-dnd 进行衔接 - 只写模块之间适配、数据流转的粘合代码这里的react-beautiful-dnd.../react-beautiful-dnd是概念写法用来表达“把现有列表包进拖拽库提供的上下文里”。如果真的使用react-beautiful-dndAI 输出时应该围绕DragDropContext、Droppable、Draggable这些组件做衔接而不是发明一个不存在的 JSX 标签。这条指令的教学价值很明显它不是让 AI 手写拖拽系统而是引导 AI 复用react-beautiful-dnd再把这个库和现有TodoList连接起来。到这里拖拽排序的实现重点就变了我们不再关心鼠标坐标怎么计算、拖拽元素怎么移动、列表占位怎么处理而是关心onDragEnd触发后如何根据拖拽前后的索引更新tasks数组。也就是说底层交互交给库业务代码只维护数据顺序。React 生态里还有dnd-kit这类拖拽方案后续做更复杂的拖拽交互时也可以继续了解。但在这个 TodoList 实战里先把react-beautiful-dnd跑通把“成熟组件 少量胶水代码”的思路吃透比同时比较多个库更重要。7. 一套适合新手的 Vibe Coding 工作流把前面的内容串起来新手可以直接采用下面这套工作流。阶段人类要做什么AI 要做什么产物初始化说明项目目标和技术栈阅读项目并生成规划docs/plan.md或项目说明文件规划审核功能边界拆分模块、定义数据结构可确认的任务计划实现分段确认代码按模块写胶水代码小步提交的功能代码验证运行页面或测试修复报错、解释影响范围可运行结果复盘判断是否符合预期用 Omega 提示词评分更新后的规范和经验这套流程看起来比“直接生成”慢一点但实际开发会更快。因为真正浪费时间的往往不是第一版代码没写出来而是第一版代码写歪了后面越改越乱。Vibe Coding 最好的状态是你和 AI 各做擅长的事。人类负责目标、边界、判断和取舍AI 负责调研、拆解、生成、适配和复盘。你不需要一开始就会写所有代码但你必须学会提要求、定规则、审规划、控范围。8. 参考资料react-beautiful-dnd官方 GitHub 仓库atlassian/react-beautiful-dnddnd-kitReact 快速开始文档React Quickstart - dnd kit总结轻松上手 Vibe Coding 的关键不是让 AI 更快地吐出代码而是先建立一套稳定的协作方式。第一步用规划锁定技术栈、功能边界、模块拆分和数据结构避免 AI 擅自扩展需求第二步在 Claude 终端里先规划、再确认、再编码把人类审核放进真实流程第三步用胶水编程优先复用成熟方案让 AI 少写高风险底层逻辑多做模块适配和数据流转最后再用 Alpha 和 Omega 这类元提示词把项目规范和复盘机制沉淀下来。这样使用 AI 写代码代码不只是“能跑”还会更清晰、更一致也更容易继续维护。
轻松上手 Vibe Coding如何与 AI 协作写出靠谱代码前言1. Vibe Coding 解决的不是写代码而是协作失控2. 第一步规划就是一切2.1 先规划再编码2.2 规划要写到什么程度3. 用 React Todo 看懂规划如何落地4. 第二步用胶水编程降低幻觉风险4.1 胶水编程不是盲目装库4.2 拖拽排序里的胶水代码长什么样5. 第三步用元方法论让 AI 自我进化5.1 Alpha 提示词规定怎么干活5.2 Omega 提示词复盘生成结果6. Claude 终端实战从规划到拖拽排序6.1 进入 Claude 终端6.2 确认规划后再让 AI 编码6.3 追加拖拽排序需求7. 一套适合新手的 Vibe Coding 工作流8. 参考资料总结前言很多人第一次用 AI 写代码体验并不轻松。你明明只是想让它写一个页面它可能一口气给你塞进登录、接口、状态管理、本地缓存、动画、权限控制。代码看起来挺完整一跑就报错就算能跑也像一团临时拼出来的东西后面想改一个字段都不知道从哪里下手。这就是 Vibe Coding 新手最容易踩的坑把 AI 当成自动打字机而不是协作对象。真正靠谱的 AI 编程不是让 AI “直接帮我写完”而是让 AI 先进入项目语境理解边界、技术栈、数据结构和模块拆分再逐步实现。换句话说Vibe Coding 的重点不是“怎么写代码”而是怎么与 AI 协作写出可维护的代码。1. Vibe Coding 解决的不是写代码而是协作失控AI 写代码的问题通常不在于它不会写语法而在于它不知道你的项目边界。如果你直接说帮我写一个 React 待办清单页面支持新增、删除任务。AI 很可能会自行脑补很多东西例如要不要本地存储要不要远程 API要不要拖拽排序要不要筛选、搜索、优先级数据字段叫text、title还是content组件应该拆几个状态放在父组件、Context还是第三方状态库这些问题如果没有提前约束AI 就会自己做主。它不是故意乱写而是大模型会根据训练经验去补全“看起来合理”的答案。补全一多代码就开始膨胀字段一乱后面就开始幻觉逻辑一散项目就慢慢变成难以维护的屎山。Vibe Coding 的第一原则不要急着让 AI 写代码先让 AI 和你一起确定“什么不做”。对新手来说Codex、Claude Code 这类工具不要只当成“代码生成器”更应该当成一个刚入职的新同事。新同事进入公司不会第一天就改核心业务代码他需要先看员工手册、技术规范、业务流程和项目文档。AI 也是一样越早让它读懂规则后面生成的代码越稳定。2. 第一步规划就是一切规划的本质不是写一份漂亮文档而是给 AI 建立一个稳定的上下文。在 Codex 里经常会有类似/init的初始化动作用来让 AI 读取项目结构、技术栈、已有约定并生成项目说明文件。这个文件可以是AGENTS.md、CLAUDE.md、docs/plan.md也可以是你自己维护的需求规划文档。它的价值在于后续每次对话都能带着同一份项目约束前进。AI 不再每轮重新猜而是围绕同一个规划持续迭代。2.1 先规划再编码以一个 React Tailwind CSS 的员工任务清单页面为例新手最好的第一条提示词不是“帮我写代码”而是遵守胶水编程优先使用成熟方案避免凭空造逻辑。 第一个阶段只做规划禁止输出任何代码。 1. 确认技术栈 React 19 Tailwind CSS useState。 2. 梳理功能边界 - 新增待办 - 删除待办 - 切换完成状态 - 不做本地持久化 - 不做远程 API - 不做筛选 - 不做拖拽排序 3. 拆分模块 - TodoInput输入新任务 - TodoItem展示单个任务 - TodoList展示任务列表 - TodoPage管理整体状态 4. 定义数据流 使用 useState 存储 task 数组。 数据结构固定为 { id, text, completed } 5. 输出这份完整规划等待我确认无误后再分段实现代码。这条提示词看起来比“帮我写一个 Todo”麻烦但它能提前解决 AI 最容易失控的几个点。约束项解决的问题如果不约束会怎样技术栈限定实现方式AI 可能擅自引入状态库、UI 库或后端接口功能边界控制需求范围一个简单页面被扩展成复杂应用模块拆分保持代码可读所有逻辑堆进一个大组件数据结构减少字段幻觉一会儿用title一会儿用text等待确认给人类审核入口错误规划直接进入实现阶段这里最关键的不是格式而是思维方式先让 AI 写规划再由人审核规划确认后再写代码。2.2 规划要写到什么程度一份有效规划不需要很长但必须回答四类问题。第一类是技术栈。比如这个项目明确使用React 19、Tailwind CSS和useState那 AI 就不应该擅自引入Redux、Zustand或复杂路由。第二类是功能边界。新增、删除、切换完成状态属于第一阶段本地存储、接口同步、拖拽排序、筛选搜索属于后续阶段。边界不是限制能力而是保护项目节奏。第三类是模块结构。组件拆分要像乐高一样清晰每个模块只负责一件事。比如TodoInput不负责渲染列表TodoItem不负责维护全局数组TodoPage才是状态管理的中心。第四类是数据结构。对于 Todo 项提前约定{id:string,text:string,completed:boolean}这可以从根上减少 AI 的字段幻觉。因为很多 Bug 不是逻辑错而是组件 A 传了title组件 B 却读text。3. 用 React Todo 看懂规划如何落地规划确认之后再进入实现阶段。这个时候 AI 的任务不再是自由发挥而是按照规划逐段交付。下面这段不是完整项目代码而是用来说明数据流如何被规划约束住。import{useState}fromreact;functionTodoPage(){const[tasks,setTasks]useState([]);functionaddTask(text){consttrimmedTexttext.trim();if(!trimmedText)return;setTasks((currentTasks)[...currentTasks,{// id 只负责唯一标识不参与展示文案避免后续排序和删除时找错对象id:crypto.randomUUID(),text:trimmedText,completed:false,},]);}functiontoggleTask(id){setTasks((currentTasks)currentTasks.map((task)task.idid?{...task,completed:!task.completed}:task));}functiondeleteTask(id){setTasks((currentTasks)currentTasks.filter((task)task.id!id));}return(TodoList tasks{tasks}onToggleTask{toggleTask}onDeleteTask{deleteTask}onAddTask{addTask}/);}这段代码的重点不是useState本身而是它体现了规划里的几个约束。tasks是唯一状态源子组件只通过props接收数据和事件。addTask、toggleTask、deleteTask都围绕固定字段{ id, text, completed }工作。这样一来AI 继续生成TodoInput、TodoItem时也会自然沿着同一个数据结构写不容易突然冒出另一个字段名。这就是“先规划”的价值它把 AI 的生成空间从无限开放压缩到一个可审核、可维护的范围内。4. 第二步用胶水编程降低幻觉风险规划解决的是“方向失控”胶水编程解决的是“实现失控”。很多新手会让 AI 从零手写复杂功能例如帮我给 React 待办清单写一个拖拽排序功能。这条指令的风险很高。因为拖拽排序看起来只是“拖一下换位置”但真实边界非常多鼠标事件、触摸事件、键盘可访问性、碰撞检测、滚动容器、列表动画、拖拽取消、移动端行为、焦点管理。让 AI 从零手写这些底层逻辑很容易生成一套能看但不稳的代码。胶水编程的思路正好相反轮子别人造好你只做胶水。胶水不生产零件只负责联通零件。也就是说不要让 AI 去重新发明拖拽系统而是指挥它调研成熟库把成熟库和现有组件粘起来。4.1 胶水编程不是盲目装库胶水编程有一个重要前提先判断需求是否真的需要第三方库。新增、删除、切换完成状态用useState足够不需要引入复杂状态库。但拖拽排序属于交互边界复杂的功能就应该优先使用成熟方案。比如拖拽排序就可以优先使用react-beautiful-dnd这类已经被大量项目验证过的拖拽库。它把拖拽上下文、拖拽区域、拖拽元素这些复杂交互封装好了我们只需要把现有TodoList的数据结构接进去。当然React 生态里还有dnd-kit这样的方案也可以让 AI 顺手了解。但这篇实战先用react-beautiful-dnd演示胶水编程因为它的 API 结构非常适合初学者理解外层是拖拽上下文中间是可投放区域里面是每一个可拖拽条目。一个更稳的提示词可以这样写遵守胶水编程原则绝不从零自研底层拖拽逻辑优先选择社区成熟开源组件。 当前需求给 TodoList 增加拖拽排序。 1. 先调研 React 生态成熟拖拽库。 2. 优先使用 react-beautiful-dnd 实现 sortable list。 3. 本阶段只实现 react-beautiful-dnd 方案dnd-kit 作为延伸了解即可。 4. 不要自己手写鼠标坐标监听、碰撞检测和排序底层逻辑。 5. 输出内容顺序 - 安装依赖命令 - 解释依赖作用 - 说明如何把现有 TodoList 和 react-beautiful-dnd 衔接 - 只写模块之间适配、数据流转的胶水代码这条提示词的本质是把 AI 从“发明者”切换成“集成工程师”。4.2 拖拽排序里的胶水代码长什么样如果使用react-beautiful-dnd安装命令通常是pnpmi react-beautiful-dnd这个依赖的核心价值是把底层拖拽交互封装成三个组件DragDropContext、Droppable和Draggable。我们不用自己监听鼠标坐标也不用自己处理拖拽过程中的占位、移动和释放只需要在拖拽结束时更新tasks数组顺序。依赖作用为什么需要react-beautiful-dnd提供拖拽上下文、可投放区域和可拖拽元素不手写底层拖拽交互DragDropContext包裹整个拖拽区域监听拖拽开始和结束统一管理拖拽生命周期Droppable定义任务列表这个“可放置区域”告诉库哪些地方可以放下任务Draggable定义每一个可拖拽任务条目告诉库哪个元素可以被拖动在实现层面胶水代码只做三件事。第一把列表包进DragDropContext让库接管拖拽生命周期。第二用Droppable标记任务列表用Draggable标记每个任务条目。第三在onDragEnd里根据source.index和destination.index更新tasks数组顺序。import{DragDropContext,Droppable,Draggable}fromreact-beautiful-dnd;functionSortableTodoList({tasks,onReorderTasks,renderTask}){functionhandleDragEnd(result){const{source,destination}result;// destination 为空说明任务被拖到了列表外面此时不改变顺序if(!destination)return;if(source.indexdestination.index)return;constnextTasks[...tasks];const[movedTask]nextTasks.splice(source.index,1);nextTasks.splice(destination.index,0,movedTask);// 排序只改变数组顺序不修改 task 字段避免拖拽逻辑污染业务数据onReorderTasks(nextTasks);}return(DragDropContext onDragEnd{handleDragEnd}Droppable droppableIdtodo-list{(droppableProvided)(ul ref{droppableProvided.innerRef}{...droppableProvided.droppableProps}{tasks.map((task,index)(Draggable key{task.id}draggableId{task.id}index{index}{(draggableProvided,snapshot)(li ref{draggableProvided.innerRef}{...draggableProvided.draggableProps}{...draggableProvided.dragHandleProps}className{snapshot.isDragging?opacity-60:undefined}{renderTask(task)}/li)}/Draggable))}{/* placeholder 用来保留拖拽时的列表占位避免布局突然塌陷 */}{droppableProvided.placeholder}/ul)}/Droppable/DragDropContext);}这段代码没有手写拖拽底层逻辑。真正复杂的拖拽生命周期、占位元素、拖拽元素位置变化都交给react-beautiful-dnd我们只负责把自己的tasks数据结构接进去。这就是胶水编程的核心少造轮子多做适配少写底层多写连接。5. 第三步用元方法论让 AI 自我进化当项目越来越大只靠单次提示词是不够的。你需要让 AI 不断吸收反馈把好的经验沉淀下来把差的输出模式纠正掉。这就是元方法论不只是让 AI 完成任务还要让 AI 学会“以后怎么更好地完成类似任务”。5.1 Alpha 提示词规定怎么干活可以把Alpha理解成开工前的工作规范。它规定 AI 每次进入任务时必须遵守什么流程。你是这个项目的协作工程师。 每次实现功能前必须先完成 1. 阅读项目规划文档。 2. 复述当前需求边界。 3. 判断是否需要第三方成熟方案。 4. 给出模块拆分和数据流设计。 5. 等待确认后再写代码。 编码时必须遵守 - 不擅自新增规划外功能 - 不更改已约定字段名 - 不从零手写成熟库已经解决的底层逻辑 - 修改后说明影响范围 - 能跑测试就跑测试不能跑要说明原因这类提示词适合放进项目级记忆文件例如AGENTS.md或CLAUDE.md。它的作用不是让 AI “变聪明”而是让它在每次任务里都沿着同一套工程习惯工作。5.2 Omega 提示词复盘生成结果Omega则是收尾阶段的评估提示词。它不负责写代码而是负责审查结果。请对刚才生成的代码进行复盘评分。 从 1 到 5 分评估 1. 是否符合原始规划 2. 是否出现规划外功能 3. 是否复用了成熟方案 4. 是否存在字段名或数据结构不一致 5. 是否有明显可维护性问题 如果低于 4 分 - 说明具体问题 - 给出修正建议 - 更新项目规划或提示词规范这个流程的价值很大。因为 AI 不是只会“生成”它也可以参与“评估生成”。你可以让它在每次任务后检查自己有没有偏离规划有没有引入不必要复杂度有没有写出难维护的代码。长期下来项目会形成一套越来越清晰的协作规范。AI 不再只是每次临时发挥而是在持续积累项目经验。6. Claude 终端实战从规划到拖拽排序理解方法论之后最好的练习方式就是在真实终端里跑一遍。下面用claude命令行演示一次完整流程先让 AI 规划 React 待办页面再让它按规划编码最后追加拖拽排序需求。这个实战的关键不在于 Todo 页面本身而在于观察 AI 的工作方式有没有被约束住。第一轮要求它只做规划不输出代码第二轮才允许它编码第三轮增加拖拽功能时要求它优先复用成熟库只做胶水代码。6.1 进入 Claude 终端先在项目目录里打开终端进入claudeclaude进入后不要马上让 AI 写代码。第一条指令要先把边界、技术栈、组件拆分和数据结构说清楚。帮我写一个 React 待办清单页面支持新增、删除任务。 - 先规划再编码 遵守胶水编程优先使用成熟方案避免凭空造逻辑。 第一个阶段只做规划禁止输出任何代码。 1. 确认技术栈 React 19 Tailwind CSS useState。 2. 梳理功能边界 - 新增待办 - 删除待办 - 切换完成状态 - 不做本地持久化 - 不做筛选 - 不做拖拽功能 3. 拆分模块乐高组件 - 输入框组件 - 待办条目组件 - 列表容器组件 4. 定义数据流 useState 存储 task 数组。 数据结构固定为 { id, text, completed } 5. 输出这份完整规划等待我确认无误后再分段实现代码。这条提示词里有两个非常重要的控制点。第一第一个阶段只做规划禁止输出任何代码它把 AI 从“立即生成代码”的惯性里拉出来让它先完成需求理解。第二等待我确认无误后再分段实现代码它给人类保留了审核入口。AI 输出规划之后不要急着继续先检查功能边界有没有越界、组件拆分是否合理、字段名是否统一。检查项应该看到什么如果有问题怎么处理技术栈React 19、Tailwind CSS、useState让 AI 移除多余技术功能边界只包含新增、删除、完成状态切换删除本地存储、筛选、拖拽等规划外内容组件拆分输入框、条目、列表容器避免所有逻辑堆进单个组件数据结构{ id, text, completed }统一字段名不允许混用title、content6.2 确认规划后再让 AI 编码当 AI 输出的规划没有问题后再输入第二条指令让它进入实现阶段规划确认无误现在开始编码。 请按刚才的规划分段实现 1. 先实现 TodoPage 的状态管理和数据流。 2. 再实现 TodoInput、TodoItem、TodoList 三个组件。 3. 使用 Tailwind CSS 完成基础样式。 4. 不要新增规划外功能。 5. 每段代码后说明它和规划中的哪个模块对应。这一步的重点是“分段实现”。不要让 AI 一次性输出一整个大文件因为大块代码不利于审查。更好的方式是让它先写状态管理再写输入组件再写条目组件最后写列表容器。每一步都能和规划中的模块对应起来后面出了问题也更容易定位。如果 AI 在实现过程中擅自加入localStorage、接口请求、筛选按钮或拖拽排序就直接让它回滚到规划边界这部分超出了当前规划。 请移除本地持久化、筛选和拖拽相关逻辑只保留新增、删除、切换完成状态。 字段结构必须继续使用 { id, text, completed }。这就是 Vibe Coding 里的“过程控制”。你不是被动接收 AI 的结果而是在不断校准它的输出方向。6.3 追加拖拽排序需求当基础 Todo 页面已经能跑之后再进入第二阶段给待办列表增加拖拽排序。这时不要直接说“帮我写拖拽排序”。更稳的提示词是当前需求给待办列表增加拖拽排序。 1. 先调研 React 生态成熟的拖拽库优先选用 react-beautiful-dnd业内广泛使用。 安装命令 pnpm i react-beautiful-dnd 目标结构 react-beautiful-dnd ...list /react-beautiful-dnd 2. 不要自己手写拖拽底层代码只做粘合工作。 3. 输出内容顺序 - 安装依赖命令 - 把现有 TodoList 组件和 react-beautiful-dnd 进行衔接 - 只写模块之间适配、数据流转的粘合代码这里的react-beautiful-dnd.../react-beautiful-dnd是概念写法用来表达“把现有列表包进拖拽库提供的上下文里”。如果真的使用react-beautiful-dndAI 输出时应该围绕DragDropContext、Droppable、Draggable这些组件做衔接而不是发明一个不存在的 JSX 标签。这条指令的教学价值很明显它不是让 AI 手写拖拽系统而是引导 AI 复用react-beautiful-dnd再把这个库和现有TodoList连接起来。到这里拖拽排序的实现重点就变了我们不再关心鼠标坐标怎么计算、拖拽元素怎么移动、列表占位怎么处理而是关心onDragEnd触发后如何根据拖拽前后的索引更新tasks数组。也就是说底层交互交给库业务代码只维护数据顺序。React 生态里还有dnd-kit这类拖拽方案后续做更复杂的拖拽交互时也可以继续了解。但在这个 TodoList 实战里先把react-beautiful-dnd跑通把“成熟组件 少量胶水代码”的思路吃透比同时比较多个库更重要。7. 一套适合新手的 Vibe Coding 工作流把前面的内容串起来新手可以直接采用下面这套工作流。阶段人类要做什么AI 要做什么产物初始化说明项目目标和技术栈阅读项目并生成规划docs/plan.md或项目说明文件规划审核功能边界拆分模块、定义数据结构可确认的任务计划实现分段确认代码按模块写胶水代码小步提交的功能代码验证运行页面或测试修复报错、解释影响范围可运行结果复盘判断是否符合预期用 Omega 提示词评分更新后的规范和经验这套流程看起来比“直接生成”慢一点但实际开发会更快。因为真正浪费时间的往往不是第一版代码没写出来而是第一版代码写歪了后面越改越乱。Vibe Coding 最好的状态是你和 AI 各做擅长的事。人类负责目标、边界、判断和取舍AI 负责调研、拆解、生成、适配和复盘。你不需要一开始就会写所有代码但你必须学会提要求、定规则、审规划、控范围。8. 参考资料react-beautiful-dnd官方 GitHub 仓库atlassian/react-beautiful-dnddnd-kitReact 快速开始文档React Quickstart - dnd kit总结轻松上手 Vibe Coding 的关键不是让 AI 更快地吐出代码而是先建立一套稳定的协作方式。第一步用规划锁定技术栈、功能边界、模块拆分和数据结构避免 AI 擅自扩展需求第二步在 Claude 终端里先规划、再确认、再编码把人类审核放进真实流程第三步用胶水编程优先复用成熟方案让 AI 少写高风险底层逻辑多做模块适配和数据流转最后再用 Alpha 和 Omega 这类元提示词把项目规范和复盘机制沉淀下来。这样使用 AI 写代码代码不只是“能跑”还会更清晰、更一致也更容易继续维护。
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
