前言¶

用 AI 写前端或原型时，颜色、间距、组件状态往往每次都不一样：主色随手换、圆角和阴影各写各的，B 端后台页和图表区更难对齐设计稿。团队若已有成稿的设计规范，通常只能人工对照 PDF 或 Figma，Agent 侧缺少一份可长期挂载的「硬约束」。

下面介绍 SkillHub 上的 UI规范专用技能（坐标 @user_c2706611/yuanxingsheji-v1）。它把一整套 PC/移动端/大屏适用的 UI 设计说明放进通用 SKILL.md，安装到 Agent 的 skills 目录后，模型在相关任务里会按文档中的 Token、组件与布局规则执行，而不是凭印象拼界面。

这是什么¶

UI规范专用技能 是社区来源（community）的 design-media 类 Skill，当前包版本 1.0.2，由发布者 user_c2706611 维护。Skill 本体几乎不附带额外脚本：核心是一份 品牌1设计系统规范 文档（文档内标注规范版本 1.6，更新日期 2026年6月10日），声明适用于品牌1产品 PC 端、移动端与大屏界面。

它要解决的问题很明确：把色彩、字体、间距、阴影、组件、图表与典型页面模板等规则集中成 Agent 可读的技能说明，减少「每次对话重新口述规范」的成本。SkillHub 页面标注 requires_api_key=false，安装使用不依赖外部 API Key。

SkillHub 统计（以页面抓取为准）：评分 100000，下载 928 次。

核心功能¶

能力均来自 Skill 包内 SKILL.md，可按章节理解 Agent 能引用的范围：

1. 视觉主题与色彩：品牌色（主色 Brand-6 #07978D）、中性色、功能色、渐变与文字/背景对比度表；60:30:10 配色法则等。
2. 字体排版：思源黑体 + Arial，字号 Token（10px–36px）、字重与行高体系。
3. 间距与布局：以 8px/12px 为主的间距表、24 列网格与响应式断点；§3.4 内页/门户首页/数据分析主页三类页面的布局间距（含 ASCII 结构示意）。
4. 深度与阴影：--shadow-1 至 --shadow-3 及内阴影，统一阴影源 #252B30。
5. 组件样式：按钮、卡片、表单、全局导航与页面标题区（二选一规则）、标签、提示框、对话框、主页指标卡等尺寸与状态色。
6. 交互与动效：悬停/焦点反馈、触摸目标最小 44×44px、过渡 0.3s 等。
7. 设计与禁止项：必须使用的 Token 与禁止的非标圆角、非标准间距、乱用渐变等。
8. 特定组件：智能助手入口、水印、侧边面板与浮动窗等补充说明。
9. 数据与文案：金额千分位、百分比、页面标题与按钮文案标点规则。
10. 图表与单图形组件：十种图表类型的色板与线宽/柱宽规范，图例、坐标轴、地图色板及多图组合规则。
11. 典型界面模板：查询分析、列表录入、单据录入、报表、向导、分组表单、数据分析等模板的区域划分与 ASCII 布局。

Agent 在启用该 Skill 后，应把这些章节当作实现 UI 时的约束来源，而不是自由发挥视觉风格。

安装与启用¶

通过 SkillHub CLI 安装（推荐）¶

先确认本机是否已有 skillhub：

command -v skillhub && skillhub --version

未安装时可按 SkillHub 安装文档执行完整安装（文档地址：https://skillhub.cn/install/skillhub.md）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装技能时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 且可能不被识别。该 Skill 的搜索结果显示安装方式为：

skillhub install yuanxingsheji-v1 --namespace user_c2706611 --dir <skills 目录>

常用客户端 skills 路径（摘自 SkillHub 安装文档）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

示例（Cursor）：

skillhub install yuanxingsheji-v1 --namespace user_c2706611 --dir ~/.cursor/skills/

安装成功后，包会落在类似 @user_c2706611/yuanxingsheji-v1/ 的目录下，其中 SKILL.md 即设计规范正文。

通过对话让 AI 安装¶

SkillHub 技能页提供的提示为：请 Agent 根据 https://skillhub.cn/install/skillhub.md 安装 @user_c2706611/yuanxingsheji-v1。适合已开启工具、但尚未手动执行 CLI 的环境。

安装或更新 Skill 后，按你所用客户端说明重启或刷新 Agent，以便加载新 skills。

典型用法¶

Skill 未单独定义 CLI 子命令；用法是在 UI 相关任务中依赖已启用的 Skill，让模型按 SKILL.md 选取色值、间距与组件结构。下面是可以直接复现的对话方向（表述需与真实需求一致即可）：

1. 按主色与中性色搭后台页
   说明要做「查询 + 表格」内页，并要求遵循 Skill 中 §3.4.4 内页结构：页面标题区、查询区 padding: 16px、区块间距 16px，按钮使用 Brand-6 主色。

2. 实现组件状态
   要求主按钮默认 Brand-6、悬停 Brand-5、点击 Brand-8，输入框焦点边框 Brand-6，圆角 2px、高度 28px（见 §5.1、§5.3）。

3. 图表区
   指定折线图/柱状图时，引用 §10.3 的线宽、柱宽与色板，并遵守 §10.7 图表面板标题、单位、图例的间距表。

4. 选用界面模板
   做「查询分析」或「单据录入」时，指明对应 §11 模板名称，让 Agent 按 ASCII 区域顺序划分 DOM 结构。

经过上面的步骤，产出物应在 Token 命名、间距阶梯和禁止项（§7.2）上与文档一致；若需偏离规范，应在需求里显式说明例外，避免与 Skill 默认规则冲突。

适用场景与注意¶

适合谁

• 正在落地 品牌1 或与之对齐的 B 端产品（文档写明面向电力、财务等专业场景气质），需要 Agent 写 Vue/React/HTML 原型或组件库示例。
• 希望把设计系统从「口头提示」升级为可版本化的 Skill 包，在 Cursor、Claude Code、Codex 等支持 skills 的客户端间复用同一份 SKILL.md。

限制与注意

• 规范正文很长，单次对话若 scope 过大，应拆成「色彩+字体」「组件」「某一模板页」分步生成，便于对照章节验收。
• 文档中的「品牌1」、主色 #07978D、组件尺寸等为特定设计系统取值，换品牌时需改 Skill 内容或 fork 后维护，不宜当作通用 Material 替代品。
• Skill 包版本（1.0.2）与文档内规范版本（1.6）是两层版本号，升级 Skill 后建议打开 SKILL.md 头部元信息确认规范日期。
• 社区 Skill，使用前可在 SkillHub 页面查看评分与下载量，并自行审查 SKILL.md 是否与团队设计稿一致。

结尾¶

UI规范专用技能 的价值在于：把色彩 Token、布局模版和图表规则写进 Agent 可执行的 SKILL.md，让界面实现有章可循，而不是每次从零描述视觉规范。

• SkillHub 页面：https://www.skillhub.cn/skills/user_c2706611/yuanxingsheji-v1
• API 坐标页：https://api.skillhub.cn/user_c2706611/yuanxingsheji-v1