Hello，我是 pany，又见面了。
我是开源项目 V3 Admin Vite / MobVue 的作者，我正在想办法提升它们的 AI Coding 体验，争做 AI 友好的 Vue 模板。让我们来一起看看如何实现这一点想法。
AI Coding 的痛点
随着 AI 大模型在编程领域越来越强，AI Coding 方向甚至衍生出了一个大家熟知的 Vibe Coding 模式。中文叫做「氛围编码」。与传统的 AI 辅助编程不同，Vibe Coding 强调的是开发者不关注代码本身，而是通过与大型语言模型（LLM）交互来实现产品目标。
但是让 AI 编写代码，最大的一个痛点就是 AI 不按预期写代码。 并且随着 AI 参与的程度越高，这个问题就会暴露得越明显。
我通过实践发现，最简单直接提升 AI Coding 体验的方式则是通过 Rules 约束 AI 的行为以及通过 MCP 增强 AI 对项目的理解。
AI Coding 的三个层次
将 AI 在编程中的参与程度用「点、线、面」三个层次来描述是一种非常直观且结构化的分类方式，能够清晰反映 AI 在不同场景下的介入深度和范围。------ 马蜂窝前端团队
- 点 ：比如实现一个函数、算法、类，实现的点往往是一个需求的组成部分（工具对应的则是
Copilot这类的代码补全插件） - 线 ：比如实现一个完整的需求或重构一个历史需求，这往往涉及到新建文件或修改多个文件（工具对应的则是
Cursor、Trae这类的 AI IDE） - 面 ：到达这个层次往往才是真正的 Vibe Coding，如果和 AI 交流的时候提示词写的足够好，是能够真正做到不写一行代码即可实现整个产品的（工具对应的依旧是
Cursor、Trae这类的 AI IDE）
而今天我们要解决的问题，主要是提升「线」和「面」的 AI Coding 体验。
现成的「面」
现阶段，相比较于直接从一个空文件夹开始 AI Coding，更正确的做法可能是实现一个现成的模板「面」项目，这将是提升 AI Coding 体验的关键。
V3 Admin Vite 与 MobVue 则正在做这件事，它们分别对应的是「后台管理项目」和「移动端 H5 项目」。
Cursor Rules / Trae Rules
可以将 Rules 视为持久上下文或提示词，它们将在你与 AI 的每一次对话中生效。
因为 Cursor Rules 和 Trae Rules 的规则目前不太一致，我在实践中是以 Cursor Rules 为准，然后在此基础上兼容到 Trae Rules。而本篇文章也是以 Cursor Rules 为例来为大家介绍。
将 Rules 模块化
受到 Cursor 官方文档 best-practices 部分和开源项目 cursor-rules 的启发，我的最佳实践最终是：
在 V3 Admin Vite 中落地后的目录是这样的：
入口规则
其中「入口规则」index.mdc 用来指定大模型的风格和告诉大模型当前项目有哪些规则文件：
yaml
---
alwaysApply: true
---
# 规则
## 模型回复
- 请简明扼要地回答，避免不必要的重复或填充语言
- 始终以简体中文回复
## 细分规则文件
- project.mdc: 项目开发规范
- vue.mdc: Vue 开发规范
- ts.mdc: TypeScript 开发规范
- git.mdc: Git 提交规范通用规则
而「通用规则」目前只有一个 project.mdc，用来制定项目开发规范（根据 Cursor Rules 文档，通用规则最好将 Rule Type 设置为 alwaysApply: true）：
yaml
---
alwaysApply: true
---
# 项目开发规范
- 你是一位前端开发专家，精通前端架构
## 技术栈
- 框架: Vue 3.5+
- 打包构建工具: Vite 7+
- 路由管理: Vue Router
- 状态管理: Pinia
- UI 组件库: Element Plus
- CSS 预处理器: Scss
- 代码校验与格式化: ESLint
- 开发语言: TypeScript
- 包管理工具: pnpm
- 网络请求: Axios
## 导入规范
...
## 目录结构
...
## 代码
...
## 代码检查
...
## 其他
...领域规则
最后细分的「领域规则」需要根据具体的项目来自定义（根据 Cursor Rules 文档，细分的领域规则最好将 Rule Type 设置为 alwaysApply: false，并配合 globs 或 description 属性），我这边目前分为了：
- vue.mdc: Vue 开发规范
- ts.mdc: TypeScript 开发规范
- git.mdc: Git 提交规范
以 vue.mdc 为例：
yaml
---
globs: *.vue
alwaysApply: false
---
# Vue 开发规范
- 你是一位前端开发专家，精通 Vue、Vue Router、Pinia、Element Plus 等前端框架
## 代码风格
- 组件: 使用单文件组件 (SFC)
- API: 使用组合式 API (Composition API) 并搭配 `<script setup>` 语法糖
- 语法: 没有特殊说明则使用 TS 进行开发 `<script setup lang="ts">`
## 命名
...
## API
...
## Props
...
## 路由
...
## 状态管理
...
## 样式
...
## 其他
...
## 参考示例文件
...注意点
值得注意的是，每一份规则文件的书写风格最好保持一致。我个人喜欢将每份文件按照角色定义、细分模块规范、其他、参考示例 四个部分来书写。并且所有规则文件加起来不要超过 500 行。
所有规则可前往仓库：v3-admin-vite/.cursor/rules
MCP
如果说 Rules 是默认的提示词，那么为自己的项目开启一个 MCP Server 则是接入了项目的实时诊断中心。
如果你的项目基于 Vite，那么可以选择插件 vite-plugin-mcp。如果是 Vite + Vue，那么可以选择插件 vite-plugin-vue-mcp。
我目前接入的是 vite-plugin-vue-mcp，它能为大模型提供关于组件树、状态、路由以及 Pinia 树和状态的信息。
接入方式非常简单：
1. 安装插件
sh
pnpm add vite-plugin-vue-mcp -D2. 使用插件
在 vite.config.ts 文件中：
ts
import { VueMcp } from "vite-plugin-vue-mcp"
export default defineConfig({
plugins: [VueMcp()]
})3. 运行项目
sh
pnpm dev4. MCP 配置
插件会自动在 .cursor 目录下更新一个 mcp.json 文件，这个文件描述了 MCP Server 的名称和地址：
json
{
"mcpServers": {
"vue-mcp": {
"url": "http://localhost:3333/__mcp/sse"
}
}
}需要注意的是，记得前往 Cursor Settings 检查一下 MCP 有没有正常开启：
5. 与 AI 对话
后续与 AI 对话的时候，大模型会自动判断是否调用 MCP Server 提供的 Tools 来帮助生成代码。
最后
选择 Rules + MCP 的配合来完成「AI 友好」的目标在实现上面非常虽然简单，但是重要的是在实践中不停地验证和更新它们，过程中我也会将更多实践结果分享和开源给大家。
- 获取我的所有
Cursor规则，可前往仓库目录：v3-admin-vite/.cursor/rules - 获取我的所有
Trae规则，可前往仓库目录：v3-admin-vite/.cursor/rules
如果对你有帮助，记得点赞、收藏、评论和关注我的公众号 PanyCoding。