Phase 5+ · 精美 HTML 报告生成方法论（跨阶段 · 贯穿 Phase 5/6）

跨阶段定位：本文档不是 Phase 5 的一部分，而是贯穿 Phase 5（渲染）+ Phase 6（交付）的视觉设计语言系统。目标：把一份「能跑」的 HTML 报告升级为「可直接发给客户 / 董事会 / 投资人」的精美级别报告。 适用对象：写章节 JS 模块的工程师 / 把 AI 产出的骨架升级的审美设计师 / 最终质检的交付 PM。

🎯 什么叫「精美」

基于三个落地项目（肝纯片 737 KB / 猴菇饮 604 KB / 乳酸菌儿童版 464 KB），总结出的精美报告三条红线：

可以直接全屏演示（不用任何后期处理）
发截图到任何场合都不掉档（朋友圈 / 董事会 / 投资路演 / 行业报告）
单文件无依赖（500 KB-1 MB 的 HTML，发邮件 / 传 IM 都能打开）

反面参考：

❌ Bootstrap 默认的 Admin Dashboard 风
❌ 数据像 Excel 截图直接贴
❌ 整屏只有文字没有视觉重音
❌ 颜色用默认 Material 或 Ant Design 蓝
❌ 字体用默认无衬线（无 Mono 强调）

🎨 1. 视觉设计语言系统

1.1 三层深色背景

--bg-0: #0A0A0A;   /* 最底层 · 报告画布 · 几乎纯黑 */
--bg-1: #111111;   /* 中层 · section 内容区 + 卡片 */
--bg-2: #1A1A1A;   /* 上层 · hover / 强调块 */
--bg-3: #252525;   /* 顶层 · 高亮 tab / 选中态 */

为什么深色：数据类报告深色能让彩色数字/图表更醒目，且对眼睛友好（演示 1 小时不累）。

1.2 三层文字灰阶

--text-1: #F5F5F5;  /* 主文字 · 标题 · VOC 原文 */
--text-2: #A8A8A8;  /* 副文字 · 说明 · subtitle */
--text-3: #6B6B6B;  /* 灰阶 · 元信息 · 时间戳 / 平台标签 */

关键纪律：一屏内灰阶不超过 3 层。超过 3 层视觉会散。

1.3 边框系统

--border: rgba(255,255,255,0.08);         /* 默认边框 · 卡片 / 表格 */
--border-strong: rgba(255,255,255,0.16);  /* 强边框 · 表格 header / 分组 */

禁忌：不要用实色边框（如 #333），深色背景里实色边框会显得生硬。必须用 rgba(白,0.0X)。

1.4 圆角系统

--radius-sm: 4px;    /* 小标签 / 代码块 */
--radius-md: 8px;    /* 卡片 / 按钮 · 主用 */
--radius-lg: 12px;   /* 大卡 / Hero 区 */

纪律：一份报告里圆角风格统一。要么全尖角（0px），要么都 8px，不要混搭。

1.5 字体系统（双字体）

--font-head: 'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
--font-body: 'Inter','Noto Sans SC',system-ui,sans-serif;
--font-mono: 'JetBrains Mono','SFMono-Regular',Consolas,monospace;

为什么双字体：

font-head / font-body · 西文 Inter + 中文 Noto Sans SC：现代感 + 中英混排不掉档
font-mono · 所有数字、平台名、时间戳、百分比 必须走 Mono，让数据"立"起来

精美判断：看报告里的数字 —— 如果平台名（XHS / DOUYIN）、点赞数（♥2.3w）、价格（¥298）全部是 Mono，就对了。

1.6 字重系统

字重	用途	示例
`900`	Cover title / Chapter divider	5rem 巨标题
`800`	Section head / Agenda 标题	1.9-2.4rem
`700`	eyebrow / 表格 header / 强调	0.72-0.95rem
`400`	正文 / subtitle	0.85-1rem
`300`	元信息 / 时间戳	0.72rem 可选

纪律：字重跨度大才有层次感。不要 500-600 中间字重滥用。

1.7 字号系统（语义化）

