前言¶
做 CloudBase 相關的 Web 或小程序界面時，常見問題是原型、配色、間距和組件用法各寫各的：頁面能跑，但和官方視覺不一致，後續改版成本高。若把規範散落在文檔鏈接裏，Agent 也容易漏讀或混用其他設計體系。
下面介紹 SkillHub 上的 @tencent-adm/ui-design-guide（界面設計 · UI Design）。它把騰訊雲 CloudBase 的 UI 設計指南封裝成 Agent Skill，在對話裏按需引用高保真原型思路、視覺規範與組件設計規範，便於和 CloudBase 前端場景對齊。
這是什麼¶
界面設計 · UI Design 是騰訊雲 CloudBase 團隊發佈的企業來源 Skill，座標 @tencent-adm/ui-design-guide，當前版本 2.36.0，分類爲 design-media。
Skill 簡介（與 SkillHub 一致）：騰訊雲 CloudBase UI 設計指南，提供 Web 與 小程序 前端的高保真原型、視覺規範與組件設計規範。標籤顯示 requires_api_key=false，安裝後不需要額外配置 API Key 即可使用規範內容。
- SkillHub 頁面：https://www.skillhub.cn/skills/tencent-adm/ui-design-guide
- 技能 API 地址：https://api.skillhub.cn/tencent-adm/ui-design-guide
核心功能¶
依據官方簡介，Skill 覆蓋三類已聲明能力，均面向 CloudBase 生態下的前端界面工作：
- 高保真原型：在需求討論或頁面搭建前，按 CloudBase UI 設計指南約束佈局與交互結構。
- 視覺規範：統一色彩、字體、間距等視覺 token 的引用方式，減少「憑感覺寫 CSS」帶來的偏差。
- 組件設計規範：在 Web 與小程序場景下，按組件級規範選型與組合，而不是隨意堆第三方組件樣式。
Skill 本體遵循通用 SKILL.md 格式；Agent 安裝後會在匹配 UI 設計、CloudBase 前端等意圖時加載該技能文檔中的指引。
安裝與啓用¶
官方 SkillHub 頁給出的安裝方式是：讓 AI 依照 SkillHub 安裝文檔，安裝 @tencent-adm/ui-design-guide。安裝文檔地址：https://skillhub.cn/install/skillhub.md
1、安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已有 skillhub：
command -v skillhub && skillhub --version
未安裝時，可按安裝文檔執行完整安裝（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
2、安裝本 Skill 到當前 Agent 的 skills 目錄¶
安裝技能時必須用 --dir 指向當前 Agent 正在使用的 skills 目錄，否則默認會裝到 ./skills/，Agent 可能識別不到。
skillhub install tencent-adm/ui-design-guide --dir <你的 skills 目錄>
也可在 SkillHub 技能頁通過「將提示詞發送給你的 AI」方式，讓 Agent 按上述文檔完成安裝；提示詞中會寫明安裝 @tencent-adm/ui-design-guide。
3、各客戶端 skills 目錄（摘自 SkillHub 安裝文檔）¶
不同產品路徑不同，安裝 --dir 時需與當前環境一致：
| 客戶端 | 常見 skills 路徑 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
安裝完成後，按所用客戶端說明刷新或重啓 Agent，使新 Skill 生效。本 Skill 無需 API Key，一般不必再寫 skill-platform config 一類密鑰配置。
典型用法¶
可復現的入口來自 SkillHub 官方頁面與安裝文檔，用法分兩步。
第一步：完成安裝
在對話中發送 SkillHub 提供的安裝提示，或自行執行上一節的 skillhub install，確保 @tencent-adm/ui-design-guide 出現在當前 Agent 的 skills 目錄。
第二步：在 UI 任務中顯式引用 CloudBase 設計規範
例如說明目標平臺（Web 或小程序）、頁面類型（列表、表單、控制台等），並要求按 CloudBase UI 設計指南 輸出結構說明、樣式約束或組件選型。Agent 加載 Skill 後，應優先遵循其中的高保真原型、視覺規範與組件規範，而不是泛化的 Material / Ant Design 默認樣式。
搜索技能時也可先用 CLI 確認包名：
skillhub search ui-design-guide
適用場景與注意¶
適合誰
- 使用騰訊雲 CloudBase 做 Web 或小程序前端的開發者、全棧或獨立開發者。
- 希望用 Agent 生成頁面結構、樣式說明或組件清單，且需要與 CloudBase 官方 UI 體系一致的場景。
- 設計 / 前端協作時，需要把「規範文檔」變成對話裏可執行的約束。
限制與注意
- Skill 提供的是 設計指南與規範引用，不替代你在倉庫裏實際接入的 UI 組件庫版本與構建配置；落地時仍要在項目中核對依賴與 CloudBase 文檔。
- 安裝路徑錯誤是常見坑：務必使用
--dir指向當前 Agent 的 skills 目錄。 - SkillHub 統計（截至頁面展示）：評分 100000，下載 47588，安裝 2；enterprise 來源技能以 SkillHub 頁面版本 2.36.0 爲準。
- 若 CLI 或網絡受限，需按安裝文檔在可聯網環境執行安裝腳本。
結尾¶
@tencent-adm/ui-design-guide 把 CloudBase 的 UI 設計指南收進 Agent Skill：無需 API Key，通過 SkillHub 安裝到 Cursor、Claude Code、Codex 等環境的 skills 目錄後，可在 Web 與小程序前端任務中統一引用高保真原型、視覺規範與組件設計規範。
官方 SkillHub 頁面：https://www.skillhub.cn/skills/tencent-adm/ui-design-guide
