📌 前言：我被 AI 坑了三次

第一次让 Claude 写一个 React 待办清单。我说 帮我写一个 react 待办清单页面它噼里啪啦生成了单文件代码。title 和 text 字段混用，能跑，却改不动。

第二次让 AI 写一个 Node.js 爬虫。它凭空捏造了一个根本不存在的 axios.getHTML 方法，我花了半小时 debug 才发现是幻觉。

第三次做电商后台。AI 自己设计了一套权限程序，上线后发现与公司现有 SSO 完全不兼容，只好推倒重来。按理说，

三次翻车对应三个主要痛点：屎山、幻觉、重复造轮子。

随后我了解了一套方法论并重新实践，效果天差地别。话说回来，这篇文章就是我的踩坑复盘 + 实战.

🎯 这篇文章适合谁

• ✅ 想用 AI 辅助编程但总踩坑的开发者
• ✅ 听过 Vibe Coding 却不知道怎么落地的同学
• ✅ 用 Cursor / Claude Code / Codex CLI 却效率不高的老手
• ✅ 想建立一套可复用 AI 编程工作流的团队

🧠 第一章：搞清根本原因再动手

什么是 Vibe Coding

由计算机科学家Andrej Karpathy首次提出。至于主要主张，先沉浸式做出能跑的东西。但“能跑”和“能维护”是两码事——如果想做长期维护项目，需要一套工程方法论来约束 AI。

我踩坑后的三条铁律

从人机分工来看，谁干什么？

至于你负责，描述意图 → 设置约束 → 验证结果 → 做决策
AI负责这方面，理解上下文 → 制定计划 → 修改文件 → 整理证据
机器门禁的观点是，拦截幻觉 → 拦截糊弄 → 拦截越界 → 强制执行规范

📐 第二章：先规划，再编码——我的 TodoList 实战

需求概述

使用 React + TailwindCSS 实现任务清单页面支持：

• ✅ 新增待办
• ✅ 删除待办
` li>✅ 切换完成状态 li>✅ 拖拽排序

说到直接说。

 帮 我 写 一个 React 待办 清 单 页面，支 持 新 增 、 删 除 任 务 .

从后果来看，

• AI 把所有逻辑堆在一个 App.jsx 单文件里；字段名 title / text / name 混乱；拖拽功能凭空手写坐标监听+排序算法；说起来，改功能无从下手，其实，

✅ 正确示范

第一步先这方面，强制规划。禁止输出代码

 遵守胶水编程思维 ：优先使用成熟方案，避免凭空造逻辑。第 一个 阶段 ：只 做规划，禁止 输出 任意代码。确定技术栈 ：React + TailwindCSS + useState
梳理功能边界 ： - 新增待办 、 删除待办 、 切换完成状态 - 拖拽排序 使用 成熟库
拆分模块 ： - TaskInput ：输入框组件 - TaskItem ：单条待办组件 - TaskList ：列表容器组件
定义数据流 ：useState 存储 tasks 数组;不过，数据结构 { id,text。completed } .
输出完整规划，等待确认后 再 分段实现代码。

说到接下来，胶水编程——拖拽排序

现在要加拖拽排序功能。

❌ 错误指令：

 帮 我 写 React 待办 清 单 的 拖拽 排序 功能 .

AI 很可能凭空手写拖拽根本原因，bug 满天飞。不过，

✅ 正确指令：

 当前需求 : 给 待办 列表 增加 拖拽 排序。遵守 胶水 编程 原则 :绝 不 从 零 自研 根本原因,可以优先考虑 社区 长期 验证 的 成熟 开源组件。先调研 : React环境 成熟 的 拖拽库 . 不 要 手写 底层。只 做 粘合 工作 . 输出顺序 : 安装依赖命令 -> 衔接现有组件 -> 编写适配代码 .

AI 的调研

这就是"胶水编程" 的精髓——不是自己造拖拽引擎，而是把已有工具"粘"进来。

完整代码

目录结构：

 todolist/ ├── src/ │ ├── App.jsx # 主容器 │ ├── components/ │ │ ├── TaskInput.jsx # 输入框 │ │ ├── TaskItem.jsx # 单条待办 │ │ └── TaskList.jsx # 列表容器 │ ├── index.css # Tailwind入口 │ └── main.jsx # 应用入口 ├── package.json └── vite.config.js

 import { useState } from 'react';import TaskInput from './components/TaskInput';
import TaskList from './components/TaskList';function App {
const = useState;// 新增任务结构 {id,text,completed}
const handleAdd = => {
setTasks。text,completed:false }]);}，const handleToggle = => {
setTasks);}，const handleDelete = => setTasks);按理说，// 拖拽结束，仅重排数组
const handleDragEnd = => {
if return;其实，const start=result.source.index;const end=result.destination.index;if return，setTasks(prev=>{
const next=;const =next.splice;next.splice，return next;})，};const completedCount=tasks.filter.length;return (



共 {tasks.length} 项 · 已完成 {completedCount} 项




);}
export default App;

 import { useState } from 'react';function TaskInput {
const =useState;const handleSubmit=e=>{
e.preventDefault;const trimmed=text.trim;ifreturn，onAdd;setText，};return (

setText}
className="flex-1 border rounded-l px-3 py-2 focus:outline-none"/>

添加


);}
export default TaskInput;

 import { Draggable } from '@hello-pangea/dnd';function TaskItem {
return (

{=>(

onToggle}
className="margin-right:8px;"/>

{task.text}

onDelete}
style={{marginLeft:'auto',color:'red'}}>x

)
}
)
}
export default TaskItem;老实说，

 import { DragDropContext。Droppable } from '@hello-pangea/dnd';import TaskItem from './TaskItem';function TaskList {
if{
return;}
return (


{=>(

{tasks.map=>(
}
))}
{provided.placeholder}

)
}
}
)
}
export default TaskList;

🏆 注意看： 我们没有自己实现任何拖拽根本原因。只是把 @hello-pangea/dnd  "粘"  "到已有组件上",每个文件都保持职责单一，总行数不足200行，这正是"胶水编程" 的主要。

🧬 第三章：胶水编程——从“实现者”到“整合者”​​​​​​​​​​​​​​​​​​​​​​​