前言¶
做企业后台或中台时，常见情况是：产品文档里只有页面类型和业务用途，设计侧却要反复对齐栅格、色值、组件高度和暗黑模式。若完全交给模型自由发挥，容易冒出 C 端轻量化视觉、重蓝渐变或移动端布局，和 Ant Design、腾讯云、字节火山等国内 B 端习惯不一致。
下面介绍 SkillHub 社区技能 B端UI界面设计（坐标 @user_4585f108/b-ui-standard）。它把角色、色板、栅格和组件约束写进 system_prompt.md，用固定用户模板收集需求，让 Agent 按既定顺序输出 Design Token、布局说明和可引用的 CSS 变量，而不是零散「画个界面」。
这是什么¶
B端UI界面设计 是 SkillHub 上的社区 Skill（source: community，发布者 user_4585f108），当前版本 1.0.0，分类为 design-media。包内元数据将技能定位为「B端中性风标准化UI界面一键生成」：生成符合腾讯云、字节火山、阿里 Ant Design v5 取向的 B 端后台界面，遵循低干扰、高效率、弱装饰原则，并支持明暗双模式相关色值约定。
技能 不需要 API Key（标签 requires_api_key=false）。在 SkillHub 页面可见评分 100000、下载 872 次（统计以 SkillHub 展示为准）。
官方入口：
- API 坐标页：
https://api.skillhub.cn/user_4585f108/b-ui-standard - SkillHub 详情：
https://www.skillhub.cn/skills/user_4585f108/b-ui-standard
核心功能¶
以下内容来自技能包内的 system_prompt.md、SKILL.md 与 config.yaml，均为安装后可核对的能力说明。
设计约束（Agent 侧规则）¶
技能将 Agent 设定为「资深 B 端中台 UI 架构师」，并明确禁止：自主发挥视觉、C 端轻量化风格、老旧重蓝色风格，以及渐变、发光、毛玻璃、彩色阴影、动态动效等装饰。
栅格与布局
- 8px 倍数制，禁止奇数尺寸。
- 侧边常驻导航（展开 240px / 收起 64px）+ 顶部全局栏 + 主体内容区，禁止混合导航。
- 页面左右内边距 24px；卡片间距横向 24px、纵向 32px。
- 仅适配 1440、1920 桌面分辨率，不做移动端。
色彩与字体
- 主色
#2764E5，悬浮#1D54D1；功能色与中性色、暗黑模式底色与对比度要求均写死在提示词中。 - 字体回退链与字号/行高、字重（仅 400/500/600）有绑定表。
组件
- 按钮三类（主/次/文字），高度 32px 或紧凑 24px。
- 表格、表单、图表等有表头底色、间距、图例数量等硬性描述。
标准化输出顺序¶
按 system_prompt.md，生成结果应依次包含：
- 全局 Design Token（色值 / 间距 / 圆角）汇总表
- 页面栅格布局图文标注
- 页面组件参数明细
- 可直接引用的 CSS 全局变量
运行时配置¶
config.yaml 中：output_lang 为 zh-CN，stream_output: true，timeout: 30（单位以包内字段为准）。
安装与启用¶
SkillHub 官方安装说明见 https://skillhub.cn/install/skillhub.md。要点：安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 且可能不被识别。
1、检查 SkillHub CLI¶
command -v skillhub && skillhub --version
未安装时可按官方文档执行完整安装或仅 CLI 安装（脚本地址见 skillhub.md 第二节）。
2、安装本技能¶
搜索确认坐标后安装（命名空间与 slug 以 SkillHub 搜索结果为准）：
skillhub search b-ui-standard
skillhub install b-ui-standard --namespace user_4585f108 --dir <你的 Agent skills 目录>
常见 skills 目录示例（摘自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
也可将下面提示词发给支持 Skill 的 AI，由其按官方文档完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_4585f108/b-ui-standard`。
3、本地 ZIP 导入（SkillHub 后台）¶
包内 README.md 说明：若通过腾讯 SkillHub 中国版后台「本地导入」，需新建文件夹 b-end-ui-standard-generate，放入技能包规定的 5 个文件，压缩为 ZIP且不要嵌套二级目录，在「技能管理 → 本地导入」上传。文档写明兼容 腾讯 SkillHub 中国版 v2.4 及以上。
安装或导入后，按你所用客户端要求重启或刷新技能列表，再在对话中显式选用该 Skill 或让其参与 UI 相关任务。
典型用法¶
用户侧输入结构由 user_template.txt 定义，占位字段如下：
页面类型：{{页面类型}}
业务用途：{{业务用途}}
是否开启暗黑模式：{{是/否}}
是否包含数据看板：{{是/否}}
README.md 给出的示例如下，可直接改写业务字段复现：
页面类型：用户列表页
业务用途：企业人员权限管理
暗黑模式：否
数据看板：否
（若严格对齐模板，将「暗黑模式」写成「是否开启暗黑模式：否」即可。）
经过上面的步骤，Agent 应按「Design Token → 栅格布局 → 组件明细 → CSS 变量」顺序回复，便于前端把变量抄进主题或设计稿标注。
适用场景与注意¶
适合谁
- 需要快速产出 B 端列表页、表单页、带/不带数据看板的后台界面说明的产品、设计协作或前端同学。
- 希望输出与国内主流 B 端组件库气质一致、且带固定色值与间距表，而不是纯自然语言描述的团队。
限制与注意
- 技能明确不做移动端适配，仅 1440 / 1920 桌面场景。
- 视觉规则高度固化（色值、导航结构、禁用动效等），若品牌需要强定制，需在生成结果上二次改 Token，而不是指望 Skill 自动偏离规范。
SKILL.md在包内为 JSON 元数据格式，实际行为以system_prompt.md与模板为准；升级版本时以 SkillHub 上v1.0.0及新包内容为准。- 社区来源技能，使用前可在 SkillHub 页面查看评分与下载量，并自行评估是否纳入生产流程。
结尾¶
B端UI界面设计 把国内 B 端中性风约束写进可复用的 Agent 提示与模板，适合在需求只有「页面类型 + 业务用途」时，一次性拿到 Token、布局与 CSS 变量草案。详情与安装见 SkillHub：https://www.skillhub.cn/skills/user_4585f108/b-ui-standard，坐标 @user_4585f108/b-ui-standard。
