Vibe Coding 小白上手指南

写在前面

昨天晚上刷知乎的时候，看到一个做后端的朋友发了条动态：“又看了一堆 AI 编程的文章，感觉什么都懂了，可真要动手的时候，还是一脸懵。”

这话说到我心坎里了。最近 Vibe Coding 这个词火得不行，到处都在讲 AI 编程革命、效率提升 300%、不会编程也能开发应用。听起来很美好，但真正想上手的时候，你会发现问题一大堆：工具那么多该选哪个？怎么跟 AI 对话才能得到想要的代码？代码跑不起来怎么办？

我自己也是从这个阶段过来的。作为一个从前端研发转型的产品经理，虽然有一定编程基础，但已经很久没有写过完整的项目了。最近两个月，我用 Vibe Coding 的方式，快速做出了几个产品原型来验证想法。这个过程中踩过的坑、总结的经验，我觉得值得分享出来。

这篇文章不是那种"AI 编程完全指南"的大而全教程，更像是一个过来人的经验分享。我会告诉你 Vibe Coding 到底是什么、能做什么、怎么选工具、如何开始第一个项目，以及那些文档里不会告诉你的实用技巧。

如果你：

• 有一定编程基础，但不太熟悉某个技术栈（比如产品经理想快速做原型）
• 想用 AI 提升工作效率，但不知道从哪开始
• 看了很多文章，还是不知道怎么动手
• 是产品经理、设计师等非开发岗位，想自己动手验证想法

那这篇文章应该能帮到你。

Vibe Coding 是什么？说人话

先说结论：Vibe Coding 就是用自然语言跟 AI 聊天，让它帮你写代码、改代码、调试代码。

这个词是 OpenAI 前联合创始人 Andrej Karpathy 提出来的，翻译成中文叫"氛围编程"。听起来有点玄乎，但其实就是一种新的编程方式——你不需要记住所有语法、API，只要能清楚地描述你想要什么，AI 就能帮你实现。

传统编程是这样的：你想做一个功能，先去查文档、看教程、找示例代码，然后一行一行写，遇到 bug 再去 Stack Overflow 搜答案。整个过程可能要花几个小时甚至几天。

Vibe Coding 是这样的：你直接告诉 AI"我想做一个商品推荐组件，样式要简洁现代，点击后跳转详情页"，然后 AI 就给你生成了完整的代码，包括 HTML 结构、CSS 样式、JavaScript 逻辑，甚至路由都配好了。整个过程可能只要几分钟。

但这里有个很重要的点：Vibe Coding 不是让 AI 替你编程，而是让 AI 成为你的编程搭档。

你还是需要知道自己要做什么、怎么测试、代码哪里有问题。AI 只是帮你快速实现想法，但判断、决策、验证这些事情，还是要你来做。就像有个经验丰富的程序员坐在你旁边，你说需求，他帮你写代码，但最终代码质量好不好、能不能用，还得你自己把关。

我见过不少人把 Vibe Coding 理解成"不用学编程就能开发应用"，然后发现 AI 生成的代码跑不起来，或者改着改着就乱套了，最后得出结论"AI 编程不靠谱"。这就像你不会开车，却想让副驾驶的人帮你开——理论上可行，但实际上很危险。

所以，如果你完全不懂编程，Vibe Coding 可以帮你做一些简单的原型；但如果你有一定编程基础，Vibe Coding 能让你的效率提升好几倍。

思维转变：从传统编程到 AI 辅助编程

这是很多小白最容易忽略的部分。用 AI 编程不只是换个工具那么简单，更重要的是思维方式的转变。

从"怎么实现"到"要什么结果"

传统编程思维是"我要怎么写代码来实现这个功能"，你需要想清楚每一步的实现细节。但 AI 辅助编程的思维是"我要什么样的结果"，你只需要描述清楚目标，AI 会帮你想实现路径。

举个例子，以前你要做一个表单验证，你会想：先获取表单数据，然后判断每个字段是否为空，再用正则表达式验证格式，最后显示错误提示。现在你只需要告诉 AI：“做一个注册表单，包括邮箱、密码、确认密码三个字段，邮箱要验证格式，密码至少8位且包含数字和字母，确认密码要跟密码一致，验证失败要有明确的错误提示。”

这种思维转变让你从"程序员"的角色变成了"产品设计师"——你负责定义需求和验收标准，AI 负责实现细节。

从"一次写对"到"快速迭代"

传统编程强调一次把代码写对，因为改代码成本很高。但 AI 辅助编程改代码的成本极低，所以思维要转变为"快速出初版，然后不断迭代优化"。

不要追求第一次就让 AI 生成完美的代码，先让它给个能跑的版本，然后你测试、发现问题、让它改进。这个循环可以很快，可能几分钟就能迭代好几轮。很多人一开始不适应这种方式，总想着"我要把需求描述得完美无缺，AI 才能一次生成对的代码"，结果花了半小时写提示词，还不如直接让 AI 先做个版本出来快速试错。

从"记住所有细节"到"知道大概方向"

传统编程需要你记住很多API、语法、库的用法。但 AI 辅助编程，你只需要知道"大概有什么技术可以实现这个功能"就够了，具体怎么用可以让 AI 来查。

比如你知道"React 有个 Hook 可以管理状态"，但不记得具体语法，没关系，告诉 AI “用 React Hooks 管理这个组件的状态”，它会给你写出正确的 useState 和 useEffect。你的价值不在于记住这些细节，而在于知道什么时候该用什么技术方案。

这让学习新技术的门槛大大降低。以前学一个新框架可能要看几天文档，现在你可以边用 AI 边学，在实践中理解概念。

从"独自解决问题"到"协作解决问题"

传统编程遇到问题，你要自己 Google、看 Stack Overflow、调试代码。AI 辅助编程更像是跟一个同事协作——你描述问题，它给方案，你验证结果，它根据反馈调整。

这种协作思维很重要。不要把 AI 当成"自动答题机器"，而要当成"编程助手"。它可能理解错你的意思，你要及时纠正；它给的方案可能不是最优的，你要会提出质疑和改进建议；它写的代码可能有 bug，你要能发现并让它修复。

好的协作者不是什么都依赖对方，而是知道什么时候该自己做、什么时候该让对方做、什么时候该一起讨论。

从"害怕犯错"到"拥抱试错"

AI 辅助编程最大的优势是试错成本极低。以前写错代码可能要花很长时间调试，现在不行就让 AI 重新生成一版。这让你可以更大胆地尝试不同方案。

不确定用哪个技术方案？让 AI 给你生成两三个不同的实现，你对比一下看哪个更合适。不知道某个功能能不能实现？直接让 AI 试试，反正失败了也不会浪费太多时间。这种"快速试错"的思维，能让你在产品探索阶段更加高效。

但要记住一点：试错不等于乱试。每次尝试都要有明确的验证标准，知道什么算成功、什么算失败，这样才能快速积累经验。

我能用 Vibe Coding 做什么？

这是我最关心的问题。看了很多文章，都在讲概念、讲原理，但就是不告诉你到底能做什么。

根据我这两个月的实践，加上看了大量用户的真实分享，我总结了几个最适合用 Vibe Coding 的场景：

跨技术栈开发

这是我觉得最有价值的场景。比如你是后端开发，想做一个管理后台的前端界面；或者你是前端开发，想写个 Python 脚本处理数据。以前你可能要花好几天学习新技术栈，现在用 AI 辅助，几个小时就能做出能用的东西。

看到有个从开发转产品的用户分享，他以前每次想验证一个功能，都要画原型图、写 PRD，然后等开发排期。现在用 Cursor，他可以直接把想法做成可交互的原型，跟团队讨论的时候效率高多了。虽然代码质量达不到上线标准，但对于快速验证想法来说完全够用。

快速原型开发

你有个想法，想快速验证可不可行。以前可能要花一两周开发，现在用 Vibe Coding，一两天就能做出可演示的原型。

看到有个产品经理分享，他用 Cursor 做了一个数据可视化的原型，从零开始到能演示，只花了 4 个小时。虽然代码质量一般，但足够跟团队讨论需求了。这种快速验证的能力，对于需要频繁试错的场景特别有用。

工作效率提升

这是最实际的应用。日常开发中那些重复性的工作——写 API 接口、处理表单验证、生成测试用例、重构代码——这些事情 AI 都能帮你快速完成。

有个开发者分享说，他用 Claude Code 重构了一个老项目，把十几个文件从 JavaScript 改成 TypeScript，AI 自动处理了类型定义、接口声明、错误处理，原本预计要花三天的工作，一个下午就搞定了。

学习新技术

这个场景很多人忽略了。用 AI 辅助编程，其实是个很好的学习过程。你可以看到 AI 是怎么实现某个功能的，用了哪些库、什么设计模式，然后自己再琢磨为什么要这么写。

有个产品经理分享说，他用这种方式学习了很多技术概念。每次让 AI 生成代码，他都会问 AI 为什么这么实现、有没有其他方案、各有什么优缺点。这种边做边学的方式，让他对技术的理解比之前深入多了，跟开发沟通也更顺畅。

但也要说清楚，Vibe Coding 不是万能的。有些场景它确实不太适合：

复杂的系统架构设计：AI 可以帮你写代码，但系统整体怎么设计、技术选型怎么定、性能怎么优化，这些需要你自己决策。

高度定制化的需求：如果你要做的东西很特殊，网上没有类似的案例，AI 可能会瞎编。这时候还是要靠自己查文档、写代码。

需要深度调试的场景：AI 生成的代码出了奇怪的 bug，你自己看不懂代码逻辑，那调试起来会很痛苦。所以基本功还是要有的。

给产品经理的特别建议

作为产品经理，Vibe Coding 对你的价值可能跟开发者不太一样。以前你可能要画原型图、写 PRD、等开发排期，整个流程下来可能要几周，现在你可以直接用 AI 做出可交互的原型，几个小时就能看到效果。这对于需要快速试错的产品迭代特别有用。

更重要的是，当你能看懂一些代码、知道技术实现的大概逻辑，跟开发沟通的时候就不会"鸡同鸭讲"了。你提的需求会更合理，开发也更愿意配合。有些小需求，比如数据处理脚本、简单的内部工具，你完全可以自己用 AI 做出来，不用麻烦开发，这能大大提升你的工作效率。

但记住，你做的是产品原型，不是要上线的产品。代码质量差一点没关系，关键是能快速验证想法。如果想法验证通过了，再交给开发做规范的实现。

工具选择：四大主流工具简单介绍

工具选择这块，我看了很多对比文章，发现大家都在讲功能、讲性能，但很少有人告诉你：作为新手，到底该选哪个？

我的建议是：别纠结，先选一个用起来，不合适再换。 这四个工具我都用过，各有特点，但对于刚开始接触 Vibe Coding 的人来说，差别其实没那么大。

工具	类型	核心优势	适合场景	价格
Cursor	VS Code 改版	界面熟悉、模型丰富、代码补全智能	日常开发、快速上手	20美元/月，7天试用
Claude Code	命令行工具	上下文大、批量处理强	多文件重构、大型项目	5-200美元/月
CodeX	云端平台	浏览器使用、团队协作	算法开发、团队项目	20美元/月起，有免费版
Trae	独立工具	中文友好、有免费版	国内用户、预算有限	免费版或10美元/月

选择建议：刚开始可以用 Trae 或 Cursor 试试，前者有免费版，后者生态成熟。如果需要处理大型项目的多文件修改，Claude Code 会更合适。团队协作可以看看 CodeX。

工具只是工具，关键还是要会用。别在选择上纠结太久，选一个用起来就好。

Anthropic 官方推荐的核心工作流

在开始第一个项目之前，先了解一下 Anthropic 官方总结的最有效的工作流程。这些是从大量实践中提炼出来的最佳模式。

工作流一：探索-计划-编码-提交（适合大多数问题）

这是最通用的工作流程，分为四个步骤：

步骤 1：探索阶段

请阅读相关文件、图片或 URL，了解项目背景。
可以给出大概方向（"读取处理日志的文件"）或具体文件名（"读取 logging.py"）。重要：现在先不要写任何代码，只是了解情况。

对于复杂问题，Anthropic 建议在这个阶段大量使用 subagents（子代理）。告诉 Claude 使用 subagents 来验证细节或调查特定问题，特别是在对话或任务早期，这样可以保留上下文可用性，而不会损失太多效率。

步骤 2：制定计划

