前言¶
做 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
