Menü
前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。
Word 文档生成技能。当需要将监测报告、技术方案或投标文件导出为正式 .docx 文件时加载此技能，获取排版规范、章节结构和工具调用指引。
Excel 报表生成技能。当需要导出监测数据表、统计汇总表或多期对比表为 .xlsx 文件时加载此技能，获取数据组织规范和工具调用指引。
工程文档人性化润色技能。当 AI 生成的报告、方案或标书读起来"太像机器写的"时加载此技能，将文本转化为资深工程师的行文风格。
工程监测招投标专业知识库。当编制投标文件、分析招标文件或进行商务报价时加载此技能，获取评分要素、报价策略和资质要求指引。
工程监测规范条文速查技能包。当需要引用规范条文、核查技术指标或进行合规审查时加载此技能，获取规范查询方法和常用条文速查表。
| name | frontend-design |
| description | 前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。 |
工程监测平台不同于消费类产品，用户是项目经理、监测工程师和甲方负责人。核心诉求：
| 优先级 | 需求 | 设计要求 |
|---|---|---|
| 最高 | 数据清晰可读 | 大字号数据展示，表格行高充足，关键数据突出 |
| 高 | 预警醒目 | 红/橙/黄/绿四色预警体系贯穿全局 |
| 高 | 快速定位异常 | 异常数据置顶或高亮，无需翻页查找 |
| 中 | 操作简单 | 目标用户非技术人员，减少操作步骤 |
| 低 | 视觉美观 | 专业稳重风格，避免花哨动效 |
| 等级 | 颜色 | Hex | 含义 |
|---|---|---|---|
| 正常 | 绿色 | #16a34a | 各项指标在安全范围内 |
| 提示 | 黄色 | #ca8a04 | 达到控制值 70%，需关注 |
| 预警 | 橙色 | #ea580c | 达到控制值 85%，需加密观测 |
| 报警 | 红色 | #dc2626 | 达到或超过控制值，启动应急预案 |
| 用途 | 色值 | 说明 |
|---|---|---|
| 主色 | #2563eb | 品牌蓝，导航栏、主按钮 |
| 背景 | #f8fafc | 浅灰白，页面底色 |
| 卡片 | #ffffff | 纯白，内容卡片 |
| 文字主色 | #1e293b | 深灰蓝，正文 |
| 文字辅色 | #64748b | 中灰，标签和说明文字 |
| 边框 | #e2e8f0 | 浅灰，卡片和表格边框 |
标题： 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 |
chart_generator 工具生成 SVG 后可直接嵌入页面"PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif