Xpersona
agentCLAWHUBUnverified

Html Report Slides

生成深蓝科技风的 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

OpenClaw
View on ClawHubHomepage

Rank

62

Safety

84

Downloads

1.1k

Updated

Oct 11, 2026

Version

2.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor
Clawhubvendor · observed Oct 11, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 11, 2026
Adoption signal
1.1K downloadsadoption · observed Oct 11, 2026
Latest release
2.0.0release · observed May 8, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s171z5dmkr3hr6e5vrt1whgtt583m22s:html-report-slides
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. 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: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/snapshot"

Documentation

CLAWHUB

79,576 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
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/Nex

components/README.md

# 组件目录

所有样式已内置在 `base-template.html` 的 CSS 变量系统中。组件片段只需复制 HTML 到 slide 内即可使用。

---

## 组件列表

| 文件 | 用途 | 适用场景 |
|---|---|---|
| `base-template.html` | 完整起手模板 | 新建任何汇报 |
| `cover-slide.html` | 封面页 | 每份汇报第一页 |
| `svg-architecture.html` | 多层架构图 | 系统拓扑、产品全景 |
| `storylines.html` | 故事线 / 策略路径 | 2~4 条并行路线 |
| `decision-cards.html` | 决策卡片 / 方案对比 | 待决策事项 |
| `next-steps.html` | 行动项时间轴 | 里程碑、排期 |
| `cost-cards.html` | 成本 KPI 卡片 | 月对月数据概览 |
| `metric-table.html` | 数据对比表 | 多行多列指标对比 |
| `budget-timeline.html` | 预算进度条 | 预算占比/使用率 |
| `future-cards.html` | Now / Next 规划 | 现状 vs 规划 |
| `placeholder-slide.html` | 占位页 | 内容待补充 |

---

## 使用方式

1. 复制 `base-template.html` 作为新文件
2. 替换所有 `__PLACEHOLDER__` 占位符
3. 按需从上表选择组件，复制其 HTML 到对应 slide 的内容区域
4. 组件的 CSS 已全部内置在 base-template 中，无需额外引入

---

## v2.0 新增能力（2026-05-08）

- **CSS 变量系统**：所有颜色/间距集中管理，支持一键换肤
- **亮色主题**：`<body class="light">` 切换投影仪友好模式
- **导航系统**：右侧圆点导航 + 顶部进度条 + 键盘上下翻页
- **入场动画**：IntersectionObserver 驱动的 fadeInUp 效果
- **响应式**：笔记本/平板自适应缩放
- **PDF 导出**：一键按钮 + 完整打印样式（文字改黑、背景改白）
- **字体优化**：preload + 离线 fallback
- **metric-table class**：替代 inline style 的表格样式

examples/README.md

# Examples

两个主人实际用过的汇报范例，可以直接参考或复制改内容。

## report.html — 战略规划型汇报

**主题**：Platform AI 能力全景图 & 故事线规划

**结构**：
- Slide 1：封面（只有大标题）
- Slide 2：**SVG 架构图**（5 层：云产品 / 支撑层 / Agent 层 / 触达层 / 用户）+ 3 条故事线连线
- Slide 3：三条故事线卡片详解（WB 线 / claw 线 / skill 线）
- Slide 4：关键决策（decision-cards）

**适合复用场景**：战略汇报、架构设计、产品规划、能力全景图

## cost-report.html — 数据对比型汇报

**主题**：ProductA 模型成本追加专题汇报

**结构**：
- Slide 1：封面（带 badge、meta 信息）
- Slide 2：成本对比（cost-cards + budget-banner + metric-table + conclusion-banner）
- Slide 3：Placeholder 占位页（素材待补充）
- Slide 4：未来规划（budget-timeline + future-cards）

**适合复用场景**：成本分析、月度汇报、数据对比、预算申请

## 使用建议

1. 新做汇报时，从两个范例里挑一个最接近的**整体复制**
2. 替换封面、标题、页脚
3. 按需增删 slide，组件片段在 `../components/README.md`
4. 严格按 `../references/design-system.md` 的规范值改颜色和间距
5. 如果涉及架构图，务必读 `../references/svg-architecture-rules.md`

