{"id":"0c1f5430-f84e-4ee9-a9c1-e4befa1a3877","entityType":"agent","slug":"clawhub-dengjiawei1226-html-report-slides","name":"Html Report Slides","canonicalUrl":"https://www.xpersona.co/agent/clawhub-dengjiawei1226-html-report-slides","canonicalPath":"/agent/clawhub-dengjiawei1226-html-report-slides","generatedAt":"2026-10-11T15:19:50.612Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T12:54:28.461Z","emptyReason":null},"description":"生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。 Skill: Html Report Slides Owner: dengjiawei1226 Summary: 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。 Tags: dashboard:1.1.0, html:1.1.0, latest:2.0.0, ppt:1.1.0, report:1.1.0, slides:1.1.0, tech-style:1.1.0 Version history: v2.0.0 | 2026-05-08T06:41:36.714Z | user v2.0: CSS variables system, light/dark theme","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s171z5dmkr3hr6e5vrt1whgtt583m22s:html-report-slides","sourceUrl":"https://clawhub.ai/dengjiawei1226/html-report-slides","homepage":"https://clawhub.ai/dengjiawei1226/skills/html-report-slides","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/dengjiawei1226/html-report-slides","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/dengjiawei1226/skills/html-report-slides","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。 Skil"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:54:28.461Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:54:28.461Z","emptyReason":null},"stars":null,"forks":null,"downloads":1062,"packageName":null,"latestVersion":"2.0.0","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:54:28.447Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T12:54:28.461Z","lastCrawledAt":"2026-10-11T12:54:28.447Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T12:54:28.447Z","lastVerifiedAt":null,"highlights":[{"version":"2.0.0","createdAt":"2026-05-08T06:41:36.714Z","changelog":"v2.0: CSS variables system, light/dark theme toggle, navigation dots + keyboard controls, entrance animations, responsive layout, complete print/PDF styles, one-click PDF export button, 10 independent component snippets","fileCount":21,"zipByteSize":41483},{"version":"1.1.0","createdAt":"2026-04-22T03:18:41.495Z","changelog":"v1.1.0: 新增 README.md 和 LICENSE，同步开源到 GitHub (https://github.com/dengjiawei1226/html-report-slides)。","fileCount":10,"zipByteSize":30536},{"version":"1.0.0","createdAt":"2026-04-22T02:35:54.016Z","changelog":"初版发布：深蓝科技风 HTML 单页汇报稿生成器","fileCount":9,"zipByteSize":28669}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s171z5dmkr3hr6e5vrt1whgtt583m22s:html-report-slides","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T15:19:50.611Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T12:54:28.461Z","emptyReason":null},"readme":"Skill: Html Report Slides\n\nOwner: dengjiawei1226\n\nSummary: 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。\n\nTags: dashboard:1.1.0, html:1.1.0, latest:2.0.0, ppt:1.1.0, report:1.1.0, slides:1.1.0, tech-style:1.1.0\n\nVersion history:\n\nv2.0.0 | 2026-05-08T06:41:36.714Z | user\n\nv2.0: CSS variables system, light/dark theme toggle, navigation dots + keyboard controls, entrance animations, responsive layout, complete print/PDF styles, one-click PDF export button, 10 independent component snippets\n\nv1.1.0 | 2026-04-22T03:18:41.495Z | user\n\nv1.1.0: 新增 README.md 和 LICENSE，同步开源到 GitHub (https://github.com/dengjiawei1226/html-report-slides)。\n\nv1.0.0 | 2026-04-22T02:35:54.016Z | user\n\n初版发布：深蓝科技风 HTML 单页汇报稿生成器\n\nArchive index:\n\nArchive v2.0.0: 21 files, 41483 bytes\n\nFiles: components/base-template.html (26658b), components/budget-timeline.html (1163b), components/cost-cards.html (1045b), components/cover-slide.html (836b), components/decision-cards.html (1571b), components/future-cards.html (812b), components/metric-table.html (1546b), components/next-steps.html (1189b), components/placeholder-slide.html (1010b), components/README.md (1813b), components/storylines.html (2087b), components/svg-architecture.html (3831b), examples/cost-report.html (26097b), examples/README.md (1385b), examples/report.html (29090b), README.md (3084b), references/design-system.md (5539b), references/svg-architecture-rules.md (5153b), skill-card.md (2440b), SKILL.md (6797b), _meta.json (137b)\n\nFile v2.0.0:SKILL.md\n\n---\nname: html-report-slides\ndescription: 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。\nversion: 2.0.0\n---\n\n# HTML Report Slides — 深蓝科技风单文件汇报稿生成器\n\n## 用途\n\n把汇报内容（战略规划、成本分析、架构图、产品路线图等）生成为**单个 HTML 文件**的 PPT 风格页面。每个 slide 是一个 1280×720 的卡片，垂直堆叠，可直接浏览、打印或截图。\n\n## 核心设计风格\n\n- **暗色科技风**：深蓝底 `#0a0e1a` + 深蓝渐变 slide 背景\n- **渐变标题**：白→蓝→紫渐变文字 (`#ffffff → #7cacff → #a78bfa`)\n- **结构化卡片**：每个 slide 由多个信息卡片组成，有清晰层次\n- **SVG 架构图**：用 SVG 画多层架构图、故事线、连线关系\n- **打印友好**：加了 `@media print` 样式，可直接打印成 PDF\n\n## 何时触发此 skill\n\n当用户说以下内容时加载：\n- \"帮我做一个汇报页面 / 汇报 PPT\"\n- \"把 XX 做成 HTML 汇报 / 深蓝风汇报\"\n- \"需要一个 PPT 风格的单页 / 战略汇报 / 成本汇报\"\n- \"画一个 Platform / Cloud Platform架构全景图\"\n- \"给领导汇报用的稿子\"\n- 主人明确说 \"用我之前那种风格\"\n\n## 工作流\n\n### Step 1 — 确认输入\n问主人以下信息（如果他没给）：\n1. **汇报主题**（Title）\n2. **Slide 数量和每页主题**（一般 4~6 页够了）\n3. **每页要放什么内容**（数据、观点、决策项、架构图等）\n4. **输出文件路径**（默认放工作区根目录，文件名 `-report.html`）\n\n### Step 2 — 选用组件模板\n\n根据内容类型选组件（详见 `components/` 目录）：\n\n| 内容类型 | 推荐组件 |\n|---|---|\n| 封面 | `cover-slide` |\n| 多层架构图（如云产品 / Agent / 触达层）| `svg-architecture` |\n| 多条故事线 / 路径 | `storylines` |\n| 关键决策 / 方案对比 | `decision-cards` |\n| 行动项时间轴 | `next-steps` |\n| 数据对比（月对月）| `cost-cards` + `metric-table` |\n| 预算预估条 | `budget-timeline` |\n| 未来规划（Now/Next）| `future-cards` |\n| 内容待补充 | `placeholder-slide` |\n\n### Step 3 — 组装 HTML\n\n1. 从 `examples/` 里选一个最接近的模板（`report.html` 是战略全景型，`cost-report.html` 是数据对比型），复制过来改内容\n2. 或从 `components/base-template.html` 起手，拼积木\n3. 所有颜色、间距、字号必须用 `references/design-system.md` 里的规范值，不要自创\n4. 每个 slide 要加 footer（品牌名 + 页码 `N / Total`）\n\n### Step 4 — SVG 架构图（重点，容易返工）\n\n如果涉及架构图，务必遵循 `references/svg-architecture-rules.md` 的原则：\n- 所有方块在容器内**均匀分布**（必须计算间距）\n- 所有连线**起终点对准方块中心**（用 rect 坐标算，不要估算）\n- 移动方块后必须检查所有关联连线\n- 嵌套分组的内外空间要协调\n\n### Step 5 — 预览\n\n- 用 `preview_url` 打开生成的文件给主人看\n- 如果部署到 CloudBase，用 `uploadFiles` MCP；URL 加 `?v=N` 避免缓存\n\n### Step 6 — 迭代\n\n主人大概率要改几版。每次改完：\n- 本地预览确认\n- 如果改动了架构图，必须按 Step 4 的清单自检\n\n## 主人的审美偏好（硬性要求）\n\n- **不要包装性标题**：不要写\"XX 体验优化\"、\"赋能 XX\"这种。直接写功能或结论，例如\"3 月 → 4 月 模型成本激增\"、\"迁移到 CloudAgent\"\n- **文案精炼直接**：功能导向，不加修饰词\n- **内部产品脱敏**：如果要做成对外版本，VPC→云网络服务、CBS→云存储服务、人名隐去\n- **图标**：纯文字汇报里可以用简单 unicode 符号（★ ⚙ ➡ 等），不要 emoji 表情\n- **配色要分层但协调**：不能大红大紫乱撞\n\n## 常见返工原因（必须避免）\n\n1. 方块分布不均匀 —— 每次加/删元素后必须重新算间距\n2. SVG 连线没对准方块中心\n3. 用了 emoji 表情符号（主人偏好 unicode 几何符号）\n4. 包装性标题 / 空话套话\n5. 没加 footer 页码\n6. slide 宽度不是 1280px\n7. 忘了渐变标题的 `-webkit-background-clip: text`\n\n## 相关文件\n\n- `references/design-system.md` — 颜色、字体、间距规范（必读）\n- `references/svg-architecture-rules.md` — SVG 架构图布局原则\n- `components/base-template.html` — **完整起手模板（含 CSS 变量 + 导航 + 动画 + 打印 + 响应式）**\n- `components/cover-slide.html` — 封面页片段\n- `components/svg-architecture.html` — 多层架构图片段\n- `components/storylines.html` — 故事线片段\n- `components/decision-cards.html` — 决策卡片片段\n- `components/next-steps.html` — 行动项时间轴片段\n- `components/cost-cards.html` — 成本 KPI 卡片片段\n- `components/metric-table.html` — 数据对比表片段\n- `components/budget-timeline.html` — 预算进度条片段\n- `components/future-cards.html` — Now/Next 规划片段\n- `components/placeholder-slide.html` — 占位页片段\n- `examples/report.html` — 战略规划型汇报范例\n- `examples/cost-report.html` — 数据对比型汇报范例\n\n## 经验积累\n\n本 skill 由主人多次实战汇报后沉淀。后续每次做完汇报，如果有新的套路或踩坑，都追加到本文件末尾。\n\n### 踩坑记录\n\n- 2026-04-22：SVG 里计算方块中心坐标时要注意 `text-anchor=\"middle\"` 的文字 x 坐标 = rect.x + rect.width/2，连线坐标也要用这个值才对齐\n- 2026-04-22：cover 页的 badge 和 subtitle 可选，如果内容简洁就只留大标题\n\n### v2.0 升级记录（2026-05-08）\n\n- **CSS 变量系统**：所有颜色/间距提取为 custom properties，换肤只改 `:root`\n- **亮色主题**：`body.light` class 切换，投影仪场景友好\n- **导航系统**：右侧圆点导航 + 顶部进度条 + 键盘↑↓←→翻页 + 空格翻页\n- **入场动画**：IntersectionObserver 触发 fadeInUp，子元素错开延迟\n- **响应式**：`max-width: 100%` + 小屏断点适配\n- **完整打印样式**：文字改黑、背景改白、渐变块转边框、隐藏导航控件\n- **PDF 导出按钮**：右上角 `window.print()` 一键导出\n- **字体优化**：preload + fallback，离线也能正常渲染\n- **metric-table/metric-row**：class 化表格，替代 inline style 噩梦\n- **10 个独立组件片段**：真正可复制粘贴的 HTML 文件，告别 copy-paste 整文件\n\nFile v2.0.0:components/README.md\n\n# 组件目录\n\n所有样式已内置在 `base-template.html` 的 CSS 变量系统中。组件片段只需复制 HTML 到 slide 内即可使用。\n\n---\n\n## 组件列表\n\n| 文件 | 用途 | 适用场景 |\n|---|---|---|\n| `base-template.html` | 完整起手模板 | 新建任何汇报 |\n| `cover-slide.html` | 封面页 | 每份汇报第一页 |\n| `svg-architecture.html` | 多层架构图 | 系统拓扑、产品全景 |\n| `storylines.html` | 故事线 / 策略路径 | 2~4 条并行路线 |\n| `decision-cards.html` | 决策卡片 / 方案对比 | 待决策事项 |\n| `next-steps.html` | 行动项时间轴 | 里程碑、排期 |\n| `cost-cards.html` | 成本 KPI 卡片 | 月对月数据概览 |\n| `metric-table.html` | 数据对比表 | 多行多列指标对比 |\n| `budget-timeline.html` | 预算进度条 | 预算占比/使用率 |\n| `future-cards.html` | Now / Next 规划 | 现状 vs 规划 |\n| `placeholder-slide.html` | 占位页 | 内容待补充 |\n\n---\n\n## 使用方式\n\n1. 复制 `base-template.html` 作为新文件\n2. 替换所有 `__PLACEHOLDER__` 占位符\n3. 按需从上表选择组件，复制其 HTML 到对应 slide 的内容区域\n4. 组件的 CSS 已全部内置在 base-template 中，无需额外引入\n\n---\n\n## v2.0 新增能力（2026-05-08）\n\n- **CSS 变量系统**：所有颜色/间距集中管理，支持一键换肤\n- **亮色主题**：`` 切换投影仪友好模式\n- **导航系统**：右侧圆点导航 + 顶部进度条 + 键盘上下翻页\n- **入场动画**：IntersectionObserver 驱动的 fadeInUp 效果\n- **响应式**：笔记本/平板自适应缩放\n- **PDF 导出**：一键按钮 + 完整打印样式（文字改黑、背景改白）\n- **字体优化**：preload + 离线 fallback\n- **metric-table class**：替代 inline style 的表格样式\n\nFile v2.0.0:examples/README.md\n\n# Examples\n\n两个主人实际用过的汇报范例，可以直接参考或复制改内容。\n\n## report.html — 战略规划型汇报\n\n**主题**：Platform AI 能力全景图 & 故事线规划\n\n**结构**：\n- Slide 1：封面（只有大标题）\n- Slide 2：**SVG 架构图**（5 层：云产品 / 支撑层 / Agent 层 / 触达层 / 用户）+ 3 条故事线连线\n- Slide 3：三条故事线卡片详解（WB 线 / claw 线 / skill 线）\n- Slide 4：关键决策（decision-cards）\n\n**适合复用场景**：战略汇报、架构设计、产品规划、能力全景图\n\n## cost-report.html — 数据对比型汇报\n\n**主题**：ProductA 模型成本追加专题汇报\n\n**结构**：\n- Slide 1：封面（带 badge、meta 信息）\n- Slide 2：成本对比（cost-cards + budget-banner + metric-table + conclusion-banner）\n- Slide 3：Placeholder 占位页（素材待补充）\n- Slide 4：未来规划（budget-timeline + future-cards）\n\n**适合复用场景**：成本分析、月度汇报、数据对比、预算申请\n\n## 使用建议\n\n1. 新做汇报时，从两个范例里挑一个最接近的**整体复制**\n2. 替换封面、标题、页脚\n3. 按需增删 slide，组件片段在 `../components/README.md`\n4. 严格按 `../references/design-system.md` 的规范值改颜色和间距\n5. 如果涉及架构图，务必读 `../references/svg-architecture-rules.md`\n\nFile v2.0.0:README.md\n\n# html-report-slides\n\nA single-file HTML report generator with a dark tech-style aesthetic. Perfect for strategy presentations, architecture overviews, cost analyses, and roadmap slides.\n\n## Features (v2.0)\n\n- **CSS Variables System** — All colors, spacing, and typography centralized in `:root`\n- **Dark + Light Theme** — Toggle with `body.light` class for projector-friendly mode\n- **Navigation** — Right-side dot nav + top progress bar + keyboard arrows/space\n- **Entrance Animations** — IntersectionObserver-driven fadeInUp with staggered delays\n- **Responsive** — Adapts from 1280px slides down to tablet/laptop viewports\n- **Print/PDF Ready** — Complete print stylesheet + one-click export button\n- **10 Component Snippets** — Copy-paste HTML fragments for common slide patterns\n\n## Quick Start\n\n1. Copy `components/base-template.html` as your new report file\n2. Replace all `__PLACEHOLDER__` values with your content\n3. Pick components from `components/` directory and paste them into your slides\n4. Open in browser — done!\n\n## Directory Structure\n\n```\nhtml-report-slides/\n├── SKILL.md # AI skill definition (triggers, workflow)\n├── components/\n│ ├── base-template.html # Full starter template (CSS vars + nav + animation)\n│ ├── cover-slide.html # Title/cover page\n│ ├── svg-architecture.html # Multi-layer architecture diagram\n│ ├── storylines.html # Strategy paths / storylines\n│ ├── decision-cards.html # A/B decision comparison\n│ ├── next-steps.html # Timeline / action items\n│ ├── cost-cards.html # KPI metric cards\n│ ├── metric-table.html # Data comparison table\n│ ├── budget-timeline.html # Budget progress bars\n│ ├── future-cards.html # Now vs Next planning\n│ ├── placeholder-slide.html # Placeholder for TBD content\n│ └── README.md # Component index\n├── references/\n│ ├── design-system.md # Color, typography, spacing specs\n│ └── svg-architecture-rules.md # SVG layout principles\n└── examples/\n ├── report.html # Strategy overview example\n └── cost-report.html # Cost analysis example\n```\n\n## Design System Highlights\n\n| Element | Value |\n|---|---|\n| Background | `#0a0e1a` (dark) / `#f5f7fa` (light) |\n| Title Gradient | `#ffffff → #7cacff → #a78bfa` |\n| Slide Size | 1280×720px (responsive) |\n| Font | Inter + PingFang SC fallback |\n| Accent Colors | Blue `#5070ff` · Purple `#7c3aed` · Green `#10b981` · Orange `#f59e0b` |\n\n## Trigger Phrases (for AI assistants)\n\n- \"Make a report page / presentation\"\n- \"Create an HTML slide deck\"\n- \"Tech-style dark presentation\"\n- \"Architecture overview slide\"\n- \"Cost analysis report\"\n\n## Installation\n\n### As a WorkBuddy/Claw Skill\n```bash\nclawhub install html-report-slides\n```\n\n### Manual\nClone this repo and copy `components/base-template.html` to start.\n\n## License\n\nMIT-0 (No attribution required)\n\nFile v2.0.0:_meta.json\n\n{\n \"ownerId\": \"kn7dr93fbgrvymnk8d9r9y0tws83mhrk\",\n \"slug\": \"html-report-slides\",\n \"version\": \"2.0.0\",\n \"publishedAt\": 1778222496714\n}\n\nFile v2.0.0:references/design-system.md\n\n# 设计系统规范\n\n所有颜色、字体、间距必须严格使用下列定义，不要自创。\n\n## 1. 基础色板\n\n### 背景色\n```css\nbody: #0a0e1a /* 最外层底色 */\nslide background: linear-gradient(135deg, #0f1629 0%, #1a1f3a 50%, #0f1629 100%)\nslide border: 1px solid rgba(100, 140, 255, 0.15)\nslide shadow: 0 20px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(80, 120, 255, 0.08)\nslide glow (::before): radial-gradient(circle, rgba(80, 120, 255, 0.06) 0%, transparent 70%)\n```\n\n### 文字色\n```css\n主文本: #e0e6f0\n次要文本: #8899bb / #7788aa\n辅助文字: #5a6a8a / #3a4a6a\n白高光: #ffffff\n```\n\n### 主题色（必须成对使用）\n\n| 主题 | 主色 | 次色 | 文字色 | 背景 rgba |\n|---|---|---|---|---|\n| 蓝（Blue / Reach 层） | `#5070ff` | `#7cacff` | `#a0b4ff` | `rgba(80,112,255,0.12)` |\n| 紫（Purple / Agent 层） | `#7c3aed` | `#a78bfa` | `#c4b5fd` | `rgba(124,58,237,0.12)` |\n| 绿（Green / User 层、Now） | `#10b981` | `#34d399` | `#6ee7b7` / `#95d5b2` | `rgba(16,185,129,0.12)` |\n| 橙（Orange / Support、Next） | `#ea580c` / `#f59e0b` | `#fbbf24` | `#fed7aa` / `#fcd34d` | `rgba(234,88,12,0.12)` |\n| 灰（Gray / Cloud 层 / Baseline） | `#475569` / `#64748b` | `#94a3b8` | `#cbd5e1` | `rgba(100,116,139,0.15)` |\n| 红（Red / 警示 / 成本增加） | `#ef4444` | `#fb923c` | `#fca5a5` / `#fecaca` | `rgba(239,68,68,0.08)` |\n\n### 渐变（Gradient）\n```css\n标题渐变（白紫蓝）: linear-gradient(135deg, #ffffff 0%, #7cacff 50%, #a78bfa 100%)\n小标题强调（蓝紫）: linear-gradient(135deg, #5070ff, #a78bfa)\n用户层标签: linear-gradient(135deg, #2d6a4f, #40916c)\n触达层标签: linear-gradient(135deg, #5070ff, #3a5ce0)\nAgent 层标签: linear-gradient(135deg, #7c3aed, #6d28d9)\n支撑层标签: linear-gradient(135deg, #c2410c, #ea580c)\n云产品层标签: linear-gradient(135deg, #475569, #64748b)\n红色数值: linear-gradient(135deg, #fca5a5, #ef4444)\n橙红百分比: linear-gradient(135deg, #fb923c, #ef4444)\n```\n\n## 2. 字体\n\n```css\nfont-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;\n```\n\n从 Google Fonts 引入 Inter：\n```html\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n```\n\n## 3. 字号层级\n\n| 用途 | 字号 | font-weight |\n|---|---|---|\n| 封面大标题 | 52px | 800 |\n| 封面副标题 | 20~22px | 400 |\n| slide 编号 | 12px | 600 |\n| slide 主标题 | 34~36px | 700 |\n| slide 副标题 | 15px | 400 |\n| 区块标题（H3）| 17~20px | 700 |\n| 卡片标题 | 15~17px | 700 |\n| 数值大字 | 26~52px | 800 |\n| 正文 | 13~14px | 400~500 |\n| 标签/tag | 11~12px | 600~700 |\n| footer | 11px | 400 |\n\n## 4. 间距 & 容器\n\n```css\nslide 宽度: 1280px（固定）\nslide 最小高度: 720px\nslide padding: 60px 70px（封面） / 40px 50px（内容页）\nslide 上下边距: margin: 40px auto\nslide 圆角: border-radius: 20px\n\n卡片圆角: 14~16px\n小组件圆角: 8~10px\n按钮/标签圆角: 4~8px\n\ngap 规范:\n slide 内部区块间: 20~32px\n 卡片网格 gap: 16~24px\n 图标与文字: 6~10px\n```\n\n## 5. 组件通用样式\n\n### 卡片基础\n```css\nbackground: rgba(255,255,255,0.03);\nborder-radius: 14~16px;\nborder: 1px solid rgba(255,255,255,0.06~0.08);\npadding: 20~28px;\n```\n\n### 卡片 hover 效果（可选）\n```css\ntransition: transform 0.2s;\n&:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\n```\n\n### 左侧彩色条（storyline 专用）\n```css\n.storyline::before {\n content: '';\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 4px;\n background: linear-gradient(180deg, <主色>, <次色>);\n}\n```\n\n## 6. Footer（每个 slide 必加）\n\n```html\n
\n 品牌名 / 主题名\n N / Total\n
\n```\n\n```css\nposition: absolute;\nbottom: 20px;\nleft: 70px; right: 70px;\ndisplay: flex; justify-content: space-between; align-items: center;\ncolor: #3a4a6a;\nfont-size: 11px;\n```\n\n## 7. 打印优化（必加）\n\n```css\n@media print {\n body { background: #fff; }\n .slide { box-shadow: none; border: 1px solid #ddd; }\n}\n```\n\n## 8. 图标用法\n\n- **首选** Unicode 几何符号：`★` ★ `⚙` ⚙ `⚡` ⚡ `➜` ➜ `➡` ➡ `⇄` ⇄ `📝` 📝\n- **禁用**彩色 emoji 表情（😀🎉💡 这类）\n- 文字汇报中图标用 24~40px，放在卡片左上作为视觉引导\n\n## 9. CSS 变量系统（v2.0+）\n\n从 v2.0 起，所有颜色/间距/字号统一用 CSS custom properties 管理。\n\n### 使用方式\n```css\n/* 引用变量 */\ncolor: var(--color-blue);\nbackground: var(--bg-card);\nborder-radius: var(--card-radius);\n```\n\n### 亮色主题切换\n```html\n\n\n\n\n\n```\n\n### 完整变量清单\n见 `components/base-template.html` 的 `:root` 块。改色只需改这一个地方。\n\n## 10. 交互能力（v2.0+）\n\n- **键盘翻页**：↑↓←→ 和空格键切换 slide\n- **导航圆点**：右侧 fixed 定位，JS 自动根据 .slide 数量生成\n- **进度条**：顶部 3px 渐变条，滚动时自动更新\n- **入场动画**：IntersectionObserver threshold=0.3 触发 fadeInUp\n- **PDF 导出**：右上角按钮调 window.print()\n- **主题切换**：右上角按钮 toggle body.light class\n\nFile v2.0.0:references/svg-architecture-rules.md\n\n# SVG 架构图布局原则（容易返工，务必遵守）\n\n## 基本设置\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ...\n\n```\n\n## 1. 容器与层级规划\n\n- **viewBox 标准**：`0 0 1180 620`\n- **外层容器统一** x=30, width=1120（左右各留 30 边距）\n- **分层从下到上排列**（y 值从大到小）：\n - 最底层（云产品） y=530, height=70\n - 支撑层 y=420, height=80\n - Agent 层 y=300, height=95\n - 触达层 y=130, height=125\n - 用户层 y=20, height=90\n\n## 2. 方块均匀分布的正确算法\n\n**不是简单排列方块**。必须：\n1. 确定容器总宽度（1120）\n2. 确定每个方块宽度\n3. 计算 `剩余空间 = 容器宽 - Σ 方块宽`\n4. 计算 `间隙 = 剩余空间 / (方块数 + 1)`（两端也留间距）\n5. 按此间距依次摆放\n\n### 嵌套容器\n- 如果有\"外部用户\"这种包含子方块的容器，外层容器和内层方块要一起参与整层的均匀分布\n- 内层子方块在外层容器里也要均匀分布\n\n## 3. 连线必须对准方块中心\n\n### 计算公式\n```\ncenterX = rect.x + rect.width / 2\ntopY = rect.y (顶边中点)\nbottomY = rect.y + rect.height (底边中点)\nleftX = rect.x (左边中点: y = rect.y + rect.height/2)\nrightX = rect.x + rect.width (右边中点)\n```\n\n### 要求\n- 起点和终点都要用上面公式算出来的精确坐标\n- **不要凭感觉写坐标**\n- 修改前先 search 确认 rect 的 x, y, width, height\n\n### 示例\n```html\n\n\n\n```\n\n## 4. 连线样式规范\n\n### 同层双向连线\n```html\n\n```\n\n### 跨层连线（贝塞尔曲线）\n```html\n\n```\n\n- 跨层用**虚线**（stroke-dasharray=\"7,4\"）\n- 同层用**实线**\n- 透明度 0.8~0.85，避免太刺眼\n\n### 连线标签\n```html\nWB线\n```\n标签放在连线中段附近，颜色用连线色。\n\n## 5. 故事线配色（已固化）\n\n| 故事线 | 颜色 | 用途 |\n|---|---|---|\n| WB 线 | `#5070ff`（蓝）| 内部产品协同链路 |\n| claw 线 | `#10b981`（绿）| 分发触达链路 |\n| skill 线 | `#f59e0b`（橙）| 外部自助链路 |\n\n## 6. 层级配色\n\n```\n用户层: 绿 rgba(64,145,108,0.08 ~ 0.2), text #95d5b2 / #a7f3d0\n触达层: 蓝 rgba(80,112,255,0.06 ~ 0.2), text #93b4ff / #a0b4ff\nAgent 层: 紫 rgba(124,58,237,0.08 ~ 0.2), text #c4b5fd / #e0d4ff\n支撑层: 橙 rgba(234,88,12,0.08 ~ 0.15), text #fdba74 / #fed7aa\n云产品: 灰 rgba(71,85,105,0.25), text #94a3b8\n```\n\n## 7. 虚线分组容器\n\n用于表示逻辑分组（如\"外部用户\"、\"IM 容器\"、\"官网容器\"）：\n\n```html\n\n```\n\n## 8. 一次做对的检查清单\n\n修改架构图后，必须逐项确认：\n\n- [ ] 所有方块在容器内均匀分布（计算过间距）\n- [ ] 所有连线起终点对准方块中心（用 rect 坐标算）\n- [ ] 移动方块后检查所有关联连线（易漏）\n- [ ] 嵌套分组的内外空间协调\n- [ ] 层级配色与 references 一致\n- [ ] 故事线颜色正确（WB蓝/claw绿/skill橙）\n- [ ] 跨层用虚线、同层用实线\n- [ ] 连线透明度 0.8~0.85\n- [ ] 图例/标签颜色与连线一致\n- [ ] 本地预览确认无错位\n\n## 9. 常见 Bug\n\n- **方块跑出容器**：检查 x+width 有没有超过容器右边界（1150）\n- **连线歪了**：99% 是坐标没用 rect 中心算\n- **修改一个方块忘了调相关连线**：每次移动方块必须 grep 该方块原坐标，确认没有别的连线引用\n- **嵌套容器布局乱**：嵌套时内外 padding 一起算\n\nFile v2.0.0:skill-card.md\n\n## Description:\n\nHtml Report Slides helps agents create single-file, PPT-style HTML report decks for strategy presentations, architecture overviews, cost analyses, and roadmap slides.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[dengjiawei1226](https://clawhub.ai/user/dengjiawei1226)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, operators, and business users can use this skill to turn report content into a polished standalone HTML slide deck with reusable presentation components. It is aimed at technical briefings, cost reviews, strategy updates, product roadmaps, and architecture diagrams.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill includes behavior that may append future lessons back into SKILL.md.\n\nMitigation: Require explicit user approval before modifying the skill source, and review any persistent changes before installing in shared environments.\n\nRisk: Generated or copied templates may load an external font resource.\n\nMitigation: Approve the external font load, remove it, or use the bundled fallback font stack before sharing or deploying in restricted environments.\n\nRisk: Example files or copied snippets may contain leftover external links or context-specific content.\n\nMitigation: Audit generated HTML and reused examples before publishing, especially for external links, internal names, and sensitive report data.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/dengjiawei1226/skills/html-report-slides)\n- [Design System](artifact/references/design-system.md)\n- [SVG Architecture Rules](artifact/references/svg-architecture-rules.md)\n- [Component Index](artifact/components/README.md)\n- [Examples](artifact/examples/README.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Single-file HTML with Markdown or text guidance as needed]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Generated decks are intended to be standalone, browser-viewable, responsive, and print/PDF-ready.]\n\n## Skill Version(s):\n\n2.0.0 (source: frontmatter, server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.1.0: 10 files, 30536 bytes\n\nFiles: components/base-template.html (4385b), components/README.md (16948b), examples/cost-report.html (26088b), examples/README.md (1483b), examples/strategy-report.html (28919b), README.md (3170b), references/design-system.md (4621b), references/svg-architecture-rules.md (5257b), SKILL.md (5196b), _meta.json (137b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: html-report-slides\ndescription: 生成深蓝科技风的 HTML 单页汇报稿（PPT 风格）。适用于技术汇报、成本汇报、战略规划、架构全景图等单文件演示场景。触发词：汇报页面、汇报 PPT、HTML 汇报、科技风汇报、PPT 页面、单文件演示、战略汇报、成本汇报、架构全景图、故事线规划、领导汇报稿、深蓝风汇报、产品规划汇报、slide html。\nversion: 1.1.0\n---\n\n# HTML Report Slides — 深蓝科技风单文件汇报稿生成器\n\n## 用途\n\n把汇报内容（战略规划、成本分析、架构图、产品路线图等）生成为**单个 HTML 文件**的 PPT 风格页面。每个 slide 是一个 1280×720 的卡片，垂直堆叠，可直接浏览、打印或截图。\n\n## 核心设计风格\n\n- **暗色科技风**：深蓝底 `#0a0e1a` + 深蓝渐变 slide 背景\n- **渐变标题**：白→蓝→紫渐变文字 (`#ffffff → #7cacff → #a78bfa`)\n- **结构化卡片**：每个 slide 由多个信息卡片组成，层次清晰\n- **SVG 架构图**：用 SVG 画多层架构图、故事线、连线关系\n- **打印友好**：加了 `@media print` 样式，可直接打印成 PDF\n\n## 何时触发此 skill\n\n当用户说以下内容时加载：\n- \"帮我做一个汇报页面 / 汇报 PPT\"\n- \"把 XX 做成 HTML 汇报 / 深蓝风汇报\"\n- \"需要一个 PPT 风格的单页 / 战略汇报 / 成本汇报\"\n- \"画一个架构全景图\"\n- \"给领导汇报用的稿子\"\n- 用户明确说 \"用上次那种深蓝风格\"\n\n## 工作流\n\n### Step 1 — 确认输入\n询问用户以下信息（如果未提供）：\n1. **汇报主题**（Title）\n2. **Slide 数量和每页主题**（一般 4~6 页够了）\n3. **每页要放什么内容**（数据、观点、决策项、架构图等）\n4. **输出文件路径**（默认放工作区根目录，文件名 `-report.html`）\n\n### Step 2 — 选用组件模板\n\n根据内容类型选组件（详见 `components/` 目录）：\n\n| 内容类型 | 推荐组件 |\n|---|---|\n| 封面 | `cover-slide` |\n| 多层架构图 | `svg-architecture` |\n| 多条故事线 / 路径 | `storylines` |\n| 关键决策 / 方案对比 | `decision-cards` |\n| 行动项时间轴 | `next-steps` |\n| 数据对比（月对月）| `cost-cards` + `metric-table` |\n| 预算预估条 | `budget-timeline` |\n| 未来规划（Now/Next）| `future-cards` |\n| 内容待补充 | `placeholder-slide` |\n\n### Step 3 — 组装 HTML\n\n1. 从 `examples/` 里选一个最接近的模板（`strategy-report.html` 是战略全景型，`cost-report.html` 是数据对比型），复制过来改内容\n2. 或从 `components/base-template.html` 起手，拼积木\n3. 所有颜色、间距、字号必须用 `references/design-system.md` 里的规范值，不要自创\n4. 每个 slide 要加 footer（品牌名 + 页码 `N / Total`）\n\n### Step 4 — SVG 架构图（重点，容易返工）\n\n如果涉及架构图，务必遵循 `references/svg-architecture-rules.md` 的原则：\n- 所有方块在容器内**均匀分布**（必须计算间距）\n- 所有连线**起终点对准方块中心**（用 rect 坐标算，不要估算）\n- 移动方块后必须检查所有关联连线\n- 嵌套分组的内外空间要协调\n\n### Step 5 — 预览\n\n- 用 `preview_url` 打开生成的文件给用户看\n- 如果部署到静态托管（CloudBase / Vercel / GitHub Pages），URL 加 `?v=N` 避免缓存\n\n### Step 6 — 迭代\n\n用户大概率要改几版。每次改完：\n- 本地预览确认\n- 如果改动了架构图，必须按 Step 4 的清单自检\n\n## 通用审美偏好（硬性要求）\n\n- **不要包装性标题**：不要写\"XX 体验优化\"、\"赋能 XX\"这种空话。直接写功能或结论，例如\"3 月 → 4 月 模型成本激增\"、\"迁移到新架构\"\n- **文案精炼直接**：功能导向，不加修饰词\n- **产品名脱敏**：如果要做成对外版本，内部代号要换成通用名\n- **图标**：纯文字汇报里可以用简单 unicode 符号（★ ✦ ➜ 等），不要 emoji 表情\n- **配色分层但协调**：不能大红大紫乱撞\n\n## 常见返工原因（必须避免）\n\n1. 方块分布不均匀 —— 每次加/删元素后必须重新算间距\n2. SVG 连线没对准方块中心\n3. 用了 emoji 表情符号（偏好 unicode 几何符号）\n4. 包装性标题 / 空话套话\n5. 没加 footer 页码\n6. slide 宽度不是 1280px\n7. 忘了渐变标题的 `-webkit-background-clip: text`\n\n## 相关文件\n\n- `references/design-system.md` — 颜色、字体、间距规范（必读）\n- `references/svg-architecture-rules.md` — SVG 架构图布局原则\n- `components/base-template.html` — 空白起手模板\n- `components/README.md` — 各类组件片段\n- `examples/strategy-report.html` — 战略规划型汇报范例\n- `examples/cost-report.html` — 数据对比型汇报范例\n\n## 经验积累\n\n后续每次做完汇报，如果有新的套路或踩坑，都追加到本文件末尾。\n\n### 踩坑记录\n\n- SVG 里计算方块中心坐标时要注意 `text-anchor=\"middle\"` 的文字 x 坐标 = rect.x + rect.width/2，连线坐标也要用这个值才对齐\n- cover 页的 badge 和 subtitle 可选，如果内容简洁就只留大标题\n\nFile v1.1.0:components/README.md\n\n# 组件片段集\n\n每个组件包含 **HTML 结构** 和 **必需的 CSS**。按需复制到 base-template.html 的 `