请为这个问题制定一个实现计划。使用 "think" 触发扩展思考模式，让 Claude 有更多计算时间来深入评估各种方案。提示词强度等级：
- "think" < "think hard" < "think harder" < "ultrathink"
每个级别会分配递增的思考预算。

如果这一步的结果看起来合理，可以让 Claude 创建一个文档或 GitHub issue 记录计划，这样如果第 3 步的实现不符合预期，你可以回到这个起点。

步骤 3：编码实现

请按照计划实现代码。建议在实现过程中明确要求验证方案的合理性。

步骤 4：提交结果

请提交代码并创建 Pull Request。如果相关，也可以让 Claude 更新 README 或 changelog，
解释刚才做了什么。

为什么步骤 1-2 很关键？

Anthropic 强调：没有这两步，Claude 往往会直接跳到编码解决方案。虽然有时候这正是你想要的，但对于需要深入思考的问题，先让 Claude 研究和规划能显著提升表现。

工作流二：代码库问答（快速上手新项目）

当你加入一个新项目或接触不熟悉的代码库时，这个工作流特别有用。

Anthropic 官方表示，在 Anthropic 内部，使用 Claude Code 进行代码库问答已经成为核心的入职工作流程，显著改善了新人的上手时间，并减轻了其他工程师的负担。

使用方法：

你可以像与项目中的其他工程师结对编程时一样，向 Claude 提出各种问题。Claude 会主动搜索代码库来回答，比如：

• 日志功能是如何工作的？
• 如何创建一个新的 API 端点？
• foo.rs 第 134 行的 async move { ... } 是做什么的？
• CustomerOnboardingFlowImpl 处理了哪些边界情况？
• 为什么第 333 行调用 foo() 而不是 bar()？
• baz.py 第 334 行在 Java 中的等价写法是什么？

不需要特殊提示词！ 只需直接提问，Claude 会自动探索代码来找到答案。

这种方式让学习新技术的门槛大大降低。以前学一个新框架可能要看几天文档，现在你可以边用 AI 边学，在实践中理解概念。

工作流三：视觉驱动的迭代开发

类似测试驱动开发，但用视觉目标代替测试：

1. 给 Claude 截图能力（如 Puppeteer MCP server 或手动截图）
2. 提供视觉设计稿（拖拽图片或提供文件路径）
3. 让 Claude 实现设计，截图对比，迭代直到匹配设计稿
4. 满意后提交

Anthropic 指出：就像人类一样，Claude 的输出通过迭代会显著改进。第一版可能不错，但经过 2-3 次迭代后通常会好得多。给 Claude 查看自己输出结果的工具，能获得最佳效果。

---

掌握了这些官方推荐的工作流，你就能更高效地使用 AI 编程工具。现在让我们通过一个完整的项目来实践这些理念。

第一个项目：从想法到上线的完整过程

说了这么多理论，现在来点实际的。下面用一个典型项目来演示，怎么从零开始用 Vibe Coding 做出一个能用的东西。

这是一个很多初学者会选择的项目：一个简单的任务管理工具，可以添加任务、标记完成、删除任务。功能很简单，但涵盖了前端开发的基本要素——界面设计、状态管理、数据持久化。


第一步：明确需求

这一步很多人会跳过，觉得"我心里清楚要做什么"。但实际上，你心里清楚和能说清楚是两回事。AI 不会读心术，你描述得越清楚，它生成的代码就越符合你的预期。

我当时是这么整理需求的（写在一个 Markdown 文件里）：

## 项目背景
一个简单的任务管理工具，用于个人日常任务管理。## 核心功能
1. 添加任务：输入任务名称，点击添加按钮
2. 标记完成：点击任务可以切换完成状态，完成的任务显示删除线
3. 删除任务：每个任务右侧有删除按钮
4. 数据持久化：刷新页面后数据不丢失## 技术要求
- 前端：React + TypeScript
- 样式：简洁现代，使用 Tailwind CSS
- 数据存储：localStorage## 界面要求
- 顶部是输入框和添加按钮
- 下方是任务列表
- 任务项包括：复选框、任务名称、删除按钮
- 整体风格简洁，适配移动端

这个需求文档花了我 10 分钟，但后面能省好几个小时。因为有了这个文档，我跟 AI 对话的时候可以直接引用，它就能理解整个项目的上下文。

第二步：初始化项目

这一步以 Cursor 为例。打开 Cursor，新建一个文件夹，然后在 Chat 模式下输入：

请根据这个需求文档，帮我初始化一个 React + TypeScript 项目，使用 Vite 作为构建工具。[粘贴需求文档]

AI 会告诉你需要运行哪些命令：

npm create vite@latest task-manager -- --template react-ts
cd task-manager
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

这些命令你不需要完全理解，照着运行就行。运行完之后，项目就搭建好了。

第三步：实现核心功能

这是最关键的一步。很多人会一股脑把所有需求都扔给 AI，结果 AI 生成了一堆代码，但跑不起来或者效果不对。

我的做法是分步实现，每次只做一个小功能。

先做界面布局

先帮我实现基本的界面布局：
1. 顶部有一个输入框和添加按钮
2. 下方是任务列表区域
3. 使用 Tailwind CSS，风格简洁现代
4. 先不用考虑功能，只要样式好看就行

AI 会生成一个 App.tsx 文件，包含基本的 HTML 结构和 Tailwind 样式。这时候运行 npm run dev，就能在浏览器里看到界面了。

然后添加状态管理

现在添加状态管理：
1. 使用 useState 管理任务列表
2. 实现添加任务功能
3. 暂时不用考虑删除和完成状态

AI 会添加 useState 和事件处理函数。这时候你就能添加任务了，虽然还不能删除和标记完成。

接着实现剩余功能

继续完善功能：
1. 点击任务可以切换完成状态
2. 完成的任务显示删除线
3. 每个任务右侧添加删除按钮

最后添加数据持久化

添加 localStorage 存储：
1. 任务列表变化时自动保存到 localStorage
2. 页面加载时从 localStorage 读取数据

整个过程大概花了 1 个小时，其中大部分时间是在测试和调整样式。AI 生成的代码基本都能直接用，只有少数地方需要手动调整。

第四步：调试和优化

这一步很重要，但很多教程都不讲。AI 生成的代码不可能完美，你需要自己测试、发现问题、让 AI 修复。

我遇到的问题：

问题 1：输入框输入内容后没有清空

这是个小 bug，但影响体验。我直接在 Chat 里说：

