前言¶
用 AI 寫界面時，常見問題是輸出風格飄忽、配色和字體各說各話，換到 Next.js 或 Vue 又需要重新描述約束。自己維護一套設計規範文檔，再每次粘貼進對話，成本高且難保持一致。
下面介紹 SkillHub 上的 ui-ux-pro-max（@org-02qudk26/ui-ux-pro-max-zh）。它把風格、調色、字體、圖表類型與技術棧約束封裝成通用 SKILL 格式，供 Cursor、Claude Code 等支持 Skills 的客戶端在編碼對話裏直接調用。
這是什麼¶
ui-ux-pro-max 定位爲「UI/UX 設計智能」類 Agent Skill：在實現界面或改版時，爲模型提供可引用的設計側知識，並與多種前端技術棧對齊。
- 維護方：智雨科技（SkillHub 來源標記爲 enterprise）
- 當前版本：1.0.0
- 分類：design-media
- API Key：標籤
requires_api_key=false，安裝後無需額外配置密鑰即可使用（以 SkillHub 頁面標註爲準）
官方入口：
- SkillHub 頁面：https://www.skillhub.cn/skills/org-02qudk26/ui-ux-pro-max-zh
- API 座標頁：https://api.skillhub.cn/org-02qudk26/ui-ux-pro-max-zh
核心功能¶
以下能力均來自 SkillHub 簡介與元數據，未在頁面展開的細則不作延伸。
| 維度 | 規模（官方簡介） |
|---|---|
| 界面風格 | 50 種 |
| 調色板 | 21 個 |
| 字體搭配 | 50 組 |
| 圖表類型 | 20 類 |
| 技術棧 | 9 種；簡介中明確列出 React、Next.js、Vue、Svelte、SwiftU（頁面文案在此處截斷，其餘棧名稱以安裝後 Skill 包內說明爲準） |
Skill 的作用是在對話中約束和豐富 UI/UX 相關決策，而不是替代設計工具或自動託管線上資源。具體觸發方式、輸出結構由包內 SKILL.md 定義；公開頁面未提供逐步工作流時，以本地安裝後的 Skill 文檔爲準。
安裝與啓用¶
SkillHub 推薦通過 skillhub CLI 將技能安裝到當前 Agent 的 skills 目錄；裝錯目錄會導致客戶端無法加載。
1、確認 CLI¶
command -v skillhub && skillhub --version
若未安裝，可按 SkillHub 安裝文檔執行完整安裝或僅 CLI 安裝（見 https://skillhub.cn/install/skillhub.md 第一節）。
2、安裝本 Skill¶
將座標中的包安裝到對應客戶端的 skills 路徑。以 Cursor 爲例，目錄一般爲 ~/.cursor/skills/：
skillhub install @org-02qudk26/ui-ux-pro-max-zh --dir ~/.cursor/skills/
其他常見路徑（摘自 SkillHub 安裝文檔，按你實際使用的客戶端擇一）：
- Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/ - Windsurf：
~/.codeium/windsurf/skills/或項目下的.windsurf/skills/
安裝文檔強調：必須使用 --dir 指向當前 Agent 的 skills 目錄；默認裝到 ./skills/ 可能不會被識別，部分環境還需重啓客戶端後生效。
3、通過對話讓 AI 安裝（官方頁面提供）¶
SkillHub 技能頁給出的方式，是把下面意圖發給已聯網的 AI，讓其按安裝文檔完成安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@org-02qudk26/ui-ux-pro-max-zh`。
經上面的步驟，Skill 出現在對應 skills 目錄且客戶端已加載後，即可在後續任務中自動參與 UI/UX 相關回答。
典型用法¶
公開資料未附帶獨立「教程倉庫」或固定 Prompt 模板，可復現的用法只有兩類：
- CLI 安裝：使用
skillhub install @org-02qudk26/ui-ux-pro-max-zh --dir <你的 skills 目錄>，再在項目對話裏提出界面需求。 - 提示詞安裝：發送官方頁面中的安裝說明，由 Agent 讀取 https://skillhub.cn/install/skillhub.md 後執行安裝。
日常開發中，在已啓用該 Skill 的會話裏說明產品類型、目標棧（如 React 或 Vue）以及希望的視覺方向，由 Skill 引導風格、配色、字體與圖表選擇，並落到對應技術棧的實現建議上。更細的步驟、禁止項與輸出格式，請在安裝完成後查看包內 SKILL.md。
適用場景與注意¶
適合誰
- 需要在多個前端棧之間切換、又希望 UI 決策有共同「設計詞典」的全棧或前端開發者。
- 用 AI 生成頁面原型或組件，希望減少「每次從零描述設計規範」的重複勞動。
使用注意
- 簡介中的技術棧列表在 SkillHub 頁面被截斷，完整九種棧名稱以安裝包爲準；不要假設未列出的框架已被覆蓋。
- SkillHub 統計（截至頁面抓取）：評分 100000，下載 3163，安裝計數爲 0——安裝數可能因統計口徑未更新，以你本地是否成功加載 Skill 爲準。
- 本 Skill 不提供 API Key 要求，但仍依賴你所用模型的能力與項目自身依賴；生成代碼需按團隊規範做審查與測試。
- 企業來源（enterprise）Skill，在 SkillHub 內更新版本時，可用
skillhub的升級流程配合--dir同步到同一目錄。
結尾¶
ui-ux-pro-max 把大量風格、調色板、字體搭配與圖表類型預置進 Agent Skill，並面向 React、Next.js、Vue、Svelte 等棧做對齊，適合作爲「設計側上下文」嵌入編碼對話。若你要從 SkillHub 安裝，座標爲 @org-02qudk26/ui-ux-pro-max-zh，說明與安裝指引見：https://www.skillhub.cn/skills/org-02qudk26/ui-ux-pro-max-zh
