把整段复制给 AI 即可让它按这套规范生成界面。

你是前端设计师。请按以下设计规范，把网页/后台工具做成「凝聚未来新能源（NJWL）」这套浅色工具风界面。

【整体基调】
浅色、干净、信息密度高的后台工具风。白卡片落在浅灰底上，蓝色做唯一主色，大圆角 + 柔和投影，克制、专业、可读性强。

【配色】
- 页面底色 #f5f6f7
- 卡片 白色，圆角 14px，投影 0 2px 12px rgba(31,35,41,.07)
- 主文字 #1f2329；次级 #334155；辅助 #4e5969 / #646a73；弱化 #8f959e
- 主色蓝 #3370ff（按钮/选中）；深蓝 #245bdb（强调文字/链接）；更深 #174bb8（hover）
- 蓝色浅底 #eef4ff（胶囊/chip/代码块），hover #dfe9ff
- 边框/分割线 #e2e6ed / #d0d3d6 / #e5e7eb
- 次要按钮底 #eff0f1；分段控件底 #e9ebef
- 状态色：成功 #00a870 / #087f5b；警告 #f59e0b / #b76e00；危险 #d83931 / #c92a2a

【字体】
font-family: system-ui, "Microsoft YaHei", sans-serif
h1 24px；卡片标题 h2 18px；正文 14px；辅助说明 12px；小标签 9–11px

【行距（line-height）规范】
正文 14px → 1.6
标题：h1 24px → 1.3；h2 18px → 1.4；h3 15px → 1.5
辅助说明 12px → 1.5
小标签 / 胶囊 9–12px → 1.25
大数字 ≥20px → 1.1
代码块（等宽 13px）→ 1.6
表格单元格 → 1.5

【标题规范】
- 页面大标题 h1：24px / 1.3 / #1f2329，结构「标题 + 可选蓝色徽章」，下方副标题行（14px #646a73，写 URL · 维护者），再一行 muted 说明（一句话讲清页面用途）
- 卡片标题 h2：18px / 1.4 / #1f2329，每个卡片一个标题
- 小节标题 h3：15px / 1.5 / #334155
- 浏览器标签 <title>：页面名 · 域名/路径
- 层级只用 h1 → h2 → h3，不跳级

【布局】
- 内容列居中，max-width 760px，padding 24px 16px 60px
- 白卡片 padding 22px、margin 16px 0、border-radius 14px
- 表单两列 grid：repeat(2, minmax(0,1fr))，gap 14px

【组件】
- 主按钮：background #3370ff，白字，radius 8px，padding 11px 18px；次要按钮 .secondary：background #eff0f1，字 #1f2329
- 分段 Tab：容器 background #e9ebef，radius 12px，padding 5px；激活项白底蓝字（white / #245bdb），圆角 9px
- 蓝色胶囊（cell-code / chip / badge）：background #eef4ff，字 #245bdb，font-weight 700，radius 8px 或 999px
- 输入框：border 1px #d0d3d6，radius 8px，padding 11px 12px；聚焦 border #3370ff + 3px 蓝光圈 rgba(51,112,255,.12)
- 表格：边框 #e2e6ed，表头小字 #8f959e，行分隔 #edf0f4
- 提示块：信息蓝 #eef4ff/#245bdb；警告黄 #fff7e6/#b76e00；成功绿 #e8fff5/#087f5b；错误红 #fff0f0/#d83931
- 高亮看板卡（可选）：background linear-gradient(135deg,#245bdb,#3370ff)，白字，radius 14px，投影 0 6px 18px #245bdb33

【导航 / 目录】
- 顶部分段 Tab（页面级切换）：容器 background #e9ebef，radius 12px，padding 5px；激活项白底蓝字（white / #245bdb），圆角 9px
- 侧边多级目录（长文档内导航）：左侧固定 250px，白底 + 右边框 #e2e6ed
  - 一级项：font-weight 600，14px，padding 7px 12px，文字 #1f2329
  - 二级项：缩进 14px + 左边框 #e2e6ed，12.5px，文字 #646a73
  - 悬停：背景 #f5f7fa，文字 #245bdb
  - 分组用 ▸/▾ 箭头可展开收起

【安全 / 水印】
- 全页面水印：fixed 铺满，pointer-events:none，网格平铺，文字「公司 + 内部资料 + 时间」，rotate(-24deg)，opacity .14，z-index 9999，每 60s 刷新时间
- 页脚保密提示：© 年份 公司 版权所有 · 内部资料，注意保密，未经授权不得复制或传播

【识别特征（一眼认出这套设计）】
1. 浅灰底 + 白卡 + 蓝主色，是核心视觉锚点
2. 圆角统一：卡片 14px、按钮/输入 8px、胶囊 999px
3. 蓝色胶囊（#eef4ff 底 / #245bdb 字）是标志性组件
4. 分段 Tab 用「灰底 + 白激活块」而非实心蓝块
5. 层次清晰：大标题 → 小标签 → 正文 → 辅助小字，信息密度高但不乱

怎么做（应用这套设计）

方式一：直接交给 AI

1. 点上方「复制」拿到「复现提示词」
2. 把提示词 + 你的具体需求一起发给 AI（例：「用这套设计做一个设备巡检记录页面」）
3. AI 会按配色 / 字体 / 行距 / 组件规范生成页面

方式二：人工套样式

1. 页面骨架：浅灰底 #f5f6f7，内容居中 760px
2. 内容分块：每块包进白卡片（14px 圆角 + 柔和投影）
3. 标题层级：h1 24px / h2 18px / h3 15px，按上方行距
4. 强调：蓝色胶囊（#eef4ff 底 + #245bdb 字），代码用浅底 pre
5. 长文档：左侧加可展开的多级目录

方式三：改造旧页面

1. 把旧配色整体换成浅色 + 蓝主色 #3370ff
2. 内容收进卡片，去掉花哨背景
3. 补上目录和徽章

配色

标题规范

标题层级

• h1 页面大标题：24px / 1.3，标题 + 可选徽章 + 副标题行 + 一句 muted 说明
• h2 卡片标题：18px / 1.4，每个卡片一个标题
• h3 小节标题：15px / 1.5，颜色 #334155

浏览器标签 <title> 用「页面名 · 域名/路径」；层级只走 h1 → h2 → h3，不跳级。

组件样例

按钮

分段 Tab

蓝色胶囊

输入框

提示块