添加任务后，输入框的内容没有清空，请修复这个问题

AI 马上就给出了修复方案，在添加任务的函数里加一行 setInputValue('')。

问题 2：样式在移动端显示不好

我在手机上测试的时候发现，按钮和输入框在小屏幕上挤在一起了。继续问 AI：

优化移动端显示：
1. 输入框和按钮在小屏幕上应该上下排列
2. 任务列表的字体大小适配移动端

AI 添加了响应式的 Tailwind 类名，问题解决。

第五步：上线部署

项目做好了，想让别人看到，就需要部署。这里以 Vercel 为例，因为它对前端项目特别友好，而且免费。

步骤很简单：

1. 在项目根目录运行 git init，把代码提交到 Git
2. 去 Vercel 官网注册账号
3. 点击"New Project"，导入你的 Git 仓库
4. Vercel 会自动识别这是个 Vite 项目，配置好构建命令
5. 点击"Deploy"，等几分钟，项目就上线了

Vercel 会给你一个域名，类似 your-project.vercel.app，你可以把这个链接分享给别人。

整个项目从开始到上线，我花了大概 3 个小时。如果是之前自己写，至少要两三天。这就是 Vibe Coding 的效率。

关键经验总结

回顾这个项目，我觉得有几点特别重要。

别偷懒，花 10 分钟把需求整理成文档，这 10 分钟能帮你省好几个小时。别想着一次性做完所有功能，先做界面、再做功能、最后优化，每一步都测试通过了再进行下一步。AI 生成的代码有 bug 很正常，冷静下来描述清楚问题，AI 基本都能帮你解决，实在解决不了就新开一个对话重新描述问题。

虽然是 AI 生成的代码，但你要能看懂大概逻辑，这样遇到问题的时候才知道是哪里出了问题、该怎么跟 AI 描述。每完成一个功能就提交一次代码，这样如果 AI 把代码改坏了，你可以随时回退到上一个版本。

真实用户的踩坑经验

我在各个平台看了很多用户的真实分享，发现大家踩的坑都差不多。这里整理了一些最常见的问题和解决方法。

坑 1：想一句话解决所有问题

典型场景：打开 AI 工具，输入"帮我做一个电商网站"，然后期待 AI 直接给你一个完整的网站。

问题所在：AI 不是魔法，它需要你提供足够的信息。"电商网站"这个需求太宽泛了，AI 不知道你要做什么样的电商网站、有哪些功能、什么技术栈。

解决方法：把大任务拆成小任务。先让 AI 帮你搭建项目框架，然后一个功能一个功能地实现。就像我前面演示的那个任务管理工具，我没有一次性要求 AI 做完所有功能，而是分成"界面布局 → 状态管理 → 功能实现 → 数据持久化"几个步骤。

有个用户分享说，他一开始也犯这个错误，结果 AI 生成了几千行代码，但跑不起来。后来他改变策略，每次只让 AI 做一个小功能，成功率一下子就上来了。

坑 2：代码调试陷入死循环

AI 生成的代码有 bug，你让它修复，它改了之后还是有问题，你再让它修复，它又改出新的 bug。如此循环，越改越乱。这种情况特别让人抓狂，你会觉得 AI 是不是在故意跟你作对。

其实问题出在上下文上。AI 在不断修改的过程中，会"忘记"之前的上下文，或者被错误的信息误导。根据 Chroma 的研究报告，所有主流 AI 模型都存在"上下文衰退"问题——对话越长，模型的理解能力就越差，即使是号称支持百万 token 的模型也逃不过这个规律。

我从一个有 2500+ 次 AI 对话经验的工程师那里学到一个技巧：如果一个问题尝试了三次还没解决，果断停止，新开一个对话。把问题重新整理清楚，把相关代码贴给 AI，让它重新分析。他说："代码调试不要纠缠不放，该放弃就放弃。"我试了之后发现确实有效，很多时候新开对话，AI 一次就能解决问题。

坑 3：没有用 Git 管理代码

AI 帮你改了一些代码，你点了接受。然后发现改完之后，之前能用的功能突然不能用了。你想回退到之前的版本，但已经来不及了——代码已经被覆盖，找不回来了。

有个开发者分享了他的惨痛经历：他让 AI 重构一个项目，AI 改了十几个文件，结果项目完全跑不起来了。因为没有用 Git，他只能手动一个文件一个文件地恢复，花了整整一天时间。这个教训让他从此养成了频繁 commit 的习惯。

说实话，这个坑完全可以避免。养成用 Git 的习惯，每完成一个功能就 commit 一次。这样如果 AI 把代码改坏了，你可以用 git reset 回退到上一个版本。虽然多了一个步骤，但能救你的命。

坑 4：对 AI 生成的代码照单全收

AI 生成了一段代码，看起来挺专业的，你也看不太懂，就直接用了。结果后面出了问题，你连问题在哪都不知道。这就像你吃了一道菜，觉得味道不对，但因为不知道里面放了什么，连怎么改都不知道。

AI 生成的代码不一定是最优的，甚至可能有潜在的 bug。如果你完全不理解代码逻辑，就很难发现和解决问题。我自己的习惯是，AI 生成代码后先快速浏览一遍，看看用了哪些库、哪些 API，如果有不熟悉的就让 AI 解释一下。这个过程不会花很多时间，但能让你对代码有基本的掌控感。不需要每一行都看懂，但至少要知道大概做了什么。

坑 5：频繁切换工具

典型场景：听说 Cursor 好，用了几天；又听说 Claude Code 更强，马上切换；然后又看到 Trae 免费，又想试试。结果每个工具都没用熟，效率反而降低了。

问题所在：每个工具都有学习成本。频繁切换工具，你永远停留在"新手"阶段，无法深入挖掘工具的潜力。

解决方法：选定一个工具，至少用一个月。等你真正熟悉了这个工具的特性和技巧，再考虑是否需要切换。

有个开发者分享说，他一开始也是各种工具都试，但效率一直不高。后来他强迫自己只用 Cursor，花了两周时间研究各种快捷键、提示词技巧、配置优化。两周之后，他的效率比之前提升了好几倍。

坑 6：忽略项目规则文件配置

典型场景：直接开始用 AI 工具编码，没有配置项目规则。结果 AI 生成的代码风格不统一，或者用了你不想用的库。

问题所在：AI 不知道你的项目规范和偏好，只能按照它的"常规理解"来生成代码。

解决方法：根据你使用的工具，创建相应的配置文件：

Cursor 用户：创建 .cursorrules 文件

Claude Code 用户：创建 CLAUDE.md 文件（官方推荐）

CLAUDE.md 是 Claude Code 会自动读取的特殊文件，可以放在以下位置：

• 项目根目录：对当前项目生效（推荐提交到 Git）
• 父级目录：适合 monorepo 项目
• 用户主目录 (~/.claude/CLAUDE.md)：对所有项目生效

推荐的配置内容：

# 常用命令
- npm run build: 构建项目
- npm run test: 运行测试
- npm run typecheck: 类型检查# 技术栈
- React 18 + TypeScript 5.0+
- 使用函数式组件和 Hooks
- 样式使用 Tailwind CSS# 代码规范
- 使用 ES modules (import/export)，不用 CommonJS (require)
- 尽可能解构导入：import { foo } from 'bar'
- 组件名使用 PascalCase
- 函数名使用 camelCase
- 避免使用 any 类型# 项目结构
- 组件放在 src/components 目录
- 工具函数放在 src/utils 目录
- 类型定义放在 src/types 目录# 工作流程
- 完成一系列代码修改后要进行类型检查
- 优先运行单个测试而非整个测试套件

进阶技巧：

1. 动态更新规则：在 Claude Code 中，按 # 键可以让 AI 自动将你的指令添加到 CLAUDE.md 中
2. 优化规则文件：定期使用 Anthropic 的 Prompt Improver 优化你的规则文件
3. 强调重点：对重要规则使用 “重要” 或 “必须” 等强调词，提高 AI 的遵循度

Anthropic 官方团队表示，很多工程师会在编码过程中频繁使用 # 键记录命令、文件和样式规范，然后将 CLAUDE.md 的变更提交到代码库，让整个团队都能受益。

有了这个文件，AI 生成的代码会更符合你的项目规范，后期维护也会轻松很多。

坑 7：在错误的时间做错误的事

典型场景：正在写一个复杂的功能，写到一半突然想起要优化一下之前的代码，于是让 AI 帮忙重构。结果重构完之后，当前的功能也受到了影响，整个项目乱套了。

问题所在：同时做多件事，容易顾此失彼。

解决方法：一次只做一件事。先把当前功能做完、测试通过，再考虑优化和重构。

这个经验来自一个独立开发者的分享。他说：“用 AI 编程，最重要的是保持专注。别让 AI 带着你跑，你要控制节奏。”

如何用 Vibe Coding 做出不同质化的应用？

这是个很多人忽略但非常重要的问题。你可能会发现，用 AI 生成的前端界面往往有种说不出的"AI 味儿"——看起来功能齐全，但就是不够精致，甚至可以说有点"俗"。

AI 的"审美疲劳"问题

纯粹由 AI 生成的 UI 界面，往往有以下共同特征：

1. 钟爱蓝紫色渐变：不知道为什么，AI 特别喜欢用蓝紫色渐变背景
2. 滥用圆角和阴影容器：到处都是圆角卡片和阴影效果，看起来很"重"
3. 习惯用 emoji 当作图标：😊 💡 🚀 这些 emoji 到处都是
4. 堆砌过度的文字描述：明明一句话能说清楚，AI 非要写三段

这导致了严重的"审美同质化"问题。你做的应用，跟别人做的应用，看起来都差不多。

为什么会这样？

AI 的审美来自它训练的数据。它见过大量的网站和设计，但它学到的往往是"最常见"的设计模式，而不是"最好看"的设计。就像让一个人根据大众口味做菜，做出来的东西肯定不会难吃，但也很难有惊喜。

更重要的是，AI 缺乏设计的"克制感"。好的设计往往是做减法，但 AI 倾向于做加法——能加的效果都加上，结果就是过度设计。

核心技巧：如何摆脱 AI 的"设计俗套"

好消息是，AI 的审美是可以被引导的。通过掌握正确的技巧，我们可以让 AI 生成更具个性化、更高质量的设计。

技巧一：覆盖组件库的默认主题

不要使用组件库的默认样式，一定要自定义主题。可以使用 tweakcn.com 这样的工具来快速生成自定义主题配置。

具体做法：

请使用 shadcn/ui 组件库，但不要使用默认主题。主题要求：
- 主色调：#2563eb（蓝色）
- 背景色：纯白 #ffffff
- 文字颜色：深灰 #1f2937
- 边框颜色：浅灰 #e5e7eb
- 圆角：统一使用 8px，不要过度圆角
- 阴影：只在必要时使用，且要浅淡（shadow-sm）

技巧二：使用高质量的图标库

不要用 emoji 当图标！推荐使用专业的图标库：

图标库	特点	适用场景
Solar Icons	现代、简洁	现代化应用
Tabler Icons	线条优雅	企业级应用
Lucide Icons	React 友好	React 项目

你可以在 icones.js.org 搜索和预览这些图标。

具体做法：

不要使用 emoji 作为图标。请使用 lucide-react 图标库，选择合适的图标。
图标大小统一为 20px，颜色跟随文字颜色。

技巧三：减少不必要的文字描述

AI 生成的界面往往文字太多。你需要主动告诉它：少说废话，直接展示核心信息。

具体做法：

界面要简洁，遵循以下原则：
- 标题要简短，不超过 10 个字
- 描述文字不超过一行
- 能用图标表达的，不用文字
- 避免冗余的提示文字

技巧四：严格的配色规范

这是最重要的技巧。只使用一种主题色，其他内容全部使用白色和不同深度的灰色。

配色规范表：

元素类型	颜色值	使用场景
主题色	自定义（如 #2563eb）	仅用于关键按钮和重要提示
背景	#ffffff	页面背景
主要文字	#1f2937	标题、正文
次要文字	#6b7280	辅助说明
辅助文字	#9ca3af	提示信息
边框	#e5e7eb	分隔线、边框
阴影	shadow-sm	仅卡片悬停时使用

禁止使用：渐变背景、多种主题色、过深的阴影、过度的圆角（超过 12px）

一个实战案例

让我们看看这些技巧的效果。假设你要做一个任务管理应用：

❌ 不好的提示词：

做一个任务管理应用，要好看、现代化

✅ 好的提示词：

