メニュー
前端界面设计技能。当需要为监测平台、数据看板或内部管理系统设计 Web 前端界面时加载此技能，获取工程行业 UI 规范和组件设计指引。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
工程图表与可视化设计技能。当需要生成监测趋势图、断面剖面图、测点分布示意图或其他工程可视化图表时加载此技能。
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