小編精選 - 技術文章翻譯 · 04月27日

基於四層 Skill 體系的前端團隊 AI 提效實踐

我如何用 AI Skill 體系讓前端團隊提效 50%

不是讓 AI 寫更多程式碼，而是讓 AI 懂你的專案規範、設計規範、撰碼風格。

從「AI 寫程式碼不可靠」說起
我搭了什麼：一套四層 AI Skill 體系
不只是前端：PM 和設計也有技能包
團隊怎麼用：零成本接入
隱藏武器：開發者風格蒸餾
效果數據
社群生態：30+ 工具的能力矩陣
Token 管理：省錢也是能力
你也可以這樣做

從「AI 寫程式碼不可靠」說起

如果你已經在用 AI 輔助程式設計，大概率經歷過這個階段：

剛開始——驚豔。「幫我寫一個表單元件」，刷刷刷就出來了。

一週後——失望。生成的程式碼不符合專案規範，樣式用了 inline style 而不是 CSS Modules，元件命名不對，介面型別全是 any，提交前得改半天。

最後——放棄。「還不如自己寫，改它的程式碼比自己寫還慢。」

問題出在哪？

不是 AI 不夠聰明，而是它不了解你的專案。

就像讓一個剛入職的資深工程師寫程式碼——技術能力沒問題，但他不知道你們團隊用 Less 還是 Tailwind，不知道元件放 src/components/ 還是 src/views/，不知道 commit 要用 Conventional Commits 格式。

他缺的不是能力，是上下文。

所以我花了幾個月，搭了一套系統，專門解決這個問題。

我搭了什麼：一套四層 AI Skill 體系

我把「讓 AI 懂專案」這件事，拆成了四層：

<div><div><div></div><span>csharp</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>┌─────────────────────────────────────────┐</span>
<span>│          分發層  fe-template-skill       │</span>
<span>│     <span>「團隊成員 clone 後零成本使用」</span>         │</span>
<span>│                   │                     │</span>
<span>│                   ▼                     │</span>
<span>│          編排層  fe-hub                  │</span>
<span>│     <span>「所有任務的統一入口 + 調度中樞」</span>       │</span>
<span>│                   │                     │</span>
<span>│       ┌───────────┼───────────┐         │</span>
<span>│       ▼           ▼           ▼         │</span>
<span>│   配置層       規範層       能力層       │</span>
<span>│  fe-agent-<span>init</span> fe-<span>base</span>-skill fe-engineer│</span>
<span>│  <span>「自動掃描專案」</span> <span>「品質檢測」</span>   <span>「7 大能力」</span>  │</span>
<span>└─────────────────────────────────────────┘</span>


每一層解決一個具體問題。

#### 配置層：5 分鐘讓 AI 了解你的專案

`fe-agent-init` 會自動掃描你的專案——讀 `package.json` 判斷技術堆疊，讀 `tsconfig.json` 判斷 TypeScript 設定，讀 `.eslintrc` 判斷程式碼規範，讀 `.prettierrc` 判斷格式化偏好。

然後自動生成兩個檔案：

- **AGENTS.md**：告訴 AI「這個專案用 React 19 + TypeScript + Less + antd v6，元件放這裡，API 放那裡，禁止用 inline style，禁止用 any」
- **DESIGN.md**：告訴 AI「這個專案的主色是 `#1677FF`，圓角用 `8px`，間距用 8px 倍數，用 antd 的 Token 系統」

生成一次，整個團隊共享。AI 從此不再「裸奔」。

我還做了 **7 套設計風格預設模板**——暗黑 UI、管理後台、期刊排版、玻璃擬態、極簡 SaaS 等等。告訴 AI「用暗黑風格」，它就知道背景用 `#0A0A0A`，文字用三級灰階，強調色只用一個。

#### 規範層：寫完程式碼自動檢測

`fe-base-skill` 在每次程式碼變更後自動執行 **5 步檢測**：

<div><div><div></div><span>vbnet</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>Step</span> <span>1</span>: 語法和型別檢測 → 有沒有 TypeScript 錯誤</span>
<span><span>Step</span> <span>2</span>: 樣式檢測 → 有沒有用 inline style、硬編碼顏色值</span>
<span><span>Step</span> <span>3</span>: 效能檢測 → 有沒有在渲染路徑做耗時操作、列表缺少 <span>key</span></span>
<span><span>Step</span> <span>4</span>: 安全檢測 → 有沒有硬編碼金鑰、XSS 風險</span>
<span><span>Step</span> <span>5</span>: 規範檢測 → 命名是否規範、匯入是否正確、commit 格式是否對</span>