做一个任务管理应用，严格遵循以下设计规范：配色：
- 主题色：#2563eb（仅用于主要按钮）
- 背景：纯白
- 文字：#1f2937（主要）、#6b7280（次要）
- 边框：#e5e7eb图标：
- 使用 lucide-react
- 大小统一 20px布局：
- 简洁，留白充足
- 不使用卡片阴影
- 圆角统一 8px
- 标题简短，描述一行以内禁止：
- 渐变背景
- emoji 图标
- 过多文字描述
- 复杂的视觉效果

使用第二种提示词，AI 生成的界面会简洁、专业得多。

为什么这些技巧有效？

因为你给了 AI 明确的约束。AI 就像一个很有才华但缺乏经验的设计师，你需要告诉它哪些能做、哪些不能做。

好的设计往往是"戴着镣铐跳舞"——在约束中寻找最优解。当你给 AI 设定了严格的规范，它反而能做出更统一、更专业的设计。

总结

即使在 AI 时代，人的设计思维和审美依然是不可或缺的核心竞争力。Vibe Coding 是强大的工具，但不是终点。

避免同质化的关键要点：

要点	具体做法	效果
自定义主题	不用默认样式，使用 tweakcn.com 等工具	避免千篇一律
专业图标库	用 Solar/Tabler/Lucide，不用 emoji	提升专业感
精简文字	标题≤10字，描述≤1行	界面更清爽
严格配色	一种主题色 + 灰度系统	视觉统一专业

掌握了这些技巧，你用 AI 做出的应用，就能摆脱那种"一看就是 AI 做的"的感觉，变得更有质感、更专业。

坑 8：不知道如何判断代码质量

典型场景：AI 生成了代码，你不知道这代码质量怎么样，是直接用还是要改进。

问题所在：作为非专业开发者，很难判断 AI 生成的代码是否符合最佳实践。

解决方法：让 AI 自己评估代码质量。生成代码后，可以这样问：

请评估刚才生成的代码：
1. 有没有安全隐患？
2. 性能上有没有明显问题？
3. 代码结构是否合理？
4. 如果要优化，应该从哪里入手？

或者更直接：

如果这段代码要给专业开发者 review，他们可能会指出哪些问题？

这个技巧特别适合产品经理和初学者。虽然你自己看不出问题，但 AI 能帮你发现潜在的坑。

有个产品经理分享说，他每次用 AI 生成代码后都会这样问一遍，避免了很多低级错误。虽然生成的原型不是给生产环境用的，但至少能保证基本的代码质量。

一些实用技巧

这部分是我这两个月总结的一些实用技巧，很多是从其他开发者那里学来的。这些技巧文档里不会告诉你，但确实能提升效率。

技巧 1：让 AI 复述你的需求

这个技巧来自一个有丰富 AI 编程经验的开发者。他的方法是每次提出需求后，先让 AI 复述一遍，确认理解是否正确。比如你说"我想做一个用户登录功能，包括账号密码登录和第三方登录"，然后让 AI 先复述一下你的需求，确认它理解正确了，如果有疑问请提出来。

这样做的好处是可以及早发现理解偏差。很多时候你以为说清楚了，但 AI 理解的跟你想的不一样。让它复述一遍，就能避免后面返工。

技巧 2：根据任务选择合适的模型

Cursor 支持多种 AI 模型，不同模型各有特长。你可以根据任务类型选择：

任务类型	推荐模型特点	原因
写新代码	代码生成能力强	能快速产出高质量代码
调试复杂问题	推理能力强	能找到问题根源
优化性能	擅长代码分析	能发现性能瓶颈
写文档	语言表达自然	文档更易读

具体怎么切换？在 Cursor 的 Chat 界面，点击模型选择器就能切换。这个小技巧能让你充分利用不同模型的优势。

技巧 3：使用"链式推理"调试

遇到复杂的 bug，直接让 AI 修复往往效果不好。更好的方法是让 AI 先分析问题，再给出解决方案。

具体做法：

这段代码运行时报错：[错误信息]请按以下步骤分析：
1. 这个错误是什么意思？
2. 可能的原因有哪些？
3. 如何定位具体问题？
4. 给出修复方案不要直接给代码，先分析清楚再说。

这种"链式推理"的方式，能让 AI 更深入地理解问题。我试过很多次，这种方式比直接要代码的成功率高很多。

技巧 4：善用代码注释

AI 生成代码的时候，可以要求它加上详细的注释。这样你看代码的时候能更快理解逻辑，后面维护也方便。比如让它实现一个商品筛选功能，你可以要求代码要有详细的注释、关键逻辑要解释为什么这么写、复杂的函数要有使用示例。

有个开发者分享说，他每次都要求 AI 加注释，虽然代码行数多了，但理解起来快多了。而且这些注释也是很好的学习材料。

技巧 5：建立个人提示词库

用 AI 编程久了，你会发现有些提示词特别好用。把这些提示词整理成一个文档，下次直接复制粘贴，能省很多时间。我自己整理了一个提示词库，包括项目初始化模板、代码审查提示词、性能优化提示词、Bug 调试提示词、代码重构提示词这些。每次遇到类似的任务，就从提示词库里找一个，稍微改改就能用。这个习惯帮我节省了很多时间。

技巧 6：利用 MCP 协议

如果你用的是 Cursor 或支持 MCP（Model Context Protocol）的工具，可以让 AI 访问外部资源，比如读取 GitHub 仓库的代码、查询最新的技术文档、访问数据库、调用 API 这些。这个功能特别适合处理需要外部数据的任务，比如你想让 AI 参考某个开源项目的实现方式，就可以让它直接读取那个项目的代码。

技巧 7：主动管理上下文，别让对话太长

这是最容易被忽略但又特别重要的技巧。AI 工具都有上下文长度限制，但更要命的是，即使在限制范围内，对话越长效果也会越差。

根据 Chroma 的研究报告《Context Rot》，他们测试了多种主流 AI 模型，发现一个普遍规律：随着输入长度增加，所有模型的性能都会显著下降。更糟糕的是，这种下降不是线性的——当对话累积到一定程度，模型会突然"降智"，开始出现前后矛盾、遗忘之前的约定、甚至拒绝执行简单任务。

Cursor 的官方文档也特别强调这一点：即使是支持大量 tokens 的模型，在实际使用中也建议每隔一段时间就清理上下文。因为模型不是均匀处理所有上下文的，越靠后的信息越容易被"忽略"。

