Skill-深色工业驾驶舱风格

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中等数值24KPI 数值28页面主标题2.3 等宽字使用场景数字、编号、版本号、时间戳必须使用等宽字ui-monospace, SFMono-Regular, Menlo, Consolas, monospace2.4 字体族-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif三、间距系统以8 为倍数仅使用以下值4 / 8 / 12 / 16 / 24 / 32场景间距卡片内边距16网格列间距gutter16模块上下间距16组件内部小间距8 / 12图标与文字间距8 / 10紧凑标签内边距10不得使用5 / 6 / 7 / 9 / 11 / 14 / 18 / 20 等非倍数值。四、圆角规范组件圆角卡片12px图标容器12px按钮8px标签Tag10px进度条不设图表柱条上沿8px输入框8px圆角值固定不得随意调整。五、动效规范5.1 缓动函数统一使用cubic-bezier(.4, 0, .2, 1)5.2 时长档位档位时长场景快速0.35shover 抬升、图标缩放标准0.55s卡片进场、淡入上移慢速1.2s ~ 1.5s图表动画5.3 进场动画卡片 / KPIfadeInUpopacity 0→1translateY 24px→0逐级 delay0.1s index × 0.06s标题fadeInDown5.4 常驻动效标题 shimmer4s 循环扫光keyframesshimmer{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 12pxrgba(0,0,0,0.26);}6.2 KPI 卡片左侧标题13px / 400 / #9CB3CC 数值24px / 800 / #F5FBFF 单位12px / 500 / #8FA8C6右侧48×48 图标容器背景 图标色 22透明度底部环比 delta12px正向 #7BE39B6.3 标签Tag背景 语义色 20透明度文字 语义色边框 语义色 66透明度圆角 10pxTag style{{ background: color 20, color: color, border: 1px solid color 66, borderRadius: 10 }}{text}/Tag6.4 表格表头背景rgba(255,255,255,0.055)表头文字#9CB3CC行文字#BFD5EF行底边rgba(240,240,240,0.07)悬浮行rgba(24,144,255,0.08)单元格内边距10px 8px6.5 图表ECharts背景transparenttooltiprgba(5,16,35,0.94)边框rgba(24,144,255,0.35)文字 #E6F4FF图例底部icon circle文字 #9CB3CC 11px柱条LinearGradient 上深下浅上沿圆角 8px折线smoothsymbolSize 7areaStyle 渐变仪表盘progress 宽 14渐变 cyan→primary6.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 classNamekpi-card div classNamekpi-top div div classNamekpi-titleBOM总量/div div classNamekpi-value464small套/small/div /div div classNamekpi-icon style{{ background: #1890FF22, color: #1890FF }}/div /div div classNamekpi-delta环比昨日 8.6%/div /div所有数值、间距、圆角、色值均取自本规范不自由发挥。