| name | frontend-design |
| description | 前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。 |
适用场景
- 自动化监测云平台的数据看板页面
- 项目管理后台界面
- 监测预警大屏展示页面
- 移动端巡检记录 H5 页面
- 内部工具系统（数据上传、报表查看、审批流程）
设计原则
1. 工程行业 UI 特点
工程监测平台不同于消费类产品，用户是项目经理、监测工程师和甲方负责人。核心诉求：
| 优先级 | 需求 | 设计要求 |
|---|
| 最高 | 数据清晰可读 | 大字号数据展示，表格行高充足，关键数据突出 |
| 高 | 预警醒目 | 红/橙/黄/绿四色预警体系贯穿全局 |
| 高 | 快速定位异常 | 异常数据置顶或高亮，无需翻页查找 |
| 中 | 操作简单 | 目标用户非技术人员，减少操作步骤 |
| 低 | 视觉美观 | 专业稳重风格，避免花哨动效 |
2. 配色体系
预警四色系统（全平台统一）
| 等级 | 颜色 | Hex | 含义 |
|---|
| 正常 | 绿色 | #16a34a | 各项指标在安全范围内 |
| 提示 | 黄色 | #ca8a04 | 达到控制值 70%，需关注 |
| 预警 | 橙色 | #ea580c | 达到控制值 85%，需加密观测 |
| 报警 | 红色 | #dc2626 | 达到或超过控制值，启动应急预案 |
基础配色
| 用途 | 色值 | 说明 |
|---|
| 主色 | #2563eb | 品牌蓝，导航栏、主按钮 |
| 背景 | #f8fafc | 浅灰白，页面底色 |
| 卡片 | #ffffff | 纯白，内容卡片 |
| 文字主色 | #1e293b | 深灰蓝，正文 |
| 文字辅色 | #64748b | 中灰，标签和说明文字 |
| 边框 | #e2e8f0 | 浅灰，卡片和表格边框 |
3. 字体与排版
标题： 16-20px, font-weight: 600, color: #1e293b
数据大字： 28-36px, font-weight: 700, font-variant-numeric: tabular-nums
正文： 14px, line-height: 1.6
表格内容： 13-14px, font-variant-numeric: tabular-nums
标签： 12px, color: #64748b
数值展示必须使用等宽数字（tabular-nums），确保列对齐。
常用页面结构
监测数据看板
┌─────────────────────────────────────────┐
│ 导航栏（项目名称 / 日期选择 / 预警统计） │
├───────┬─────────────────────────────────┤
│ │ 统计卡片区（4列） │
│ 侧 │ ┌──────┬──────┬──────┬──────┐ │
│ 边 │ │正常XX │提示XX │预警XX │报警XX│ │
│ 栏 │ └──────┴──────┴──────┴──────┘ │
│ │ │
│ 项 │ 趋势图区域 │
│ 目 │ ┌─────────────────────────────┐│
│ 列 │ │ chart_generator SVG 嵌入 ││
│ 表 │ └─────────────────────────────┘│
│ │ │
│ │ 数据表格区域 │
│ │ ┌─────────────────────────────┐│
│ │ │ 测点 │ 本期 │ 累计 │ 状态 ││
│ │ │ ... │ ... │ ... │ ... ││
│ │ └─────────────────────────────┘│
└───────┴─────────────────────────────────┘
预警大屏
┌─────────────────────────────────────────┐
│ 顶部标题栏（项目名 + 实时时间 + 天气） │
├─────────────┬───────────┬───────────────┤
│ 左侧面板 │ 中央地图 │ 右侧面板 │
│ 预警列表 │ 测点分布 │ 趋势图表 │
│ （按等级 │ （地图标点 │ （选中测点 │
│ 排序） │ 颜色=等级） │ 的时序曲线） │
├─────────────┴───────────┴───────────────┤
│ 底部：滚动公告栏（最近预警事件 + 施工动态） │
└─────────────────────────────────────────┘
组件设计规范
数据卡片
宽度：自适应（grid 等分）
高度：100-120px
内容：指标名称（12px灰色） + 数值（28-36px加粗） + 单位（14px） + 变化箭头
边框：1px solid #e2e8f0，圆角 8px
阴影：0 1px 3px rgba(0,0,0,0.1)
预警态：左边框 4px 对应预警色
数据表格
表头：背景 #f1f5f9，font-weight: 600，粘性定位
行高：40-44px（确保可点击）
斑马纹：奇数行 #ffffff，偶数行 #f8fafc
超限行：背景 #fef2f2（红色浅底），左边框 3px #dc2626
hover：背景 #eff6ff
状态标签
正常：background: #dcfce7; color: #166534; border-radius: 4px; padding: 2px 8px; 提示：background: #fef9c3; color:
#854d0e; 预警：background: #ffedd5; color: #9a3412; 报警：background: #fee2e2; color: #991b1b; font-weight: 600;
技术选型建议
| 场景 | 推荐方案 |
|---|
| 数据看板 | React + Tailwind CSS + Recharts |
| 预警大屏 | React + ECharts（地图能力） |
| 移动端 H5 | React + Ant Design Mobile |
| 内部工具 | React + Ant Design Pro |
| 快速原型 | HTML + Tailwind CDN |
注意事项
- 监测平台用户多为 Windows + Chrome/Edge 环境，确保兼容性
- 大屏页面需适配 1920×1080 和 3840×2160 两种分辨率
- 表格数据可能很长（200+ 行），必须使用虚拟滚动或分页
- 图表使用
chart_generator 工具生成 SVG 后可直接嵌入页面
- 中文字体优先使用系统字体栈：
"PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif
