mcpField
H
html-report-builder

html-report-builder

github.com/thatrebeccarae文档处理187151 次安装24 周前更新
代码仓库

关于 html-report-builder

html-report-builder 是用于制作排版完善的独立 HTML 报告并通过浏览器导出 PDF 的技能，适合审计、绩效分析和策略文档。它提供设计规范、可复用组件及多章节文档结构。

主要功能

  1. 01制作独立 HTML 报告
  2. 02通过浏览器打印为 PDF
  3. 03可复用的报告组件
  4. 04明确的色彩与排版规范
  5. 05多章节文档结构

适用场景

  1. 01编写审计报告
  2. 02呈现绩效分析
  3. 03制作策略文档
  4. 04将 HTML 成果导出为 PDF

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thatrebeccarae/claude-marketing --skill html-report-builder

安装后在 Claude Code 中输入/html-report-builder确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

EXAMPLES.md
LICENSE
REFERENCE.md

详细介绍

HTML 报告生成器

精致的咨询报告，以独立 HTML 文件呈现。可通过浏览器打印为 PDF。

安装

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/html-report-builder ~/.claude/skills/

适用场景

  • 审计报告、绩效分析、战略文档
  • 任何需要专业排版的多章节文档
  • 交付物为报告时（而非幻灯片；制作幻灯片请使用 pro-deck-builder）

快速参考

任务方法
从头创建报告阅读 REFERENCE.md，了解 CSS 和 HTML 模式
添加新组件使用 REFERENCE.md 中的现有组件组合
导出为 PDF在浏览器中打开 → 打印 → 另存为 PDF（Cmd+P）
更新设计令牌编辑 :root 块中的 CSS 自定义属性

开始之前

询问用户：

  1. 报告类型是什么？ 审计、战略、绩效评审、案例研究？
  2. 有多少个章节？ 有助于规划文档结构。
  3. 用户有哪些数据？ 原始数字、API 导出数据、电子表格？
  4. 文件应保存到哪里？ 请用户提供明确路径。

设计系统

颜色令牌
:root {
  /* Dark mode (cover page only) */
  --bg-deep: #141414;
  --bg-surface: #1E1E1E;
  --bg-elevated: #282828;
  --text-bright: #f0f3f6;
  --text-secondary-dark: #9ca3af;

  /* Light mode (content pages — the default) */
  --bg-light: #FAF7F2;
  --bg-light-surface: #F2EDE6;
  --text-primary: #0f0e0e;
  --text-secondary: #57606a;
  --text-muted: #8b949e;

  /* Brand accent */
  --accent: #3D7A5C;
  --accent-light: #6AB88A;

  /* Semantic */
  --green: #2e8b57;
  --red: #c0392b;
  --amber: #D97706;
}
颜色规则
  • 浅色模式（#FAF7F2 暖奶油色）是所有内容页面的默认设置。不要使用白色。
  • 深色模式（#141414）仅用于封面。
  • 点缀绿（#3D7A5C）应谨慎使用：用于关键指标和强调提示框。
  • 语义色（绿色/琥珀色/红色）仅用于状态指示，不能用于装饰。
排版
角色字体字重字号
报告标题SwitzerLight（300）48-64px
章节标题SwitzerRegular（400）28-32px
小节标题SwitzerMedium（500）20-22px
正文SwitzerRegular（400）16-17px
KPI 数字Cartograph CFBold（700）36-48px
数据标签Cartograph CFRegular（400）13px
表格数据Cartograph CFRegular（400）14px

关键规则：

  1. 标题使用 Light（300），不要使用 Bold。 大字号搭配 Light，营造自信、高端的观感。
  2. 所有数字/数据内容均使用 Cartograph CF。 包括 KPI、表格数字和标签。
  3. 标题使用负字距。 -0.03em 至 -0.04em。
  4. 所有大写标签使用正字距。 +0.08em 至 +0.1em。

字体加载：

  • Switzer：可通过 Fontshare CDN 免费使用
  • Cartograph CF：商业字体，通过 local() 加载。回退字体：'JetBrains Mono', 'Consolas', monospace

文档结构

Cover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix

组件库

组件用途
KPI 卡片大号数字 + 标签 + 详细说明
数据表格带等宽数字和严重程度颜色的样式化表格
提示框突出显示见解或结论陈述
建议卡片带影响和工作量徽标的编号行动项
优先级横幅严重/警告/信息提示栏
章节分隔符在主要章节之间进行视觉分隔
项目符号列表使用自定义标记的样式化列表
编号列表使用强调色数字的有序列表

叙述规则

  1. 先给出数字。 先展示指标，再进行解释。
  2. 每个章节只讲一个见解。 如果一个章节提出两个观点，就将其拆分。
  3. 所有内容都要提供基准。 展示指标时必须提供背景信息。
  4. 颜色代表含义。 绿色/琥珀色/红色仅用于绩效指标。
  5. 不要使用白色背景。 始终使用暖奶油色 #FAF7F2。
  6. 标题不要加粗。 报告标题和主视觉标题使用 Switzer Light（300）。

导出 PDF

在 Chrome/Safari 中打开 HTML 文件 → Cmd+P → 另存为 PDF。将页边距设为“无”，并启用“背景图形”。

完整的 CSS 框架和 HTML 模式请参阅 REFERENCE.md。

评论

支持 Markdown