Web开发者的AI工程化实践

「Vibe Coding」的终结

过去一年，整个行业对「vibe coding」情有独钟——所谓 vibe coding，就是把自然语言 prompt 扔给 LLM，指望生成的代码能塞进自己的项目里。那是 AI 采纳的「火花」阶段，是一次必要的实验期，我们借此摸清了这些模型能做什么。

但随着 2025 年深入，那种新鲜感正在消退。「和 bot 聊天」能达到的边界已经触顶。如果你曾经花上好几个小时重构 AI 生成的代码——只因为它根本不遵循你项目的架构——你就会完全明白我在说什么。「Figma 转代码」的Gap 已经不只是设计还原的问题了，而是架构对齐的问题。

「vibe coding」的时代正在结束。AI Engineering 的时代已经开启。

从「魔法」到「系统感知」

Web 开发者的 AI Engineering 不再是生成代码片段，而是构建具有系统感知能力的组件。

当我们把 LLM 当成黑盒，得到的就只有不可预测的结果。当我们把它当作一个需要高上下文文档的初级开发者，LLM 就成了一个强力倍增器。这里的转变在于从 prompting 转向 context engineering。

Context Map 的力量

过去我会让 LLM「构建一个仪表盘」，现在我改喂它一份「Context Map」。这份 Map 作为 AI 的结构化真实来源，包含以下内容：

Utility Class Definitions：确保 AI 使用现有的设计系统。

State Management Schemas：向 AI 提供你 store 的确切结构。

Component Documentation：迫使 AI 使用现有模式，而不是臆造出一套新的。

MCP（Model Context Protocol）的角色

2025 年最重大的转变是 Model Context Protocol（MCP）的成熟。MCP 为 AI Agent 提供了标准化管道，使其能够安全地与我们的本地代码库、数据库和文档进行交互。

通过构建或集成一个 MCP server，你不只是在给 AI「访问」文件的权限，而是在为 AI 提供一个与应用逻辑交互的结构化接口。

示例：向 AI Agent 提供上下文

想象一个简单的 MCP tool 定义，它允许 AI 理解你项目的 button 组件，确保 AI 绝不会自行发明一套不符合规范的按钮样式：

// Example: Exposing a component schema via an MCP tool
const buttonTool = {
  name: "get_button_component_schema",
  description: "Returns the schema and usage rules for our UI Button component.",
  inputSchema: {
    type: "object",
    properties: {
      variant: { type: "string", enum: ["primary", "secondary", "ghost"] }
    }
  },
  execute: async () => {
    return {
      path: "src/components/Button.tsx",
      rules: "Always use the 'variant' prop. Do not apply custom styles to the button.",
      schema: { /* JSON representation of props */ }
    };
  }
};

当 AI 能访问这份 schema，它就不再靠「感觉」写 button 实现，而是查询 tool、接收 schema，写出的代码保证符合你的设计系统。

为机器可读性而设计

我们正在进入一个必须同时为两个用户设计的阶段：人类和机器。

这不仅仅是写更好的 JSDoc，而是要架构你的应用，使其能力是 可发现的。当你构建一个功能时，问自己：AI Agent 能发现这个 action、理解它的输入要求、并安全地执行它吗？

如果答案是否定的，那你仍处于「vibe coding」阶段。

未来：可预测的工程

AI Engineering 的目标不仅仅是更快地写代码，而是构建可维护、可扩展、可预测的系统。

我们正在从「在我机器上能跑」走向「在系统内能跑」。通过使用 MCP 和结构化 Context Map 这类协议将 AI Agent 锚定到你实际的代码库，你保留了控制权。你不再是 AI 垃圾代码的 review 者，而是 AI 驱动系统的 architect。

那股「vibe」是火花。现在，是时候构建燃料了。你准备好超越炒作了吗？