AI 编程工程化体系

Jim-zf

380人浏览 · 2026-05-07 16:51:31

Jim-zf · 2026-05-07 16:51:31 发布

图片展示了一个 AI 编程工程化体系 的三层架构模型。它主要用于解释现代 AI Agent（如 Claude Code 或类似的智能编程助手）如何通过不同层级的机制来确保生成的代码既符合规范又具备强大的扩展能力。 [1]

以下是各层级的详细解读：

1. 内层：约束与规范 (Core Constraints)

这是 AI 运行的“灵魂”，决定了它能做什么 以及怎么做才对 。

Rule (规则) → 行为边界 ：就像公司的《员工手册》，定义了 AI 必须遵守的准则（例如：必须使用 TypeScript、提交信息须符合某种格式）。
Command (命令) → 操作封装 ：将高频使用的指令封装成简单的快捷操作（如 /test 、/review ），减少重复输入并提高效率。

2. 中层：能力增强 (Capability Enhancement)

这一层关注于如何把事情做得更好、更专业 。

Skill (技能) → 技能扩展 ：这是 AI 的“专业手册”，包含了特定领域的领域知识或复杂的执行逻辑模板。当 AI 需要完成特定任务（如分析财务报表）时会按需加载。
Hook (钩子) → 自动化护栏 ：在生命周期特定节点（如代码提交前）自动触发的检查机制。它充当“门卫”，确保每一步操作都通过预设的质量门槛。
Subagent (子代理) → 任务分治 ：当任务过于复杂时，AI 会派生出具有独立上下文的“子助手”并行工作，实现复杂问题的拆解与协同处理。

3. 外层：外部连接 (External Connectivity)

这一层让 AI 触达真实世界 ，从一个纯粹的聊天机器人变成一个能实际操作系统的“数字员工”。

MCP (模型上下文协议) → 连接真实世界 ：这是 Anthropic 推出的模型上下文协议。它被誉为“AI 界的 USB-C”，让 AI 能以标准化的方式连接本地文件、数据库、GitHub 或 Slack 等外部资源。
Plugin (插件) → 组合式扩展 ：更高维度的功能包，可以包含多个 Skill、Command 或 MCP 服务器配置，为 AI 提供完整的功能套件。

一、距离基于这套理论我如何规范前端使用Ai 工具编程，技术栈react18+umi4+ts+antd+valtio

一、内层：约束与规范 (制定“法律文件”)

这一层是 AI 的准则，防止它生成过时的类组件或不符合项目风格的代码。

Rule (行为边界)：
- 架构准则 ：明确要求使用 Umi 4 的路由约定、Valtio 的响应式状态管理（禁止使用 Context 存储全局业务状态）。
- TS 类型要求 ：禁止使用 any ，所有组件 Props 必须定义 interface 。
- 组件规范 ：必须使用 React 18 函数式组件 + Hooks，UI 必须优先使用 AntD 组件，禁止手写样式（除非 AntD 覆盖不了）。
Command (操作封装)：
- 在 .clauderc 或 Cursor 配置文件中定义常用指令。
- 例如：/new-page (生成 Umi 页面 + Valtio Store)、/new-comp (生成原子组件 + 单元测试)。

二、中层：能力增强 (提供“专业知识”)

这一层通过特定的上下文注入，让 AI 深入理解你的技术栈组合。

Skill (技能扩展)：
- Valtio 最佳实践 ：向 AI 喂入 Valtio 的代理模式（Proxy）和派生状态（Derived values）的用法，避免 AI 写出 Redux 风格的代码。
- AntD 语义化 ：告知 AI 项目中 Form、Table 的封装规范（比如项目是否有统一的 ProTable 封装）。
Hook (自动化护栏)：
- Git Hooks ：配置 lint-staged 。当 AI 生成代码后，在提交前强制运行 eslint --fix 和 tsc --noEmit 。
- AI 预检 ：在 CI/CD 中加入 AI Review 脚本，检查 AI 生成的代码是否绕过了 proxy 直接修改了 Valtio 状态。
Subagent (任务分治)：
- 将复杂需求拆分。例如：子代理 A 负责编写 Valtio 的 store.ts 逻辑；子代理 B 负责 UI 视图层；子代理 C 负责编写 Umi 的 mock 数据。

三、外层：外部连接 (打通“生产环境”)

利用工具让 AI 真正感知你的代码库全貌。

MCP (模型上下文协议)：
- File Context ：让 AI 能够读取你的 config/config.ts (Umi 配置) 和 src/models (Valtio 全局状态)，确保它写代码时知道全局变量在哪。
- Docs Context ：挂载 Umi 4 官网和 Valtio 文档的 MCP 服务器，防止 AI 产生旧版本的幻觉。
Plugin (组合式扩展)：
- 集成项目脚手架插件。当 AI 需要新建模块时，直接调用 umi g page 这样的底层命令，确保生成的目录结构（.umi 临时文件夹等）是正确的。

落地建议：创建一个 .cursorrules 或相关配置文件

如果你使用的是 Cursor 或 Claude Code，可以直接把这些规范写进 System Prompt ：

“你是一个资深前端专家。在本项目中，请遵守：

技术栈 ：React 18, Umi 4, TS, AntD 5.x, Valtio。

状态管理 ：严禁使用 useState 存储复杂业务逻辑，统一使用 valtio 。使用 useSnapshot 时必须注意性能优化。

目录规范 ：页面必须放在 src/pages ，组件逻辑与 UI 分离。

引用规则 ：Umi 插件需从 max 或 umi 中 import。”