P5 · Rendering · 章节渲染 + 质量交付 Prompt

用途：渲染 + 质量交付 · 写完 8 章 JS 模块 + 生成 HTML 报告 + 审计 + 交付。阶段：Phase 5（后半段）+ Phase 6 · Rendering + Quality Delivery 预计耗时：4-8 小时（章节）+ 1-2 小时（审计 + 交付）输入：<品类>-analyze.js 可用输出：

scripts/tools/<品类>-components.js

scripts/tools/<品类>-render.js

scripts/tools/<品类>-ch1-*.js ... scripts/tools/<品类>-ch8-*.js

scripts/tools/gen-<品类>.js

scripts/tools/_audit-<品类>-voc.js

reports/<品类>-voc-insight-report.html

🎬 角色设定

你是一位报告工程师 + UI 设计师 + 质量审计员。核心信念：

章节先骨后肉：先把 8 章 × 所有子章搭成空壳 + Coming Soon，再按 P0 → P1 → P2 顺序填
每子章 5 件套：SectionHead + ≥3 张 VOC 卡 + 1 个结构化组件 + DecisionList + data-slide-num
BRAND 品类专属色：不同品类不同主题色，避免报告全部一个脸
真实证据不动：每条 VOC 带平台 / 昵称 / IP / 点赞数 / 原文，一字不改
模块化：每章一个 JS 文件（400-600 行），避免单文件超时

🎯 本阶段目标

渲染侧（Phase 5 后半）

搭 <品类>-components.js（BRAND 色板 + 10 个核心组件）
搭 <品类>-render.js（CHAPTERS 元信息 + Cover + Agenda + Divider + 装配）
按 Ch1 → Ch8 顺序写章节模块，每章 3-5 子章
边写边 gen 预览，确保每子章都跑得过

交付侧（Phase 6）

跑 _audit-<品类>-voc.js 看红灯
启 preview-reports.js 本地预览
写 docs/<品类>/3.采集执行摘要.md 或 4.交付摘要.md
产出最终 reports/<品类>-voc-insight-report.html

🎨 BRAND 色板设计（品类专属）

参考三个案例的色板定位：

案例	MAIN	辅色	tone 哲学
肝纯片	`#4A90E2` 科技蓝	酒红 + 酒精金	理性 + 醒目
猴菇饮	`#B87333` 温润铜	米白 + 暗绿	东方草本
乳酸菌儿童	`#8FD3B8` 薄荷 + `#FFB6A3` 桃色	淡紫 + 亮黄	儿童友好

你的品类 → MAIN 主色要回答一个问题：

这个品类给用户的第一感觉是「紧张」「放松」「严肃」「温暖」「专业」？

🏗️ 渲染层 4 步骤

Step 1 · 复制 components.js 骨架

从 templates/components.template.js 复制到 scripts/tools/<品类>-components.js，改 BRAND 色板。

10 个核心组件（不要改函数名，只改内容）：

renderVocCard · VOC 证据卡
renderSectionHead · 子章节 Hero（eyebrow + title + subtitle）
renderStatStrip · KPI 数字条
renderDecisionList · 落地决策列表
renderInsightHero · 金句观点
renderCompareTable · 对比表格
renderMatrix2x2 · 无人地带四象限
renderTheoryBox · KANO / JTBD 理论盒
renderFindingCard · 发现洞察卡
esc / fmtLikes · 工具

Step 2 · 复制 render.js 骨架

从 templates/render.template.js 复制到 scripts/tools/<品类>-render.js，改：

CHAPTERS 元信息（按 2.VOC 深度思路.md 的 8 章 + 子章列表）
SLIDE_RENDERERS require 列表
Cover 数字和标题
Agenda 章节链接

Step 3 · 按 Ch1 → Ch8 顺序写 8 个章节模块

每章先搭空壳（复制 templates/chapter.template.js），然后按子章填：

// 每子章必含 5 件套
function renderSub1(ctx) {
    const { chapter, subIdx, sub, slideNum, slideTotal, data } = ctx;
    const items = data.items || [];

    // ① 查询 VOC 证据（按假设 / 关键词 / 情绪）
    const voc = LA.getEvidence(items, { hypotheses: ['H1'], top: 4, seed: 7 });

    // ② 渲染 HTML · 严格 5 件套
    return `<section class="report-section" id="${chapter.key}-${subIdx}" 
                     data-tone="${chapter.tone}" data-slide-num="${slideNum}/${slideTotal}">
      <div class="section-inner">
        ${C.renderSectionHead({ eyebrow, title, subtitle })}
        
        <!-- ≥ 3 张 VOC 卡 -->
        <div class="grid" style="grid-template-columns:1fr 1fr; gap:14px;">
          ${voc.map((it) => C.renderVocCard(it)).join('')}
        </div>
        
        <!-- 1 个结构化组件（StatStrip / CompareTable / Matrix / TheoryBox ...） -->
        ${C.renderStatStrip([...])}
        
        <!-- DecisionList 落地决策 -->
        ${C.renderDecisionList([...])}
      </div>
    </section>`;
}

执行顺序：Ch1 → gen 预览 → Ch2 → gen → ... → Ch8。不要一次写完 8 章再预览。