/* 标题组 */
.cover-title         { font-size: 3.6rem; }   /* Cover 封面 */
.divider-title       { font-size: 5rem; }     /* Chapter 分隔 */
.agenda-title        { font-size: 2.4rem; }   /* 目录大标题 */
.section-title       { font-size: 1.9rem; }   /* 子章节 Hero */

/* 正文组 */
.body-large          { font-size: 1.1rem; }   /* Cover subtitle / Insight */
.body                { font-size: 0.95rem; }  /* 默认正文 */
.body-sm             { font-size: 0.88rem; }  /* VOC 原文 */

/* 元信息 */
.label               { font-size: 0.82rem; }  /* 标签 / 分类 */
.meta                { font-size: 0.78rem; }  /* 元信息 */
.eyebrow             { font-size: 0.72rem; }  /* 大写眉标 */

1.8 间距系统（8px 网格）

 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 60 / 80 / 120

卡片内 padding：14-20px
卡片之间 gap：12-16px
section 内 padding：60px 48px
section 之间：各占 100vh，用 border-bottom: 1px solid --border 分
Chapter divider：padding: 120px 40px

禁忌：不要用 13px / 15px / 17px / 23px 这种奇数值，破坏网格对齐。

1.9 品类专属主色 · BRAND 调色板

每个品类一个主色 + 4-6 个辅色。下面是三个案例的调色板：

品类	MAIN	次色	tone 哲学
肝纯片 DMY	`#4A90E2` 科技蓝	`#722F37` 酒红 · `#D4AF37` 酒精金	理性 · 严肃 · 醒目
猴菇饮	`#B87333` 温润铜	`#1A7C5F` 暗绿 · `#F5E6D3` 米白	东方 · 草本 · 温润
乳酸菌儿童	`#8FD3B8` 薄荷 · `#FFB6A3` 桃色	`#B5A3E0` 淡紫 · `#FFCC33` 亮黄	明快 · 柔和 · 分龄

选色心法：

先问：品类给用户的第一感觉是「紧张」「放松」「严肃」「温暖」「专业」？
查：同品类三个头部竞品的主色 —— 避开它们
选：再挑一个 LAB 色彩距离较远的主色，辅色用 HSL 偏移 ±30°
验：主色在深色背景上对比度 ≥ 4.5（用 https://webaim.org/resources/contrastchecker/）

🏗️ 2. Slide-deck 式布局模式

2.1 Section = Slide 原则

.report-section {
  min-height: 100vh;      /* 每个 section 占满一屏 */
  padding: 60px 48px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 20px; /* 平滑滚动锚点 */
}
.section-inner {
  max-width: 1280px;      /* 内容不超过 1280px */
  margin: 0 auto;
}

为什么 100vh：让报告天然变成幻灯片，用 PageDown / 空格键就能一屏一屏翻。

2.2 三种特殊 section

Cover 封面

.cover {
  background: linear-gradient(180deg, #0A0A0A 0%, #111 100%);
}

Cover title: 3.6rem · 分两行 · 品类色 strong
4 个 KPI 数字条（VOC 总量 / 平台数 / 竞品数 / 章节数）
底部灰阶元信息（采集时间 / 平台分布）

Agenda 目录

大标题：8 章 × N 子章
2 列 grid · 每条 = Ch N · 标题 + 一句话 hero line
每条左 4px 品类色 border · 可点击跳转 hash

Chapter Divider 章分隔

.divider {
  background: linear-gradient(180deg, #0F0F0F 0%, #000 100%);
  display: flex; align-items: center;
  padding: 120px 40px;
  text-align: center;
}

eyebrow: CHAPTER 01（大写 · letter-spacing 0.35em · 品类色）
title: 5rem · 字重 900
hero line: 一句话 · 1.15rem · max-width: 800px

2.3 Grid 布局响应式

1 列 · Hero / 单行文字
2 列 · VOC 卡并列 / 对比 / 理论 mapping
3 列 · 痛点卡 / 决策列表 / 小 KPI
4 列 · Cover KPI / StatStrip

推荐语法：

<div class="grid" style="grid-template-columns:repeat(4,1fr); gap:12px;">

2.4 滚动动线 · 4 种节奏

节奏	用途	视觉处理
`urgent`	Ch1 诘问起点	红/橙高亮 · 大字数字
`analytical`	Ch2/3 竞品 VOC	冷色 · 表格 · 矩阵
`insight`	Ch4 KANO	紫/蓝 · 渐变 Hero 金句
`empathy`	Ch5 场景	暖色 · 场景插图位 · VOC 多
`strategic`	Ch6 无人地带	绿色 · 2x2 矩阵 · 高亮
`forward`	Ch7 新机会	金色 · 上升感 · 虚实结合
`blueprint`	Ch8 4P	蓝黑 · 表格密 · 数字多

在 section 上加 data-tone="..."，可用 CSS 按 tone 切换强调色：

[data-tone="urgent"]   { --accent: var(--coral); }
[data-tone="strategic"]{ --accent: var(--jiang-green); }

🧱 3. 4 类核心视觉模块

每个子章节的 "5 件套" 在视觉上对应 4 类模块：

3.1 Section Head（Hero）

<div style="margin-bottom:20px;">
  <div class="text-mono text-xs" 
       style="color:#4A90E2; letter-spacing:0.2em; margin-bottom:10px; font-weight:700;">
    1.1 · 成人爆款 vs 儿童心智
  </div>
  <h2 style="font-family:var(--font-head); font-weight:800; font-size:1.9rem; line-height:1.3; 
             color:var(--text-1); margin:0 0 12px 0;">
    为什么 <strong style="color:#4A90E2;">乳酸菌素片</strong> 成人爆款，儿童心智却是空白
  </h2>
  <div style="color:var(--text-2); font-size:0.95rem; line-height:1.75; max-width:900px;">
    7.9 亿成人市场已验证 OTC 信任，但儿童 SKU 不到 5%，家长搜索"儿童乳酸菌"第一反应仍是妈咪爱或合生元。
  </div>
</div>

三段式纪律：

eyebrow（品类色 · Mono · 大写 · letter-spacing）
title（大字号 · 800 字重 · 至少一个 <strong> 品类色强调）
subtitle（灰 text-2 · 行高 1.75 · 最大 900px 宽）

3.2 数据组（StatStrip / VocCard）

StatStrip · KPI 数字条

<div class="grid" style="grid-template-columns:repeat(4,1fr); gap:12px;">
  <div style="padding:18px; background:#4A90E20C; border:1px solid #4A90E233; border-radius:8px; text-align:center;">
    <div style="color:#4A90E2; font-family:var(--font-head); font-weight:900; font-size:2rem;">7.9亿</div>
    <div style="color:var(--text-2); font-size:0.82rem; margin-top:6px;">成人乳酸菌素片市场</div>
    <div style="color:#4A90E2; font-size:0.72rem; font-family:var(--font-mono); margin-top:4px;">vs 儿童 0.4 亿</div>
  </div>
  <!-- 4 个 ... -->
</div>

精美点：

背景用 主色0C（12% 透明度）· 边框 主色33（20% 透明度）
数字 900 字重 · 2rem · Mono + 品类色
delta 用更小字号 + Mono，和数字叠加

VocCard · 证据卡

<div style="padding:14px 16px; background:var(--bg-1); border:1px solid var(--border); 
            border-left:3px solid #4A90E2; border-radius:6px;">
  <div style="display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:0.78rem;">
    <div>
      <span class="text-mono" style="color:#4A90E2; font-weight:700; letter-spacing:0.1em;">XHS</span>
      <span style="color:var(--text-3);"> · 小橘子妈妈 · 上海</span>
    </div>
    <div style="color:#4A90E2; font-family:var(--font-mono); font-weight:700;">♥2.3k</div>
  </div>
  <div style="color:var(--text-1); font-size:0.88rem; line-height:1.7;">
    「宝宝 2 岁抗生素后吃了一周，大便好多了，比妈咪爱便宜还不用冷藏」
  </div>
</div>

精美点：

3-4px 品类色 left border（这是视觉识别码，所有报告一致）
顶部 flex 两端：平台 + 昵称 + IP（左）· ♥ 点赞（右）
平台名大写 · Mono · 品类色 · 0.1em letter-spacing
正文用 「」 中文引号包裹 · 行高 1.7 · 字号 0.88rem

3.3 结构组（CompareTable / Matrix2x2 / TheoryBox）

CompareTable · 对比表格

<table style="width:100%; border-collapse:collapse; font-size:0.86rem;">
  <thead>
    <tr style="border-bottom:2px solid #4A90E244;">
      <th style="text-align:left; padding:10px 12px; color:var(--text-3); 
                 font-weight:700; font-size:0.78rem; letter-spacing:0.05em;">维度</th>
      <!-- ... -->
    </tr>
  </thead>
  <tbody>
    <tr style="border-bottom:1px solid var(--border);">
      <td style="padding:10px 12px; color:#4A90E2; font-weight:700;">本品</td>
      <!-- ... -->
    </tr>
  </tbody>
</table>

精美点：

header 底边 2px 主色44，行底边 1px border
本品列整列品类色加粗，对手列用 text-2 淡化
letter-spacing 0.05em 让表头"透气"

Matrix2x2 · 无人地带四象限

关键精美法则：第 4 象限（本品独占）必须用品类色高亮。

<div style="padding:16px; background:#8FD3B80C; border:1px solid #8FD3B833; border-radius:6px;">
  <div class="text-mono text-xs" style="color:#8FD3B8; font-weight:700; margin-bottom:8px;">
    右下 · 家庭 × 便捷（无人地带）
  </div>
  <ul style="margin:0; padding-left:18px; color:var(--text-1); font-size:0.82rem; line-height:1.7;">
    <li><strong>✨ 本品独占</strong></li>
  </ul>
  <div style="color:var(--text-3); font-size:0.76rem; margin-top:8px; font-style:italic;">
    ✅ 机会：分龄装 × 咀嚼片 × 卡通 IP
  </div>
</div>

TheoryBox · 理论盒

用于 KANO / JTBD / 3C 这类理论 mapping，不抢戏但要清晰。

<div style="padding:16px 18px; background:#4A90E208; border-left:3px solid #4A90E2; border-radius:8px;">
  <div class="text-mono text-xs" 
       style="color:#4A90E2; letter-spacing:0.15em; font-weight:700; margin-bottom:10px;">
    📐 KANO 模型 · 五类需求映射
  </div>
  <!-- mapping 内容 -->
</div>

3.4 结论组（InsightHero / DecisionList）

InsightHero · 金句观点卡

<div style="padding:24px 28px; 
            background:linear-gradient(135deg, #4A90E214, #4A90E204); 
            border:2px solid #4A90E244; border-radius:12px; margin:20px 0;">
  <div class="text-mono text-xs" 
       style="color:#4A90E2; letter-spacing:0.2em; margin-bottom:12px; font-weight:700;">
    💡 KEY INSIGHT · 关键洞察
  </div>
  <div style="color:var(--text-1); font-size:1.1rem; line-height:1.8;">
    乳酸菌素片不是"更便宜的益生菌"，而是<strong style="color:#4A90E2;">OTC 药线信任的儿童入口</strong>。
  </div>
</div>

精美点：

135° 渐变背景（主色14 → 主色04）
2px 品类色边框（注意 alpha 44）
金句字号 1.1rem · 行高 1.8 · 至少一个 <strong>

DecisionList · 落地决策

<div style="padding:20px 24px; background:#4A90E208; border:1px solid #4A90E233; border-radius:8px;">
  <div class="text-mono text-xs" 
       style="color:#4A90E2; letter-spacing:0.18em; margin-bottom:14px; font-weight:700;">
    🎯 落地决策
  </div>
  <div class="grid" style="grid-template-columns:1fr 1fr; gap:10px;">
    <div style="padding:10px 14px; background:var(--bg-1); border-left:3px solid #4A90E2; 
                border-radius:4px; color:var(--text-1); font-size:0.86rem; line-height:1.65;">
      <strong>P0 · 产品</strong>：上架分龄装（1-3/3-6/6-12 岁）咀嚼片 SKU
    </div>
    <!-- ... -->
  </div>
</div>

精美点：

决策项左边 3px 品类色 border
每条开头用 <strong>P0 · 动词</strong>（加粗 + 品类色 + 动词化）
2 列布局，避免单列显得稀疏

📊 4. 数据可视化 Pattern

4.1 StatStrip（已讲）

4.2 Progress Bar · 比例条

<div style="margin:8px 0;">
  <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:4px;">
    <span style="color:var(--text-2);">妈咪爱</span>
    <span class="text-mono" style="color:#4A90E2;">62%</span>
  </div>
  <div style="height:6px; background:var(--bg-2); border-radius:3px; overflow:hidden;">
    <div style="height:100%; width:62%; background:linear-gradient(90deg, #4A90E2, #4A90E2cc);"></div>
  </div>
</div>

4.3 Inline Bar Chart（轻量）

<div style="display:flex; align-items:flex-end; gap:4px; height:80px;">
  <div style="flex:1; height:30%; background:#4A90E2; border-radius:2px 2px 0 0;"></div>
  <div style="flex:1; height:50%; background:#4A90E2; border-radius:2px 2px 0 0;"></div>
  <div style="flex:1; height:85%; background:#4A90E2; border-radius:2px 2px 0 0;"></div>
</div>

纪律：尽量不用外部 chart 库。SVG 和纯 div 能画的都别引 Chart.js / ECharts，会破坏单文件无依赖。

4.4 Tag Cloud · 标签云

<div style="display:flex; flex-wrap:wrap; gap:8px;">
  <span style="padding:4px 10px; background:#4A90E214; border:1px solid #4A90E244; 
               border-radius:12px; font-family:var(--font-mono); font-size:0.78rem; 
               color:#4A90E2;">#冷链 · 156</span>
  <!-- ... -->
</div>

4.5 Sankey / Flow Diagram（复杂场景）

如果是"决策链"「家长 → 医生 → 药店 → 购买 → 使用 → 复购」这种流程图，推荐5-6 个方块 + 箭头 Unicode：

<div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
  <div style="padding:8px 14px; background:#4A90E214; border:1px solid #4A90E2;">家长焦虑</div>
  <div style="color:#4A90E2;">→</div>
  <div style="padding:8px 14px; background:#4A90E214; border:1px solid #4A90E2;">搜索</div>
  <!-- ... -->
</div>

🎮 5. 微交互 / 导航

5.1 键盘导航（必装）

(function() {
    const sections = document.querySelectorAll('.report-section');
    let idx = 0;
    function go(i) {
        idx = Math.max(0, Math.min(sections.length - 1, i));
        sections[idx].scrollIntoView({ behavior: 'smooth' });
        if (sections[idx].id) history.replaceState(null, '', '#' + sections[idx].id);
    }
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(idx + 1); }
        if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(idx - 1); }
        if (e.key === 'Home') go(0);
        if (e.key === 'End') go(sections.length - 1);
    });
    if (location.hash) {
        const i = [...sections].findIndex((s) => '#' + s.id === location.hash);
        if (i >= 0) idx = i;
    }
})();