檢測不通過，AI 會自己修復（簡單問題）或詢問你（複雜問題）。

最重要的是，它還會自動生成符合 Conventional Commits 格式的 commit message。再也不用想 feat 還是 fix，scope 要寫什麼了。

能力層：7 個子 Skill 覆蓋前端全流程

fe-engineer-pack 包含 7 個子 Skill，對應前端工程師每天都在做的事：

子 Skill解決什麼問題典型場景S1 技術方案PRD → 技術方案文件需求評審後出方案S2 元件生成一句話 → 完整元件程式碼「幫我寫一個可編輯表格」S3 Code Review自動審查程式碼品質提 PR 前自檢S4 介面串接Swagger/YAPI → TypeScript 型別前後端對介面S5 Bug 診斷錯誤訊息 → 定位原因 + 修復方案線上錯誤排查S6 效能稽核程式碼 → 效能優化建議頁面卡頓排查S7 文件生成程式碼 → 技術文件給模組補文件關鍵是，這 7 個 Skill 不是獨立的，它們之間可以鏈式呼叫：

<div><div><div></div><span>csharp</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>使用者：<span>「幫我做這個需求」</span></span>
<span>  → S1 出技術方案（等使用者確認）</span>
<span>  → S2 生成元件程式碼</span>
<span>  → fe-<span>base</span>-skill 自動檢測</span>
<span>  → S7 生成文件</span>
<span>  → 自動生成 commit message</span>


一條龍。

#### 編排層：統一入口 + 智慧調度

`fe-hub` 是整個體系的大腦。你不需要記住「S1 是技術方案、S5 是 Bug 診斷」——你直接說你要做什麼，fe-hub 自動判斷應該呼叫哪個 Skill。

它還負責：

- **會話追蹤**：記住你這次會話做了什麼，下次繼續
- **Token 管理**：四級上下文壓縮，自動丟棄不重要的歷史資訊
- **錯誤恢復**：Skill 執行失敗時自動重試或降級

---

### 不只是前端：PM 和設計也有技能包

光有前端 Skill 不夠。需求從哪來？設計規範誰定？

所以我又做了兩個技能包：

#### pm-engineer-pack：9 個產品經理 Skill

子 Skill能力**P1** PRD 撰寫器模糊想法 → 結構化 PRD**P2** 競品分析器競品 URL → 分析報告**P3** 功能優先級功能列表 → RICE 排序**P4** 使用者故事需求 → 使用者故事卡片**P5** 上線規劃任務 → 上線清單**P6** 干係人同步進度 → 匯報文件**P7** 數據看板指標 → 看板設計**P8** 原型生成器截圖/描述 → 可互動原型**P9** 需求拆解器PRD → 前後端研發任務#### designer-pack：6 個設計 Skill

涵蓋設計規範制定（D1）、元件規格（D2）、設計走查（D3）、無障礙稽核（D4）、響應式方案（D5）、設計交付（D6）。

#### 三個技能包的協作路徑

<div><div><div></div><span>css</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>PM 寫 PRD（P1）</span>
<span> → PM 拆研發任務（P9）</span>
<span> → 前端出技術方案（S1）</span>
<span> → 設計出設計規範（D1）</span>
<span> → 前端生成元件（S2）</span>
<span> → 設計走查（D3）</span>
<span> → <span>Code</span> Review（S3）</span>
<span> → 上線（P5）</span>

團隊怎麼用：零成本接入

這是我最滿意的部分——fe-template-skill。

管理員執行一行命令：

<div><div><div></div><span>bash</span></div><div><div> <span>體驗 AI 程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>bash ~/.agents/skills/fe-template-skill/bin/fe-skill-init.sh</span>



它會在專案裡生成一個 `.agents/manifest.json`，記錄這個專案需要哪些 Skill、版本號多少。

團隊成員 clone 專案後，AI 助手會自動讀取 `manifest.json`，檢測本地有沒有對應的 Skill，沒有的就提示安裝。

**成員不需要知道 Skill 體系的存在。** AGENTS.md 本身就提供了基礎規範——有 Skill 更強，沒 Skill 也能用。

---

### 隱藏武器：開發者風格蒸餾

`fe-developer-distill` 可能是整套體系裡最有意思的 Skill。

它會分析一個開發者的 Git 提交記錄和程式碼檔案，提取出這個人的撰碼風格——命名習慣、元件結構偏好、註解風格、錯誤處理方式。

然後生成一份「開發者画像」，AI 之後寫程式碼就會按照這個人的風格來。

這意味著什麼？

> **團隊裡的 Senior 可以把自己的撰碼風格「蒸餾」出來，讓 AI 幫 Junior 寫出 Senior 風格的程式碼。**

