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

这是系列第六篇。05篇我们讲了AI批量处理,这篇来看看怎么系统化管理AI配置,让AI真正成为你的开发助手。


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

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


原文地址

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


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

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

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


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

1.1 传统方式的痛点

想象一下,你每次让AI写代码都要说:

"用TypeScript、React 19、Tailwind CSS、暗色模式、组件要tsx后缀、API错误返回success和error字段、禁止any..."

累不累?

配置好之后,你只需要说:

"帮我写个登录页面"

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

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

1.2 系统化配置能做什么

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

2. 核心概念一览

先看个全貌,后面会一个个详细讲:

bash 复制代码
┌─────────────────────────────────────────────────────────┐
│                    你的 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插件一样简单:

md 复制代码
1. 打开 Cursor 设置:Cmd + ,
2. 找到 "MCP" 或 "Extensions"
3. 点击 "Browse MCP Marketplace"
4. 搜索想要的 MCP,点击 "Add" 安装

方式二:手动配置:

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

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 文件(推荐):

yaml 复制代码
---
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/ 你所有项目

目录结构:

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

SKILL.md格式:

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

目录结构:

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

格式:

md 复制代码
---
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

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

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


8. 怎么组合使用

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

8.1 一个典型的工作流

md 复制代码
你:帮我写个用户管理模块

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

8.2 组合使用示例

md 复制代码
@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里接入大模型聊天最简单的方法》。

感兴趣的话,下一篇见。

相关推荐
C澒3 小时前
微前端容器标准化:公共能力标准化
前端·架构
Setsuna_F_Seiei3 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
青柠代码录3 小时前
【Vue3】Vue Router 4 路由全解
前端·vue.js
无限大63 小时前
《AI观,观AI》:专栏总结+答疑|吃透核心,解决你用AI的所有困惑
前端·后端
蜡台4 小时前
element-ui 2 el-tree 内容超长滚动条不显示问题
前端·vue.js·elementui·el-tree·v-deep
新缸中之脑4 小时前
5个能访问浏览器的AI编程工具
ai编程
小小小小宇6 小时前
软键盘常见问题(二)
前端
小小小小宇6 小时前
软键盘常见问题
前端
小小小小宇6 小时前
富文本编辑器知识体系(三)
前端