超越 Vibe Coding —— 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 写代码

plaintext 复制代码

❌ 错误示范："帮我做一个 Todo 应用"

✅ 正确示范："给我几个 Todo 应用的架构方案，从最简单的开始。
先别写代码，只列出思路，让我选一个方向。"

🚀 最佳实践：写一个 mini PRD ------ 定义问题、用户旅程、预期结果

这是因为 AI 十有八九会提出一个过于复杂的方案。你要先让它规划，再让它实现。

目前很多 AI 编程工具都支持"Plan Mode（规划模式）":

Cline：先生成计划，再执行
Bolt：支持"Enhance Prompt"，把粗糙的想法变成结构化的需求

2.2. 坑 2：不提供文档就让 AI 写代码

检查知识门槛

很多模型只知道 Tailwind v3，但 v4 其实在 2025 年就发布了。

附上相关文件

当你用特定的 API 或框架时，把官方文档喂给 AI。

设置全局规则：

markdown 复制代码

始终遵循这些原则:

1. 先定义数据模型，再写代码
2. 用 Mock 数据，别一上来就搞数据库
3. 创建组件库，把代码拆分到多个文件
4. 集中管理状态
5. 分批实现，别一次写太多
6. 改代码前确认改的是正确的文件
7. 需求不清楚就问

对应英文版：

markdown 复制代码

// 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 对你的项目一无所知。

markdown 复制代码

❌ 错误："为什么我的代码不工作?"

✅ 正确："这个 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. 提供输入输出示例

用具体例子来减少歧义。

markdown 复制代码

创建一个格式化货币的函数。

示例:

- 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 可以帮你生成测试，但你必须验证覆盖率和质量。

markdown 复制代码

"为这个用户认证函数生成完整的单元测试。包括：

- 有效凭证
- 无效凭证
- 网络错误
- 畸形输入
- 边界情况如空字符串
- 安全场景如 SQL 注入尝试

使用 Jest，遵循我们在 /tests/auth/ 的现有测试模式"

4.3. 安全优先

AI 可能引入安全漏洞。始终验证安全实践。

累出安全验证清单：

✅ 输入验证和清理
✅ 认证和授权
✅ SQL 注入防护
✅ XSS 防护
✅ 敏感数据处理
✅ API key 和凭证管理
✅ HTTPS 和安全通信

4.4. 性能和可扩展性

AI 可能生成能用但低效的代码。始终考虑性能。

markdown 复制代码

"优化这个数据库查询，表有 100 万+记录。考虑：

- 合适的索引策略
- 查询执行计划
- 内存使用
- 连接池
- 缓存机会

解释你的优化选择，包括优化前后的性能对比。"

5. 未来 AI 辅助开发的完整工作流

想象一下这样的开发体验：

🎯 意图定义 → 用自然语言描述你想构建什么，AI 理解上下文、需求和约束

📋 智能规划 → AI 生成详细的技术方案，考虑架构决策，建议最优实现策略

🏗️ 自主实现 → AI agent 跨多个文件实现功能，处理集成，生成完整测试

🔍 智能 Review → AI 提供详细的代码审查、安全分析和性能优化建议

🚀 自动部署 → AI 管理部署流程，监控性能，提供优化建议

这其实都不算是未来了，而是现在已经在跑的东西。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的"网页版朋友圈"，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。