1. 引言：零编码实现的初体验
最近在开发需求时，频繁听到关于 AI 编程能力的讨论。借着 Qoder 测试版发布的契机，我决定在实际业务中体验一把"零编码"开发。
这次实验不仅是一次工具的试用，更是一次开发模式的范式转移 。我发现，在 AI 辅助下，前端工程师的角色正在发生本质变化：我们不再仅仅是代码的编写者（Coder），而是转变为**架构师 + 产品经理 + 质量保障（QA）**的复合体。这正是 Andrej Karpathy 所提出的 "Vibe Coding"（氛围编码/直觉编码） ------你负责把握逻辑与效果（The Vibe），AI 负责具体的语法实现（The Code）。
2. 实战复盘：级联多选组件的"无中生有"
2.1 需求背景与挑战
业务场景需要一个支持多选的级联选择器（省-市-区-社区），且交互逻辑复杂：
- 省市层级单选，区与社区层级多选。
- 单选与多选逻辑混合。
- 技术难点 ：项目使用的 Vant UI 组件库中的
Cascader组件原生仅支持单选。
2.2 初始沟通：粗糙但有效的意图传达
这是我第一次完全依赖 AI 编程。我的第一版 Prompt 非常直白，甚至有些粗糙，直接把需求和设计稿丢给了 AI：
User Prompt:
你知道 vant 中的 Cascader 吗？组件只能支持单选，我希望它支持多选。
请把这里的 Cascader 替换为多选组件。
我可以给你提供可供参考的 UI 设计稿，你有不懂的可以随时问我。
附件：ui稿位置@index.md
2.3 AI 的惊人反馈：不仅仅是代码
让我惊讶的是，Claude 并没有直接扔给我一堆代码，而是先生成了一份**《级联多选组件设计文档》**。
这份文档包含了：
- 技术架构：使用 Mermaid 绘制的组件层次结构图。
- 数据流向 ：清晰的
Props和Emit接口定义。 - 逻辑边界：详细描述了"向下级联全选"和"向上级联反选"的逻辑。
💡 洞察 ：AI 生成的设计文档虽然完美，但实际生成的代码（MVP版本）却存在数据加载失败、Tab 无法切换等 Bug。这揭示了 Vibe Coding 的核心痛点：宏观设计完美，微观实现易错。
3. 核心方法论：如何让 AI 读懂你的"意图"
在经历了十几轮的修复和迭代后，我总结出了驾驭 AI 的三板斧。
3.1 意图定义（Define the Vibe）
放弃思考 DOM 结构，跳出传统的"实现细节"，转而描述"功能与交互"。
- ❌ Bad Vibe: "写一个红色的按钮。"
- ✅ Good Vibe: "创建一个主操作按钮，当鼠标 Hover 时有微小的缩放动画，点击时显示 Loading 状态，并且要符合我们现有的紫色品牌色调。"
3.2 规则约束（Context & Rules）
AI 就像一个才华横溢但不受约束的实习生。如果不立规矩，它会写出风格迥异的代码。我们需要通过 .cursorrules 或系统提示词来约束它。
实战经验： 我将团队的 ESLint 规则、TypeScript 规范以及 React/Vue 的最佳实践整理给 AI。例如：
- 变量命名 ：必须使用
const，变量名要语义化。 - 类型安全 ：禁止使用
any，优先使用interface而非type。 - 样式管理：明确指定使用 Tailwind CSS 还是 styled-components，防止 AI 混用。
(注：在实际操作中，建议建立项目级的 .cursorrules 文件，将编码规范固化下来，AI 会自动读取。)
3.3 微调与迭代（Review & Refine）
AI 生成的代码往往不能直接上线，这时需要进行微调。
- 精确上下文：不要让 AI 盲目重写。选中具体的代码行，告诉它："只修改这个函数的错误处理逻辑"。
- 测试驱动：让 AI 自己生成测试用例和测试页面。我去测试页面操作，发现 Bug 后，将现象描述给 AI，让它自我修复。
4. 避坑指南与最佳实践
4.1 警惕"幻觉"与样式崩坏
- 现象：AI 可能会编造不存在的 Tailwind 类名，或者使用了项目未安装的图标库。
- 对策 ：在 Rules 中明确白名单。例如："图标库请仅使用
Lucide-React，不要引入其他库。"
4.2 保持代码一致性
- 现象 ：同一个组件，AI 一会儿用
function定义，一会儿用箭头函数。 - 对策 ：One-Shot Learning（单样本学习） 。在 Prompt 中贴一段你认为完美的现有代码作为"范本"，告诉 AI："请严格模仿这段代码的风格和结构来生成新组件。"
4.3 复杂状态管理的边界
- 现象：当涉及复杂的全局状态（如 Redux/Zustand）或核心业务流时，AI 容易逻辑混乱。
- 对策 ：分层开发。核心的业务逻辑（Store 设计、API 层）建议由资深工程师把控架构，UI 层和简单的逻辑处理交给 AI。
5. 总结：前端工程师的进化
Vibe Coding 模式下，我们还需要写代码吗？答案是需要的，但写的"代码"变了。
我们需要编写的不再是具体的 if-else，而是：
- Prompt：精准描述需求的自然语言。
- Rules：约束 AI 行为的规范文档。
- Tests：验证 AI 产出的验收标准。
在这个新时代，评估优秀前端的标准也随之改变：
- Prompt Engineering 能力：能否用最短的语言描述最复杂的交互？
- Code Review 能力：能否在 AI 生成的千行代码中，一眼洞察性能隐患？
- 架构设计能力：能否搭建让 AI 发挥得更好的基础设施？
"Coding is not about typing; it's about thinking."
Vibe Coding 并没有消灭编程，它只是帮我们省去了"打字"的过程，让我们终于可以回归编程的本质：思考解决问题的方法。