Skill: dengjiawei1226/html-report-slides (version 2.0.0)

--- name: html-report-slides description: 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。 version: 2.0.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 风格的单页 / 战略汇报 / 成本汇报" - "画一个 Platform / Cloud Platform架构全景图" - "给领导汇报用的稿子" - 主人明确说 "用我之前那种风格" ## 工作流 ### Step 1 — 确认输入 问主人以下信息（如果他没给）： 1. **汇报主题**（Title） 2. **Slide 数量和每页主题**（一般 4~6 页够了） 3. **每页要放什么内容**（数据、观点、决策项、架构图等） 4. **输出文件路径**（默认放工作区根目录，文件名 `<topic>-report.html`） ### Step 2 — 选用组件模板 根据内容类型选组件（详见 `components/` 目录）： | 内容类型 | 推荐组件 | |---|---| | 封面 | `cover-slide` | | 多层架构图（如云产品 / Agent / 触达层）| `svg-architecture` | | 多条故事线 / 路径 | `storylines` | | 关键决策 / 方案对比 | `decision-cards` | | 行动项时间轴 | `next-steps` | | 数据对比（月对月）| `cost-cards` + `metric-table` | | 预算预估条 | `budget-timeline` | | 未来规划（Now/Next）| `future-cards` | | 内容待补充 | `placeholder-slide` | ### Step 3 — 组装 HTML 1. 从 `examples/` 里选一个最接近的模板（`report.html` 是战略全景型，`cost-report.html` 是数据对比型），复制过来改内容 2. 或从 `components/base-template.html` 起手，拼积木 3. 所有颜色、间距、字号必须用 `references/design-system.md` 里的规范值，不要自创 4. 每个 slide 要加 footer（品牌名 + 页码 `N / Total`） ### Step 4 — SVG 架构图（重点，容易返工） 如果涉及架构图，务必遵循 `references/svg-architecture-rules.md` 的原则： - 所有方块在容器内**均匀分布**（必须计算间距） - 所有连线**起终点对准方块中心**（用 rect 坐标算，不要估算） - 移动方块后必须检查所有关联连线 - 嵌套分组的内外空间要协调 ### Step 5 — 预览 - 用 `preview_url` 打开生成的文件给主人看 - 如果部署到 CloudBase，用 `uploadFiles` MCP；URL 加 `?v=N` 避免缓存 ### Step 6 — 迭代 主人大概率要改几版。每次改完： - 本地预览确认 - 如果改动了架构图，必须按 Step 4 的清单自检 ## 主人的审美偏好（硬性要求） - **不要包装性标题**：不要写"XX 体验优化"、"赋能 XX"这种。直接写功能或结论，例如"3 月 → 4 月 模型成本激增"、"迁移到 CloudAgent" - **文案精炼直接**：功能导向，不加修饰词 - **内部产品脱敏**：如果要做成对外版本，VPC→云网络服务、CBS→云存储服务、人名隐去 - **图标**：纯文字汇报里可以用简单 unicode 符号（&#9733; &#9881; &#10145; 等），不要 emoji 表情 - **配色要分层但协调**：不能大红大紫乱撞 ## 常见返工原因（必须避免） 1. 方块分布不均匀 —— 每次加/删元素后必须重新算间距 2. SVG 连线没对准方块中心 3. 用了 emoji 表情符号（主人偏好 unicode 几何符号） 4. 包装性标题 / 空话套话 5. 没加 footer 页码 6. slide 宽度不是 1280px 7. 忘了渐变标题的 `-webkit-background-clip: text` ## 相关文件 - `references/design-system.md` — 颜色、字体、间距规范（必读） - `references/svg-architecture-rules.md` — SVG 架构图布局原则 - `components/base-template.html` — **完整起手模板（含 CSS 变量 + 导航 + 动画 + 打印 + 响应式）** - `components/cover-slide.html` — 封面页片段 - `components/svg-architecture.html` — 多层架构图片段 - `components/storylines.html` — 故事线片段 - `components/decision-cards.html` — 决策卡片片段 - `components/next-steps.html` — 行动项时间轴片段 - `components/cost-cards.html` — 成本 KPI 卡片片段 - `components/metric-table.html` — 数据对比表片段 - `components/budget-timeline.html` — 预算进度条片段 - `components/future-cards.html` — Now/Next 规划片段 - `components/placeholder-slide.html` — 占位页片段 - `examples/report.html` — 战略规划型汇报范例 - `examples/cost-report.html` — 数据对比型汇报范例 ## 经验积累 本 skill 由主人多次实战汇报后沉淀。后续每次做完汇报，如果有新的套路或踩坑，都追加到本文件末尾。 ### 踩坑记录 - 2026-04-22：SVG 里计算方块中心坐标时要注意 `text-anchor="middle"` 的文字 x 坐标 = rect.x + rect.width/2，连线坐标也要用这个值才对齐 - 2026-04-22：cover 页的 badge 和 subtitle 可选，如果内容简洁就只留大标题 ### v2.0 升级记录（2026-05-08） - **CSS 变量系统**：所有颜色/间距提取为 custom properties，换肤只改 `:root` - **亮色主题**：`body.light` class 切换，投影仪场景友好 - **导航系统**：右侧圆点导航 + 顶部进度条 + 键盘↑↓←→翻页 + 空格翻页 - **入场动画**：IntersectionObserver 触发 fadeInUp，子元素错开延迟 - **响应式**：`max-width: 100%` + 小屏断点适配 - **完整打印样式**：文字改黑、背景改白、渐变块转边框、隐藏导航控件 - **PDF 导出按钮**：右上角 `window.print()` 一键导出 - **字体优化**：preload + fallback，离线也能正常渲染 - **metric-table/metric-row**：class 化表格，替代 inline style 噩梦 - **10 个独立组件片段**：真正可复制粘贴的 HTML 文件，告别 copy-paste 整文件


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)