5.2 平滑滚动 + 锚点

html { scroll-behavior: smooth; }
.report-section { scroll-margin-top: 20px; }

5.3 卡片 hover（可选但推荐）

.voc-card { transition: background .15s, border-color .15s; }
.voc-card:hover { background: var(--bg-2); border-color: var(--border-strong); }

5.4 Page Indicator（可选）

在右下角固定一个 slide X / Y 小角标：

<div style="position:fixed; right:20px; bottom:20px; padding:6px 12px; 
            background:var(--bg-2); border:1px solid var(--border); border-radius:4px; 
            font-family:var(--font-mono); font-size:0.78rem; color:var(--text-3); z-index:50;"
     id="page-indicator">1 / 38</div>

配合 JS：

// 在 keydown 或 scroll 事件里更新
document.getElementById('page-indicator').textContent = `${idx+1} / ${sections.length}`;

🖨️ 6. 性能 / 交付优化

6.1 单文件无依赖

必须遵守：

所有 CSS inline 写到 <style>
所有 JS inline 写到 <script>
不引任何外部字体 CDN（font-family 里直接 fallback system-ui）
不引任何图标库（用 Emoji · 🎯💡⚠️✅❌📐📱 足够）
不引任何图表库

6.2 体积控制

报告大小	评价
< 300 KB	可能内容不足 · 审计会打回
300-500 KB	轻量版 · 适合 30-35 slide
500-800 KB	标准版 · 适合 36-42 slide
800 KB-1 MB	旗舰版 · 适合 42+ slide · 7000+ VOC
> 1.2 MB	可能内容冗余 · 考虑拆分

瘦身手法：

VOC 原文裁剪到 200 字符内 + …
重复的 inline style 抽成 .voc-card 类
不 base64 内嵌图片（用 emoji 或 SVG）

6.3 打印友好（可选但加分）

@media print {
    .report-section {
        min-height: auto;
        page-break-after: always;
        padding: 20px;
    }
    body { background: white; color: black; }
    /* 暗色→浅色反转（可选）*/
}

6.4 移动端降级（可选）

@media (max-width: 768px) {
    .report-section { padding: 24px 16px; }
    .grid { grid-template-columns: 1fr !important; }
    .cover-title { font-size: 2rem; }
    .divider-title { font-size: 2.8rem; }
}

✅ 7. 精美验收 Checklist（20 条）

每次 gen 完都过一遍这 20 条。不过关的直接回去改。

🎨 视觉语言（1-7）

1. 三层背景 一致：--bg-0/1/2 贯穿所有 section
2. 三层文字灰阶 不超过：--text-1/2/3，禁 5 种灰
3. 数字全部 Mono：点赞 / 平台名 / 百分比 / 价格 / 时间
4. 字重跨度 清晰：至少有 900/800/700/400 四个层次
5. 8px 网格 对齐：无 13px / 15px / 17px 奇数值
6. 圆角风格 统一：全项目用 4/8/12 三档
7. 品类色 唯一识别：主色占视觉 60%+，辅色 ≤ 3 个

