前言¶
頁面能跑、功能也齊，但總覺得「看着怪」——間距不對、層次發虛、配色打架，又說不清是 UI 還是品牌表達的問題。自己翻設計規範成本高，讓通用大模型給建議又容易泛泛而談。下面介紹 SkillHub 上的社區 Skill「設計大師」，把 UI/UX、網頁評價、美學與 VI、設計系統管理寫進 Agent 的固定工作流，並在對話裏用關鍵詞自動喚起。
這是什麼¶
「設計大師」（座標 @user_ad872d55/design-master）是 SkillHub 分類 design-media 下的社區 Skill，當前版本 v2.2.0，由發佈者 user_ad872d55 維護。官方簡介定位爲「央美博導·設計大師」，能力範圍包括：UI/UX、網頁設計評價標準、美學、VI、設計系統管理，並強調能診斷「頁面看着怪」的根因。標籤 requires_api_key=false，表示按 SkillHub 頁面說明無需額外 API Key 即可使用。
核心功能¶
以下能力均來自 SkillHub 頁面與已抓取元數據，不展開未在官方文案中出現的具體方法論或案例。
UI/UX 與網頁評價
在涉及界面結構、交互與網頁呈現時，Skill 會按內置的網頁設計評價標準給出可操作的判斷，而不是隻給形容詞。
美學與品牌 VI
覆蓋配色、品牌調性與視覺識別相關討論，適合在定稿前對齊「像不像自家品牌」這類問題。
設計系統管理
支持圍繞設計系統、組件與主題一致性的對話，便於在多頁面或多端迭代時保持同一套規則。
「頁面看着怪」診斷
官方明確列出可診斷「頁面看着怪」根因；適合把截圖、URL 或組件描述交給 Agent，並要求按 Skill 流程做結構化點評。
觸發詞
在對話中出現下列主題時，Agent 應優先加載該 Skill：設計、品牌、UI、UX、配色、設計系統、診斷網頁、網頁評價、頁面看着怪。
安裝與啓用¶
SkillHub 提供兩種常見方式：把安裝提示詞發給當前 AI，或使用 skillhub CLI 安裝到本機 Agent 的 skills 目錄。
方式一：提示詞安裝（官方頁面推薦）¶
將下面這句話發給支持 Skill 的 Agent（如 Cursor、Claude Code 等），並讓其按 SkillHub 安裝文檔執行：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_ad872d55/design-master`。
方式二：SkillHub CLI¶
先確認是否已安裝 CLI：
command -v skillhub && skillhub --version
若未安裝，可按 SkillHub 文檔執行完整安裝（含 CLI 與默認 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
僅安裝 CLI 時：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安裝本 Skill 時，必須用 --dir 指向當前 Agent 實際使用的 skills 目錄；否則默認會裝到 ./skills/，Agent 可能無法識別。SkillHub 文檔給出的常用路徑如下：
| 環境 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
示例（將 <skills 目錄> 換成上表對應路徑）：
skillhub install @user_ad872d55/design-master --dir <skills 目錄>
SkillHub 頁面還支持下載 Zip 包安裝到本地 Agent；具體步驟以頁面「下載 Zip 包安裝」入口爲準。安裝或更新後，若 Agent 未自動加載新 Skill，按所用客戶端說明重啓或刷新會話。
典型用法¶
官方未在公開頁面粘貼完整 SKILL.md 正文，下列用法均基於簡介與觸發詞，可在本地復現。
1、網頁觀感診斷
輸入中包含「頁面看着怪」或「診斷網頁」，並附上頁面說明、關鍵模塊列表或截圖描述，要求列出可能根因（層次、對比、對齊、組件用法等）與修改優先級。
2、配色與品牌
對話裏提到「配色」或「品牌」，說明行業、受衆與現有主色，讓 Agent 在 VI 約束下給出配色調整或禁忌說明。
3、設計系統與組件
觸發「設計系統」或「UI」，描述現有 Token、組件庫或主題切換需求，請 Agent 檢查跨頁面是否一致、哪些規則應寫入設計系統文檔。
4、UX 評審
使用「UX」或「網頁評價」，給出用戶任務路徑（例如註冊、下單），要求按網頁設計評價標準做走查式反饋。
適用場景與注意¶
適合誰
前端與全棧在改版、落地頁或後臺 UI 時需要第二意見；產品與設計同學希望把評價標準固化到 Agent 對話裏；需要在同一倉庫裏反覆討論 VI 與設計系統一致性的小團隊。
限制
Skill 輸出依賴你提供的上下文質量；未提供設計稿、規範鏈接或具體頁面信息時，結論會偏泛。社區來源（community）的技能以 SkillHub 頁面版本與更新說明爲準，升級前可在 SkillHub 查看版本歷史。
數據參考
SkillHub 抓取元數據顯示評分 100000；頁面展示約 2.3 萬次下載（與抓取中的下載計數可能因統計口徑不同而不完全一致，以 SkillHub 頁面實時數據爲準）。
結尾¶
「設計大師」把 UI/UX、網頁評價、美學、VI 與設計系統管理收斂爲一個可安裝的 Agent Skill，並用明確觸發詞覆蓋日常設計相關對話。若要在 Cursor 等環境中啓用，優先按官方安裝文檔安裝 @user_ad872d55/design-master。
- SkillHub 頁面：https://www.skillhub.cn/skills/user_ad872d55/design-master
- API 座標頁：https://api.skillhub.cn/user_ad872d55/design-master
- 安裝說明：https://skillhub.cn/install/skillhub.md