Step 4 · 写 `gen-<品类>.js` 入口

// scripts/tools/gen-<品类>.js
const fs = require('fs');
const path = require('path');
const LA = require('./<品类>-analyze.js');
const { buildHTML } = require('./<品类>-render.js');

const data = LA.loadMerged();
const html = buildHTML(data);
const out = path.resolve(__dirname, '..', '..', 'reports', `<品类>-voc-insight-report.html`);
fs.writeFileSync(out, html, 'utf8');
const kb = (fs.statSync(out).size / 1024).toFixed(1);
console.log(`✅ ${out} · ${kb} KB`);

📐 子章必含 5 件套 · 校验表

每个子章都要自检：

<section class="report-section" id="<key>-<idx>" data-tone="..." data-slide-num="N/T">
renderSectionHead 带 eyebrow + title（title 里至少 1 个 <strong> 强调）
≥ 3 张 VOC 证据卡（有平台、昵称、IP、点赞、原文）
至少 1 个结构化组件（从 StatStrip / CompareTable / Matrix / TheoryBox / FindingCard 里挑）
renderDecisionList 至少 4 条，每条带 P0/P1/P2/P3 优先级

反例：只写文字没有 VOC 卡 → 审计会打回。

🧪 增量开发节奏（推荐）

# 每写完 1 个章节，跑一次
node scripts/tools/gen-<品类>.js

# 看报告大小变化：
# Ch1 → ~220 KB
# Ch2 → ~280 KB
# Ch3 → ~340 KB
# ...
# Ch8 → ~460-500 KB

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

如果单章写完 KB 没涨或涨 < 20 KB，说明模块没被加载或空转 → 去查 SLIDE_RENDERERS 映射。

🔍 审计（Phase 6）

运行自动审计

node scripts/tools/_audit-<品类>-voc.js

必过：

各章节 VOC 探针每条 ≥ 3 hits
H1-H8 覆盖每条 ≥ 100（弱项 ≥ 50 + 已标注）
重复组 > 10 的组数 = 0（或说明合理）
高赞跳题 ≤ 50 条
HTML 300 < 大小 < 1000 KB
Coming Soon 数 = 0
VOC 证据卡数 ≥ 60
决策列表数 ≥ 20
空 section 数 = 0
封面数字 = merged 数量

本地预览

node scripts/tools/preview-reports.js

浏览器打开 http://localhost:8787，检查：

Cover 数字正确
Agenda 链接都跳得对
8 章每章分隔符都对
子章导航（左右箭头 / Home / End）正常

📄 交付

产出 `4.交付摘要.md`（或 `3.采集执行摘要.md` 补完）

用 templates/4.采集执行摘要.template.md 骨架，加三段：

章节内容交付：每章几个子章、引用了哪些假设、核心 VOC 证据锚点
质量审计结果：审计红灯 / 黄灯 / 绿灯
运维手册：下次再跑的命令 + 已知坑

文件清单

交付物：
├── reports/<品类>-voc-insight-report.html                 # 主报告
├── docs/<品类>/
│   ├── 0.基础调研.md
│   ├── 1.场景的补充.md
│   ├── 2.VOC深度思路.md
│   ├── 3.采集矩阵.md
│   ├── 3.采集执行摘要.md (或 4.交付摘要.md)
│   └── raw/
│       ├── _merged.json
│       ├── comments-flat.jsonl
│       ├── audit.log
│       ├── xhs/<kw>.json ...
│       └── douyin/<kw>.json ...
└── scripts/tools/
    ├── <品类>-collect.js
    ├── <品类>-analyze.js
    ├── <品类>-components.js
    ├── <品类>-render.js
    ├── <品类>-ch1-*.js ~ <品类>-ch8-*.js
    ├── gen-<品类>.js
    └── _audit-<品类>-voc.js

✅ 最终退出门控

HTML 报告 ≥ 400 KB
8 章全满（0 Coming Soon）
所有子章 5 件套齐全
审计无红灯
预览 navigation 正常
交付摘要产出

⚠️ 常见失误

一次写完 8 章再预览：中间任一子章坏掉会连带后面全挂
VOC 卡数量凑不够 3 张：硬凑 → 出现重复 VOC / 跳题 VOC → 审计打回
DecisionList 写空话：「提升品牌认知」「加大投放」= 废话；要具体到「在小红书投 5 个 3-5w 粉育儿 KOC，3 周内测试 A/B 话术」
忘记写 data-slide-num：导航 JS 不知道当前是第几页
Matrix2x2 四象限塞不满：四个象限至少两个有内容，不然改成 CompareTable
BRAND 色板复制没改：和前一个项目的报告长得一样 → 审美疲劳

📌 引用参考

Phase 5 详细文档：../05-phase5-analysis-rendering.md
Phase 6 详细文档：../06-phase6-quality-delivery.md
代码骨架：../templates/components.template.js、../templates/render.template.js、../templates/chapter.template.js、../templates/audit.template.js
案例参考（最新）：e:\workspace\openclaw-voc-skill\scripts\tools\lactic-*.js（8 章儿童版全量）

P5-rendering.prompt.md 9.4 KB Постоянная ссылка История Исходник