我的做法是：完成一个大功能后就新开一个对话，在新对话里简单总结一下项目现状，把关键的配置和规范再说一遍。虽然多了几步操作，但能保证 AI 始终有清晰的上下文，生成的代码质量更稳定。有时候你会发现，同样的问题，在新对话里 AI 一次就能解决，但在旧对话里怎么都搞不定，这就是上下文衰退的表现。

技巧 8：学会提问的艺术——来自 Anthropic 的具体示例

跟 AI 对话，提问的方式很重要。同样的需求，不同的问法效果天差地别。Anthropic 官方文档强调：Claude Code 的成功率会随着更具体的指令显著提高，尤其是在首次尝试时。在开始时给出清晰的指导，可以减少后续纠正的需要。

Anthropic 官方的对比示例：

❌ 不好的提示词	✅ 好的提示词
给 foo.py 添加测试	为 foo.py 编写新的测试用例，覆盖用户未登录的边界情况。避免使用 mock
ExecutionFactory 的 API 为什么这么奇怪？	查看 ExecutionFactory 的 git 历史记录，总结它的 API 是如何演变成现在这样的
添加一个日历组件	先看看首页现有组件是如何实现的，理解代码和接口的分离模式。HotDogWidget.php 是个好例子。然后按照这个模式实现一个新的日历组件，让用户可以选择月份，前后翻页选择年份。从零构建，不要使用代码库中已有库之外的其他库

关键原则：

1. 具体化需求：不说"优化这段代码"，而说"这段代码的性能有问题，请优化循环逻辑，减少不必要的计算"

2. 提供上下文：不说"这个函数有 bug"，而说"这个函数在处理空数组时会报错，错误信息是 [错误信息]，请修复"

3. 明确技术栈：不说"写一个登录功能"，而说"写一个登录功能，包括表单验证、错误提示、记住密码选项，使用 React Hook Form 和 Zod 进行验证"

4. 分步骤执行：别一次性让 AI 做完所有事情，先实现基本的表单提交，然后添加验证逻辑，最后处理错误情况

Anthropic 官方总结：Claude 可以推断意图，但它不能读心。具体性能带来更好的期望对齐。

这些原则看起来简单，但实际使用中很多人会忽略。养成好的提问习惯，能大大提升 AI 的回答质量。

技巧 9：保持代码整洁

AI 生成的代码可能不够优雅，或者有冗余的部分。定期让 AI 帮你重构代码，保持代码库的整洁。

具体做法：

每周花半小时，让 AI 审查你的代码：

请审查 src/components 目录下的所有组件，找出以下问题：
1. 重复的代码逻辑
2. 可以抽取的公共函数
3. 命名不规范的变量
4. 可以优化的性能问题给出具体的改进建议，不要直接修改代码。

这个习惯能让你的代码库始终保持在一个比较好的状态，不会越写越乱。

技巧 10：学习 AI 生成的代码

这是最重要的技巧。不要把 AI 当成"代码生成器"，而是当成"编程导师"。每次 AI 生成代码，花点时间研究一下——它用了什么设计模式？为什么要这么实现？有没有更好的方法？看到不熟悉的库或 API，就去了解一下。

我自己就是这么学习的。用 AI 编程这两个月，我学到的东西比之前自己看文档学得还多。因为 AI 会用最新的、最佳实践的方式实现功能，你可以从中学到很多。这种边做边学的方式，比单纯看教程有效得多。

技巧 11：多 Claude 协作模式——官方推荐的质量保证方法

这是 Anthropic 官方推荐的强大技巧。让一个 AI 写代码，然后用另一个全新的 AI 来审查这段代码，往往能发现第一个 AI 忽略的问题。

方法一：双 Agent 代码审查

具体做法：

1. 让 Claude 完成一个功能
2. 运行 /clear 命令或在新终端启动第二个 Claude
3. 让第二个 Claude 审查第一个 Claude 的代码
4. 再启动第三个 Claude（或再次 /clear）读取代码和审查反馈
5. 让第三个 Claude 根据反馈修改代码

你会惊讶地发现，第二个 Claude 经常能指出第一个 Claude 的逻辑漏洞、性能问题或者边界情况处理不当的地方。

方法二：测试与实现分离

你也可以让一个 Claude 写测试，另一个 Claude 写通过测试的代码。甚至可以让多个 Claude 通过共享的工作文档相互通信——告诉它们各自要写入和读取哪个文档。

方法三：Git Worktrees 并行开发

Anthropic 很多工程师使用的高级技巧：

# 创建多个 worktree
git worktree add ../project-feature-a feature-a
git worktree add ../project-feature-b feature-b# 在每个 worktree 中启动 Claude
cd ../project-feature-a && claude
cd ../project-feature-b && claude

这样你可以让多个 Claude 同时处理不同的独立任务。比如一个 Claude 重构认证系统，另一个 Claude 构建数据可视化组件。因为任务不重叠，每个 Claude 都能全速工作，不需要等待或处理合并冲突。

使用技巧：

• 使用一致的命名规范
• 每个 worktree 对应一个终端标签页
• 如果用 iTerm2，可以设置通知提醒 Claude 需要你的注意
• 为不同 worktree 使用独立的 IDE 窗口
• 完成后清理：git worktree remove ../project-feature-a

Anthropic 官方

技巧 12：测试驱动开发（TDD）—— Anthropic 官方最推荐的工作流

这是 Anthropic 工程团队最喜欢的工作流程，也是我认为改变开发方式的关键技巧。传统的做法是先写代码再写测试，但用 AI 的时候可以反过来——先让 AI 写测试，再让它写通过测试的代码。

Anthropic 官方推荐的 TDD 流程：

第 1 步：编写测试用例

请基于以下输入输出对编写测试用例。重要：这是测试驱动开发，不要创建 mock 实现，
即使功能在代码库中还不存在。[描述功能的预期行为和输入输出]

第 2 步：确认测试失败

运行这些测试并确认它们都失败了。重要：此阶段不要编写任何实现代码。

第 3 步：提交测试

测试看起来不错，请提交这些测试。

第 4 步：实现功能

现在编写代码来通过这些测试。要求：
- 不要修改测试本身
- 持续迭代直到所有测试通过
- 可以使用独立的 subagent 验证实现没有过拟合测试

