메뉴
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 표시 중
| 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。改完页面后逐条核对：
--SOC 직업 분류 기준
