菜单
DBM 前端的排版与交互设计规范，包含设计令牌（间距、字号、颜色）、四类页面骨架的判定与实现范式、 列表页、工具箱提单页、详情页、弹窗侧滑、按钮体系的具体取值。 新建或修改页面、组件、样式时使用， 或当用户询问页面布局、容器留白、按钮规范、弹窗宽度、字号配色、交互模式时使用。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TencentBlueKing/blueking-dbm --skill dbm-frontend-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | dbm-frontend-design |
| description | DBM 前端的排版与交互设计规范，包含设计令牌（间距、字号、颜色）、四类页面骨架的判定与实现范式、 列表页、工具箱提单页、详情页、弹窗侧滑、按钮体系的具体取值。 新建或修改页面、组件、样式时使用， 或当用户询问页面布局、容器留白、按钮规范、弹窗宽度、字号配色、交互模式时使用。 |
本规范只沉淀可复用的设计取值与交互模式（间距、尺寸、色值、结构、流程），不涉及具体项目的组件实现。
动手前先按场景读对应参考文件，本文件只放每次都必须遵守的内容。
| 要做的事 | 读这个文件 |
|---|---|
| 新建 HTML 页面（必须先复制骨架） | assets/page-frame.html |
| 新建页面、算容器高度、页面类型判定 | layout.md |
| 表格列表页（集群 / 实例 / 单据 / 资源） | list-page.md |
| 工具箱提单页（表单 + 可编辑表格） | toolbox-page.md |
| 详情页、详情面板、KV 信息展示 | detail-page.md |
| 弹窗、侧滑、气泡确认、消息提示 | overlay.md |
| 按钮主题、文案、位置 | button.md |
系统只有 4 种页面骨架，新页面必须归入其中一种，不要发明第五种。
| 骨架 | 判定条件 | 顶层结构 | 底部操作 |
|---|---|---|---|
| 列表页 | 展示可筛选的集合 | 操作区 + 表格 + 分页 | 无，操作在行内或批量区 |
| 工具箱提单页 | 提交一次性变更单据 | 提示条 + 表单表格 | 固定底栏 52px：提交 + 重置 |
| 详情页 | 只读展示单个实体 | 灰底摘要栏 + 卡片栈 / Tab | 固定底栏：克隆 / 撤销等 |
| 配置管理页 | 少量记录的 CRUD | 操作区 + 表格 + 侧滑表单 | 侧滑 footer：提交 + 取消 |
不要出现 10 / 12 / 18 这类中间值。
| 值 | 用途 |
|---|---|
| 8px | 按钮之间、图标与文字之间 |
| 16px | 操作区与表格之间、卡片之间 |
| 20px | 顶部提示条与表单之间 |
| 24px | 页面左右内边距、Tab 容器 |
| 88px | footer 主按钮 min-width |
| 52px | 顶栏 / 面包屑 / 固定底栏统一高度 |
| 2px | 全站唯一圆角 |
| 字号 | 用途 |
|---|---|
| 12px | 内容区基准：表格、表单 label、详情 KV、Tag |
| 14px | 全局默认、部分按钮、工具箱页标题 |
| 16px | 详情主标题（集群域名、单据类型）、面包屑标题 |
全局默认 14px，但内容区组件（表格、表单 label、复选框、下拉框）统一压到 12px。业务页面实际是 12px 的系统，新写的内容区文字默认按 12px 走。
禁止引入语义之外的新色值。
| 语义 | 色值 | 用途 |
|---|---|---|
| 主色 | #3a84ff | 链接、主按钮、选中态、hover 图标 |
| 辅助文字 | #979ba5 | 辅助文字、详情 label、meta 信息 |
| 正文 | #63656e | 默认正文、表格正文 |
| 弱文字 | #c4c6cc | 禁用文字、离线行、图标默认态 |
| 标题 | #313238 | 标题、详情 value、加粗 label |
| 边框分割 | #dcdee5 | 边框、分割线、滚动条 thumb |
| 危险 | #ea3636 | 删除 / 终止按钮、校验错误 |
| 成功 | #2dcb56 | 状态点、NEW 标签 |
| 警告 | #ff9c01 | 提示条、已禁用标签 |
| 浅灰底 | #f5f7fa | 内容区背景、说明块背景 |
| 深灰底 | #f0f1f5 | 详情摘要栏底、表头背景 |
--，不要空字符串、不要 N/A、不要 0。20px 24px 0，会叠加成 44px。改完页面后逐条核对：
--