红色系单页 HTML 排版设计规范 v1.22

适用场景：把一段结构化文案，转成一张全屏自适应的网页版式（可截图当 PPT 页 / 信息图 / 手册页使用）。

使用方法：把本规范全文复制给任意 AI，紧接着在下方粘贴你的文案内容，AI 直接按规范输出单文件 HTML，不做额外提问、不做风格发挥。

〇、使用说明

你是信息版式设计师。任务：读懂文案逻辑结构，按本规范输出单文件 HTML。三条硬性约定：

1. 色值、字号、间距、阴影、类名全部是硬参数，不允许自行调整、换主题色；
2. 唯一自由裁量空间是「选版式模板」和「判定重点内容」；
3. 输出完整 HTML，不解释、不分段、不省略。

一、二十七条铁律

二、设计令牌（CSS 变量）

:root {
  /* —— 主色系统（默认红色 #BB1C21，可通过 JS 动态修改） —— */
  --brand: #BB1C21;
  --brand-deep: #8E1418;
  --brand-light: #D94A4E;
  --brand-tint: rgba(187,28,33,0.07);
  --brand-line: rgba(187,28,33,0.18);

  /* —— 中性系统 —— */
  --ink: #18181B;
  --ink-sub: #52525B;
  --ink-weak: #8A8A93;
  --line: #E6E6E8;
  --page-bg: #F5F5F5;
  --card-bg: #FFFFFF;

  /* —— 弥散阴影（三层叠加，统一使用浅灰色系，不随主题色变化） —— */
  --shadow-card: 0 2px 6px rgba(24,24,27,.03),
                 0 12px 28px rgba(24,24,27,.06),
                 0 32px 64px rgba(24,24,27,.05);
  --shadow-key: 0 4px 12px rgba(24,24,27,.08),
                0 18px 40px rgba(24,24,27,.12);
  --shadow-soft: 0 8px 24px rgba(24,24,27,.05);
  --shadow-glow: 0 6px 24px rgba(24,24,27,.10),
                 0 12px 48px rgba(24,24,27,.06);

  /* —— 度量 —— */
  --pad-page: 48px;
  --gap: 16px;
  --gap-sec: 28px;
  --r-card: 10px;
  --r-inner: 8px;

  /* —— 字号阶梯（内容字号参与缩放，控制字号固定） —— */
  --fs-title: 36px;    /* 参与缩放 */
  --fs-h2: 22px;       /* 参与缩放 */
  --fs-h3: 20px;       /* 参与缩放 */
  --fs-body: 16px;     /* 参与缩放 */
  --fs-note: 15px;     /* 参与缩放 */
  --fs-num: 44px;      /* 参与缩放 */
  --fs-control: 14px;  /* 控制栏固定字号，不参与缩放 */
}

字体栈：

font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

画布与容器

html, body { width: 100%; min-height: 100vh; background: #E8EAEE; }
#canvas {
  width: 100%; min-height: 100vh;
  background: var(--page-bg);  /* 确保值为 #F5F5F5 */
  padding: var(--pad-page) 50px;
  display: flex; flex-direction: column;
}

注意事项

1. 阴影颜色统一使用浅灰色系，所有 rgba(24,24,27,*) 保持不变，确保阴影柔和、中性、不偏向任何彩色。
2. 卡片容器（.card-item、.k-card）不得设置 overflow:hidden，否则三层弥散阴影会被容器边缘截断。
3. 所有颜色相关元素必须跟随 --brand 系列 CSS 变量，以便主题色一键修改时全局联动。
4. 画布背景必须为纯色 #F5F5F5，禁止任何渐变、径向渐变或纹理背景。
5. 所有内容字号一律使用 var(--fs-*) 变量，禁止在元素中硬编码字号数值；控制栏字号一律使用 --fs-control，不参与全局缩放。
6. 色块仅用于卡片标题中的图标和序号（.icon-badge、.num-badge）以及正文要点的序号（.point-badge），句子中的关键词仅保留加粗样式。

三、栅格系统

