前言¶

前端評審常卡在兩點：一是手裏只有設計稿和設計系統文檔，看不出實現哪裏偏離了規範；二是從零做界面時，容易做出看起來像原型、一到生產環境就不好維護的頁面。frontend-design-review 把這個判斷交給一個可重複調用的 Skill，用同一套流程完成評審和創建兩條路徑。

這是什麼¶

frontend-design-review 是一個通用 SKILL.md 格式的 Skill，座標 @org-02qudk26/frontend-design-review，版本 1.0.0，來源 enterprise，發佈者是智雨科技，分類爲 dev-programming。它解決的問題不是寫一個頁面，而是按設計質量標準和設計系統檢查 UI 實現，或者在缺少可複用實現時直接創建可用於生產環境的前端界面。官方資料顯示 requires_api_key=false，也就是使用該 Skill 不需要額外配置 API key。

核心功能¶

根據官方簡介，frontend-design-review 提供兩種模式。

第一種是設計評審。它會把 UI 實現與設計質量標準、你的設計系統放在一起對照，找出實現層面偏離規範的地方。輸入應包含現有實現和可作爲評審依據的設計規範材料。

第二種是創建界面。它不是單純生成一段演示代碼，而是要求產出獨特、可用於生產環境的前端界面。官方資料在簡介處截斷，沒有進一步給出評審細則或創建流程的完整條目，因此這裏只保留可覈實的模式定義。

安裝與啓用¶

官方地址是 https://api.skillhub.cn/org-02qudk26/frontend-design-review，SkillHub 頁面是 https://www.skillhub.cn/skills/org-02qudk26/frontend-design-review。

本次抓取未能打開這兩個頁面，官方資料也沒有提供 SkillHub CLI、Cursor、Codex CLI、Claude Code 的具體安裝命令。因此下面只寫通用啓用方式，不把未覈實的命令放進正文：

# 在所用 Agent/Skill 環境中按 SkillHub 導入流程添加
@org-02qudk26/frontend-design-review

在支持 SkillHub 座標的客戶端裏，可以在 Skill 列表或 Agent 配置中使用該座標啓用；在其他環境裏，需要先確認客戶端是否支持 SKILL.md 格式的 Skill 注入。

典型用法¶

根據官方簡介，第一種典型用法是評審已有 UI 實現。準備設計質量標準、設計系統文檔和當前頁面實現，把三者交給 frontend-design-review，讓它按設計系統逐項檢查實現是否符合規範。評審重點應放在視覺一致性、組件狀態、間距和佈局、可訪問性、響應式表現，以及實現是否漏掉了設計系統中定義的組件。

第二種典型用法是創建新前端界面。需求裏應給出頁面目標、目標用戶、關鍵交互、已有設計系統或品牌約束，以及必須兼容的技術棧或組件庫。Skill 會先建立實現約束，再創建可用於生產環境的頁面，而不是隻交付一段靜態示例。

第三種用法是把評審和創建串起來。先用 frontend-design-review 評審現有頁面並得到問題清單，再基於同一套設計系統創建下一版界面；最後把新實現放回評審流程，確認問題沒有被重新引入。

適用場景與注意¶

適合已經有明確設計系統，或需要按設計質量標準統一評審結果的團隊；也適合從零啓動前端界面、希望第一版就更接近生產可用的開發者。

需要注意，官方簡介被截斷，本次頁面又無法抓取，所以具體評審清單、輸出文件結構、質量門檻和創建步驟沒有寫進本文。不要把它當成萬能 UI 生成器：它依賴輸入裏提供的設計標準、設計系統和交互邊界；信息不足時，評審容易變成泛泛的審美判斷，創建也容易退化成一次性 demo。

結尾¶

frontend-design-review 的價值在於把「對照標準評審 UI」和「從零創建可生產前端界面」放進同一個 Skill 流程，減少評審靠經驗判斷、新頁面又脫離設計系統的問題。官方地址：https://api.skillhub.cn/org-02qudk26/frontend-design-review