還可以把多個人的蒸餾結果取交集，生成「團隊撰碼風格基線」，補充到 AGENTS.md 裡。

---

### 效果數據

說幾個具體的數字（來自我自己的使用體驗）：

場景之前之後提效新需求出技術方案2-4 小時30 分鐘（AI 出初稿 + 人工審核）**~75%**寫一個中等複雜度元件2-3 小時40 分鐘（AI 生成 + 人工調整）**~70%**Code Review 一個 PR30-60 分鐘10 分鐘（AI 先篩 + 人工複核）**~70%**介面串接對齊型別1-2 小時10 分鐘（Swagger → TypeScript 自動生成）**~85%**Bug 排查定位30 分鐘-2 小時15 分鐘（AI 給 Top3 原因 + 驗證路徑）**~60%**寫 commit message每次 2-3 分鐘0（自動生成）**100%**補技術文件不寫（因為懶）5 分鐘（AI 生成初稿）**∞**綜合下來，日常開發效率提升大概在 **40-60%** 之間。取中間值，50%。

但更重要的是**品質提升**——AI 生成的程式碼一定符合專案規範（因為 AGENTS.md 約束了），一定有型別定義（因為 fe-base-skill 檢測了），一定有規範的 commit message（因為自動生成了）。

> **提效 50% 不是寫更多程式碼，而是少返工、少糾錯、少溝通。**

---

### 社群生態：30+ 工具的能力矩陣

除了自己做的 Skill，我還整理了一份社群 Skill 能力矩陣，按 **10 個分類**收錄了 **30+ 工具**：

分類示例工具🔒 專案邊界vercel-react-best-practices、typescript-advanced-types🧩 元件和介面nextjs-app-router-patterns、tailwind-design-system🔍 Review 和測試playwright-best-practices、vitest🎯 體驗和交付responsive-design、web-accessibility📦 工具鏈與規範antfu/skills（4.6k⭐）、moderncss/skills🗺️ 領域專項amap-skills（高德地圖官方）、threejs-skills🎨 原型生成image2proto、url2proto🔒 安全測試hack-skills🕷️ 內容擷取Jina Reader、Crawl4AI🤖 瀏覽器代理agent-browser、PageAgent（阿里開源）每個工具都標註了「fe-xxx 體系是否已覆蓋」，避免重複安裝。

---

### Token 管理：省錢也是能力

AI 跑起來，Token 是錢。所以我在 `fe-hub` 裡做了四級上下文壓縮：

級別策略節省L1丟棄工具呼叫細節，保留結論~20-30%L2僅保留 Skill 調度鏈 + 關鍵決策~40-50%L3僅保留當前任務上下文~60-70%智慧路由簡單任務給小模型，複雜任務給大模型~70%搭配社群的 Caveman（輸出端壓縮，省 ~50-65%），可以實現「雙向節省」。

有一篇論文甚至發現：**限制大模型輸出簡短回覆，在某些基準測試上反而提升了 26% 準確率**。省 token ≠ 犧牲品質。

---

### 你也可以這樣做

整套體系的核心思路其實很簡單：

**1. 給 AI 上下文** —— 在專案根目錄建立一個 `AGENTS.md`，把你們團隊的規範寫進去

**2. 給 AI 工作流** —— 不是「幫我寫程式碼」，而是「按這個流程：方案 → 程式碼 → 檢測 → 文件 → commit」

**3. 給 AI 護欄** —— 不能改的檔案列清楚，不能用的寫法列清楚，檢測不通過就修復

**4. 給團隊分發** —— 一次配置，全團隊共享，零成本接入

不需要造完整個體系才能開始。**先從第 1 步開始——建立一個 AGENTS.md**，把你們團隊的規範寫進去。

就這一步，AI 寫的程式碼品質就會有明顯提升。

---

### 總結

你可能在想我的回答「AI 寫程式碼不可靠」不是它不可靠，是你沒給它規範「這套東西搭起來很麻煩吧」先從 `AGENTS.md` 開始，5 分鐘就行「團隊不願意用怎麼辦」不需要團隊改習慣——成員 clone 後自動生效「效果真的有 50%？」單點任務提效 60-85%，綜合日常 40-60%，保守說 50%> **與其等 AI 變得更聰明，不如先讓它變得更了解你。**

---

如果你也在用 AI 輔助前端開發，歡迎在留言區交流你的實踐經驗。覺得有用的話，點個讚 👍 收藏一下，後面我會繼續分享 Skill 體系的實戰細節。

---

原文出處：https://juejin.cn/post/7632121609760243748