前言¶
在 Cursor、Claude Code 等 Agent 裏寫界面，常見情況是：功能邏輯能跑通，但佈局、間距、組件層次和整體觀感偏離產品預期；或者已有頁面能工作，卻缺少統一的設計語言。純靠通用對話提示，模型不一定會在「該寫 UI 代碼」時穩定進入設計模式，審美取向也不一致。
下面介紹 SkillHub 社區技能 UI設計Skill（座標 @user_865e3592/ui-new）。它把「何時觸發 UI 設計任務」和「參照哪些設計規範輸出代碼」寫進 Skill 說明，讓 Agent 在用戶提出界面相關需求時優先走專業 UI 生成或優化路徑。
這是什麼¶
UI設計Skill 是 SkillHub 上分類爲 design-media 的社區技能，發佈者爲 user_865e3592，當前版本 1.0.0。官方頁面：SkillHub - UI設計Skill；API 元數據地址：https://api.skillhub.cn/user_865e3592/ui-new。
一句話定位：專業 UI 生成與現有界面優化。當對話涉及生成界面、改頁面、做組件庫或設計系統時，Agent 應加載該 Skill，並參考 Google Material Design、Apple Human Interface Guidelines（HIG）以及 Skill 描述中的「Pinterest 級別審美」取向，輸出偏大氣、簡約、高級美學的 UI 代碼。
標籤 requires_api_key=false，表示按 SkillHub 元數據 不需要額外 API Key 即可使用。
核心功能¶
以下能力均來自 SkillHub 官方簡介，未在資料中出現的細節不作延伸。
- 從零生成 UI：Web 界面、App 界面、Dashboard、Landing Page 等視覺與交互相關的頁面與組件代碼。
- 優化已有界面：在用戶已有代碼或佈局基礎上做視覺與交互層面的改進。
- 組件庫與設計系統：創建或整理組件庫、設計系統相關結構與樣式約定。
- 觸發範圍較寬：除明確的設計需求外，口語化請求（如「幫我做個界面」「優化一下 UI」「設計一個頁面」）也應在 Skill 規則下觸發，避免 Agent 只改邏輯、不動界面。
安裝與啓用¶
SkillHub 推薦兩種方式：向 Agent 發送安裝提示詞，或使用 skillhub CLI。安裝前需確認 CLI 是否可用：
command -v skillhub && skillhub --version
若未安裝，可按 SkillHub 安裝文檔 執行完整安裝（示例）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
通過提示詞安裝（SkillHub 頁面原文）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_865e3592/ui-new`。
通過 CLI 安裝時，必須用 --dir 指向當前 Agent 識別的 skills 目錄，否則默認會裝到 ./skills/，Agent 可能無法加載。通用命令形式：
skillhub install user_865e3592/ui-new --dir <skills 目錄>
常見客戶端 skills 路徑（摘自 SkillHub 安裝文檔）：
| 環境 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
安裝後若 Agent 未立即識別新 Skill，按所用客戶端說明重啓或刷新 skills 配置。本 Skill 無需 配置 API Key。
典型用法¶
Skill 正文側重 觸發條件與設計取向，而非固定 CLI 子命令。可復現的用法是：在已安裝 Skill 的 Agent 會話中，用自然語言描述界面目標；Agent 加載 @user_865e3592/ui-new 後按 Skill 要求輸出 UI 代碼。
示例請求（與官方簡介中的觸發場景一致）：
- 「爲 SaaS 產品做一個 Dashboard，包含側邊欄、頂欄和三個數據卡片。」
- 「這是現有 Landing Page 的 React 代碼，請優化排版和視覺層次，風格參考 Material Design。」
- 「幫我設計一套按鈕、輸入框、卡片的組件庫，並給出 Tailwind 或 CSS 變量約定。」
- 「幫我做個界面」——在 Skill 規則下也應進入 UI 設計流程，而不是僅返回文字說明。
經過上面的步驟，Agent 應在生成或修改代碼時對齊 Material Design、Apple HIG 及 Skill 聲明的高級簡約審美，而不是隨意堆疊樣式。
適用場景與注意¶
適合誰
- 需要在 Agent 裏快速出 可運行 UI 代碼 的前端、全棧或獨立開發者。
- 希望 統一觸發規則：只要話題落在界面、頁面、組件庫、設計系統上，就自動走 UI Skill，而不是依賴每次手動寫長提示詞。
- 不想爲 UI Skill 單獨申請第三方 API Key 的團隊（
requires_api_key=false）。
限制與注意
- 輸出質量仍取決於底層模型、項目棧（React/Vue/原生等）以及你提供的上下文；Skill 提供的是 規範與觸發策略，不能替代設計評審與無障礙、性能等工程檢查。
- 安裝路徑錯誤是常見坑：務必使用
--dir指向對應 Agent 的 skills 目錄。 - SkillHub 頁面展示的下載、評分等統計會隨時間變化；撰寫時以社區頁與元數據爲準。預抓取元數據示例：分類
design-media，評分 100000，下載 55193，安裝 241（以你訪問 SkillHub 時的頁面爲準）。
結尾¶
UI設計Skill 把 UI 生成、界面優化、組件庫與設計系統等工作收斂到同一套 Agent Skill：明確觸發話術、對齊 Material Design 與 Apple HIG，並強調高級簡約的視覺輸出。若你經常在編碼 Agent 裏做頁面卻得不到穩定的設計向結果，可以從 SkillHub 安裝 @user_865e3592/ui-new 試一輪。
