# Frontend Design

> 前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。

- Skill: `wangjiawei508/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wangjiawei508/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wangjiawei508/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wangjiawei508 (https://skillmd.com/u/wangjiawei508)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wangjiawei508/frontend-design

---


## 适用场景

- 自动化监测云平台的数据看板页面
- 项目管理后台界面
- 监测预警大屏展示页面
- 移动端巡检记录 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
```

### 状态标签

```html
正常：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`