用户行为路径图生成技能 SKILL.md（终版 v4.0）

版本：终版 v4.0 | 日期：2026-05-07 | 定位：四合一终极统一版 — 自包含、零外部依赖、可在全新设备独立使用

用途：接收商业模式案例讲解文案，深度理解后直接生成专业级 HTML 用户行为路径全景图。

使用方式：将本文件提供给 AI，附带案例讲解文案，一步到位生成路径图。

核心原则：忠实案例逻辑 × 创造性呈现 × 统一视觉体系 × 零冗余废话

v4.0 升级说明（基于 v3.0 + 恋爱平台最终版 HTML 实战验证）： — 双模式步骤描述：P 模式（段落式）与 UL 模式（条例式）并存，AI 根据步骤内容密度和步骤总数自主选择 — compact 紧凑模式：单行 ≥7 步时自动启用，缩减卡片内各元素尺寸以适配屏幕 — flow-val 增长标签：flow-node 下方新增 .v-int/.v-lik/.v-heart 三类值标签，标注互动过程中分值变化 — 9 个新增 CSS 组件（总计 35 个）：legend、step-list、unlock、fund-row、growth-system、ai-evo、mech-row、extension-banner、bind-tag — tag 色系新增 .t.rs（rose/玫瑰），共 11 个 tag 色 — 严禁清单从 16 项扩展至 18 项，新增 F21/F22 两条败笔预警 — 自查清单从 37 项扩展至 40 项 — 创造性手法从 C24 扩展至 C29 — 代码行数预算更新：单线水平 800-1300 行（compact 模式可到 1300）

v3.0 已有内容全部保留： — 配色系统三合一重构：全局语义色 + 5档业务轮换 + 文件内和谐区间 + 同色系亮度差≥20% — 组件-布局-弧线三维匹配矩阵 — 40 项自查、22 条败笔预警、6 轮验证、29 项创造性手法 + 14 项勾选清单 — 美学 7 维度量化标准

v4.0 核心理念：

用户提供的案例已经是优化过的商业模式成品，AI 不需要去"修正"或"补充"商业模式本身

AI 的"优化"全部指向路径图的呈现质量——如何更好地拆解、组织、表达这个案例

流程：收到案例 → 深度理解项目本质 → 拆解为最优路径图结构 → 选择步骤描述模式 → 适度创新呈现方式 → 直接生成

〇、激活方式

请加载"用户行为路径图生成技能（终版 v4.0）"，激活所有规则，等待我提供商业模式案例文案。

AI 确认回复：【终版 v4.0 已激活。请提供案例文案，收到后直接生成路径图。】

一、全局永久规则（整个任务周期持续生效）

1.1 输出质量铁律

深度专业输出：零敷衍、零讨好、零客套。每句话承载实质信息。
结论先行：先给最终判断，再分点逻辑严密论证。
用词绝对精准：无"可能""也许""大概"。不确定处显式标注置信度（高/中/低）及依据类型（一手数据/二手分析/逻辑推演）。
忠实案例，呈现创新： — 案例核心逻辑、业务模式、收入结构 严格还原，不擅自修改 — 案例未详述的细节可合理推断，必须标注 [推断·高/中/低] — 呈现方式必须有创造性——更好的拆解、更精准的机制提炼、更抓人的痛点呈现 — 禁止凭空捏造案例中完全不存在的业务模块、收入模式、技术能力
情绪价值 = 0，事实准确 = 100
对抗性思维：每个结论后自问"有数据支撑吗？反方论点是什么？"
至少 6 轮对比验证：每份生成文件必须经历 ≥6 轮内部对比验证，含输出模板
自检结尾：末尾列出 5 个潜在局限，标注置信度

1.2 反方检验机制（强制嵌入，生成 HTML 前执行）

█ 反方检验：
├── 布局选错了吗？→ 是否有其他布局更合适？
├── 配色撞色了吗？→ 与历史项目是否在同一 HSL 区间？（文件间差≥35°，同色系亮度差≥20%）
├── 步骤描述有夸大或捏造成分吗？→ 逐句核对案例原文
├── 核心卖点是否在多处自然重复而非堆砌？→ 检查 ≥3 处出现
├── 文件过长/过短？→ 调整步骤数至合理区间（单线 5-7 步，多路径每条 4-7 步）
├── 颜色差异是否在合理范围？→ 对照统一色板，验证文件内路径间色调差 40°-90°
├── 是否有更优的呈现方式？→ 如果可以用 flow-steps / staircase / flywheel 更好地表达机制，使用之
├── 步骤描述模式选择合理吗？→ P模式适合叙事流畅型，UL模式适合功能列举型
└── compact模式是否必要？→ 单行步骤数 ≥7 时必须启用

二、⛔ 严禁行为清单（18 项硬约束，生成时绝对不得违反）

| # | 严禁行为 | 错误示范 | 正确做法 | |---|----------|----------|----------| | 1 | 步骤描述用裸 <ul><li> | <ul><li>完成注册</li></ul> | 使用  或 <ul class="step-list"> | | 2 | 增大正文字体突出重点 | style="font-size:18px" | （只加粗变色，字号不变） | | 3 | 擅自修改案例的商业模式 | 自行添加 AI 模块 | 案例是成品，创新只在呈现方式 | | 4 | 使用 em/rem/% 字体单位 | font-size:1.2em | 全部使用 px 单位 | | 5 | 使用 .container 外层包裹 | <div class="container"> | body 下直接写区块 | | 6 | 修改语义色 .sa/.so/.sg/.st/.sb/.sp 的色值 | #fde68a 改成其他 | 保持全局统一色值 | | 7 | 修改 tag 色系表 | .t.am 颜色改变 | 保持全局统一 tag 色值 | | 8 | 核心卖点全文出现不足 3 次 | 只出现 1-2 次 | 在步骤描述、路径标题、机制区 ≥3 处自然出现 | | 9 | 缺少 pain-essence 总结 | 痛点区只有罗列 | 痛点区末尾加 pain-essence 一句话总结 | | 10 | 多路径时缺少 scene-divider | 路径间无分隔 | 每条路径后加 scene-divider | | 11 | 多路径时缺少 connect-banner | 路径间无关联说明 | 添加 connect-banner 说明转化逻辑 | | 12 | 步骤数 >7（无compact）或 <4 | 单线 8 步（无 compact） | 合并或拆分至合理区间，≥7 步启用 compact | | 13 | h1 无文字渐变色 | 纯色标题 | background-clip: text 渐变流光 | | 14 | 卡片边框色不统一 | 混用不同 rgba 值 | 统一 rgba(255,255,255,0.08) 基准 | | 15 | body padding 不一致 | 随意调整边距 | 固定 padding: 52px 48px 80px | | 16 | 文件行数 >1500 或 <600 | 明显冗余或过于简略 | 控制在 800-1300 行合理区间 | | 17 | 同一 flow 内 P 模式和 UL 模式混用 | 某些步骤用  某些用 <ul> | 同一流程内统一使用一种步骤描述模式 | | 18 | compact模式下未调整箭头和卡片尺寸 | compact 卡片配标准箭头宽度 | compact 模式箭头缩至 24-28px |

三、对话记忆系统（强制执行）

3.1 记忆记录要求

每次生成路径图后，AI 必须记录以下信息：

## 本次生成记录
- 项目名称：[案例名]
- 布局模式：[单线/dual-journey/多路径/双场景/混合]
- 配色方案：[主色A, 主色B, 色系类型, HSL色调值, 档位编号]
- 路径数量 × 步骤数：[路径数] × [每路径步数]
- 步骤描述模式：[P模式/UL模式/混合(P主线+UL增值)]
- compact模式：[是/否]（是时注明哪条路径启用）
- 核心卖点：[1-2句话]
- 用户反馈要点：[无/具体内容]
- 已知陷阱：[无/具体问题及修正方案]
- 生成时间：[YYYY-MM-DD HH:mm]
- 文件行数：[实际行数]

3.2 记忆回溯规则

每次收到新案例时，先回溯所有历史生成记录
确保配色不与已用方案撞车（HSL 色调差 ≥ 35°，同色系亮度差 ≥ 20%）
确保同一业务类型的路径图有差异化呈现
如用户在历史对话中提出过具体修改要求，本次自动规避同类问题

3.3 错误学习机制

如某次生成被用户指出问题，该问题及其修正方案必须记录为"已知陷阱"，后续所有生成中主动规避。

## 已知陷阱
- 问题描述：[具体是什么]
- 出现场景：[什么案例类型/布局]
- 修正方案：[怎么改]
- 发现日期：[YYYY-MM-DD]

四、一体化工作流程（一步到位）

收到案例文案
  → ❶ 回溯记忆：查历史记录，避免配色撞车和重复问题
  → ❷ 深度理解：项目本质、用户角色、核心机制、差异化价值（执行核心七步框架）
  → ❸ 反方检验：布局/配色/内容忠实度/文字质量交叉验证
  → ❹ 选择布局+配色：按决策树匹配 + 5档轮换表 + 三维匹配矩阵
  → ❺ 选择步骤描述模式：P模式（叙事流畅）/ UL模式（功能列举）/ 混合
  → ❻ 设计叙事弧线：渐入/高潮/对照/漏斗（第十一章专章）
  → ❼ 创造性增强：视觉层次、叙事节奏、亮点设计（C1-C29 手法 + 14项勾选清单）
  → ❽ 生成 HTML（一步到位，不分步生成）
  → ❾ 40项自查清单逐项核对
  → ❿ 6轮对比验证（对比参考案例 02/03/05/06）
  → ⓫ 输出文件 + 简要说明 + 更新记忆

五、深度理解框架（AI 内部执行，不输出）

核心七步框架

█ 第1步：项目本质
└── 解决什么根本问题？→ 找到"痛点 → 解决方案"核心链条

█ 第2步：用户角色矩阵
└── 有哪些核心用户角色？各自核心诉求和痛点？
    → 列出所有角色，每角色一句话总结