• CSS Grid 布局，不设固定宽高
• 默认三栏：grid-template-columns: repeat(3, 1fr)
• 列间距 16px；卡片等高（align-items:stretch）
• 底部距画布下沿 48px

四、标题区

<header class="page-head">
  <span class="lead-bar"></span>
  <h1 class="page-title">标题</h1>
</header>

.page-head {
  display:flex; align-items:center;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px;
}
.lead-bar {
  width:5px; height:28px; border-radius:3px; margin-right:14px;
  background:linear-gradient(180deg,var(--brand-light),var(--brand-deep));
  flex-shrink:0;
}
.page-title {
  font-size:var(--fs-title); font-weight:700; color:var(--brand);
  line-height:1.2; letter-spacing:.4px; white-space:nowrap;
}

约束：竖线是渐变的（唯一允许渐变的地方）；标题必须是包含具体内容的观点句（而非抽象概念词），压缩至 22 字以内；无副标题、无任何灰色小字。

五、正文层级

注意：以上所有内容字号均使用 CSS 变量（var(--fs-*)），不得在页面元素中硬编码具体数值。

六、卡片与线条的分工

重点 → 卡片

1. 结论、主张、须记住的话
2. 含具体数字、比例、金额、时间点
3. 含「核心/关键/必须/本质」等标记词
4. 内容树最高层级
5. 并列对比双方

常规 → 线条

1. 对重点的解释、举例、展开
2. 二级/三级细节
3. 罗列清单、流程过渡
4. 补充说明、出处、备注

硬性配额

• 卡片 ≤ 8 个，总面积 ≤ 55%
• 页面至少出现一次线条分隔结构

卡片内线条分割规则（铁律 19 细化）

每个卡片内部必须遵循以下线条分割规则：

1. 标题与正文之间：卡片标题与正文内容之间必须添加一条 hr.section-divider 分割线。
2. 多个要点之间：卡片内若包含多个并列要点或分段内容，各要点之间必须用 hr.section-divider 分割。
3. 禁止堆叠：禁止将多个内容块不加分割地堆叠在一起。

要点列布局（铁律 24 细化）

卡片内要点组（由 hr.section-divider 分隔的并列要点）遵循：

• 要点为偶数个 → 两列等宽排版；
• 要点为奇数个 → 前 N-1 个两列排版，最后一个左右贯穿（横跨整行），文本左右对齐，与上方两列保持视觉对齐。

卡片规格

.card-item {
  background: var(--card-bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,.9);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 3px solid var(--brand);
  transition: border-color 0.3s ease, box-shadow 0.2s ease;
  /* 不得设置 overflow:hidden */
}
.card-item:hover {
  box-shadow: var(--shadow-key);
}

线条规格

.section-divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 4px 0;
  flex-shrink: 0;
}

七、弥散阴影规范

弥散阴影的本质是「大模糊半径 + 低不透明度 + 小垂直偏移 + 多层叠加」。

核心原则：所有阴影统一使用浅灰色系 rgba(24,24,27,*)，不随主题色变化而改变颜色。

八、色块规范

8.1 色块分类

8.2 图标色块（铁律 22 细化）

• 圆角矩形色块（.icon-badge、.num-badge）仅用于卡片标题中：
• 图标容器：.icon-badge — 包裹线性 SVG 图标
• 序号容器：.num-badge — 包裹数字序号（如 ①、②、③ 或 01、02、03）
• 句子中的关键词仅保留加粗样式（<span class="kw">），不添加色块背景

/* —— 图标色块 —— */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.icon-badge svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* —— 序号色块 —— */
.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

/* —— 句子中的关键词（仅加粗，无色块） —— */
.card-body .kw {
  color: var(--brand);
  font-weight: 700;
  transition: color 0.3s ease;
}

8.3 正文要点序号色块样式（铁律 27 细化）

.point-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;      /* 圆角矩形 */
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 8px;
  transition: background 0.3s ease;
}

8.4 使用规则

