AI 时代 Harness 工程于后台管理系统中的实践

作者：袖梨 2026-07-16

Hello，我是 pany，好久不见~

我是开源项目 V3 Admin Vite / MobVue 的作者，这是我为提升它们的 AI Coding 体验而进行的第二期实践，旨在争做 AI 友好的 Vue3 模板

早在一年前，我写了第一期采用 Rules 的实践方案第一款 AI 友好的开源 Vue3 模板，但是随着 AI 的发展，这已经远远不够了，所以需要在此基础上继续提升 AI Coding 体验！

让我们来一起看看如何实现这一想法

背景

程序员群体的 AI Coding 覆盖率已经接近 100%，虽然 AI 愈发强大，但是在让 AI 针对特定项目进行编码时依旧容易出现输出代码不理想的情况

为了减少这种情况的发生，V3 Admin Vite 开源项目在已有 Rules 的基础上，新增项目级约定和 Skills，以确保更可靠的 AI 输出

目标

完成项目级约定和 Skills 内置，让 AI Agent 更懂我们的项目、输出理想的代码

前置知识

你需要先懂得区分它们三者：

方面	CLAUDE.md	Rules	Skill
加载	每次会话	每次会话，或打开匹配的文件时	按需，被调用或相关时
范围	整个项目	可以限定在文件路径范围内	特定的任务
最适合	核心约定和构建命令	特定语言或目录的指南	参考材料、可重复的工作流
何时使用	项目约定、“始终执行 X” 规则	/	可重用内容、参考文档、可重复的任务
示例	使用 pnpm，而不是 npm；提交前运行测试。	/	`/deploy`运行部署检查清单；熟悉 API 文档和端点模式

总结

对于每个会话需要的说明，使用 CLAUDE.md ：构建命令、测试约定、项目架构
使用 Rules 来保持 CLAUDE.md 专注： 带有 paths frontmatter 的 Rules 仅在 Claude 处理匹配的文件时加载，节省上下文
对于 Claude 有时只需要的内容，使用 Skills ：如 API 文档或您使用 /<skill-name> 触发的部署清单
CLAUDE.md + Skills 的组合： CLAUDE.md 保存始终开启的规则，Skills 保存按需加载的参考材料。例如 CLAUDE.md 里说 "遵循我们的 API 约定"，Skill 则包含完整的 API 风格指南

翻译翻译

CLAUDE.md： 每次都生效的通用约定
Rules： 每次但局部生效的规则
Skills： 按需并且局部场景固定的执行步骤

本期实现

新增项目级约定

为了更好地让 AI 理解项目、遵守约定，所以新增 AGENTS.md、CLAUDE.md 两个根目录配置文件，具体内容需包含以下模块（保持内容在 200 行以内）：

命令
架构
约定

在实践中，我选择在开源项目 andrej-karpathy-skills 的基础上完善以上三个模块

这个开源项目通过简单的四条原则来有效约束 AI 的输出和避免 AI 的陷阱，在实践中非常有效！

值得注意的是：

CLAUDE.md 文件作用于 Claude Code 工具
AGENTS.md 文件作用于 Cursor、Antigravity、Trae、CodeX 等工具

所以我们优先输出更加通用的 AGENTS.md 文件，然后将 AGENTS.md 与 CLAUDE.md 关联，避免书写两份一模一样的约定文件

新增项目 Skills

通常，你可以选择 skill-creator 这个官方工具来协助你完成你想要的 Skill，它比自己从零开始编写效率更高

如果你想仔细地学习如何写好一个 Skill，可以阅读：如何写好一个 Skill

在实践中，我们先将编写好的 Skill 存放在更加通用的 .agents/skills/ 目录下，然后与 .claude/skills/ 关联（关联方案采用软链接命令：ln -s，目的依旧是避免书写两份一模一样的文件）

针对 V3 Admin Vite 我们首期新增了以下项目 Skill（并严格保持每个 Skill 内容在 500 行以内）：

v3-create-crud：创建增删改查页面
v3-upsert-store：创建或更新全局状态
v3-upsert-route：创建或更新路由表
v3-use-utils：内置工具使用教程
v3-use-composables：内置组合式函数使用教程

将这些后台管理系统中高频出现的需求抽象成 Skill 以后，AI Agent 能更加准确地产出你想要的代码并准确地实现你的需求

安装社区 Skills

除了项目 Skill，项目还引入了社区里对编写 Vue 项目非常友好的第三方 Skill，它们包括但不限于：

pinia
pnpm
unocss
vite
vitest
vue
vue-best-practices
vue-router-best-practices
vue-testing-best-practices

它们主要来自于仓库：antfu/skills

这些第三方 Skill 以 skills-lock.json 文件的形式记录，Skill 本身并非默认包含在项目中。如果有需要，你可以运行 npx skills experimental_install 命令将它们安装到本地即可。安装后可在 .agents/skills/ 目录下找到它们