AI辅助开发最佳实践：2026年新方法

---

上一篇文章，我们讲了怎么用AI批量处理重复工作。

这篇文章，我们来聊聊怎么系统化管理AI配置。

---

原文地址

墨渊书肆/AI辅助开发最佳实践：2026年新方法

---

如果你已经用AI辅助开发一段时间，可能会遇到这些问题：

• 每次都要重复说同样的话 — "用TypeScript"、"注意暗色模式"、"用Tailwind"
• 好的实践没法传承 — 踩过的坑、学到的技巧，用完就忘了
• 团队配置不统一 — 每个人都要从头配置

2026年的AI辅助开发已经有了成熟解决方案。这篇文章会告诉你如何把这些工具组合起来，打造属于自己的AI开发系统。

---

1. 为什么需要系统化的AI配置

1.1 传统方式的痛点

想象一下，你每次让AI写代码都要说：

累不累？

配置好之后，你只需要说：

AI自动知道：TypeScript + React 19 + Tailwind + 暗色模式 + 统一错误格式

这就是系统化配置的价值。

1.2 系统化配置能做什么

能做到	说明
少说话多办事	一次配置，长期生效
团队一起用	配置文件提交Git，复制到新项目就行
经验不丢失	踩过的坑、学到的技巧都能沉淀下来
质量更稳定	规范化的代码，去哪都一致

---

2. 核心概念一览

先看个全貌，后面会一个个详细讲：

┌─────────────────────────────────────────────────────────┐
│                    你的 AI 开发助手                       │
├─────────────────────────────────────────────────────────┤
│  MCP     ──→ 给AI装上"手"和"脚"，能干活                  │
│  Rules   ──→ 制定"项目宪法"，让AI知道怎么做              │
│  Skills  ──→ 召唤"领域专家"，专门回答特定问题             │
│  Agents  ──→ 分配"专人负责"，处理特定任务                 │
│  Hooks   ──→ 设置"自动触发"，保存提交时执行               │
└─────────────────────────────────────────────────────────┘

---

3. MCP：给AI装上"手"和"脚"

3.1 MCP是什么

MCP的中文名字是"模型上下文协议"，太学术了。

换个说法：MCP就像给AI装上了手和脚。

以前AI只能跟你聊天，它不知道你电脑里有什么、你的项目长什么样。现在AI可以：

• 读取你电脑上的文件
• 执行终端命令
• ️ 操作数据库
• 控制浏览器
• 帮你运行各种工具

3.2 怎么理解MCP

想象你在指挥一个人干活：

• 没有MCP：你只能跟AI说"帮我看看这个文件"，然后自己把文件内容复制粘贴给它
• 有了MCP：AI自己就能读取文件、自己执行命令、自己操作数据库

这就是为什么叫它"AI的USB接口" — 插上就能用，扩展AI的能力。

3.3 安装MCP

方式一：市场一键安装（推荐）:

Cursor 2.4+ 支持从市场安装，就像装Chrome插件一样简单：

1. 打开 Cursor 设置：Cmd + ,
2. 找到 "MCP" 或 "Extensions"
3. 点击 "Browse MCP Marketplace"
4. 搜索想要的 MCP，点击 "Add" 安装

方式二：手动配置:

有些MCP市场没有，只能自己配置。在项目根目录创建 .cursor/mcp.json：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "${workspaceFolder}"]
    }
  }
}

这里 ${workspaceFolder} 是项目根目录的简写。

3.4 常用MCP推荐

主流MCP推荐（Cursor市场最火的）：

MCP工具	能做什么	什么时候用
Figma	设计稿转代码	看设计图写代码
Playwright / Puppeteer	浏览器自动化	E2E测试、爬虫、自动化操作
GitHub	代码仓库操作	管理PR、Issue、代码审查
Browsertools	浏览器调试	看控制台、网络请求、性能分析
Web Search	联网搜索	查资料、搜文档
Sequential Thinking	逐步思考	复杂问题帮你理清思路

---

4. Rules：制定"项目宪法"

4.1 Rules是什么

Rules就是"项目宪法"：告诉AI这个项目要怎么做。

比如你告诉AI：

• 我们用Next.js的App Router
• 默认用Server Components
• 暗色模式用dark:前缀
• API错误格式统一用 { success: boolean, error?: string }

这些规则配置好之后，AI写的代码永远符合规范。

4.2 怎么理解Rules

想象你招了一个新同事，要告诉他团队规范：

• 口头说 — 每次都要说，说完就忘
• 写成文档 — 看不看取决于他
• 配置成Rules — AI永远记住，照着做

Rules就是把团队规范"固化"到AI里。

4.3 配置Rules

存放位置：

位置	谁能用到
.cursor/rules/	当前项目，提交Git后团队共享
~/.cursor/rules/	你所有项目都能用

文件格式：

用 .mdc 文件（推荐）：

---
name: nextjs
description: Next.js 15 App Router项目规范
globs: ["**/*"]
---

# Next.js 15 项目规范

## 技术栈
- 框架：Next.js 15 App Router
- 语言：TypeScript
- 样式：Tailwind CSS

## 代码规范
1. 默认使用Server Components
2. 客户端用'use client'标记
3. API错误格式统一

关键字段：

字段	什么意思
name	这个规则叫什么
description	什么时候用这个规则
globs	哪些文件要遵守这个规则，比如 ["**/*.tsx"]
alwaysApply	true=始终生效，false=需要时才用

4.4 怎么使用Rules