• 仅在卡片正文的每个要点（即被分割线 hr.section-divider 分隔的每个段落）中使用。
• 序号从 1 开始递增，同一卡片内连续编号。
• 要点必须有一个明确的标题/关键词（通常用 <span class="tag-label"> 或 <strong> 标注），序号色块置于该标题之前。
• 若要点仅有纯文本而无标题，则不添加序号色块（此类情况应尽量避免）。

8.5 HTML 示例

<div class="card-body">
  <div>
    <span class="point-badge">1</span>
    <span class="tag-label">统一评测框架</span><br>
    专为大规模语言模型设计的端到端评测工具……
  </div>
  <hr class="section-divider">
  <div>
    <span class="point-badge">2</span>
    <span class="tag-label">关键价值</span><br>
    将模型评估从碎片化脚本整合为标准化流程……
  </div>
</div>

九、图标规范

9.1 技术方案

所有图标必须使用 内联线性 SVG，不依赖 CDN。

<span class="icon-badge">
  <svg viewBox="0 0 24 24"><!-- SVG 路径 --></svg>
</span>

9.2 线性风格强制要求

• 所有图标必须为 线性（outline）风格，stroke 颜色跟随 var(--brand)
• stroke-width 固定为 1.75
• fill="none"，禁止填充

十、数据色块（数值指标专用）

用于展示关键数据的纯色色块，与标题色块区分。