█ 第3步：差异化价值锚点
└── 凭什么选它不选竞品？→ 找到1-3个核心差异化，一句话表达

█ 第4步：用户旅程全链路
└── 从"不知道"到"忠实用户"的完整旅程是什么？
    → 梳理完整链路，标注关键转化节点

█ 第5步：驱动机制识别
└── 促使用户行动的核心力量是什么？
    → 心理机制（损失厌恶/社交认同/成长反馈/即时满足/稀缺感等）

█ 第6步：最优呈现决策
├── a. 路径怎么拆解最清晰？（单线/双端/多路径/双场景）
├── b. 机制怎么组织最突出？（mech-block/flow-steps/staircase）
├── c. 痛点怎么呈现最有力？（pain-section 按角色分列）
├── d. 信息层次怎么排列最有冲击力？（叙事弧线设计）
├── e. 步骤描述用哪种模式？
│   → P模式：步骤强调"用户做了什么+获得什么"，适合叙事流畅型
│   → UL模式：步骤涉及多项并列功能/特性，适合功能列举型
│   → 混合模式：主线用P模式，增值路径用UL模式（同一路径内不可混用）
├── f. 需要启用compact模式吗？→ 单行步骤数 ≥7 步时启用
├── g. 什么创造性手法能让这个案例更打动人？（C1-C29 选用）
└── h. 终点步骤如何标记？（绿色渐变边框+渐变编号）

█ 第7步：反方检验（强制嵌入，在生成 HTML 前执行）
├── 布局选择是否最优？是否有更合适的替代方案？
├── 配色是否与历史项目有合理区分？HSL 差值是否 ≥ 35°？亮度差是否 ≥ 20%？
├── 步骤描述是否有文字注水或过度推理？逐条核对
├── 是否有伪造内容？案例未提及但被认为"应该有"的内容删除
├── 核心卖点是否在 ≥3 处自然出现？
├── 步骤描述模式是否统一？同一流程内不可P模式和UL模式混用
├── compact 模式是否在 ≥7 步流程中启用？
└── 生成的文件是否在 800-1300 行合理区间内？

六、布局决策体系

6.1 布局决策树

项目有几个核心参与方？

├── 1个 → 参与方行为模式？
│   ├── 单线固定流程 → 【① 单线水平流程】
│   │   适用：B2C 单角色、SaaS 产品、内容平台
│   └── 多种可选行为 → 【③ 多路径并行】
│       适用：商业模式有多层变现路径

└── 2个及以上 → 参与方关系？
    ├── 固定配对（供需/亲子/师生/双边平台） → 【② 双端并列】
    └── 用户可自由切换模式/场景 → 【④ 对称双场景】

特殊规则：
- B2C 单角色但有"主场景+支线场景" → 仍用①，最后添加 connect-banner 引入支线
- B2C 但用户有"消费者/商家"两种身份 → 【④ 对称双场景】
- 不确定时默认使用①单线水平流程（最安全、信息密度最高）

6.2 布局速查表

| 业务特征 | 推荐布局 | 编号 | 参考案例 | |----------|----------|------|----------| | 单角色线性流程 | 单线水平流程 | ① | 码上知、恋爱平台 | | 双角色固定配对 | 双端并列 | ② | 资金管理平台、乡村电商 | | 多角色可选路径（3+条） | 多路径并行 | ③ | 体验地摊 | | 同用户两种模式 | 对称双场景 | ④ | 个人激励模式 | | 主场景+支线场景 | 单线+connect-banner | ①+ | 恋爱平台 |

6.3 路径步骤数量硬约束

| 路径类型 | 步骤数范围 | 最优值 | 备注 | |----------|-----------|--------|------| | 单线主路径 | 5-7步（compact可达9步） | 6-7步 | ≥7步启用compact | | 双端每侧 | 4-6步 | 5步 | — | | 多路径每条 | 4-6步 | 5步 | — | | 双场景每场景 | 4-6步 | 5步 | — |

超过 7 步视为注水，必须合并；或启用 compact 模式将步骤上限放宽至 9 步。少于 4 步视为分析不到位。

6.4 布局-业务语义-叙事弧线三维匹配矩阵

| 布局模式 | 典型业务语义 | 推荐叙事弧线 | 参考案例 | |----------|-------------|-------------|----------| | 单线水平 | 渐进式用户旅程 | 渐入型 | 码上知 | | 双端并列 | 双边互动/配对 | 对照型 | 乡村电商 | | 多路径并行 | 多层变现/可选路径 | 高潮型 | 体验地摊 | | 对称双场景 | 模式切换/身份转换 | 对照型 | 个人激励 | | 单线+支线 | 主流程+扩展 | 渐入型→高潮型 | 恋爱平台 |

七、配色方案系统（双层架构 + 精细化量化）

7.1 第一层：语义色全局常量（所有文件统一，不随项目变化）

| 类名 | 色值 | HSL | 语义 | 用途 | |------|------|-----|------|------| | .sa | #fde68a | 53°, 92% | 核心卖点/差异化/强调 | 项目最核心的关键词 | | .so | #fdba74 | 27°, 85% | 关键动作/行为触发 | 用户主动操作的行为 | | .sg | #bef264 | 84°, 80% | 正向结果/成长/价值 | 用户获得的价值回报 | | .st | #5eead4 | 183°, 67% | 信任/流程/安全 | 跨路径引用、安全机制 | | .sb | #7dd3fc | 199°, 82% | 数据/信息/平台 | 补充信息、技术机制 | | .sp | #d8b4fe | 262°, 73% | 特色/创新/高级 | 独特创新概念 |

这 6 个语义色是全局常量，在所有生成文件中保持不变。

7.2 第二层：路径级配色档位轮换（文件间区分）

路径/场景级主色轮换表（5 档，循环使用）

| 档位 | 主色 | 色值 | HSL | 适配业务类型 | 使用记录 | |------|------|------|-----|-------------|----------| | A档 | 暖橙+琥珀 | #f97316 + #fbbf24 | 27°, 43° | 体验/零售/探索 | 体验地摊 | | B档 | 翠绿+青 | #10b981 + #06b6d4 | 157°, 183° | 金融/教育/信任 | 资金管理平台 | | C档 | 靛蓝+天蓝 | #6366f1 + #0ea5e9 | 239°, 199° | 科技/平台/信息 | 码上知 | | D档 | 琥珀+玫红 | #f59e0b + #ec4899 | 43°, 330° | 激励/社交/挑战 | 个人激励 | | E档 | 翠绿+琥珀 | #059669 + #d97706 | 157°, 38° | 农业/乡村/生活 | 乡村电商 |

选择规则：

按业务语义匹配优先
如语义匹配的档位已被使用，选择 HSL 最接近的未使用档位
同一业务大类的文件，色差有意识控制在相近范围
同色系亮度差 ≥ 20%（防止相近色系项目视觉雷同）

已使用色系记录（必须查阅，不可撞色）

| 项目 | 主色 | HSL | 日期 | |------|------|-----|------| | 恋爱 APP | #ec4899, #8b5cf6 | 330°, 262° | 2026-04 | | 资金管理平台 | #06b6d4, #10b981 | 183°, 157° | 2026-04 | | 体验地摊 | #f97316, #fbbf24 | 27°, 43° | 2026-04 | | 个人激励模式 | #f59e0b, #ec4899 | 43°, 330° | 2026-04 | | 代卖一会儿 | #06b6d4, #8b5cf6 | 183°, 262° | 2026-04 | | 乡村电商 | #059669, #d97706 | 157°, 38° | 2026-04 | | 码上知 | #6366f1, #0ea5e9 | 239°, 199° | 2026-04 |

未使用色系（优先选用）

| 业务类型 | 推荐主色 | 色值 | HSL | |----------|----------|------|-----| | 医疗/健康/养老 | 青蓝+翠绿 | #0891b2, #059669 | 191°, 157° | | 餐饮/文旅/生活 | 琥珀+暖红 | #d97706, #dc2626 | 38°, 0° | | 文化/艺术/奢侈品 | 翡翠+金铜 | #047857, #92400e | 158°, 27° | | 制造/工业/硬件 | 磁力蓝+亮银 | #1d4ed8, #64748b | 224°, 215° | | 法律/政务/合规 | 深蓝+灰金 | #1e3a5f, #9ca3af | 212°, 220° | | 出行/物流/配送 | 天蓝+活力橙 | #0284c7, #ea580c | 199°, 21° |

路径间色阶递进（同一文件内多路径）

同一文件内不同路径/场景的主色 HSL 色调差应控制在 40°-90° 范围内。

配色决策流程

Step 1: 识别案例业务类型
Step 2: 对照未使用色系表选择候选方案
Step 3: 将候选方案与已使用表逐一比对 HSL 差值（≥35°）和亮度差（≥20%）
Step 4: 选择 HSL 差值 ≥ 35° 且亮度差 ≥ 20% 的方案
Step 5: 如所有候选均撞色，选择差值最大者并标注说明
Step 6: 为路径分配色系（从主色派生辅助色，HSL ± 20°）
Step 7: 验证同一文件内各路径配色的视觉协调性（色调差 40°-90°）

7.3 tag 色值系统（全局统一，11 个 tag 色）

