01
设计气质 DNA
技术训练监控开发者强化学习
用于监控实时AI训练指标的开发者控制面板
02
色彩
#4fc3f7Accent#e0e0e0Ink#a0a0b0Ink soft#1a1a2eBG#232340BG soft#1e1e36BG quiet#6a6a8aMutedrgba(255,255,255,0.1)Line深色、低对比度的调色板，针对长时间监控会话进行优化，并采用蓝色作为交互元素的辅助色
03
字体
- display
14px · 600 - body
12px · 400 - mono
11px · 400
使用大写字母作为区域标题 · 保持一致的行高以确保数据可读性 · 使用等宽字体显示技术日志与错误信息
04
间距
4px8px12px16px24px32px48px基于4px的基础网格，组件采用一致的内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 8px
pill · 999px
1px solid rgba(255,255,255,0.1)
0 2px 8px rgba(0,0,0,0.3) · 0 4px 16px rgba(0,0,0,0.4)
06
布局
1400container
12columns
16pxgutter
768 / 1024breakpoints
基于网格的仪表板布局，包含顶部导航栏与内容面板
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的细微hover效果 · 指标更新时的平滑过渡
交互元素的背景色偏移 · 通过颜色变化提供视觉反馈
08
组件
- button 小型圆角按钮，主要操作采用蓝色辅助色
- card 深色卡片搭配细微边框，用于分组相关内容
- chip 小型标签搭配低饱和度背景，用作状态指示器
- input 极简输入框搭配深色背景
- hero 极简的头部区域，包含标志与导航标签页
09
文案语气与禁用清单
- 语气 技术性、精确且功能导向
- 标题风格 用于区域识别的直接大写标签
- 按钮文案 用于训练控制的清晰行动导向文本
- 不要使用浅色主题——截图显示针对监控优化的深色背景
- 不要使用装饰性字体——截图显示用于清晰度的几何无衬线字体
- 不要添加不必要的动画——截图显示静态的功能性界面
- 不要使用大圆角——截图显示细微的4-8px圆角
- 不要使用复杂渐变——截图显示扁平的纯色
- 不要添加装饰性图标——截图显示极简的功能性图标
- 避免: 营销语言
- 避免: 装饰性元素
- 避免: 复杂动画
- 避免: 浅色主题
- 避免: 大于8px的圆角
11
System Prompt
这是一个用于监控强化学习训练会话的深色主题开发者工具界面。设计采用深蓝灰色（#1a1a2e）背景，搭配较浅的面板（#232340）和用于交互元素的蓝色辅助色（#4fc3f7）。排版上，标题使用几何无衬线字体，技术数据使用等宽字体。界面通过在深色背景上使用高对比度文本来优先保证数据可读性。关键约束：绝不能使用浅色主题，避免装饰性排版，并保持功能简洁性。布局遵循仪表板模式，具备清晰的区域层级和最小化的视觉干扰。