Vue 项目中让 AI 更稳：AGENTS.md + Prompt 模板实践

Vue 项目中让 AI 更稳：`AGENTS.md` + Prompt 模板实践

一、测试目标

本次测试验证：在同一个 Vue Bug 场景下，是否使用标准化 Prompt 模板，对 AI 输出质量与成本的影响。

测试问题：

页面左侧菜单栏首次选择二级/三级子菜单时，当前项会有 is-active，父级菜单也会展开。
但刷新页面后，菜单会收起，且 is-active 未定位到当前页面对应菜单。

期望行为：

能正确展开父级菜单。
对应菜单保持 is-active。

约束：

不新增依赖。
不修改接口协议。

二、测试输入对比

1）使用模板 Prompt

md 复制代码

请按 AGENTS.md 规则执行，帮我修复一个 Vue Bug。

【问题现象】
页面左侧菜单栏第一选择某个二级或者三级菜单的子项时会有is-active类名，而且菜单也都是打开的，但是刷新页面之后，菜单就合起来了，is-active也没有定位到对应页面的菜单上。

【期望行为】
• [可以正确展开父级菜单，并且给对应的菜单加上 is-active]

【范围与约束】
• 不新增依赖，不改接口协议

【交付要求】
1. 根因分析
2. 最小修复代码
3. 验证命令与结果
4. 回归风险点

2）不使用模板 Prompt

javascript 复制代码

页面左侧菜单栏第一选择某个二级或者三级菜单的子项时会有is-active类名，而且菜单也都是打开的，但是刷新页面之后，菜单就合起来了，is-active也没有定位到对应页面的菜单上。

三、对比结论

基于两轮 Codex 与一组 Cursor 结果，对比如下：

工具	输入方式	token 用量	处理时长	方案复杂度
Codex	不使用模板	约为模板的 2 倍（约 4%）	3分20秒	更复杂
Codex	使用模板	不到 2%	1分24秒	更聚焦、改动更小
Cursor	不使用模板	约为模板的 5 倍	约为模板 2 倍	改动范围明显扩大（约 3 个文件）
Cursor	使用模板	更低	更短	方案更简洁（示例中仅 1 行关键修改）

通过两轮codeX和一组cursor结果来看：

1.codeX在没使用模板token的用量是使用了模板的2倍（前者使用了4%，后者不到2%），处理时长也是2倍多（前者1分24秒，后者3分20秒）。

2.cursor在没使用模板token的用量是使用了模板的5倍,处理时长2倍左右，如下图：

而且再没有使用模板的情况下，cursor给的修改方案相对使用模板的方案，复杂度提升严重，如下图:

需要改3个文件的内容，而使用了模板的方案确要简单的多，只修改了一行代码

结论：

模板化输入能显著降低 Token 消耗与响应时长。
模板化输入能约束 AI 聚焦"最小改动"，降低过度设计风险。
对 Vue 存量项目，AGENTS.md + Prompt 模板的组合非常适合日常开发与修复场景。

四、推荐使用方式

1）在项目根目录创建 AGENTS.md

作用：让模型在每次对话中遵循统一规则（角色、改动边界、输出格式、评审标准）

建议内容如下：

md 复制代码

# Codex Repo Config (Vue Project)

本文件用于约束 Codex 在本仓库的默认行为与输出风格。

## 1. 默认角色

- 你是本项目的资深 Vue 工程师与结对编程搭档。
- 目标是：最小改动、快速可验收、避免破坏已有功能。

## 2. 项目技术栈假设

- Vue 2.x（以仓库现状为准）
- JavaScript + ESLint + npm scripts
- 目录重点：`src/`、`public/`、构建配置文件

## 3. 必须遵守的执行顺序

1. 先阅读相关代码，复述理解和假设。
2. 给出最小可行方案（包含风险与取舍）。
3. 再进行代码修改，优先小步提交。
4. 最后给出验证命令、预期结果、回滚建议。

## 4. 硬约束

- 非必要不做重构，不修改无关文件。
- 非必要不新增依赖；如必须新增，要说明理由与影响。
- 保持现有 API 兼容，除非需求明确允许 breaking change。
- 不删除已有错误处理逻辑，只能增强。
- 所有外部请求逻辑必须考虑失败分支（超时、异常、空数据）。

## 5. 输出格式（每次都按此结构）

1. `任务理解`
2. `实现计划`
3. `代码改动`
4. `验证方式`
5. `风险与回滚`

## 6. 代码质量检查清单

- 是否覆盖边界条件与异常分支
- 是否有明显性能问题（重复渲染、无效计算、同步阻塞）
- 是否有安全问题（XSS、敏感信息泄漏、注入风险）
- 是否影响现有页面交互与路由行为
- 是否补充或更新测试（若仓库存在测试体系）

## 7. Vue 专项要求

- 组件改动优先保持单一职责，避免超大组件继续膨胀。
- `computed` 与 `watch` 要明确用途，避免重复计算和循环触发。
- `methods` 中避免过长流程，必要时拆分为私有辅助函数。
- 样式改动优先局部作用域，避免全局污染。
- 接口数据映射尽量集中处理，减少模板层复杂表达式。

## 8. Review 模式（当用户说"review/代码评审"）

- 先列问题，按严重程度排序（高 -> 中 -> 低）。
- 每个问题包含：文件路径、原因、影响、建议修复。
- 总结放在最后，且保持简短。

2）准备通用模板文件 vue_prompt_templates.md

可放在任意便于复制的位置（例如 docs/、prompt/、notes/）。

md 复制代码

# Vue 项目定制话术模板

> 用法：复制任一模板，替换 `[]` 内容后发给 Codex。

## 模板 1：修复 Bug（最常用）

```md
请按 AGENTS.md 规则执行，帮我修复一个 Vue Bug。

【问题现象】
- [描述报错/异常表现]

【复现步骤】
1. [步骤1]
2. [步骤2]
3. [步骤3]

【期望行为】
- [正确结果]

【范围与约束】
- 仅允许修改：[文件路径]
- 不允许修改：[文件路径]
- 不新增依赖，不改接口协议

【交付要求】
1. 根因分析
2. 最小修复代码
3. 验证命令与结果
4. 回归风险点