小編精選 - 技術文章翻譯 · 07月13日

AI 時代 Harness 工程在後台管理系統中的實踐 🌈

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 Code 文件 features-overview

你需要先懂得區分它們三者：

方面**CLAUDE.mdRulesSkill**載入每次會話每次會話，或開啟匹配的檔案時按需，被呼叫或相關時範圍整個專案可以限定在檔案路徑範圍內特定的任務最適合核心約定和建構命令特定語言或目錄的指南參考材料、可重複的工作流程何時使用專案約定、「始終執行 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： 按需並且局部場景固定的執行步驟

本期實現

新增專案級約定

Claude Code 文件將 CLAUDE.md 解釋為專案上下文和約定

並規定了將其內容保持為 Claude 應該在每個會話中保持的事實，比如建構命令、約定、專案架構、「總是做 X」規則，如果一個條目是多步驟過程或僅對程式碼庫的一部分重要，需將其移到 Skill 或 Rules 中

為了更好地讓 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

Claude Code 文件將 Skill 定義為可重複使用的知識和可呼叫的工作流程

通常，你可以選擇 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：內建 Composition API 函式使用教學

將這些後台管理系統中高頻出現的需求抽象成 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/ 目錄下找到它們