web-design-guidelines skill 是什麼、怎麼用：按 Vercel《Web Interface Guidelines》審查介面代碼的 Skill

本文根據 vercel-labs/agent-skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 71.9 萬次；所在倉庫 vercel-labs/agent-skills 在 GitHub 約 3.2 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

介面「能用」和「好用」之間隔着一大堆細節：焦點狀態、鍵盤可達、加載與空狀態、表單錯誤提示、觸控目標大小。Vercel 把這些整理成了一份公開的 Web Interface Guidelines，web-design-guidelines 就是照着它審代碼的技能。description：審查介面代碼是否符合 Web Interface Guidelines；用戶說「審查我的 UI」「檢查無障礙」「審計設計」「審查 UX」或「對照最佳實踐檢查我的網站」時使用。

它的實現方式很特別——技能本身不含任何規則。SKILL.md 只有四步：

1. 從 vercel-labs/web-interface-guidelines 倉庫拉取最新的規範文件；
2. 讀取你指定的文件（沒指定就問你要文件或匹配模式）；
3. 對照拉取到的全部規則檢查；
4. 按 文件:行號 的簡潔格式輸出發現的問題。

規則和輸出格式都在遠端那份文件裏，所以規範更新後不用重裝技能。

怎麼安裝

倉庫 README 給的安裝方式是 skills CLI。只裝這一個技能，加上 CLI 文檔裏的 --skill 參數（技能名是 web-design-guidelines，與倉庫裏的文件夾名不完全相同）：

bash
npx skills add vercel-labs/agent-skills --skill web-design-guidelines

去掉 --skill 會進入選擇介面，可以一次勾選多個；加 -g 裝到用戶目錄，加 -a claude-code 之類的參數指定智能體。

倉庫整體介紹和其他安裝方式，詳見本站《vercel-labs/agent-skills 是什麼、怎麼安裝：Vercel 官方 Agent Skills（React / Next.js 最佳實踐、網頁介面規範審查）》。

怎麼用

• 「review my UI：src/components/**/*.tsx」。
• 「檢查結算頁的無障礙問題」——它會拉規範、讀文件，再列出類似 Checkout.tsx:42 這樣的定位和原因。
• 修完再跑一遍，直到清單為空。

適合誰 / 侷限

適合沒有專職設計師或無障礙專家的前端團隊，在提交前做一輪快速自查。它是基於源碼的靜態審查，看不到實際渲染效果，顏色對比、真實的鍵盤操作流程仍需在瀏覽器裏驗證；規範代表 Vercel 的取向，不等同於 WCAG 合規認證。

注意事項

• 許可：技能未單獨標註許可，倉庫 README 寫的是 MIT。
• 每次都要聯網：它用智能體的網頁抓取工具訪問 GitHub 上的規範文件，離線或網絡受限時無法工作。
• 遠端內容會進入上下文：規範文件由 Vercel 維護，來源可靠；但這種「運行時拉取指令」的模式意味着技能行為隨遠端文件變化，介意的話可以把規範固定一份到本地。
• skills.sh 當日榜單上它排在該庫第二位。