🏗️ 结构 / 布局（8-12）

8. 每 section 占满 100vh，内容居中 max-width 1280
9. Cover + Agenda + 8 Divider 特殊处理（渐变背景 / 大标题）
10. Section Head 三段式 齐全：eyebrow / title / subtitle
11. title 至少 1 个 <strong> 品类色 强调
12. 视觉模块数 ≥ 3：每子章不止文字，至少 3 种模块拼接

🧱 组件质量（13-17）

13. VOC 卡左边 3-4px 品类色 border（所有卡一致）
14. VOC 卡顶部 flex 两端：平台+昵称+IP · ♥赞
15. StatStrip 数字 ≥ 2rem 字号 · 900 字重 · Mono · 品类色
16. Matrix 第 4 象限高亮 品类色（无人地带纪律）
17. DecisionList 每条 P0-P3 优先级 + 动词化开头

🎮 交互 / 交付（18-20）

18. 键盘导航 正常：← → Space Home End
19. 单文件无依赖：inline CSS + JS，无外部字体/图标/chart
20. 体积合理：300-1200 KB · 无空 section · 无 Coming Soon

🔄 8. 从「能跑」到「精美」的升级路径

大部分 AI 初次产出的 HTML 报告只能打到 60 分。升级到 90+ 分的 3 个阶段：

Stage 1 · 结构升级（60 → 75）

加 三段式 Section Head（eyebrow + title + subtitle）
每 section 至少 3 个视觉模块
数字全改 Mono 字体

Stage 2 · 视觉升级（75 → 85）

BRAND 色板换成品类专属
VOC 卡 left border 统一 3px 品类色
InsightHero 金句加渐变背景
Cover + Divider 加 gradient

Stage 3 · 细节升级（85 → 95）

加键盘导航 JS + Page Indicator
微动画：hover / transition
Matrix 第 4 象限高亮纪律
决策列表 P0-P3 + 动词化
打印友好 @media print
移动端降级 @media max-width

🛠️ 9. 工具链推荐

9.1 颜色工具

