你好，我是冴羽。
用 AI 写代码，70% 的功能 5 分钟就能搞定，但剩下的 30% 能让你崩溃一整天。
我专门研究了 Google 工程师 Addy Osmani 写的《Beyond Vibe Coding》。
他用 25 年的开发经验告诉你：
两种方式的差距，就是“能跑的 Demo”和“能上线的产品”的差距。
1. 什么是 Vibe Coding?
1.1. 定义
Vibe Coding 是一种“随性”的开发方式：
你给 AI 一个模糊的需求，它给你一堆代码，你看都不看直接运行，关注的是整体“感觉”而不是实现细节。
特斯拉前 AI 总监 Andrej Karpathy 描述过这种未来：“我只是看看东西、说说话、跑跑代码、复制粘贴，然后它就能工作了。”
听起来很美好对吧？
1.2. 70% 问题
但现实是：Vibe Coding 能让你快速达到 70%，剩下 30% 会让你怀疑人生。
具体表现：
-
两步前进，三步后退：修一个 Bug，冒出来三个新 Bug
-
隐藏成本：没有工程知识，代码根本没法维护
-
边际递减：AI 工具对有经验的开发者帮助更大，新手反而更容易踩坑
-
安全漏洞：“Vibe Coding 很爽，直到你开始泄露数据库密码”
**但这并不是说：**Vibe Coding == 低质量代码。
它只是一种特定的开发方式，对于生产系统，你需要考虑的远不止“能跑”。
2. AI 编程 4 大坑
2.1. 坑 1：上来就让 AI 写代码
❌ 错误示范：“帮我做一个 Todo 应用”
✅ 正确示范：“给我几个 Todo 应用的架构方案，从最简单的开始。
先别写代码，只列出思路，让我选一个方向。”
🚀 最佳实践：写一个 mini PRD —— 定义问题、用户旅程、预期结果
这是因为 AI 十有八九会提出一个过于复杂的方案。你要先让它规划，再让它实现。
目前很多 AI 编程工具都支持“Plan Mode（规划模式）”:
2.2. 坑 2：不提供文档就让 AI 写代码
- 检查知识门槛
很多模型只知道 Tailwind v3，但 v4 其实在 2025 年就发布了。
- 附上相关文件
当你用特定的 API 或框架时，把官方文档喂给 AI。
- 设置全局规则：
始终遵循这些原则:
1. 先定义数据模型，再写代码
2. 用 Mock 数据，别一上来就搞数据库
3. 创建组件库，把代码拆分到多个文件
4. 集中管理状态
5. 分批实现，别一次写太多
6. 改代码前确认改的是正确的文件
7. 需求不清楚就问
对应英文版：
// Example system prompt
Always follow these guidelines:
1. Define the data model before writing code
2. Start with mock data instead of a database
3. Create a component library and split code into multiple files
4. Centralize state management
5. Batch implementation into smaller chunks
6. Double-check you're changing the correct files
7. Ask follow-up questions if requirements are unclear
2.3. 坑 3：纯文字描述 UI
一张图胜过千言万语。 当你让 AI 实现设计或修 Bug 时，直接截图。
现在的 AI 编程工具都支持：
-
从 Figma 导入设计：无缝集成设计和代码
-
把图片添加到提示词：让 AI 理解视觉上下文
-
引入实时浏览器截图：实时抓取页面状态
2.4. 坑 4：懒得测试
不管你多么小心，AI 总会在某个时刻破坏你的应用。
所以：
-
每次更新后都在 localhost 测试
-
打开浏览器控制台检查错误
-
小步测试才能避免噩梦般的 Debug 过程
3. Prompt 工程 5 条原则
3.1. 提供足够的上下文
永远假设 AI 对你的项目一无所知。
❌ 错误："为什么我的代码不工作?"
✅ 正确："这个 React hooks 函数应该在表单提交时更新用户资料，
但现在报错'Cannot read property name of undefined'。
代码如下:
const updateProfile = (userData) => {
setUser(userData.name);
};
错误发生在第 2 行。使用 React 18.2.0。"3.2. 明确你的目标
模糊的问题会得到模糊的答案。要具体说明：
-
预期行为是什么
-
当前（错误的）行为是什么
-
相关的约束或要求
-
期望的输出格式
3.3. 拆解复杂任务
把大问题分成小块，逐步推���。
举个例子：构建用户认证系统
-
首先：“设计用户认证的数据库 schema”
-
然后：“创建用户注册接口”
-
接着：“实现密码哈希和验证”
-
最后：“添加 JWT token 生成和验证”
3.4. 提供输入输出示例
用具体例子来减少歧义。
创建一个格式化货币的函数。
示例:
- formatCurrency(2.5) 应该返回 "$2.50"
- formatCurrency(1000) 应该返回 "$1,000.00"
- formatCurrency(0.99) 应该返回 "$0.99"
3.5. 使用角色和人设
让 AI “扮演”特定角色能改变回答的风格和深度。
有效的人设：
-
资深 React 开发者：“作为一个资深 React 开发者，review 我的代码找潜在 Bug”
-
性能专家：“你是 JavaScript 性能专家，优化下面这个函数”
-
代码审查员：“以安全专家的角度 review 这段代码”
4. 生产代码 4 条原则
4.1. 始终 Review AI 生成的代码
把 AI 生成的代码当作初级开发者写的代码。 需要仔细 review 和测试才能提交。
列出检查清单：
-
✅ 安全漏洞
-
✅ 错误处理
-
✅ 性能影响
-
✅ 可维护性标准
4.2. 有完整的测试策略
AI 可以帮你生成测试，但你必须验证覆盖率和质量。
"为这个用户认证函数生成完整的单元测试。包括：
- 有效凭证
- 无效凭证
- 网络错误
- 畸形输入
- 边界情况如空字符串
- 安全场景如 SQL 注入尝试
使用 Jest，遵循我们在 /tests/auth/ 的现有测试模式"
4.3. 安全优先
AI 可能引入安全漏洞。始终验证安全实践。
累出安全验证清单：
-
✅ 输入验证和清理
-
✅ 认证和授权
-
✅ SQL 注入防护
-
✅ XSS 防护
-
✅ 敏感数据处理
-
✅ API key 和凭证管理
-
✅ HTTPS 和安全通信
4.4. 性能和可扩展性
AI 可能生成能用但低效的代码。始终考虑性能。
"优化这个数据库查询，表有 100 万+记录。考虑：
- 合适的索引策略
- 查询执行计划
- 内存使用
- 连接池
- 缓存机会
解释你的优化选择，包括优化前后的性能对比。"
5. 未来 AI 辅助开发的完整工作流
想象一下这样的开发体验：
🎯 意图定义 → 用自然语言描述你想构建什么，AI 理解上下文、需求和约束
📋 智能规划 → AI 生成详细的技术方案，考虑架构决策，建议最优实现策略
🏗️ 自主实现 → AI agent 跨多个文件实现功能，处理集成，生成完整测试
🔍 智能 Review → AI 提供详细的代码审查、安全分析和性能优化建议
🚀 自动部署 → AI 管理部署流程，监控性能，提供优化建议
这其实都不算是未来了，而是现在已经在跑的东西。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
你好，我是冴羽。
用 AI 写代码，70% 的功能 5 分钟就能搞定，但剩下的 30% 能让你崩溃一整天。
我专门研究了 Google 工程师 Addy Osmani 写的《Beyond Vibe Coding》。
他用 25 年的开发经验告诉你：
Vibe Coding（氛围编程）: 70% 进度 5 分钟，剩下 30% 要 3 天
AI-Assisted Engineering (AI 辅助工程）：从原型到生产��境，全流程可控
两种方式的差距，就是“能跑的 Demo”和“能上线的产品”的差距。
1. 什么是 Vibe Coding?
1.1. 定义
Vibe Coding 是一种“随性”的开发方式：
你给 AI 一个模糊的需求，它给你一堆代码，你看都不看直接运行，关注的是整体“感觉”而不是实现细节。
特斯拉前 AI 总监 Andrej Karpathy 描述过这种未来：“我只是看看东西、说说话、跑跑代码、复制粘贴，然后它就能工作了。”
听起来很美好对吧？
1.2. 70% 问题
但现实是：Vibe Coding 能让你快速达到 70%，剩下 30% 会让你怀疑人生。
具体表现：
两步前进，三步后退：修一个 Bug，冒出来三个新 Bug
隐藏成本：没有工程知识，代码根本没法维护
边际递减：AI 工具对有经验的开发者帮助更大，新手反而更容易踩坑
安全漏洞：“Vibe Coding 很爽，直到你开始泄露数据库密码”
**但这并不是说：**Vibe Coding == 低质量代码。
它只是一种特定的开发方式，对于生产系统，你需要考虑的远不止“能跑”。
2. AI 编程 4 大坑
2.1. 坑 1：上来就让 AI 写代码
这是因为 AI 十有八九会提出一个过于复杂的方案。你要先让它规划，再让它实现。
目前很多 AI 编程工具都支持“Plan Mode（规划模式）”:
Cline：先生成计划，再执行
Bolt：支持“Enhance Prompt”，把粗糙的想法变成结构化的需求
2.2. 坑 2：不提供文档就让 AI 写代码
很多模型只知道 Tailwind v3，但 v4 其实在 2025 年就发布了。
当你用特定的 API 或框架时，把官方文档喂给 AI。
对应英文版：
2.3. 坑 3：纯文字描述 UI
一张图胜过千言万语。 当你让 AI 实现设计或修 Bug 时，直接截图。
现在的 AI 编程工具都支持：
从 Figma 导入设计：无缝集成设计和代码
把图片添加到提示词：让 AI 理解视觉上下文
引入实时浏览器截图：实时抓取页面状态
2.4. 坑 4：懒得测试
不管你多么小心，AI 总会在某个时刻破坏你的应用。
所以：
每次更新后都在 localhost 测试
打开浏览器控制台检查错误
小步测试才能避免噩梦般的 Debug 过程
3. Prompt 工程 5 条原则
3.1. 提供足够的上下文
永远假设 AI 对你的项目一无所知。
❌ 错误："为什么我的代码不工作?" ✅ 正确："这个 React hooks 函数应该在表单提交时更新用户资料， 但现在报错'Cannot read property name of undefined'。 代码如下: const updateProfile = (userData) => { setUser(userData.name); }; 错误发生在第 2 行。使用 React 18.2.0。"3.2. 明确你的目标
模糊的问题会得到模糊的答案。要具体说明：
预期行为是什么
当前（错误的）行为是什么
相关的约束或要求
期望的输出格式
3.3. 拆解复杂任务
把大问题分成小块，逐步推���。
举个例子：构建用户认证系统
首先：“设计用户认证的数据库 schema”
然后：“创建用户注册接口”
接着：“实现密码哈希和验证”
最后：“添加 JWT token 生成和验证”
3.4. 提供输入输出示例
用具体例子来减少歧义。
3.5. 使用角色和人设
让 AI “扮演”特定角色能改变回答的风格和深度。
有效的人设：
资深 React 开发者：“作为一个资深 React 开发者，review 我的代码找潜在 Bug”
性能专家：“你是 JavaScript 性能专家，优化下面这个函数”
代码审查员：“以安全专家的角度 review 这段代码”
4. 生产代码 4 条原则
4.1. 始终 Review AI 生成的代码
把 AI 生成的代码当作初级开发者写的代码。 需要仔细 review 和测试才能提交。
列出检查清单：
✅ 安全漏洞
✅ 错误处理
✅ 性能影响
✅ 可维护性标准
4.2. 有完整的测试策略
AI 可以帮你生成测试，但你必须验证覆盖率和质量。
4.3. 安全优先
AI 可能引入安全漏洞。始终验证安全实践。
累出安全验证清单：
✅ 输入验证和清理
✅ 认证和授权
✅ SQL 注入防护
✅ XSS 防护
✅ 敏感数据处理
✅ API key 和凭证管理
✅ HTTPS 和安全通信
4.4. 性能和可扩展性
AI 可能生成能用但低效的代码。始终考虑性能。
5. 未来 AI 辅助开发的完整工作流
想象一下这样的开发体验：
🎯 意图定义 → 用自然语言描述你想构建什么，AI 理解上下文、需求和约束
📋 智能规划 → AI 生成详细的技术方案，考虑架构决策，建议最优实现策略
🏗️ 自主实现 → AI agent 跨多个文件实现功能，处理集成，生成完整测试
🔍 智能 Review → AI 提供详细的代码审查、安全分析和性能优化建议
🚀 自动部署 → AI 管理部署流程，监控性能，提供优化建议
这其实都不算是未来了，而是现在已经在跑的东西。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。