README.md

# html-report-slides

A single-file HTML report generator with a dark tech-style aesthetic. Perfect for strategy presentations, architecture overviews, cost analyses, and roadmap slides.

## Features (v2.0)

- **CSS Variables System** — All colors, spacing, and typography centralized in `:root`
- **Dark + Light Theme** — Toggle with `body.light` class for projector-friendly mode
- **Navigation** — Right-side dot nav + top progress bar + keyboard arrows/space
- **Entrance Animations** — IntersectionObserver-driven fadeInUp with staggered delays
- **Responsive** — Adapts from 1280px slides down to tablet/laptop viewports
- **Print/PDF Ready** — Complete print stylesheet + one-click export button
- **10 Component Snippets** — Copy-paste HTML fragments for common slide patterns

## Quick Start

1. Copy `components/base-template.html` as your new report file
2. Replace all `__PLACEHOLDER__` values with your content
3. Pick components from `components/` directory and paste them into your slides
4. Open in browser — done!

## Directory Structure

```
html-report-slides/
├── SKILL.md                    # AI skill definition (triggers, workflow)
├── components/
│   ├── base-template.html      # Full starter template (CSS vars + nav + animation)
│   ├── cover-slide.html        # Title/cover page
│   ├── svg-architecture.html   # Multi-layer architecture diagram
│   ├── storylines.html         # Strategy paths / storylines
│   ├── decision-cards.html     # A/B decision comparison
│   ├── next-steps.html         # Timeline / action items
│   ├── cost-cards.html         # KPI metric cards
│   ├── metric-table.html       # Data comparison table
│   ├── budget-timeline.html    # Budget progress bars
│   ├── future-cards.html       # Now vs Next planning
│   ├── placeholder-slide.html  # Placeholder for TBD content
│   └── README.md               # Component index
├── references/
│   ├── design-system.md        # Color, typography, spacing specs
│   └── svg-architecture-rules.md  # SVG layout principles
└── examples/
    ├── report.html             # Strategy overview example
    └── cost-report.html        # Cost analysis example
```

## Design System Highlights

| Element | Value |
|---|---|
| Background | `#0a0e1a` (dark) / `#f5f7fa` (light) |
| Title Gradient | `#ffffff → #7cacff → #a78bfa` |
| Slide Size | 1280×720px (responsive) |
| Font | Inter + PingFang SC fallback |
| Accent Colors | Blue `#5070ff` · Purple `#7c3aed` · Green `#10b981` · Orange `#f59e0b` |

## Trigger Phrases (for AI assistants)

- "Make a report page / presentation"
- "Create an HTML slide deck"
- "Tech-style dark presentation"
- "Architecture overview slide"
- "Cost analysis report"

## Installation

### As a WorkBuddy/Claw Skill
```bash
clawhub install html-report-slides
```

### Manual
Clone this repo and copy `components/base-template.html` to start.

## License

MIT-0 (No attribution required)

_meta.json

{
  "ownerId": "kn7dr93fbgrvymnk8d9r9y0tws83mhrk",
  "slug": "html-report-slides",
  "version": "2.0.0",
  "publishedAt": 1778222496714
}

Related agents

Same protocol, similar job.

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW
Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW
Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/dengjiawei1226/skills/html-report-slides",
      "sourceUrl": "https://clawhub.ai/dengjiawei1226/skills/html-report-slides",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:54:28.461Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:54:28.461Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "1.1K downloads",
      "href": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceUrl": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:54:28.461Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "2.0.0",
      "href": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceUrl": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-05-08T06:41:36.714Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-dengjiawei1226-html-report-slides/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 2.0.0",
      "description": "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",
      "href": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceUrl": "https://clawhub.ai/dengjiawei1226/html-report-slides",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-05-08T06:41:36.714Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 11, 2026.

Sponsored

Ads related to Html Report Slides and adjacent AI workflows.