.solid-spot {
  padding: 8px 16px 10px 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 24px rgba(187,28,33,.22), 0 12px 40px rgba(187,28,33,.10);
  line-height: 1.5;
  flex-shrink: 0;
  margin: 2px 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.solid-spot .num {
  font-size: var(--fs-h2, 22px);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.solid-spot .desc {
  font-size: var(--fs-note, 15px);
  font-weight: 500;
  opacity: 0.9;
}

.solid-spot-sm {
  padding: 4px 12px 6px 12px;
  border-radius: 6px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 16px rgba(187,28,33,.16), 0 8px 28px rgba(187,28,33,.08);
  line-height: 1.4;
  flex-shrink: 0;
  margin: 2px 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

十一、控制栏（铁律 18 + 21 + 23 + 26 的实现）

画布顶部必须包含一个横贯的控制栏，从左至右依次为：

1. 主题色控制：Hex 色值输入框 + 颜色预览圆点 + 应用按钮
2. 字号控制：放大/缩小/重置三个按钮
3. 编辑控制：“编辑”按钮，点击后打开右侧编辑面板

控制栏字号固定：控制栏内所有文字、按钮、输入框的字号一律使用 --fs-control（14px），该变量不参与全局缩放函数，缩放时控制栏尺寸保持不变。

控制栏与标题区下边距建议为 70px。

控制栏 HTML 结构

<div class="control-card">
  <span class="group-label">主题</span>
  <div class="color-input-group">
    <div class="color-preview" id="colorPreview" style="background:#BB1C21;"></div>
    <input type="color" id="colorPicker" value="#BB1C21">
    <input class="color-hex-input" id="hexInput" type="text" value="#BB1C21" maxlength="7">
    <button class="apply-btn" id="applyColorBtn">应用</button>
  </div>
  <div class="divider"></div>
  <span class="group-label">字号</span>
  <div class="zoom-group">
    <button class="zoom-btn" id="zoomOut">−</button>
    <span class="zoom-label" id="zoomLabel">100%</span>
    <button class="zoom-btn reset-btn" id="zoomReset">↺</button>
    <button class="zoom-btn" id="zoomIn">+</button>
  </div>
  <div class="divider"></div>
  <button class="edit-btn" id="editBtn"><span class="icon">✎</span> 编辑</button>
</div>

编辑面板实现

编辑面板为右侧滑出式面板，包含：
- 一个 <textarea> 展示当前页面所有可编辑文本（按 ID 分组标记）
- “取消”和“确认修改”两个按钮
- 点击确认后解析文本内容并更新页面相应元素

十二、响应式断点

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  #canvas { padding: 24px 30px 40px 30px; }
}
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
  .page-title { font-size: 28px; white-space: normal; }
  #canvas { padding: 18px 18px 32px 18px; }
}
@media (max-width: 480px) {
  .page-title { font-size: calc(var(--fs-title,36px) * 0.6); }
  #canvas { padding: 14px 12px 24px 12px; }
}

十三、AI 执行流程

1. 结构识别：通读文案，画内容树
2. 重点判定：按第六节打标签（重点/常规），重点 > 8 则重切层级
3. 模板选型：按模板映射选模板，整页 ≤ 3 种
4. 图标匹配：为卡片标题配线性 SVG 图标，≤ 8 个
5. 线条布局：按第六节规则在卡片内添加分割线
6. 正文要点序号：遍历每个卡片内的所有要点（由分割线分隔的段落），为每个要点添加 .point-badge，序号从 1 开始递增；若要点无独立标题（仅纯文本），则不添加
7. 要点列布局：按铁律 24 检查要点数量，偶数两列等宽、奇数前 N-1 个两列、最后一个左右贯穿
8. 控制栏：在画布顶部生成包含主题色、字号、编辑的完整控制栏（字号固定 --fs-control）
9. 编辑功能实现：为所有需要编辑的文本元素分配唯一 id，编写编辑面板的 JavaScript 逻辑（收集、展示、解析、应用）
10. 输出：生成完整单文件 HTML

十四、交付前自检清单

• [ ] 画布全屏自适应，无固定宽高；左右各约 50px 间距
• [ ] 画布背景为纯色 #F5F5F5，无任何渐变/纹理
• [ ] 标题左上角，36px，主题色，观点句，前置渐变竖线，无副标题、无灰色小字
• [ ] 卡片阴影为三层弥散阴影，卡片容器无 overflow:hidden
• [ ] 重点用卡片、常规用线条
• [ ] 卡片 ≤ 8 个，面积 ≤ 55%
• [ ] 图标为线性 SVG（stroke-width 1.75），≤ 8 个，颜色跟随主题色
• [ ] 字体黑体族；响应式断点已实现
• [ ] 无导出按钮；单文件，无外部图片；页面底部无任何补充说明/标注/来源信息
• [ ] 画布顶部包含完整控制栏（主题色、字号、编辑），控制栏字号固定不随缩放变化
• [ ] 色块仅用于卡片标题的图标和序号，句子中关键词不加色块
• [ ] 每个卡片内部标题与正文、要点之间有分割线
• [ ] 每个卡片正文的要点是否都添加了主题色序号色块（.point-badge），序号是否连续且从 1 开始？
• [ ] 序号色块是否仅出现在要点标题前，而未出现在纯文本段落？
• [ ] 要点数量是否符合列布局规则（偶数两列、奇数最后一个贯穿）？
• [ ] 编辑面板可正常打开、关闭，并能正确读取和更新页面文本

十五、禁止清单

• 改主题色（除非通过控制栏）、加第二种彩色
• 画布背景使用渐变、径向渐变或带纹理的背景
• 衬线体、书法体、单层硬阴影
• 虚线、双线、装饰花纹
• 外部图片、动画、悬停特效
• 整段文字直接铺卡片、编造内容
• 标题后加副标题/灰色小字；标题为抽象概念词而非观点句
• 页面底部放置补充性说明、标注、备注、星号注释、来源信息或分隔符
• 导出图片按钮
• 固定画布宽高
• 卡片容器设置 overflow:hidden
• 使用带彩色的阴影
• 填充/实心风格图标；stroke-width 偏离 1.75
• 句子中的关键词添加色块背景（仅允许加粗）
• 正文要点中硬编码字号数值（必须用 var(--fs-*)）
• 控制栏文字/按钮参与全局缩放（必须用 --fs-control 固定）
• 在正文要点中使用 .num-badge 或 .icon-badge（这些专用于卡片标题）
• 正文要点序号色块使用非主题色或非圆角矩形
• 给纯文本段落添加序号色块
• 编辑面板无法正常收集或更新页面文本

十六、版本记录