.t.am { background:rgba(245,158,11,0.13); color:#fde68a; border:1px solid rgba(245,158,11,0.25); }
.t.or { background:rgba(249,115,22,0.13); color:#fdba74; border:1px solid rgba(249,115,22,0.25); }
.t.gn { background:rgba(132,204,22,0.13); color:#bef264; border:1px solid rgba(132,204,22,0.25); }
.t.tl { background:rgba(20,184,166,0.13); color:#5eead4; border:1px solid rgba(20,184,166,0.25); }
.t.bl { background:rgba(14,165,233,0.13); color:#7dd3fc; border:1px solid rgba(14,165,233,0.25); }
.t.pp { background:rgba(168,85,247,0.13); color:#d8b4fe; border:1px solid rgba(168,85,247,0.25); }
.t.pk { background:rgba(236,72,153,0.13); color:#fbcfe8; border:1px solid rgba(236,72,153,0.25); }
.t.rd { background:rgba(244,63,94,0.13); color:#fda4af; border:1px solid rgba(244,63,94,0.25); }
.t.cy { background:rgba(6,182,212,0.13); color:#67e8f9; border:1px solid rgba(6,182,212,0.22); }
.t.in { background:rgba(99,102,241,0.13); color:#a5b4fc; border:1px solid rgba(99,102,241,0.25); }
.t.rs { background:rgba(251,113,133,0.13); color:#fda4af; border:1px solid rgba(251,113,133,0.22); }

| 后缀 | 色系 | 语义 | |------|------|------| | .am | 琥珀/黄 | 核心卖点/强调 | | .or | 橙色 | 行动/触发 | | .gn | 绿色 | 正向/结果/优势 | | .tl | 青色 | 流程/路径/机制 | | .bl | 蓝色 | 数据/信息 | | .pp | 紫色 | 特色/高级概念 | | .pk | 粉色 | 情感/关系 | | .rd | 红色 | 风险/警示 | | .cy | 天蓝 | 智能/AI | | .in | 靛蓝 | 信任/平台级能力 | | .rs | 玫瑰（v4.0新增） | 情感深色/暖红强调 |

八、HTML 排版硬规则（生成时绝对不得违反）

规则 R1：步骤描述双模式（P模式 + UL模式）⭐ v4.0 核心变更

P 模式（段落式）：步骤强调"用户做了什么 + 获得什么"，适合叙事流畅型步骤。

唯一标签：，段落式一行文字，一气读完。

<!-- P模式 -->
<p class="step-desc">用户通过<span class="so">扫码</span>进入平台完成注册，即刻获得
<span class="sg">新人礼包</span>和<span class="sa">专属体验码</span>，
资料填写越完整，后续的匹配精度和推荐准确度越高。</p>

UL 模式（条例式）：步骤涉及多项并列功能/特性，适合功能列举型步骤。

唯一标签：<ul class="step-list"> + <li>，每个 li 为一个独立功能点。

<!-- UL模式 -->
<ul class="step-list">
  <li>性别/年龄/身高/体重</li>
  <li>所在城市（仅城市级）</li>
  <li>上传头像 + AI人脸验证</li>
  <li><span class="strong-teal">注册自动触发AI红娘对话</span></li>
</ul>

UL 模式支持 sub-note 子项缩进：

<ul class="step-list">
  <li><span class="strong-purple">朋友式聊天</span>温和自然</li>
  <li class="sub-note">兴趣/日常/理想型/恋爱观...</li>
  <li><span class="strong-pink">恋爱军师</span>诊断恋爱状态</li>
</ul>

关键约束：

同一流程内统一使用一种模式（不可P和UL混用于同一 flow 内的不同步骤）
不同路径可以使用不同模式（例如主线用P模式，增值路径用UL模式）
pain-section 始终可用 <ul class="pain-list">（不受此规则限制）

规则 R2：只用加粗+变色突出重点，不增大字号

P 模式专用 span 类（语义色）：

.step-desc { font-size:14px; color:rgba(255,255,255,0.62); line-height:1.85; margin-bottom:0; }
.step-desc .sa { color:#fde68a; font-weight:600; }
.step-desc .so { color:#fdba74; font-weight:600; }
.step-desc .sg { color:#bef264; font-weight:600; }
.step-desc .st { color:#5eead4; font-weight:600; }
.step-desc .sb { color:#7dd3fc; font-weight:600; }
.step-desc .sp { color:#d8b4fe; font-weight:600; }

UL 模式专用 span 类（strong-色彩名）：

.step-list .strong-pink { color: #f9a8d4; font-weight: 600; }
.step-list .strong-purple { color: #c4b5fd; font-weight: 600; }
.step-list .strong-teal { color: #5eead4; font-weight: 600; }
.step-list .strong-amber { color: #fde68a; font-weight: 600; }

P 模式用语义色（.sa/.so/.sg/.st/.sb/.sp），UL 模式用色彩名（.strong-pink/.strong-purple/.strong-teal/.strong-amber）。

规则 R3：字体大小严格分级

| 元素 | 字号 | 字重 | 颜色 | 备注 | |------|------|------|------|------| | 页面大标题 h1 | 38px | 900 | 渐变色 | letter-spacing: 3px | | tag 标签 | 13px | 800 | #fff | 渐变背景，圆角 20px | | 副标题 .sub | 14px | 400 | rgba(255,255,255,0.35) | letter-spacing: 1.5px | | .vision | 15px | 400 italic | 项目浅色 | 项目色浅背景+边框 | | 路径/场景标题 | 22px | 900 | #fff | — | | 路径副标题 | 14px | 400 | rgba(255,255,255,0.42) | — | | 区块标题 | 15-16px | 800 | 对应语义色 | letter-spacing: 1px | | sec-label badge | 13px | 800 | #fff | 渐变背景 | | 步骤标题 | 15px | 800 | #fff | 居中 | | 步骤描述正文（P模式） | 14px | 400 | rgba(255,255,255,0.62) | 唯一P模式正文字号 | | 步骤列表正文（UL模式） | 13px | 400 | rgba(255,255,255,0.58) | UL模式专用 | | compact 步骤标题 | 12px | 800 | #fff | compact 模式 | | compact 步骤列表 | 11px | 400 | rgba(255,255,255,0.58) | compact 模式 | | step-sub | 12px | 400 | rgba(255,255,255,0.35) | 居中 | | 辅助 tag (.t) | 11px | 600 | 对应色值 | 半透明背景+边框 | | 步骤编号 | 13px | 800 | #fff | 圆形内 |

规则 R4：步骤描述写作公式

P 模式公式：[主语角色] + [具体动词短语] + [业务结果/价值]

主语明确，动作具体，结果有业务价值
用自己的话拆解重组，不机械复制案例原文

UL 模式公式：每条 <li> 为一个独立功能点/特性，简洁明了

规则 R5：核心卖点自然重复策略

核心卖点/差异化优势必须在以下位置自然出现 ≥3 次：

对应路径的步骤描述中（≥2 个步骤）
路径标题/副标题中
核心机制区块中（≥1 个机制标题或描述）

规则 R6：step-sub 格式

格式：[关键词] · [关键词] · [关键词]（2-4 个短语，用 · 间隔）

规则 R7：path-subtitle 格式

格式：[步骤1关键词] → [步骤2关键词] → ... → [最终步骤关键词] · [一句话定位说明]

规则 R8：视觉统一基准

页面背景：#06050f
字体栈：'PingFang SC','Microsoft YaHei',sans-serif
最大宽度：不设硬限制
body padding：52px 48px 80px
输出：单文件 HTML（内联 CSS），零外部依赖

规则 R9：compact 紧凑模式 ⭐ v4.0 新增

触发条件：单行流程步骤数 ≥ 7 步时，自动启用 .step.compact。

.step.compact .step-icon { font-size: 26px; margin: 4px 0 6px; }
.step.compact .step-title { font-size: 12px; margin-bottom: 2px; }
.step.compact .step-sub { font-size: 10px; margin-bottom: 8px; line-height: 1.4; }
.step.compact .step-list { gap: 2px; }
.step.compact .step-list li { font-size: 11px; line-height: 1.5; }
.step.compact .step-list .sub-note { font-size: 9px; margin-left: 7px; }
.step.compact .tags { margin-top: 6px; gap: 3px; }
.step.compact .t { font-size: 9px; padding: 2px 6px; border-radius: 6px; }
.step.compact .arr { width: 28px; }  /* 标准箭头44px，compact缩至28px */

九、hl 高亮 + arr 箭头类名体系

9.1 hl 高亮（步骤卡片边框/背景）

| 布局模式 | 类名规则 | |----------|----------| | 多路径并行 | .hl-p1 ~ .hl-p4 | | 对称双场景 | .hl-s1, .hl-s2 | | dual-journey | .hl-parent, .hl-student | | 单线流程 | .hl-main |

9.2 arr 箭头（每个路径独立颜色）

标准命名：.a1, .a2, .a3, .a4

v4.0 箭头尺寸规则：

标准模式：width: 44px
compact模式：width: 28px

十、完整 CSS 组件模板库（35 个组件）

以下列出所有 35 个组件的 CSS 模板。每个组件标注触发达标和编号。v4.0 新增组件标记 ⭐。

10.1 页面基础框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>[项目名称] · 用户行为路径图</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:#06050f; font-family:'PingFang SC','Microsoft YaHei',sans-serif;
    color:#e2e8f0; padding:52px 48px 80px; line-height:1.6; font-size:14px; }
</style>
</head>
<body><!-- 内容 --></body>
</html>

10.2 HEADER（顶部标题区）

.header { text-align:center; margin-bottom:48px; }
.header .tag {
  display:inline-block; background:linear-gradient(135deg,[主色A],[主色B]);
  font-size:13px; font-weight:800; letter-spacing:3px;
  color:#fff; padding:6px 22px; border-radius:20px; margin-bottom:16px;
}
.header h1 {
  font-size:38px; font-weight:900;
  background:linear-gradient(90deg,#fff,[浅主色A],[浅主色B]);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:3px; margin-bottom:10px;
}
.header .sub { color:rgba(255,255,255,0.35); font-size:14px; letter-spacing:1.5px; margin-bottom:14px; }
.header .vision {
  font-size:15px; color:[浅主色A]; font-style:italic;
  padding:10px 28px; border-radius:14px;
  background:rgba([主色A-rgb],0.07); border:1px solid rgba([主色A-rgb],0.18);
  display:inline-block;
}

10.3 LEGEND 图例区 ⭐ v4.0 新增

触发条件：页面有 ≥2 条不同类型的路径/场景时使用。

.legend { display:flex; justify-content:center; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,255,255,0.5); }
.lg-dot { width:12px; height:12px; border-radius:50%; }
.lg-line { width:30px; height:2px; border-radius:1px; }

<div class="legend">
  <div class="legend-item"><div class="lg-dot" style="background:linear-gradient(135deg,#ec4899,#8b5cf6);"></div><span>必经主链路</span></div>
  <div class="legend-item"><div class="lg-dot" style="background:linear-gradient(135deg,#f59e0b,#ec4899);"></div><span>可选增值服务</span></div>
  <div class="legend-item"><div class="lg-line" style="background:linear-gradient(90deg,#ec4899,#8b5cf6);"></div><span>主路径</span></div>
</div>

10.4 PAIN SECTION（痛点与用户画像区）

.pain-section {
  background:linear-gradient(135deg,rgba(239,68,68,0.05),rgba(251,146,60,0.04));
  border:1px solid rgba(239,68,68,0.18); border-radius:18px; padding:28px 32px; margin-bottom:48px;
}
.pain-head { font-size:15px; font-weight:800; color:#fca5a5; letter-spacing:1px; margin-bottom:20px;
  display:flex; align-items:center; gap:10px; }
.pain-head::after { content:''; flex:1; height:1px; background:rgba(239,68,68,0.12); }
.pain-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pain-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.pain-card { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 18px; }
.pain-icon { font-size:28px; margin-bottom:8px; }
.pain-title { font-size:15px; font-weight:800; color:#fca5a5; margin-bottom:5px; }
.pain-users { font-size:12px; color:rgba(251,191,36,0.65); margin-bottom:10px; font-weight:600; }
.pain-list { list-style:none; }
.pain-list li { font-size:13px; color:rgba(255,255,255,0.55); line-height:1.7;
  padding-left:16px; position:relative; margin-bottom:4px; }
.pain-list li::before { content:'✗'; position:absolute; left:0; color:rgba(239,68,68,0.55); font-size:11px; font-weight:800; top:2px; }
.pain-essence { margin-top:16px; font-size:13px; color:rgba(251,191,36,0.75); font-style:italic;
  padding:12px 20px; border-radius:10px;
  background:rgba(251,191,36,0.05); border:1px solid rgba(251,191,36,0.15);
  text-align:center; line-height:1.7; }

10.5 PATH / SCENE HEADER（路径/场景头部）

.path-header,.scene-header {
  display:flex; align-items:center; gap:16px;
  margin-bottom:32px; margin-top:72px;
  padding:20px 28px; border-radius:18px;
}
.path-header.p1 { background:linear-gradient(135deg,rgba([色1-rgb],0.08),rgba([色1-rgb],0.04)); border:1.5px solid rgba([色1-rgb],0.3); }
.path-num,.scene-num {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; color:#fff;
}
.path-num.p1 { background:linear-gradient(135deg,[色1A],[色1B]); box-shadow:0 4px 16px rgba([色1A-rgb],0.3); }
.path-info,.scene-info { flex:1; }
.path-title,.scene-title { font-size:22px; font-weight:900; color:#fff; margin-bottom:4px; }
.path-subtitle,.scene-subtitle { font-size:14px; color:rgba(255,255,255,0.42); }
.path-tags,.scene-tags { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.path-tag,.scene-tag { font-size:12px; font-weight:600; padding:3px 12px; border-radius:10px; }

10.6 SEC LABEL（路径标签行）

.sec-label {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  font-size:14px; font-weight:800; letter-spacing:1px;
}
.sec-label .badge {
  padding:5px 16px; border-radius:10px; font-size:13px; font-weight:800; color:#fff; white-space:nowrap;
}
.sec-label .badge.p1 { background:linear-gradient(135deg,[色1A],[色1B]); }
.sec-label .badge.mech { background:linear-gradient(135deg,#0d9488,#06b6d4); }
.sec-line { flex:1; height:1px; background:rgba(255,255,255,0.06); }
.sec-hint { font-size:12px; color:rgba(255,255,255,0.25); white-space:nowrap; }

10.7 STEP CARD + FLOW（步骤卡片+流程容器）

.flow,.group-flow { display:flex; align-items:stretch; gap:0; margin-top:24px; }
.step {
  flex:1; position:relative;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px; padding:22px 18px 20px; min-width:0;
}
.step.hl-p1 { border-color:rgba([色1A-rgb],0.4); background:rgba([色1A-rgb],0.04); box-shadow:0 0 22px rgba([色1A-rgb],0.07); }
.step-num {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%;
  color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step-num.n1 { background:linear-gradient(135deg,[色1A],[色1B]); box-shadow:0 3px 10px rgba([色1A-rgb],0.4); }
.step-icon { font-size:34px; text-align:center; margin:6px 0 10px; }
.step-title { text-align:center; font-size:15px; font-weight:800; color:#fff; margin-bottom:3px; }
.step-sub { text-align:center; font-size:12px; color:rgba(255,255,255,0.35); margin-bottom:14px; line-height:1.5; }
.tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.t { font-size:11px; padding:3px 10px; border-radius:8px; font-weight:600; }
/* 步骤终态标识（最后一步/闭环/达成） */
.step.terminal { border-color:rgba(132,204,22,0.38); background:rgba(132,204,22,0.04); box-shadow:0 0 22px rgba(132,204,22,0.07); }

10.8 CONNECT BANNER（路径间关联）

.connect-banner {
  margin:32px 0 0; padding:18px 24px; border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  border:1px dashed rgba(255,255,255,0.12);
  display:flex; align-items:flex-start; gap:14px;
}
.connect-banner-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.connect-banner-title { font-size:13px; font-weight:800; color:rgba(255,255,255,0.55); margin-bottom:8px; }
.connect-banner-desc { font-size:13px; color:rgba(255,255,255,0.45); line-height:1.7; }

10.9 SCENE DIVIDER（场景分隔线）

.scene-divider { display:flex; align-items:center; gap:16px; margin:64px 0 0; }
.scene-divider-line { flex:1; height:1px; background:rgba(255,255,255,0.06); }
.scene-divider-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,[主色A],[主色B]); }

10.10 MECHANISM SECTION（核心机制区）

.mech-section {
  margin-top:32px; padding:28px 32px; border-radius:18px;
  background:linear-gradient(135deg,rgba([主色A-rgb],0.05),rgba([主色B-rgb],0.03));
  border:1px solid rgba([主色A-rgb],0.2);
}
.mech-head {
  font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.mech-head::after { content:''; flex:1; height:1px; background:rgba([主色A-rgb],0.12); }
.mech-grid { display:grid; gap:14px; }
.mech-2 { grid-template-columns:1fr 1fr; }
.mech-3 { grid-template-columns:1fr 1fr 1fr; }
.mech-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.mech-block {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 18px;
}
.mech-block-title {
  font-size:14px; font-weight:800; color:#fff; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.mech-block-icon { font-size:20px; }
.mech-block-sub { font-size:12px; color:rgba(255,255,255,0.3); font-weight:400; margin-left:auto; }
.mech-block-desc { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.7; }
.mech-block-desc .hl { font-weight:700; }
.mech-block-desc .hl.am { color:#fde68a; }
.mech-block-desc .hl.or { color:#fdba74; }
.mech-block-desc .hl.gn { color:#bef264; }
.mech-block-desc .hl.tl { color:#5eead4; }
.mech-block-desc .hl.bl { color:#7dd3fc; }
.mech-block-desc .hl.pp { color:#d8b4fe; }
.mech-block-desc .hl.pk { color:#fda4af; }

10.11 STEP LIST 条例式步骤列表 ⭐ v4.0 新增

.step-list { list-style:none; display:flex; flex-direction:column; gap:5px; margin-bottom:0; }
.step-list li { font-size:13px; color:rgba(255,255,255,0.58);
  display:flex; align-items:flex-start; gap:5px; line-height:1.65; }
.step-list li::before { content:''; width:4px; height:4px; border-radius:50%;
  background:linear-gradient(135deg,[色A],[色B]); flex-shrink:0; margin-top:7px; }
.step-list .strong-pink { color:#f9a8d4; font-weight:600; }
.step-list .strong-purple { color:#c4b5fd; font-weight:600; }
.step-list .strong-teal { color:#5eead4; font-weight:600; }
.step-list .strong-amber { color:#fde68a; font-weight:600; }
.step-list .sub-note { font-size:11px; color:rgba(255,255,255,0.3); margin-left:9px; list-style:none; }
.step-list .sub-note::before { content:'↳ '; color:rgba(255,255,255,0.2); }

10.12 UNLOCK 解锁标识 ⭐ v4.0 新增

触发条件：步骤需满足前置条件才能进入。

.unlock { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:rgba([色A-rgb],0.1); border:1px solid rgba([色A-rgb],0.3);
  color:[浅色A]; font-size:10px; padding:3px 10px; border-radius:8px; font-weight:600; }

10.13 FUND ROW 约会基金/资金行 ⭐ v4.0 新增

触发条件：步骤涉及资金来源/用途等商业细节。

.fund-row { display:flex; gap:10px; margin-top:8px; }
.fund-col { flex:1; }
.fund-col-title { font-size:11px; font-weight:800; margin-bottom:4px; padding-left:2px; }
.fund-item { font-size:11px; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:4px; margin-bottom:2px; }
.fund-item::before { content:''; width:3px; height:3px; border-radius:50%; flex-shrink:0; }
.fund-source-tag { font-size:8px; padding:1px 4px; border-radius:4px; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.3); margin-left:2px; }

10.14 FLOW-STEPS（机制内嵌迷你流程图）

.flow-steps { display:flex; align-items:center; gap:0; margin-top:14px; margin-bottom:28px; flex-wrap:wrap; }
.flow-node {
  flex:1; min-width:80px;
  background:rgba(255,255,255,0.025); border:1px solid rgba([色A-rgb],0.2);
  border-radius:12px; padding:14px 10px; text-align:center;
}
.flow-node-icon { font-size:24px; margin-bottom:6px; }
.flow-node-text { font-size:13px; font-weight:800; color:#fff; margin-bottom:4px; }
.flow-node-sub { font-size:11px; color:rgba(255,255,255,0.38); line-height:1.4; }
.flow-val { font-size:10px; margin-top:4px; font-weight:700; letter-spacing:0.5px; }
.flow-val.v-int { color:#67e8f9; }    /* 互动值 - 青蓝色 */
.flow-val.v-lik { color:#f9a8d4; }   /* 心动值 - 粉色 */
.flow-val.v-heart { color:#fbbf24; } /* 幸福值 - 金色 */
.flow-arr {
  width:32px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; position:relative;
}
.flow-arr::before {
  content:''; position:absolute; top:50%; left:0; right:0; height:2px;
  transform:translateY(-50%); background:linear-gradient(90deg,[色A],[色B]); border-radius:1px;
}
.flow-arr::after {
  content:''; position:absolute; top:50%; right:1px; transform:translateY(-50%);
  width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-left:6px solid [色B];
}

10.15 DUAL JOURNEY — 水平布局（第二代模式专用）

.journey-side-label { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.journey-side-label-text { font-size:16px; font-weight:900; color:#fff; white-space:nowrap; }
.journey-side-label-line { flex:1; height:2px; border-radius:1px; }
.journey-flow-h { display:flex; align-items:stretch; gap:0; margin-bottom:16px; }
.step-h {
  position:relative; flex:1; min-width:0;
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:18px 14px 14px; text-align:center;
}
.step-h-num {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%;
  color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step-h-icon { font-size:24px; margin:4px 0 8px; }
.step-h-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:2px; }
.step-h-sub { font-size:11px; color:rgba(255,255,255,0.35); margin-bottom:10px; }
.step-h-desc { font-size:13px; color:rgba(255,255,255,0.55); line-height:1.7; text-align:left; }
.arr-h { display:flex; align-items:center; justify-content:center; width:36px; flex-shrink:0; }
.arr-h-line { width:100%; height:2px; border-radius:1px; position:relative; }
.arr-h-head { position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:0; height:0; }
.interact-bridge {
  display:flex; align-items:center; gap:10px; margin:14px 0;
  padding:10px 20px; background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.12); border-radius:12px; flex-wrap:wrap;
}
.interact-bridge-title { font-size:13px; font-weight:800; color:rgba(255,255,255,0.55); white-space:nowrap; }
.interact-node-h {
  background:linear-gradient(135deg,[色A],[色B]);
  color:#fff; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600;
}
.interact-arrow-h { color:rgba(255,255,255,0.25); font-size:14px; }

10.16 DUAL JOURNEY — 垂直布局（第二代模式备用）

.dual-journey { display:flex; gap:0; align-items:stretch; margin-top:24px; }
.dual-col { flex:1; display:flex; flex-direction:column; gap:14px; }
.dual-col-title {
  font-size:14px; font-weight:800; letter-spacing:1.5px;
  text-align:center; margin-bottom:4px; padding:10px 16px; border-radius:10px;
}
.interact-col {
  width:80px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0; padding:56px 0 0;
}
.interact-line { width:2px; flex:1; min-height:30px; }
.interact-line.s1-down { background:linear-gradient(180deg,[色A],[色B]); }
.interact-line.s1-up { background:linear-gradient(180deg,[色B],[色A]); }
.interact-badge {
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  padding:4px 10px; border-radius:8px; white-space:nowrap; margin:5px 0; text-align:center;
}

10.17 GROWTH SYSTEM 成长体系 ⭐ v4.0 新增

触发条件：案例有等级/成长体系。

.growth-system { background:linear-gradient(135deg, rgba([色A-rgb],0.06), rgba([色B-rgb],0.06));
  border:1px solid rgba([色A-rgb],0.2); border-radius:18px; padding:28px 32px; margin-top:36px; }
.gs-head { font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px; }
.gs-head::after { content:''; flex:1; height:1px; background:rgba([色A-rgb],0.15); }
.gs-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.gs-card { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 16px; text-align:center; position:relative; }
.gs-level { font-size:11px; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:8px;
  display:inline-block; margin-bottom:10px; }
.gs-icon { font-size:28px; margin-bottom:6px; }
.gs-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:4px; }
.gs-range { font-size:11px; color:rgba(255,255,255,0.3); margin-bottom:12px; }
.gs-perks { list-style:none; text-align:left; }
.gs-perks li { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.6; padding-left:14px; position:relative; }
.gs-perks li::before { content:'✦'; position:absolute; left:0; font-size:9px; color:rgba([色A-rgb],0.5); }
.gs-arrow { position:absolute; top:50%; right:-12px; transform:translateY(-50%); color:rgba([色A-rgb],0.35); font-size:18px; z-index:1; }

10.18 AI EVO AI进化阶段 ⭐ v4.0 新增

触发条件：AI 能力随旅程递进升级。

.ai-evo { background:linear-gradient(135deg, rgba([色A-rgb],0.05), rgba([色B-rgb],0.04));
  border:1px solid rgba([色A-rgb],0.2); border-radius:18px; padding:28px 32px; margin-top:36px; }
.ai-evo-head { font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px; }
.ai-evo-head::after { content:''; flex:1; height:1px; background:rgba([色A-rgb],0.12); }
.ai-row { display:flex; gap:16px; align-items:stretch; }
.ai-phase { flex:1; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 16px; position:relative; }
.ai-phase-num { position:absolute; top:8px; right:12px; font-size:26px; font-weight:900;
  color:rgba([色A-rgb],0.08); }
.ai-phase-icon { font-size:26px; margin-bottom:6px; }
.ai-phase-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:2px; }
.ai-phase-range { font-size:11px; color:rgba([色A-rgb],0.5); margin-bottom:10px; }
.ai-phase-list { list-style:none; }
.ai-phase-list li { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.6; padding-left:14px; position:relative; }
.ai-phase-list li::before { content:'→'; position:absolute; left:0; font-size:10px; color:rgba([色A-rgb],0.4); }

10.19 BIZ SECTION（商业变现）

.biz-section {
  background:linear-gradient(135deg,rgba([主色A-rgb],0.05),rgba([主色B-rgb],0.03));
  border:1px solid rgba([主色A-rgb],0.2);
  border-radius:18px; padding:28px 32px; margin-top:72px;
}
.biz-head {
  font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.biz-head::after { content:''; flex:1; height:1px; background:rgba([主色A-rgb],0.12); }
.biz-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.biz-card {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 18px;
}
.biz-card-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.biz-card-icon { font-size:26px; }
.biz-card-title { font-size:15px; font-weight:800; color:#fff; }
.biz-card-sub { font-size:12px; color:rgba([主色A-rgb],0.6); margin-top:2px; }
.biz-card-list { list-style:none; }
.biz-card-list li {
  font-size:14px; color:rgba(255,255,255,0.52); line-height:1.7;
  padding-left:16px; position:relative; margin-bottom:5px;
}
.biz-card-list li::before { content:'›'; position:absolute; left:0; color:rgba([主色A-rgb],0.55); font-size:16px; top:-1px; }

10.20 CORE SECTION（核心竞争力）

.core-section {
  background:linear-gradient(135deg,rgba([主色A-rgb],0.06),rgba([主色B-rgb],0.06));
  border:1px solid rgba([主色A-rgb],0.2);
  border-radius:18px; padding:28px 32px; margin-top:56px;
}
.core-head {
  font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.core-head::after { content:''; flex:1; height:1px; background:rgba([主色A-rgb],0.12); }
.core-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.core-card {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:22px 18px; text-align:center;
}
.core-card-icon { font-size:30px; margin-bottom:10px; }
.core-card-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:8px; }
.core-card-desc { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.6; }

10.21 MECH ROW 核心机制汇总行 ⭐ v4.0 新增

触发条件：需要精简机制汇总（配合 mech-section 使用）。

.mech-row { margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.mech { border-radius:12px; padding:16px 14px;
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); }
.mech-icon { font-size:20px; margin-bottom:6px; }
.mech-title { font-size:13px; font-weight:800; color:#fff; margin-bottom:4px; }
.mech-desc { font-size:12px; color:rgba(255,255,255,0.45); line-height:1.6; }

10.22 STAIRCASE（阶梯柱状图）

.staircase-wrap {
  background:rgba(255,255,255,0.02); border:1px solid rgba([主色-rgb],0.18);
  border-radius:14px; padding:20px; margin-bottom:14px;
}
.staircase { display:flex; align-items:flex-end; gap:8px; height:180px; }
.stair-step { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.stair-bar {
  width:100%; border-radius:8px 8px 0 0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:12px 4px 8px; text-align:center;
}
.stair-pct { font-size:22px; font-weight:900; margin-bottom:2px; }
.stair-days { font-size:11px; color:rgba(255,255,255,0.45); }
.stair-label { font-size:12px; color:rgba(255,255,255,0.4); margin-top:8px; text-align:center; font-weight:600; }

10.23 VALUE-FLOW（价值流转点线图）

.value-flow { display:flex; align-items:center; gap:0; justify-content:center; margin:20px 0; }
.value-flow-step { display:flex; flex-direction:column; align-items:center; gap:6px; }
.vf-dot { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,[色A],[色B]); box-shadow:0 0 8px rgba([色A-rgb],0.4); }
.vf-label { font-size:12px; color:rgba(255,255,255,0.6); font-weight:600; text-align:center; }
.vf-line { width:40px; height:2px; background:linear-gradient(90deg,[色A],[色B]); flex-shrink:0; }

10.24 TRUST SYSTEM（信任分级体系）

.trust-system {
  margin-top:36px; padding:24px 28px; border-radius:18px;
  background:linear-gradient(135deg,rgba([主色A-rgb],0.06),rgba([主色B-rgb],0.04));
  border:1px solid rgba([主色A-rgb],0.2);
}
.trust-head {
  font-size:15px; font-weight:800; color:[浅主色A]; letter-spacing:1px; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.trust-head::after { content:''; flex:1; height:1px; background:rgba([主色A-rgb],0.12); }
.trust-grade-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.trust-grade {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:18px 14px; text-align:center;
}
.trust-grade-color { display:inline-block; width:14px; height:14px; border-radius:50%; margin-bottom:6px; }
.trust-grade-name { font-size:14px; font-weight:800; color:#fff; margin-bottom:4px; }
.trust-grade-desc { font-size:12px; color:rgba(255,255,255,0.45); line-height:1.6; }
.trust-rule {
  padding:14px 20px; border-radius:12px; margin-top:4px;
  background:rgba(255,255,255,0.02); border:1px solid rgba([主色A-rgb],0.15);
  font-size:13px; color:rgba(255,255,255,0.5); line-height:1.75; text-align:center;
}

10.25 EMOTION SECTION（情感价值锚点）

.emotion-section {
  background:linear-gradient(135deg,rgba(236,72,153,0.06),rgba(244,63,94,0.04));
  border:1px solid rgba(236,72,153,0.18);
  border-radius:18px; padding:28px 32px; margin-top:56px;
}
.emotion-head {
  font-size:15px; font-weight:800; color:#f9a8d4; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.emotion-head::after { content:''; flex:1; height:1px; background:rgba(236,72,153,0.12); }
.emotion-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.emotion-card {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:20px 18px;
}
.emotion-icon { font-size:28px; margin-bottom:8px; }
.emotion-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:8px; }
.emotion-desc { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.6; }

10.26 INVESTOR SECTION（投资人视角）

.investor-section {
  background:linear-gradient(135deg,rgba(217,119,6,0.06),rgba(245,158,11,0.04));
  border:1px solid rgba(217,119,6,0.18);
  border-radius:18px; padding:28px 32px; margin-top:56px;
}
.investor-head {
  font-size:15px; font-weight:800; color:#fcd34d; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.investor-head::after { content:''; flex:1; height:1px; background:rgba(217,119,6,0.12); }
.investor-row { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px; }
.investor-card {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 18px;
}
.investor-card-title { font-size:15px; font-weight:800; color:#fff; margin-bottom:8px; }
.investor-card-desc { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.6; }

10.27 PARTNER SECTION（合伙人/代理制度）

.partner-section {
  background:linear-gradient(135deg,rgba(67,56,202,0.06),rgba(67,56,202,0.02));
  border:1px solid rgba(67,56,202,0.2);
  border-radius:18px; padding:28px 32px; margin-top:72px;
}
.partner-head {
  font-size:15px; font-weight:800; color:#a5b4fc; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.partner-head::after { content:''; flex:1; height:1px; background:rgba(67,56,202,0.12); }
.partner-row { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px; }
.partner-card {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:20px 18px;
}
.partner-card-title { font-size:15px; font-weight:800; color:#fff; margin-bottom:8px; }
.partner-card-desc { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.6; }

10.28 SAFETY SECTION（安全保护）

.safety-section {
  background:linear-gradient(135deg,rgba(239,68,68,0.04),rgba(251,146,60,0.04));
  border:1.5px dashed rgba(239,68,68,0.2);
  border-radius:18px; padding:28px 32px; margin-top:56px;
}
.safety-head {
  font-size:15px; font-weight:800; color:#fca5a5; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.safety-head::after { content:''; flex:1; height:1px; background:rgba(239,68,68,0.12); }
.safety-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.safety-card {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:20px 18px;
}
.safety-icon { font-size:28px; margin-bottom:8px; }
.safety-title { font-size:15px; font-weight:800; color:#fca5a5; margin-bottom:10px; }
.safety-list { list-style:none; }
.safety-list li {
  font-size:13px; color:rgba(255,255,255,0.52); line-height:1.7;
  padding-left:14px; position:relative; margin-bottom:4px;
}
.safety-list li::before { content:'›'; position:absolute; left:0; color:rgba(239,68,68,0.5); font-size:14px; top:-1px; }

10.29 AI SECTION（AI 赋能模块）

.ai-section {
  margin-top:36px; padding:24px 28px; border-radius:18px;
  background:linear-gradient(135deg,rgba(139,92,246,0.05),rgba(14,165,233,0.04));
  border:1px solid rgba(139,92,246,0.2);
}
.ai-head {
  font-size:15px; font-weight:800; color:#d8b4fe; letter-spacing:1px; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.ai-head::after { content:''; flex:1; height:1px; background:rgba(139,92,246,0.12); }

10.30 VALUE SECTION（价值沉淀/成长路径）

.value-section {
  background:rgba([主色-rgb],0.04); border:1px solid rgba([主色-rgb],0.18);
  border-radius:18px; padding:28px 32px; margin-top:56px;
}
.value-head {
  font-size:15px; font-weight:800; color:[浅主色]; letter-spacing:1px; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.value-head::after { content:''; flex:1; height:1px; background:rgba([主色-rgb],0.12); }
.value-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.value-card {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:20px 18px;
}

10.31 EXTENSION BANNER 延伸阶段标识 ⭐ v4.0 新增

触发条件：主流程后有明确延伸阶段。

.extension-banner {
  margin-top:40px; padding:18px 28px; border-radius:14px;
  background:linear-gradient(135deg,rgba([色A-rgb],0.06),rgba([色B-rgb],0.04));
  border:1px solid rgba([色A-rgb],0.2);
  display:flex; align-items:center; gap:14px;
}
.extension-banner-icon { font-size:26px; flex-shrink:0; }
.extension-banner-text { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.7; }
.extension-banner-text strong { color:[浅主色A]; font-weight:700; }

10.32 FLYWHEEL SECTION（飞轮/增长引擎）

.flywheel-section { margin-top:56px; }
.fw-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fw {
  border-radius:16px; padding:18px 16px; position:relative; overflow:hidden;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
}
.fw-accent { position:absolute; top:0; left:0; right:0; height:3px; border-radius:16px 16px 0 0; }
.fw-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fw-icon { font-size:22px; }
.fw-title { font-size:12px; font-weight:800; color:#fff; }
.fw-desc { font-size:9px; color:rgba(255,255,255,0.3); margin-top:1px; }
.fw-cycle { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:10px; }
.fw-node { font-size:9px; padding:3px 8px; border-radius:8px; font-weight:600; white-space:nowrap; }
.fw-arrow-text { font-size:9px; color:rgba(255,255,255,0.2); }

10.33 METRIC ROW（指标行）

.metric-row { display:flex; gap:12px; flex-wrap:wrap; }
.metric-item {
  flex:1; min-width:120px; padding:12px 14px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; text-align:center;
}
.metric-item .mi-value { font-size:22px; font-weight:700; margin-bottom:2px; }
.metric-item .mi-label { font-size:12px; color:rgba(255,255,255,0.5); }

10.34 FOOTER（底部页脚）

.footer { margin-top:52px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.fb {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:14px 20px;
}
.fb-icon { font-size:24px; }
.fb-title { font-size:13px; font-weight:700; color:rgba(255,255,255,0.75); margin-bottom:3px; }
.fb-desc { font-size:12px; color:rgba(255,255,255,0.35); }

10.35 BIND-TAG 关联标签 ⭐ v4.0 新增

触发条件：增值服务与主链路有明确功能关联。

.bind-tag { display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:600; color:rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  padding:2px 8px; border-radius:6px; margin-top:6px; }

十一、叙事弧线设计规范（独立专章）

11.1 弧线类型

| 类型 | 结构 | 步骤信息密度 | 适用场景 | |------|------|-------------|----------| | 渐入型 | 低→中→高→高→中 | 前 2 步简洁，中间详细 | 用户旅程渐进 | | 高潮型 | 中→中→高→极高→中 | 第 4-5 步信息量最大 | 有明确"关键时刻"的业务 | | 对照型 | 镜像结构 | 两侧密度一致 | 双场景/双角色 | | 漏斗型 | 高→中→低 | 逐步精简聚焦 | 转化/付费路径 |

11.2 信息密度分级

| 密度等级 | P模式字数 | UL模式条目数 | 适用位置 | |----------|----------|-------------|----------| | 高密度 | 60-80 字 | 6-8 条 | 核心转化步骤、差异化步骤 | | 中密度 | 40-60 字 | 4-6 条 | 标准流程步骤 | | 低密度 | 20-40 字 | 2-4 条 | 起始/终止步骤、过渡步骤 |

十二、创造性增强手法（C1-C29）

| 编号 | 手法 | 效果 | 适用场景 | 来源 | |------|------|------|----------|------| | C1 | pain-essence 一句话揭示痛点本质 | 瞬间共鸣 | 所有案例 | 02 | | C2 | 跨路径引用标注 → 路径N | 打破线性阅读 | 多路径 | 02 | | C3 | 机制提炼为"三重xx"句式 | 强化记忆 | 3个核心机制 | 02 | | C4 | 最后一步绿色渐变边框+编号 | 心理暗示"完成" | 所有路径 | 全部 | | C5 | path-subtitle 用 A→B→C 格式 | 一目了然 | 所有路径 | 02 | | C6 | h1 大标题加渐变流光 | 视觉冲击 | 所有案例 | 全部 | | C7 | pain-essence 一句话换行 | 核心信息聚焦 | 所有案例 | 02/05 | | C8 | connect-banner 描述性段落 | 解释转化逻辑 | 多路径 | 02/03/05 | | C9 | mech-block 标题用「对比对」格式 | 理解更快 | 双端案例 | 02 | | C10 | 补充说明融入正文 | 不让信息孤立 | 所有 | 全部 | | C11 | scene-divider 渐进变色 | 自然过渡 | 多路径 | 02 | | C12 | 次路径步骤数略少于主路径 | 区分主次 | 多路径4+条 | 02 | | C13 | flow-node 最后一节点用绿色 | 链式流程收束 | mech内流程 | 02 | | C14 | trust-grade-row 扇出式排列 | 从低到高展示 | 有等级体系 | 06 | | C15 | staircase 渐变高度条形 | 量化渐进感 | 有阶梯数据 | 01 | | C16 | step-sub 提炼 3-4 个词 | 步级标签速读 | 所有 | 全部 | | C17 | mech-block-sub 右对齐说明 | 层次分明 | 机制卡片 | 全部 | | C18 | path-tags 色系关联路径色 | 视觉一致性 | 多路径 | 03 | | C19 | vision 用项目色弱底色 | 品牌感 | 所有 | 02 | | C20 | hl 类名关联路径编号 | 易于维护 | 多路径 | 全部 | | C21 | .sa 在关键位置重复出现 | 加深核心差异化记忆 | 所有 | 全部 | | C22 | .sb 用于数据/平台机制 | 区分产品逻辑和用户行为 | 有AI/机制 | 06 | | C23 | .sp 用于独特创新概念 | 标注独特性 | 有创新 | 02/06 | | C24 | 对抗性标注 [推断·中] | 透明度最大化 | 推断内容 | 全局 | | C25 | UL模式步骤描述 | 功能列举清晰 | 多项并列功能 | v4.0 | | C26 | compact 紧凑模式 | ≥7步适配屏幕 | 步骤多的单线流程 | v4.0 | | C27 | flow-val 增长标签 | 标注分值变化 | 互动积累/分值体系 | v4.0 | | C28 | growth-system 成长体系 | 等级进阶可视化 | 有等级/成长体系 | v4.0 | | C29 | ai-evo AI进化阶段 | AI能力递进可视化 | AI能力随旅程升级 | v4.0 |

12.1 创造性增强勾选清单（14 项，v4.0 更新）

□ P模式或UL模式 — 根据步骤内容特征选择
□ compact模式 — 单行步骤数 ≥7 时启用
□ flow-val增长标签 — 案例有分值/好感值/积分积累体系？
□ legend图例 — 页面有多条不同类型路径？
□ unlock解锁标识 — 步骤需要满足前置条件？
□ fund-row基金行 — 步骤涉及资金来源/用途？
□ bind-tag关联标签 — 增值服务与主链路有关联？
□ growth-system — 案例有等级/成长阶段体系？
□ ai-evo — 案例有AI能力随旅程递进？
□ flywheel-section — 案例有增长飞轮/自循环机制？
□ staircase — 案例有阶梯式数据/成长阶段？
□ trust-system — 案例有信任等级/认证体系？
□ extension-banner — 主流程后有明确延伸阶段？
□ mech-row — 需要精简机制汇总（配合mech-section）？

十三、布局模式结构模板

模板①：单线水平流程

header → [legend] → pain-section → path-header + sec-label + flow(step+arr × N步) →
  [extension-banner] → mech-section → [growth-system] → [ai-evo] → [trust-system] →
  [safety-section] → [flywheel-section] → [core-section] → [mech-row] → footer
关键约束：路径ID用.p1，步骤编号.n1，箭头.a1，最后一步加绿色渐变收尾

模板②：双端并列

header → pain-section → journey-side-label × 2 → journey-flow-h × 2 → interact-bridge → mech-section → [connect-banner] → footer
关键约束：双端各用独立色系，交互桥接节点与步骤数对应

模板③：多路径并行

header → pain-section → [legend] →
  路径①：path-header.p1 + sec-label + flow + connect-banner →
  scene-divider → 路径② → scene-divider → 路径N →
  [biz-section] → [core-section] → [mech-row] → footer
关键约束：每条路径用独立的 hl-pN / nN / aN 类，路径间用 scene-divider

模板④：对称双场景

header → pain-section → [legend] →
  场景①：scene-header.s1 + sec-label + group-flow + mech-section →
  connect-banner → scene-divider →
  场景②：scene-header.s2 + sec-label + group-flow + mech-section →
  [value-section] → core-section → footer
关键约束：两场景 mech-section 背景色分属不同色系

模板⑤：一代半混合（单线+支线）

header → pain-section → path-header + sec-label + flow(主线N步) →
  connect-banner(引入支线) → scene-divider →
  支线：path-header.p2 + sec-label + flow(支线M步，M<N) →
  mech-section → footer
关键约束：主线步骤数 > 支线，支线用次色系

十四、区块按需触发表

| 区块 | 触发条件 | 重要度 | 组件节 | |------|----------|--------|--------| | pain-section | 所有案例 | 必须 | 10.4 | | path-header | 所有案例 | 必须 | 10.5 | | flow / group-flow | 所有案例 | 必须 | 10.7 | | mech-section | 所有案例 | 必须 | 10.10 | | connect-banner | 多路径/双场景/一代半 | 必须 | 10.8 | | scene-divider | 多路径/双场景 | 必须 | 10.9 | | legend | ≥2条不同类型路径 | 推荐 | 10.3 | | step-list | UL模式步骤 | 按需 | 10.11 | | unlock | 步骤需前置条件 | 按需 | 10.12 | | fund-row | 步骤涉及资金细节 | 按需 | 10.13 | | growth-system | 有等级/成长体系 | 中 | 10.17 | | ai-evo | AI能力随旅程递进 | 中 | 10.18 | | extension-banner | 主流程后有延伸阶段 | 中 | 10.31 | | mech-row | 需精简机制汇总 | 中 | 10.21 | | bind-tag | 增值服务与主链路关联 | 按需 | 10.35 | | biz-section | 有商业变现模式 | 高 | 10.19 | | core-section | 有核心竞争力 | 高 | 10.20 | | flywheel-section | 有增长飞轮/自循环 | 中 | 10.32 | | staircase | 有阶梯数据/成长阶段 | 中 | 10.22 | | value-flow | 有价值流转链条 | 中 | 10.23 | | trust-system | 有信任等级/认证 | 中 | 10.24 | | emotion-section | 有情感价值/故事 | 低 | 10.25 | | investor-section | 需要投资人视角 | 低 | 10.26 | | partner-section | 有合伙人/代理 | 低 | 10.27 | | ai-section | 有 AI 赋能 | 低 | 10.29 | | safety-section | 有安全/风控 | 低 | 10.28 | | metric-row | 有关键数据指标 | 低 | 10.33 | | value-section | 有价值沉淀/成长 | 低 | 10.30 | | interact-bridge | 双端交互复杂 | 中 | 10.15 |

十五、败笔预警清单（F1-F22，v4.0 新增 F21/F22）

| 编号 | 败笔描述 | 严重级别 | |------|----------|----------| | F1 | 路径描述使用裸 <ul><li> | 致命 | | F2 | 使用 em/rem/% 字体单位 | 致命 | | F3 | 使用 .container 外层包裹 | 致命 | | F4 | 语义色色值被修改 | 严重 | | F5 | 核心卖点出现不足 3 次 | 严重 | | F6 | Tag 色值表被修改 | 严重 | | F7 | 缺少 pain-essence | 重要 | | F8 | 缺少 scene-divider（多路径时） | 重要 | | F9 | 缺少 connect-banner（多路径时） | 重要 | | F10 | 步骤数 >7（无compact）或 <4 | 重要 | | F11 | h1 无文字渐变色 | 建议 | | F12 | 卡片边框色不统一 | 建议 | | F13 | body padding 不一致 | 建议 | | F14 | 语义色 span font-weight 不是 600 | 建议 | | F15 | step-desc font-size 不是 14px | 建议 | | F16 | 文件行数 >1500 或 <600 | 建议 | | F17 | 配色与历史项目撞色 | 严重 | | F18 | 文件内路径间色调差异常 | 重要 | | F19 | 缺少反方检验步骤 | 严重 | | F20 | 推断内容未标注 | 重要 | | F21 | 同一flow内P模式和UL模式混用 | 严重 | | F22 | ≥7步流程未启用compact | 重要 |

十六、自查清单（40 项，v4.0 从 37 项扩展至 40 项）

排版（14 项）

[ ] 1. 步骤描述使用  或 <ul class="step-list">
[ ] 2. 重点内容只用 span 类加粗变色，未增大 font-size
[ ] 3. P模式正文14px，UL模式列表13px，未混用字号
[ ] 4. 每段step-desc ≤3处span，每条step-list li ≤1处span
[ ] 5. 无独立sub-note缩进块（使用.step-list .sub-note）
[ ] 6. step-sub格式为 关键词 · 关键词 · 关键词
[ ] 7. path-subtitle格式为 步骤1 → 步骤2 → ... · 说明
[ ] 8. 全部使用px单位
[ ] 9. body padding为 52px 48px 80px
[ ] 10. 无.container包裹器
[ ] 11. h1有 background-clip: text 渐变
[ ] 12. 卡片边框统一 rgba(255,255,255,0.08)
[ ] 13. P模式用语义色span，UL模式用色彩名span，不混用
[ ] 14. compact模式在≥7步流程中正确启用

内容（10 项）

[ ] 15. 案例商业模式忠实还原
[ ] 16. 合理推断已标注
[ ] 17. 核心卖点在≥3个位置自然出现
[ ] 18. 路径间转化关系清晰标注
[ ] 19. 步骤描述用自己的话拆解重组
[ ] 20. 痛点区有pain-essence
[ ] 21. 每个步骤有明确的step-icon emoji
[ ] 22. 步骤标题≤10字，动词明确
[ ] 23. body下直接写区块
[ ] 24. 反方检验已执行

结构（10 项）

[ ] 25. header完整（tag+h1+sub+vision）
[ ] 26. 布局模式与案例结构匹配
[ ] 27. 路径头部完整
[ ] 28. 机制区独立于旅程区
[ ] 29. footer有≥3个fb卡片
[ ] 30. 步骤编号连续有序
[ ] 31. 多路径有scene-divider
[ ] 32. 多路径有connect-banner
[ ] 33. 同一流程内步骤描述模式统一
[ ] 34. 有等级/成长体系时使用growth-system

视觉（6 项）

[ ] 35. 配色不撞车（HSL差≥35°，亮度差≥20%）
[ ] 36. 背景#06050f，卡片圆角半透明
[ ] 37. 箭头颜色与路径色系一致
[ ] 38. 文件内路径间色差40°-90°
[ ] 39. 语义色span font-weight为600
[ ] 40. legend图例在多路径场景中正确展示

十七、6 轮迭代验证机制

| 轮次 | 验证维度 | 验证方式 | 通过标准 | |------|----------|----------|----------| | R1 | 结构完整性 | 浏览器打开无报错，HTML 标签闭合完整 | 零控制台错误 | | R2 | 规则一致性 | 对照本文档排版硬规则逐条检查 | 所有 CSS 类名、字号、间距一致 | | R3 | 参考案例对齐 | 与 02/03/05/06 参考文件对比结构和样式 | CSS 类名体系一致 | | R4 | 配色差异化 | 与所有已生成文件对比配色（HSL 差值 ≥ 35°，亮度差 ≥ 20%） | 不撞色 | | R5 | 内容准确性 | 与原始案例文案逐条核对忠实还原 | 无凭空捏造 | | R6 | 风格一致性 | 检查文件内各区块视觉风格是否统一 | 零风格冲突 |

迭代规则：

每轮必须全部通过才能进入下一轮
R1-R3 不通过则立即修复重新验证
R4-R6 不通过则记录问题，下一轮优先修复
6 轮全通过后输出最终版本

验证报告结构化输出（必须嵌入生成后的回复）：

## 验证报告

| 轮次 | 验证维度 | 结果 | 发现问题 |
|------|----------|------|----------|
| R1 | 结构完整性 | / | [具体] |
| R2 | 规则一致性 | / | [具体] |
| R3 | 参考案例对齐 | / | [具体] |
| R4 | 配色差异化 | / | [具体] |
| R5 | 内容准确性 | / | [具体] |
| R6 | 风格一致性 | / | [具体] |

综合评估：通过 X/6 轮 → [可输出 / 需修改]

十八、美学 7 维度量化标准

| 维度 | 合格标准 | 检测方法 | |------|----------|----------| | 信息密度 | 无大面积空白，无信息过载 | 目测每屏信息分布 | | 视觉节奏 | 有疏有密，张弛有度 | 检查步骤描述字数波动 | | 色阶和谐 | 同文件内颜色过渡自然 | HSL 差值 40°-90° | | 空间呼吸 | 区块间 margin 一致 | 检查 margin-top 值 | | 闭环感 | 最后一步有绿色终态标识 | 检查 .terminal 类 | | 首屏可见 | 前 3 步在首屏可见 | 浏览器预览 | | 同类一致 | 同类型区块样式统一 | 跨区块比对 |

十九、常见问题处理速查

| 问题 | 处理方案 | |------|----------| | 案例信息不足，无法确定路径 | 用 [推断·中] 标注，选择最可能的路径，并在自检局限中说明 | | 多路径但某条路径步骤太少 | 合并为"主路径+支线"模式，支线用 connect-banner 引入 | | 双端但某侧只有 3 步 | 补充推断步骤（标注推断），或改用单线+connect-banner | | 配色与历史项目撞色 | 选择未使用色系表中 HSL 差值最大的方案 | | 机制太多，mech-section 过长 | 用 flow-steps 或 staircase 替代部分 mech-block | | 没有明显的差异化卖点 | 从案例中提取最独特的 1-2 个特征，用 .sa 强调 | | 步骤描述写不出业务价值 | 聚焦"用户获得了什么"而非"系统做了什么" | | 文件行数超过 1300 | 合并相似机制，减少可选组件，精简描述 | | 文件行数少于 800 | 补充推断步骤，增加机制细节，添加可选组件 | | 不确定用哪种布局 | 对照 6.4 三维匹配矩阵，不确定时默认单线水平 | | 不确定用P模式还是UL模式 | 步骤强调"用户做了什么"用P，涉及"多项并列功能"用UL | | 步骤数 ≥7 无法合并 | 启用 compact 紧凑模式，上限放宽至 9 步 |

二十、代码行数预算表

| 布局模式 | 预估行数 | 说明 | |----------|----------|------| | 单线水平 | 800-1100 | 基础结构，信息密度最高 | | 单线水平（compact） | 900-1300 | ≥7步紧凑模式 | | 双端并列 | 1000-1200 | 双端流程+交互桥接 | | 多路径并行（3条） | 1000-1200 | 多条路径+分隔+关联 | | 多路径并行（4条+） | 1100-1300 | 需精简描述控制行数 | | 对称双场景 | 1000-1200 | 双场景+双机制区 | | 一代半混合 | 900-1100 | 主线+支线+关联说明 |

超过 1300 行需精简，低于 800 行需补充。

二十一、快速参考卡（v4.0 更新）

生成口诀：
深度理解 → 忠实还原 → 选择描述模式 → 创新呈现 → 配色5档轮换 → 一句话到头 → 重点只变色 → 卖点≥3次 → 自查40项 → 6轮验证

布局速选：
单用户线性 → 单线 flow（模板①）
双边互动 → dual-journey + interact-bridge（模板②）
多路径选择 → 多路径并行 + connect-banner（模板③）
双模式切换 → 对称双场景 + connect-banner（模板④）
主流程+支线 → 单线+connect-banner+支线（模板⑤）

描述模式速选：
步骤强调"用户做了什么+获得什么" → P模式（<p class="step-desc">）
步骤涉及多项并列功能/特性 → UL模式（<ul class="step-list">）
≥7步单行流程 → 追加 .compact

span速查：
P模式：sa=卖点 | so=行动 | sg=正向 | st=信任 | sb=数据 | sp=创新
UL模式：strong-pink | strong-purple | strong-teal | strong-amber

tag速查（11个）：
am=卖点 | or=行动 | gn=结果 | tl=流程 | bl=数据 | pp=特色 | pk=情感 | rd=风险 | cy=AI | in=即时 | rs=玫瑰

组件速查（35个）：
标准卡片→mech-block | 机制流程→flow-steps | 阶梯→staircase | 价值流→value-flow
商业→biz-section | 核心优势→core-section | 安全→safety-section | 信任→trust-system
成长体系→growth-system | AI进化→ai-evo | 机制汇总→mech-row
情感→emotion-section | 合伙人→partner-section | 投资人→investor-section | AI→ai-section
飞轮→flywheel-section | 指标→metric-row | 图例→legend | 解锁→unlock | 基金行→fund-row
关联标签→bind-tag | 延伸标识→extension-banner | 双端水平→journey-flow-h | 双端垂直→dual-journey

二十二、自检局限（5 项）

推断内容局限：标注为 [推断] 的内容基于案例文案的合理推演，非一手事实，置信度为中。
视觉呈现局限：配色选择基于业务语义匹配，实际视觉效果可能因显示器/浏览器差异而有所不同。
信息完整性局限：案例文案未详述的细节已被合理推断，但可能存在遗漏或偏差。
布局适配局限：所选布局模式基于案例结构分析，如案例存在未明确的多角色互动，可能需要调整布局。
步骤描述模式局限：P/UL模式的选择基于步骤内容特征判断，可能存在更适合但未选用的模式。

二十三、版本历史

| 版本 | 日期 | 说明 | |------|------|------| | v1.0 (FIN) | 2026-04 | 初版，24创造性手法+5档配色 | | v1.0 (M) | 2026-04 | 24组件+30自查+叙事弧线 | | v1.0 (W) | 2026-04 | HSL量化+5轮验证+双形态设计 | | v2.0 (M) | 2026-05-04 20:53 | 整合FIN/M/W优势，26组件+30自查+6轮验证 | | v2.0 (Q) | 2026-05-04 20:58 | 三合一终极版，37自查+20败笔+美学7维 | | v2.0 (W) | 2026-05-04 20:57 | 以02/03/05/06为金标准，HSL精细化 | | v3.0 | 2026-05-04 23:24 | 终版统一版：Q版骨架+M版结构+W版量化 | | v4.0 | 2026-05-07 | 实战升级版：基于恋爱平台最终HTML验证，新增双模式步骤描述+compact+flow-val+9组件+5手法，35组件+40自查+22败笔+29手法 |

v4.0 整合说明：本文件完整保留 v3.0 全部内容（24章、37自查、20败笔、26组件、C24手法），在此基础上基于恋爱平台最终版 HTML（00恋爱详情平台-用户行为路径图.html）的实战验证，新增以下内容：

双模式步骤描述（R1 规则重写）：P 模式（段落式 ）+ UL 模式（条例式 <ul class="step-list">）并存，同一 flow 内不可混用，不同路径可各自选择

compact 紧凑模式（R9 规则新增）：单行 ≥7 步时启用 .step.compact，卡片内元素尺寸全面缩减，箭头缩至 28px，步骤上限放宽至 9 步

9 个新 CSS 组件（编号 10.3/10.11/10.12/10.13/10.17/10.18/10.21/10.31/10.35）：legend、step-list、unlock、fund-row、growth-system、ai-evo、mech-row、extension-banner、bind-tag

flow-val 增长标签（C27 手法）：.v-int（互动值-青蓝）、.v-lik（心动值-粉色）、.v-heart（幸福值-金色）

tag 色系新增 .t.rs（rose），共 11 个 tag 色

严禁清单扩展至 18 项（#17 同flow内P/UL混用、#18 compact未调整尺寸）

败笔预警 F21/F22（同flow内模式混用、≥7步未compact）

自查清单 40 项（排版14+内容10+结构10+视觉6）

创造性手法 C25-C29（UL模式、compact、flow-val、growth-system、ai-evo）

勾选清单 14 项（新增 compact/flow-val/legend/unlock/fund-row/bind-tag/growth-system/ai-evo/extension-banner/mech-row）

代码行数预算更新：单线水平 800-1300（compact模式可达1300）

core-grid 默认列数更新为 3 列（实战验证 2×3 布局更优）