对比度检查：https://webaim.org/resources/contrastchecker/（主色 vs #0A0A0A 必须 ≥ 4.5）
LAB 色彩距离：https://colorkit.co/color-picker/（辅色离主色 LAB ≥ 30）
调色板生成：https://coolors.co/（输入主色生成 complementary）

9.2 字体 Fallback

中文字体 fallback 顺序（无 CDN 依赖）：

'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif

Mono fallback：

'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace

9.3 本地预览

node scripts/tools/preview-reports.js
# 打开 http://localhost:8787/<品类>-voc-insight-report.html

9.4 审美比对

把当前报告和参考案例并排打开：

肝纯片：reports/jiangzhong-liver-voc-validation-report.html
猴菇饮：reports/jiangzhong-houguyin-voc-insight-report.html
乳酸菌儿童：reports/jiangzhong-lactic-children-voc-insight-report.html

📌 10. 相关资源

视觉模式库：templates/aesthetic-patterns.template.js（20+ 小组件 copy-paste）
精美验收 Checklist：templates/aesthetic-checklist.template.md
启动 prompt：prompts/P6-aesthetic-upgrade.prompt.md
组件骨架：templates/components.template.js
章节骨架：templates/chapter.template.js

版本：v1.0 · 2026-04
作者：基于肝纯片 737 KB · 猴菇饮 604 KB · 乳酸菌儿童版 464 KB 三项目视觉系统沉淀
下一步：读 prompts/P6-aesthetic-upgrade.prompt.md 开始精美升级

07-beautiful-html-aesthetics.md 24 KB Постоянна връзка История Директен файл

Phase 5+ · 精美 HTML 报告生成方法论（跨阶段 · 贯穿 Phase 5/6）

🎯 什么叫「精美」

🎨 1. 视觉设计语言系统

1.1 三层深色背景

1.2 三层文字灰阶

1.3 边框系统

1.4 圆角系统

1.5 字体系统（双字体）

1.6 字重系统

1.7 字号系统（语义化）

1.8 间距系统（8px 网格）

1.9 品类专属主色 · BRAND 调色板

🏗️ 2. Slide-deck 式布局模式

2.1 Section = Slide 原则

2.2 三种特殊 section

Cover 封面

Agenda 目录

Chapter Divider 章分隔

2.3 Grid 布局响应式

2.4 滚动动线 · 4 种节奏

🧱 3. 4 类核心视觉模块

3.1 Section Head（Hero）

3.2 数据组（StatStrip / VocCard）

StatStrip · KPI 数字条

VocCard · 证据卡

3.3 结构组（CompareTable / Matrix2x2 / TheoryBox）

CompareTable · 对比表格

Matrix2x2 · 无人地带四象限

TheoryBox · 理论盒

3.4 结论组（InsightHero / DecisionList）

InsightHero · 金句观点卡

DecisionList · 落地决策

📊 4. 数据可视化 Pattern

4.1 StatStrip（已讲）

4.2 Progress Bar · 比例条

4.3 Inline Bar Chart（轻量）

4.4 Tag Cloud · 标签云

4.5 Sankey / Flow Diagram（复杂场景）

🎮 5. 微交互 / 导航

5.1 键盘导航（必装）

5.2 平滑滚动 + 锚点

5.3 卡片 hover（可选但推荐）

5.4 Page Indicator（可选）

🖨️ 6. 性能 / 交付优化

6.1 单文件无依赖

6.2 体积控制

6.3 打印友好（可选但加分）

6.4 移动端降级（可选）

✅ 7. 精美验收 Checklist（20 条）

🎨 视觉语言（1-7）

🏗️ 结构 / 布局（8-12）

🧱 组件质量（13-17）

🎮 交互 / 交付（18-20）

🔄 8. 从「能跑」到「精美」的升级路径

Stage 1 · 结构升级（60 → 75）

Stage 2 · 视觉升级（75 → 85）

Stage 3 · 细节升级（85 → 95）

🛠️ 9. 工具链推荐

9.1 颜色工具

9.2 字体 Fallback

9.3 本地预览

9.4 审美比对

📌 10. 相关资源

07-beautiful-html-aesthetics.md 24 KB

Постоянна връзка История Директен файл