使用方式	怎么触发
始终生效	配置 alwaysApply: true
智能判断	AI根据你说的内容判断要不要用（默认）
匹配文件	当你编辑匹配的文件时自动应用
手动触发	聊天时 @规则名 来引用

---

5. Skills：召唤"领域专家"

5.1 Skills是什么

Skills是"领域专家"。你可以把AI配置成数据库专家、安全专家、TypeScript专家等等。

比如你配置了一个"数据库专家"Skill，当你问AI数据库相关问题时，它会自动用数据库专家的思维方式来回答。

5.2 怎么理解Skills

想象你有一个专家团队：

• 数据库专家 — 专门回答数据库问题，写SQL特别厉害
• 安全专家 — 专门检查代码安全问题
• TypeScript专家 — 专门处理类型问题

每当需要专家时，AI就会"召唤"对应的技能。

5.3 配置Skills

存放位置：

位置	谁能用到
.cursor/skills/	当前项目
~/.cursor/skills/	你所有项目

目录结构：

.cursor/skills/
└── database/           # 一个Skill一个文件夹
    ├── SKILL.md       # 必填：技能定义
    ├── references/    # 可选：参考资料
    └── scripts/       # 可选：可执行脚本

SKILL.md格式：

---
name: database
description: 回答数据库相关问题时优先考虑性能
---

# 数据库专家

你是一个数据库专家，精通PostgreSQL、MySQL、Prisma。

## 回答原则
1. 优先考虑查询性能，避免N+1
2. 合理使用索引
3. 关联查询用include/preload

## 回答格式
先解释原理，再给代码示例

关键字段：

字段	什么意思
name	技能名字
description	用来判断什么时候召唤这个专家
disable-model-invocation	true=只有手动 /skill-name 才触发

5.4 怎么使用Skills

• 自动触发：AI根据你的问题判断该用什么技能
• 手动触发：输入 /数据库 来召唤数据库专家
• 查看有哪些技能：Settings → Rules → Agent Skills

---

6. Agents：分配"专人负责"

6.1 Agents是什么

Agents是"专人负责"。和Skills不同，Agents不是回答问题，而是帮你干活。

比如你配置了一个"代码审查Agent"，每次PR需要审查时，交给它来做。

6.2 怎么理解Agents

想象你有个小团队：

• 代码审查员 — 专门帮你审查代码
• 测试工程师 — 专门帮你写测试
• 文档写手 — 专门帮你写文档

你只需要分配任务，他们就会在自己的"工作区"里完成。

6.3 配置Agents

目录结构：

.cursor/agents/
└── code-review.md     # 一个Agent一个文件

格式：

---
name: code-review
description: 代码审查专家，审查PR和代码质量
model: fast
---

# 代码审查专家

你是一个代码审查专家。请审查以下代码：

1. 潜在问题
2. 性能优化点
3. 代码规范问题

## 输出格式
## 审查结果
## 问题列表
## 优化建议

model字段：

值	速度	适用场景
fast	快	简单任务、代码审查
balanced	平衡	大多数任务
smart	慢但聪明	复杂任务、架构设计

6.4 怎么使用Agents

• 自动委派：复杂任务来了，AI自动分配给合适的Agent
• 手动触发：输入 /agent-name 来调用

---

7. Hooks：设置"自动触发"

7.1 Hooks是什么

Hooks就是"自动触发器"。就像Git的hook在commit/push时自动运行脚本，AI的Hooks可以在特定事件发生时执行。

7.2 怎么理解Hooks

比如：

• 保存文件时 — 自动格式化代码
• 提交代码时 — 自动跑lint检查
• 新建组件时 — 自动套用模板

你不需要每次手动触发，AI帮你自动完成。

7.3 配置Hooks

创建 .cursor/hooks.json：

{
  "hooks": [
    {
      "match": ".*\.(ts|tsx|js|jsx)$",
      "run": "npx prettier --write {file}"
    },
    {
      "match": ".*\.(ts|tsx)$",
      "run": "npx eslint --fix {file}"
    }
  ]
}

这里的 {file} 会自动替换成实际文件路径。

---

8. 怎么组合使用

光知道概念没用，关键是怎么组合起来用。

8.1 一个典型的工作流

你：帮我写个用户管理模块

AI自动触发：
1. Rules → 知道项目用Next.js + TypeScript + Tailwind
2. Skills → 召唤数据库专家来处理数据层
3. MCP → 自己读取现有的用户表结构
4. Agents → 分配给代码生成Agent来写代码
5. Hooks → 写完后自动格式化

8.2 组合使用示例

@nextjs @skill database
帮我写一个用户管理模块，包含：
- 用户列表（分页）
- 用户CRUD
- 数据库优化

这个提示词同时触发了：

• Next.js规范
• 数据库专家技能

AI会自动用数据库专家的角度来写代码，而且符合Next.js规范。

---

总结

概念	比喻	怎么用
MCP	手和脚	市场安装或配置 .cursor/mcp.json
Rules	项目宪法	配置 .cursor/rules/
Skills	领域专家	配置 .cursor/skills/
Agents	专人负责	配置 .cursor/agents/
Hooks	自动触发	配置 .cursor/hooks.json

把这五个工具组合起来，你的AI开发效率会大幅提升。赶紧去配置试试吧！

---

篇预告

这一篇我们讲完了AI辅助开发最佳实践。

下一阶段是《AI功能接入与网页开发》，我们会开始做真正的AI项目。

预告：下一篇文章，《Next.js里接入大模型聊天最简单的方法》。

感兴趣的话，下一篇见。