- name
- html-report-slides
- description
- 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。
- version
- 1.1.0
HTML Report Slides — 深蓝科技风单文件汇报稿生成器
用途
把汇报内容（战略规划、成本分析、架构图、产品路线图等）生成为单个 HTML 文件的 PPT 风格页面。每个 slide 是一个 1280×720 的卡片，垂直堆叠，可直接浏览、打印或截图。
核心设计风格
- 暗色科技风：深蓝底
#0a0e1a+ 深蓝渐变 slide 背景 - 渐变标题：白→蓝→紫渐变文字 (
#ffffff → #7cacff → #a78bfa) - 结构化卡片：每个 slide 由多个信息卡片组成，层次清晰
- SVG 架构图：用 SVG 画多层架构图、故事线、连线关系
- 打印友好：加了
@media print样式，可直接打印成 PDF
何时触发此 skill
当用户说以下内容时加载：
- "帮我做一个汇报页面 / 汇报 PPT"
- "把 XX 做成 HTML 汇报 / 深蓝风汇报"
- "需要一个 PPT 风格的单页 / 战略汇报 / 成本汇报"
- "画一个架构全景图"
- "给领导汇报用的稿子"
- 用户明确说 "用上次那种深蓝风格"
工作流
Step 1 — 确认输入
询问用户以下信息（如果未提供）：
- 汇报主题（Title）
- Slide 数量和每页主题（一般 4~6 页够了）
- 每页要放什么内容（数据、观点、决策项、架构图等）
- 输出文件路径（默认放工作区根目录，文件名
<topic>-report.html）
Step 2 — 选用组件模板
根据内容类型选组件（详见 components/ 目录）：
| 内容类型 | 推荐组件 |
|---|---|
| 封面 | cover-slide |
| 多层架构图 | svg-architecture |
| 多条故事线 / 路径 | storylines |
| 关键决策 / 方案对比 | decision-cards |
| 行动项时间轴 | next-steps |
| 数据对比（月对月） | cost-cards + metric-table |
| 预算预估条 | budget-timeline |
| 未来规划（Now/Next） | future-cards |
| 内容待补充 | placeholder-slide |
Step 3 — 组装 HTML
- 从
examples/里选一个最接近的模板（strategy-report.html是战略全景型，cost-report.html是数据对比型），复制过来改内容 - 或从
components/base-template.html起手，拼积木 - 所有颜色、间距、字号必须用
references/design-system.md里的规范值，不要自创 - 每个 slide 要加 footer（品牌名 + 页码
N / Total）
Step 4 — SVG 架构图（重点，容易返工）
如果涉及架构图，务必遵循 references/svg-architecture-rules.md 的原则：
- 所有方块在容器内均匀分布（必须计算间距）
- 所有连线起终点对准方块中心（用 rect 坐标算，不要估算）
- 移动方块后必须检查所有关联连线
- 嵌套分组的内外空间要协调
Step 5 — 预览
- 用
preview_url打开生成的文件给用户看 - 如果部署到静态托管（CloudBase / Vercel / GitHub Pages），URL 加
?v=N避免缓存
Step 6 — 迭代
用户大概率要改几版。每次改完：
- 本地预览确认
- 如果改动了架构图，必须按 Step 4 的清单自检
通用审美偏好（硬性要求）
- 不要包装性标题：不要写"XX 体验优化"、"赋能 XX"这种空话。直接写功能或结论，例如"3 月 → 4 月 模型成本激增"、"迁移到新架构"
- 文案精炼直接：功能导向，不加修饰词
- 产品名脱敏：如果要做成对外版本，内部代号要换成通用名
- 图标：纯文字汇报里可以用简单 unicode 符号（★ ✦ ➜ 等），不要 emoji 表情
- 配色分层但协调：不能大红大紫乱撞
常见返工原因（必须避免）
- 方块分布不均匀 —— 每次加/删元素后必须重新算间距
- SVG 连线没对准方块中心
- 用了 emoji 表情符号（偏好 unicode 几何符号）
- 包装性标题 / 空话套话
- 没加 footer 页码
- slide 宽度不是 1280px
- 忘了渐变标题的
-webkit-background-clip: text
相关文件
references/design-system.md— 颜色、字体、间距规范（必读）references/svg-architecture-rules.md— SVG 架构图布局原则components/base-template.html— 空白起手模板components/README.md— 各类组件片段examples/strategy-report.html— 战略规划型汇报范例examples/cost-report.html— 数据对比型汇报范例
经验积累
后续每次做完汇报，如果有新的套路或踩坑，都追加到本文件末尾。
踩坑记录
- SVG 里计算方块中心坐标时要注意
text-anchor="middle"的文字 x 坐标 = rect.x + rect.width/2，连线坐标也要用这个值才对齐 - cover 页的 badge 和 subtitle 可选，如果内容简洁就只留大标题