Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/railwise-cn/RAILWISE-CLI --skill frontend-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| 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