Skill：深色工业驾驶舱风格（Dark Cockpit）

适用场景：工业监控大屏、运营驾驶舱、实时数据看板、汇报展示屏
适用页面：全屏数据大屏、可视化看板组件、监控中心面板
引用方式：AI 生成深色风格大屏或可视化组件时引用本 Skill，所有视觉规范以下方为准

使用说明

本规范定义了深色工业风格的视觉体系。AI 在生成任何符合该风格的组件时，必须严格遵循以下六个层面的规范，不得自行挑选颜色、字重、间距或圆角。规范的核心目标是保证多个独立生成的组件拼装到同一系统后，视觉风格高度一致。

---

一、颜色体系

1.1 语义色板

角色	色值	用途
主色	#1890FF	品牌识别、主操作、强调数据
深蓝	#096DD9	次级强调、深色按钮
青色	#13C2C2	数据辅助、合格率、信息态
琥珀	#D48806	警告、变更中、待处理
绿色	#52C41A	成功、在用、通过、正向
红色	#F5222D	危险、驳回、异常、负向
紫色	#904DA0	第四类分类、特殊标记
灰色	#8C8C8C	已归档、禁用、次要

1.2 文字色阶

层级	色值	用途
主文字	#F5FBFF	标题、核心数值
次文字	#E6F4FF	正文、表格内容
辅助文字	#BFD5EF	次要标签、说明
弱化文字	#9CB3CC	表头、单位
最弱文字	#8FA8C6	轴标签、副标题

1.3 背景体系

• 主背景（径向渐变叠加）：

  background:
    radial-gradient(circle at 18% 6%, rgba(24,144,255,0.24), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(19,194,194,0.16), transparent 24%),
    linear-gradient(180deg, #07111F 0%, #0A1730 48%, #08101F 100%);
  

• 卡片背景：linear-gradient(180deg, rgba(18,38,70,0.92), rgba(11,24,45,0.94))
• 悬浮态底色：rgba(255,255,255,0.055)
• 分割线：rgba(240,240,240,0.08)

1.4 使用优先级

遇到"主色"需求 → #1890FF；遇到"警告/变更"需求 → #D48806；遇到"成功/通过"需求 → #52C41A；遇到"危险/异常"需求 → #F5222D；遇到"数据辅助"需求 → #13C2C2。不得自创新色。

---

二、字体规范

2.1 字重档位

档位	字重	用途
常规	400	正文、说明
中等	500	单位、次要数值
粗体	700	卡片标题、小标题
特粗	800	大数字、页面标题

仅使用以上四档，不得使用 300 / 600 / 900。

2.2 字号阶梯

字号	用途
12	单位、轴标签、最弱说明
13	正文、表格、卡片副标题
14	卡片标题
15	强调正文
22	中等数值
24	KPI 数值
28	页面主标题

2.3 等宽字使用场景

数字、编号、版本号、时间戳必须使用等宽字：

ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

2.4 字体族

-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

---

三、间距系统

以 8 为倍数，仅使用以下值：4 / 8 / 12 / 16 / 24 / 32

场景	间距
卡片内边距	16
网格列间距（gutter）	16
模块上下间距	16
组件内部小间距	8 / 12
图标与文字间距	8 / 10
紧凑标签内边距	10

不得使用 5 / 6 / 7 / 9 / 11 / 14 / 18 / 20 等非倍数值。

---

四、圆角规范

组件	圆角
卡片	12px
图标容器	12px
按钮	8px
标签（Tag）	10px
进度条	不设
图表柱条上沿	8px
输入框	8px

圆角值固定，不得随意调整。

---

五、动效规范

5.1 缓动函数

统一使用：cubic-bezier(.4, 0, .2, 1)

5.2 时长档位

档位	时长	场景
快速	0.35s	hover 抬升、图标缩放
标准	0.55s	卡片进场、淡入上移
慢速	1.2s ~ 1.5s	图表动画

5.3 进场动画

• 卡片 / KPI：fadeInUp（opacity 0→1，translateY 24px→0），逐级 delay：0.1s + index × 0.06s
• 标题：fadeInDown

5.4 常驻动效

• 标题 shimmer：4s 循环扫光

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    45%, 100% { transform: translateX(100%); }
  }
  

5.5 悬浮动效

• 普通卡片：translateY(-4px)，阴影加深
• KPI 卡片：translateY(-8px)，图标 scale(1.2) rotate(-8deg)

---

六、组件样式规范

6.1 通用卡片

.card {
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18,38,70,0.92), rgba(11,24,45,0.94));
  box-shadow: 0 2px 12px rgba(0,0,0,0.26);
}

6.2 KPI 卡片

• 左侧：标题（13px / 400 / #9CB3CC）+ 数值（24px / 800 / #F5FBFF）+ 单位（12px / 500 / #8FA8C6）
• 右侧：48×48 图标容器，背景 = 图标色 + 22 透明度
• 底部：环比 delta（12px，正向 #7BE39B）

6.3 标签（Tag）

• 背景 = 语义色 + 20 透明度
• 文字 = 语义色
• 边框 = 语义色 + 66 透明度
• 圆角 10px

<Tag style={{
  background: color + "20",
  color: color,
  border: "1px solid " + color + "66",
  borderRadius: 10
}}>{text}</Tag>

6.4 表格

• 表头背景：rgba(255,255,255,0.055)
• 表头文字：#9CB3CC
• 行文字：#BFD5EF
• 行底边：rgba(240,240,240,0.07)
• 悬浮行：rgba(24,144,255,0.08)
• 单元格内边距：10px 8px

6.5 图表（ECharts）

• 背景：transparent
• tooltip：rgba(5,16,35,0.94)，边框 rgba(24,144,255,0.35)，文字 #E6F4FF
• 图例：底部，icon circle，文字 #9CB3CC 11px
• 柱条：LinearGradient 上深下浅，上沿圆角 8px
• 折线：smooth，symbolSize 7，areaStyle 渐变
• 仪表盘：progress 宽 14，渐变 cyan→primary

6.6 进度条

• strokeColor = 语义色
• trailColor = rgba(143,168,198,0.16)
• 不显示文字

6.7 时间轴

• 轴线：rgba(143,168,198,0.22)
• 节点色 = 语义色
• 标题：#F5FBFF / 700
• 描述：#8FA8C6 / 12px

---

七、响应式断点

断点	行为
≤ 1180px	网格降为 2 列，流程箭头隐藏
≤ 760px	单列布局，标题降至 22px，页面内边距 14px

---

附：引用示例

当 AI 生成一个"深色工业大屏的 KPI 卡片"时，应输出：

<div className="kpi-card">
  <div className="kpi-top">
    <div>
      <div className="kpi-title">BOM总量</div>
      <div className="kpi-value">464<small>套</small></div>
    </div>
    <div className="kpi-icon" style={{ background: "#1890FF22", color: "#1890FF" }}>📦</div>
  </div>
  <div className="kpi-delta">环比昨日 +8.6%</div>
</div>

所有数值、间距、圆角、色值均取自本规范，不自由发挥。