第 5 步：提交代码

所有测试都通过了，请提交代码。

为什么这个工作流如此有效？

Anthropic 官方文档指出：Claude 在有明确目标进行迭代时表现最佳——无论是视觉稿、测试用例还是其他类型的输出。通过提供预期输出（如测试），Claude 可以进行修改、评估结果，并逐步改进直到成功。

这种方式的好处是：

• 测试用例就是你的需求文档，AI 写的代码必须满足这些测试才算完成
• 测试先行能帮你更清晰地思考功能边界和异常情况
• 可以让 AI 持续迭代改进，而不是一次性生成完美代码

我自己使用这个工作流后，代码质量提升明显，而且调试时间大大减少。

技巧 13：善用 Escape 键中断和重定向

这是个很多人不知道的实用技巧。当你发现 AI 正在往错误的方向走时,不要等它全部生成完再纠正,直接按 Escape 键打断它。

在 Cursor 和 Claude Code 中,按一次 Escape 可以中断 AI 的当前操作(无论是思考、执行命令还是编辑文件),但会保留上下文,这时候你可以立即给出新的指示。按两次 Escape 可以回到历史记录中的某一步,修改之前的提示词,然后让 AI 重新执行。

这个功能让你能够实时纠正 AI 的方向,而不是等它走完弯路再返工。我现在养成了习惯,只要看到 AI 的思路不对,立刻打断重新引导,效率提升了很多。

技巧 14：产品经理的专属技巧

如果你是产品经理,可以把 PRD 直接给 AI,让它生成可交互的原型。告诉它实现核心交互流程、界面要符合现代设计规范、用假数据演示就行、重点是展示用户体验而不是代码质量。这种方式能让你快速把文字需求变成可演示的原型,我见过有产品经理用这个方法,一个下午就做出了五个不同方案的原型,然后拿去做用户测试,效率惊人。

另外,如果你要跟开发讨论技术方案,可以先让 AI 帮你生成一个简单的技术实现,然后问它:这个实现方案有什么问题？如果要做成生产级别的产品需要考虑哪些点？开发可能会提出什么质疑？这样你在跟开发沟通的时候就能提前预判问题,讨论会更高效。

写在最后

写这篇文章的时候，我又回顾了一下这两个月的 Vibe Coding 经历。从一开始的手忙脚乱，到现在能够熟练使用 AI 工具开发项目，这个过程确实让我对编程有了新的理解。

Vibe Coding 不是什么神奇的技术，它本质上就是让 AI 成为你的编程助手。但这个助手确实很强大，能帮你节省大量时间，让你把精力放在更重要的事情上——思考产品逻辑、优化用户体验、解决技术难题。不过我也想说，它不是万能的，不能替代你的思考、判断和学习。如果你指望完全依赖 AI，不学习任何编程知识，那你很快就会遇到瓶颈。

我的建议是把 Vibe Coding 当成加速器，而不是替代品。你还是要学习编程基础，还是要理解代码逻辑，还是要知道怎么调试问题，但有了 AI 的帮助，这些事情会变得更容易、更高效。

看再多文章、教程，都不如自己动手做一个项目。选个简单的想法，用 AI 工具做出来，你会学到很多。别在工具选择上纠结太久，Cursor、Claude Code、CodeX、Trae 都只是工具，关键是你会不会用，先选一个用起来，不合适再换。AI 技术发展很快，今天最好用的工具明天可能就被替代了，保持学习的心态，关注新工具、新技术，才能跟上这个时代。

Vibe Coding 最大的价值，不是让你写代码更快，而是让你能把更多想法变成现实。以前可能因为技术门槛放弃的想法，现在都可以试试。这种创造的乐趣，才是最珍贵的。

如果你看完这篇文章，对 Vibe Coding 有了兴趣，那就别犹豫，马上开始吧。选个工具，想个简单的项目，动手做起来。你会发现，原来编程可以这么有趣。

补充资源和学习建议

最后补充一些我觉得对新手特别有用的资源和建议：

推荐的学习路径

第一周先选一个工具（建议从 Trae 或 Cursor 开始），做 2-3 个超简单的项目，比如待办事项、计数器、简单表单，重点是熟悉工具的操作和 AI 对话的方式。第二周选一个稍微复杂的项目，比如本文演示的任务管理工具，完整走一遍从需求到上线的流程，建立项目开发的完整认知。

第三周开始尝试不同的提示词技巧，学习配置项目规则文件，开始关注代码质量和最佳实践。第四周可以尝试更复杂的项目，学习使用 Git 管理代码，探索工具的高级功能，比如 MCP、多模型切换这些。

值得关注的资源

官方文档方面，Cursor、Claude Code、Trae 都有各自的文档和社区，遇到问题可以去翻翻。技术社区的话，知乎的 AI 编程话题、V2EX 的相关讨论区都有不少干货。

GitHub 上有很多高质量的资源仓库，比如 awesome-ai-coding-techniques 整理了大量实战技巧，awesome-cursorrules 收集了各种项目的配置规则，awesome-mcp-servers 汇总了 MCP 协议的各种扩展。这些仓库都是社区驱动的，会持续更新最新的技巧和最佳实践。

可以关注一些分享 AI 编程经验的博主，加入 AI 编程相关的交流群，但别花太多时间聊天，多动手才是关键。定期看看别人分享的项目和技巧，能学到不少东西。

不过说实话，看再多资源，都不如自己动手做一个项目。选个简单的想法，今天就开始吧。

---

如果你在使用 Vibe Coding 的过程中有任何问题或经验想分享，欢迎交流讨论。

参考资料

• Vibe Coding 概念：Andrej Karpathy（前 OpenAI 联合创始人）提出
• Cursor 官网：https://cursor.com
• Claude Code 官网：https://claudecode.io
• Claude Code 最佳实践（Anthropic 官方）：https://www.anthropic.com/engineering/claude-code-best-practices
• OpenAI Codex 官网：https://openai.com/codex
• Trae 官网：https://www.trae.ai
• GitHub 技巧资源：
  • awesome-ai-coding-techniques: https://github.com/inmve/awesome-ai-coding-techniques
  • awesome-cursorrules: https://github.com/PatrickJS/awesome-cursorrules
  • awesome-mcp-servers: https://github.com/appcypher/awesome-mcp-servers