# Research HTML Report > 单页研究报告 HTML 生成器（编辑研究风：浅纸底 #fafaf8 + 国际蓝 #002FA7 + JetBrains Mono 编号 + 细边框卡片 + Chart.js）。当用户要产出公司调研、企业尽调、行业研究、产业链分析、竞品分析、赛道研判、政策解读、商业分析、拜访沟通简报等单页 HTML 报告时触发；典型表达如"出一份 XX 公司调研报告""做成 HTML""分析一下这家公司/这个行业给老板看""调研简报"。产出为零构建依赖的单个 .html 文件（CDN 引 Chart.js），写入用户指定的输出目录（默认项目下的产出/ 目录，没有则用当前工作目录）并自动打开。用户明确指定其他风格（PPT、Word、纯白底个股报告、其他模板）时听用户的。 - Skill: `kevin204816/research-html-report` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add kevin204816/research-html-report` - Raw SKILL.md: https://api.skillmd.com/api/skills/kevin204816/research-html-report/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: Kevin204816 (https://skillmd.com/u/kevin204816) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/kevin204816/research-html-report --- # 单页研究报告 HTML（编辑研究风）把一次研究/调研的结果，变成一份**读者 10 分钟内能读完、且读得下去**的单页 HTML：浅纸底、国际蓝、Mono 编号、细边框卡片、Chart.js 图表；零构建依赖，一个 `.html` 文件直接分享。 ## 核心原则 1. **结论先行**：每一屏回答一个问题，标题就是结论，正文是证据。不允许"背景-过程-结论"式汇报顺序。 2. **事实与推测分离**：年报/官网/公告 = 事实，可直接写；市占率/口碑/预测 = 口径，必须标注来源或"公司口径/推测"。页脚固定有来源与免责区。 3. **数字优先**：能用 KPI 卡和图表说的，不用段落。每张图只表达一个观点，图题就是结论句。 4. **信息密度高但克制**：细边框、无阴影堆砌、无 emoji、无渐变装饰；深色卡（`.dark`/`.insight-box`/`.script-box`）全篇不超过 3 处，只用于"必须让读者停下来读"的结论。 5. **研究材料可以有犀利判断**（如"决策者此刻在焦虑什么"），但措辞对事不对人。 ## 工作流 1. 明确受众与用途（自己看 / 老板看 / 会前准备），确定全篇唯一的核心问题。 2. 收集事实并标注来源；信息不足时先检索，不得编造数字。区分：已核实事实 / 对方宣传口径 / 分析推测。 3. `cp assets/template.html "<输出目录>/<主题>-<报告类型>-.html"`，在模板上改，不要从零写 CSS。 4. 按下方"标准结构"取舍章节（不是每份报告都要全部组件，删掉用不上的 section）。 5. 填完自查（见文末清单），然后 `open` 文件确认渲染（macOS；其他系统提示用户打开），再向用户汇报。 ## 标准结构（按需取舍） 1. **Hero**：kicker（英文小标签）+ 大标题（可两行，第二行 ``）+ 副标题（一句话定位，加粗关键词）+ meta 行（成立/总部/关键人物/来源等 4-7 项） 2. **一句话定位 + KPI 数字带**：1 段定位文字 + 4-6 个 `.kpi-cell`；数字下滑/亏损用 `.neg` 3. **洞察框（insight-box）**：紧接 KPI，回答"所以呢"——这是全篇第一个深色停顿点 4. **业务/现状拆解**：`.grid-3` 卡片（板块）+ `.biz-table`（产品/业务表）+ 图表 + 深色案例卡 5. **痛点/问题**：`.pain-grid` 五连格，每格"标题判断 + 证据"，关键数字用 `.hl` 标红 6. **机会/方案/发现**：分组卡片（如 A/B/C 三类），重点卡加 `.reco` + 角标；可配气泡优先级矩阵图 7. **路径/节奏**：`.cut-timeline` 三刀式（近期快赢 → 中期 → 长期），每步写目标、动作、为什么这个顺序 8. **证据弹药**：`.case-table`（同行案例要有硬数据列）+ `.policy-card`（政策/预算，通用场景可换成"标准/规范/对标"） 9. **行动建议/话术**（当报告是为某次沟通准备时）：`.script-box` 深色话术框 + `.talk-steps` 节奏 + DO/DON'T 双卡 10. **Footer**：来源（具体到文件/网站）+ 免责与可信度说明（哪些是事实、哪些未核实）+ 日期 ## 设计规范（已固化在模板 CSS 里，不要改） - 底色 `#fafaf8`（纸张色），正文墨色 `#0a0a0a`，辅助文字 `#525252/#737373`；细边框 `#e0e0e0/#d4d4d2` - 主色国际蓝 `#002FA7`；强调色通过 `` 切换： - `default` 国际蓝（通用研究）｜`fire` 消防橙 `#c2410c`（安全/应急/能源等）｜`green` 墨绿 `#15803d`（制造/ESG）｜`wine` 酒红 `#9f1239`（消费/品牌） - 换主题只改 body 上一个属性，不要手改各组件颜色 - 语义色固定：风险/下滑 `#dc2626`，警告 `#f59e0b`，正向 `#16a34a` - 字体：标题/正文 Inter + PingFang SC；数字与编号 JetBrains Mono；标题用细字重 200-300 配大字号，这是"编辑感"的来源 - 编号：章节 `01/02…` mono 字距 0.2em；表格首列也是 mono 小编号 - 图表（Chart.js）：柱图单色不彩虹（正负值分红蓝/绿红）；tooltip 带中文单位；端点直接标数值；禁双轴；气泡矩阵必须画象限标签 - 图表加载有 jsdelivr → unpkg 双源 fallback，不要删那段 loader - 响应式与 @media print 已内置；新增组件记得在 900px 断点里补单列降级 ## 常用组件速查模板中都有现成示例，复制改字即可：`kpi-row` / `card(.dark)` / `biz-table` / `pain-grid` / `opp-card(.reco)`+难度圆点 / `cut-timeline` / `case-table`（含 num-cell 硬数据列）/ `policy-card` / `script-box`（话术）/ `talk-steps` / `insight-box` / `chip-row`。需要模板里没有的组件时：先用现有组件组合；必须新写时遵守同一套 token（间距用 --sp-*、边框不用阴影、标签用 mono 大写字距），并把可复用的新组件回补到模板里。 ## 图表代码注意 - 柱状图背景色函数判断负值（模板已写好），财务图万元为单位、Y 轴回调成"亿" - 气泡标签插件写法（注意运算符优先级，曾踩坑）：直接 `ctx.fillText(d.name, el.x, el.y - r - 4)` 用整名，不要写 `split(' ')[0] + ' ' + split(' ')[1] || name`，名字没空格时会打出 "undefined" - 气泡坐标：x=落地难度（越大越难），y=业务价值；r=对读者/决策的重要性；三个 dataset 分组着色 ## 完成前自查清单 1. 标题/副标题是否一句话说清了结论？读者只看 hero 和各 insight 框能否拿走全部核心判断？ 2. 每个数字是否有出处？宣传口径与官方口径是否分别标注？页脚来源是否具体可追溯？ 3. 图表是否真的支持结论（不是凑数）？本地打开后图表是否渲染、标签有无 undefined/重叠？ 4. 深色块是否 ≤3 处？是否有 emoji/渐变/阴影等风格违规？主题色是否与主题匹配？ 5. 用不上的章节与 `{{}}` 占位符、示例文案是否已删干净（模板自带示例内容不得残留）？ 6. 文件名是否含日期、是否已自动打开？ 7. 打印一份试试（Cmd+P）：深色块反色是否可读、是否有内容被截断。