{"id":"7a56d48c-e50c-424a-8351-764f55b5c579","entityType":"agent","slug":"clawhub-boboy-j-html-ppt-skill","name":"html-ppt-skill","canonicalUrl":"https://www.xpersona.co/agent/clawhub-boboy-j-html-ppt-skill","canonicalPath":"/agent/clawhub-boboy-j-html-ppt-skill","generatedAt":"2026-10-10T07:53:43.657Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T03:39:34.205Z","emptyReason":null},"description":"制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de... Skill: html-ppt-skill Owner: boboy-j Summary: 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T08:42:25.803Z | auto Initial release of html-ppt-skill: - Create fully responsive HTML-based slideshows as a modern PPT alternative. - Enforces strict 16:9 r","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.7K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17ckg9br2p4k5kx6cr8fc4jz5852pah:html-ppt-skill","sourceUrl":"https://clawhub.ai/boboy-j/html-ppt-skill","homepage":"https://clawhub.ai/boboy-j/skills/html-ppt-skill","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/boboy-j/html-ppt-skill","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/boboy-j/skills/html-ppt-skill","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":65,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T03:39:34.205Z","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-10T03:39:34.205Z","emptyReason":null},"stars":null,"forks":null,"downloads":1724,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1.7K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T03:39:34.205Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T03:39:34.205Z","lastCrawledAt":"2026-10-10T03:39:34.205Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T03:39:34.205Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-05-28T08:42:25.803Z","changelog":"Initial release of html-ppt-skill: - Create fully responsive HTML-based slideshows as a modern PPT alternative. - Enforces strict 16:9 ratio for all slides using CSS scroll-snap. - Built-in navigation (keyboard, scroll, on-screen controls) and PDF export via browser print. - Always triggers for requests mentioning making PPT/slides/decks, even if the user doesn't specify format. - Standardized structure, styling, and design guidelines for professional-quality slides.","fileCount":6,"zipByteSize":15861}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17ckg9br2p4k5kx6cr8fc4jz5852pah:html-ppt-skill","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-boboy-j-html-ppt-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/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-10T07:53:43.656Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-boboy-j-html-ppt-skill/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-10T03:39:34.205Z","emptyReason":null},"readme":"Skill: html-ppt-skill\n\nOwner: boboy-j\n\nSummary: 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-05-28T08:42:25.803Z | auto\n\nInitial release of html-ppt-skill: \n- Create fully responsive HTML-based slideshows as a modern PPT alternative.\n- Enforces strict 16:9 ratio for all slides using CSS scroll-snap.\n- Built-in navigation (keyboard, scroll, on-screen controls) and PDF export via browser print.\n- Always triggers for requests mentioning making PPT/slides/decks, even if the user doesn't specify format.\n- Standardized structure, styling, and design guidelines for professional-quality slides.\n\nArchive index:\n\nArchive v1.0.0: 6 files, 15861 bytes\n\nFiles: assets/blank-starter.html (5837b), README.md (6867b), references/design-system.md (11693b), skill-card.md (1980b), SKILL.md (6066b), _meta.json (133b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: html-ppt\ndescription: >\n 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9\n 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。\n 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"deck\"\n 等关键词时，必须触发本 skill，优先以 HTML 形式交付，而非生成 .pptx 文件。\n 即使用户只说\"帮我做个介绍某主题的 PPT\"而未指明格式，也应主动采用本 skill 的方案。\n---\n\n# HTML PPT Skill\n\n用 HTML + CSS 制作媲美专业设计软件的幻灯片，视觉效果远超传统 PPT 工具。\n\n## 核心规范（必须遵守）\n\n### 1. 比例与分页\n\n```css\n/* 每张幻灯片：宽 = 100vw，高 = 56.25vw（即 9/16）*/\n.slide {\n width: 100vw;\n height: 56.25vw;\n overflow: hidden;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n}\n\n/* body 开启强制对齐 */\nbody {\n scroll-snap-type: y mandatory;\n overflow-y: scroll;\n height: 100%;\n}\nhtml { height: 100%; }\n```\n\n**原理**：`56.25vw = 9/16 × 100vw`，无论屏幕分辨率如何，每页都精确为 16:9。\n\n### 2. 打印 / 导出 PDF\n\n```css\n@media print {\n html, body { height: auto; overflow: visible; scroll-snap-type: none; }\n #nav-dots, #nav-arrows { display: none !important; }\n .slide {\n width: 297mm;\n height: 167.0625mm; /* 297 × 9/16 = 167.0625 */\n page-break-after: always;\n break-after: page;\n scroll-snap-align: none;\n }\n}\n```\n\n用户按 **Ctrl+P → 另存为 PDF** 即可导出，每页精确对应一张幻灯片。\n\n### 3. 导航 JS（标准实现，每次必须包含）\n\n```javascript\nconst slides = Array.from(document.querySelectorAll('.slide'));\nlet current = 0;\n\nfunction goTo(i) {\n i = Math.max(0, Math.min(slides.length - 1, i));\n slides[i].scrollIntoView({ behavior: 'smooth' });\n current = i;\n updateDots(i);\n}\n\n// 键盘支持\ndocument.addEventListener('keydown', e => {\n if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }\n if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); goTo(current-1); }\n});\n\n// IntersectionObserver 同步当前页\nconst io = new IntersectionObserver(entries => {\n entries.forEach(en => { if (en.isIntersecting) { current = slides.indexOf(en.target); updateDots(current); }});\n}, { threshold: 0.6 });\nslides.forEach(s => io.observe(s));\n```\n\n---\n\n## 标准文件结构\n\n每次生成的 HTML 文件必须包含以下部分：\n\n```\n\n Google Fonts 引入（选择与主题匹配的中文字体）\n \n\n\n \n
↑ ↓ 按钮
\n\n
...
\n
...
\n ...\n\n \n\n```\n\n---\n\n## 设计规范\n\n详细设计组件库见 `references/design-system.md`。\n\n### 字体选择原则\n- **中文展示字体**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）\n- **中文正文字体**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）\n- **英文展示字体**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`\n- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用，无设计感）\n\n### 颜色主题选择\n根据演示主题选择合适的色系，参考 `references/design-system.md` 中的预设主题。\n\n### 每张幻灯片的尺寸感知\n- 字体大小使用 `vw` 单位（如 `3.5vw`），随屏幕等比缩放\n- 间距使用 `%` 或 `vw` 单位，避免固定 `px`\n- 内容区 padding 建议：`4% 6%`\n\n---\n\n## 典型页面类型\n\n| 页面类型 | 适用场景 | 布局要点 |\n|----------|----------|----------|\n| 封面页 | 第一页 | 大标题居中或左对齐，背景有视觉冲击力 |\n| 目录页 | 第二页 | 2×2 或 1×N 卡片网格列举章节 |\n| 双栏内容页 | 文字+图/列表 | `grid-template-columns: 1fr 1fr` |\n| 全图页 | 视觉冲击 | 图片铺满，文字叠加半透明遮罩 |\n| 数据页 | 展示指标 | 大数字 + 进度条 + 说明文字 |\n| 时间线页 | 历史/流程 | 横向或纵向时间轴 |\n| 引用页 | 金句/观点 | 超大引号装饰，居中排版 |\n| 结尾页 | 致谢/Q&A | 简洁有力，附联系方式或行动引导 |\n\n---\n\n## 工作流程\n\n接到 PPT 制作需求时，按以下步骤执行：\n\n1. **理解需求**：主题、受众、页数、风格偏好（科技/商务/学术/文化）\n2. **选定主题**：从 `references/design-system.md` 选择或创建配色方案\n3. **规划页面**：确定每页类型和内容大纲\n4. **逐页编写**：每张 `.slide` 按内容量和页面类型选择合适布局\n5. **检查清单**（完成后必须自查）：\n - [ ] 每页都有 `class=\"slide\"` 和 `id=\"slide-N\"`\n - [ ] 每页底部有页码 `N / Total`\n - [ ] body 有 `scroll-snap-type: y mandatory`\n - [ ] 包含键盘导航 JS\n - [ ] 包含 `@media print` 样式\n - [ ] 所有字体大小用 `vw` 单位（非 `px`）\n - [ ] 文件输出到 `/mnt/user-data/outputs/` 并调用 `present_files`\n\n---\n\n## 快速参考：CSS 变量模板\n\n```css\n:root {\n /* 根据主题替换以下变量 */\n --c-bg: #0D0F14; /* 背景色 */\n --c-surface: #151820; /* 卡片背景 */\n --c-border: rgba(255,255,255,0.08);\n --c-accent: #4F8EF7; /* 主强调色 */\n --c-accent2: #A78BFA; /* 副强调色 */\n --c-text: #F0F2F8; /* 主文字色 */\n --c-muted: rgba(240,242,248,0.45); /* 次要文字 */\n\n --f-display: 'ZCOOL XiaoWei', serif;\n --f-body: 'Noto Sans SC', sans-serif;\n\n /* 固定不变 */\n --slide-w: 100vw;\n --slide-h: 56.25vw;\n}\n```\n\nFile v1.0.0:README.md\n\n# HTML PPT Skill — 用 HTML + CSS 制作专业幻灯片\n\n> **版本**：V1.0.0 \n> **语言**：HTML / CSS / JavaScript \n> **核心理念**：用 Web 技术取代传统 PPT/PPTX，制作 16:9 比例、可键盘翻页、可导出 PDF 的专业演示文稿。\n\n---\n\n## 概述\n\nHTML PPT Skill 是一套完整的基于 HTML + CSS 制作幻灯片的工作流方案。与 PowerPoint / Keynote / Canva 等传统工具不同，它利用 **CSS `scroll-snap`** 实现精准的页面切割，以 **16:9 视口比例** 固定每张幻灯片，最终可通过浏览器 **Ctrl+P 导出为 PDF**。\n\n适用场景：\n- 技术分享 / 开发者演讲\n- 学术报告 / 论文答辩\n- 品牌宣传 / 产品路演\n- 企业文化 / 历史展示\n\n---\n\n## 特性\n\n| 特性 | 说明 |\n|------|------|\n| 🎯 **16:9 精确比例** | 每张幻灯片严格 `100vw × 56.25vw`，任何屏幕均等比例显示 |\n| ⌨️ **键盘导航** | `↑ ↓ ← → PageUp PageDown` 均可翻页 |\n| 🔵 **导航指示器** | 右侧圆点导航 + 底部箭头按钮，自动高亮当前页 |\n| 🖨️ **一键导出 PDF** | 浏览器打印 → 另存为 PDF，每页精确对应一张幻灯片 |\n| 📱 **响应式** | 所有尺寸使用 `vw` 单位，手机 / 平板 / 投影仪等比缩放 |\n| 🎨 **预设主题** | 6 套精心搭配的配色方案（深空暗黑、金墨、自然绿、纯白简约、暖橙、冰蓝） |\n| 🧩 **即用组件** | 排版系统、卡片、数据统计、进度条、时间线等开箱即用 |\n| ✨ **动画效果** | 入场动画、脉冲光圈、滚动网格等轻量 CSS 动画 |\n| 🖼️ **背景装饰** | 网格、光晕、水印、斜线分割、圆点阵列 5 种背景模式 |\n\n---\n\n## 快速开始\n\n### 方式一：从空白模板开始\n\n直接打开 `assets/blank-starter.html`，在 `` 注释下方复制 `.slide` 块即可。\n\n### 方式二：从设计系统模板开始\n\n参考 `references/design-system.md` 中的布局代码（封面页、双栏页、四格卡片页、数据页、时间线页），复制粘贴后修改内容。\n\n---\n\n## 文件结构\n\n```\nV1.0.0/\n├── SKILL.md # Skill 核心指令（AI 调用入口）\n├── assets/\n│ └── blank-starter.html # 空白起始模板（开箱即用）\n├── references/\n│ └── design-system.md # 完整设计系统文档\n│ ├── 6 套预设颜色主题\n│ ├── 通用 CSS 组件（排版 / 卡片 / 统计 / 列表等）\n│ ├── 5 种背景装饰模式\n│ ├── 5 种布局模板代码\n│ ├── 动画效果库\n│ └── 导航组件完整代码\n└── README.md # 本文件\n```\n\n---\n\n## 使用指南\n\n### 1. 核心 HTML 结构\n\n```html\n
\n
\n \n
\n 01 / 10\n
\n```\n\n每张幻灯片必备：\n- `class=\"slide\"` — 应用 16:9 尺寸和 scroll-snap 对齐\n- `id=\"slide-N\"` — 唯一标识（N 为页码序号）\n- `.slide-num` — 底部页码\n\n### 2. 导航系统（自动生效）\n\n- **右侧圆点**：点击跳转对应页面\n- **底部箭头**：上 / 下翻页\n- **键盘**：`↑ ↓ ← →` 或 `PageUp / PageDown`\n- **滚动**：鼠标滚轮 / 触控板逐页滑动\n- **IntersectionObserver**：滚动时自动同步高亮当前页\n\n### 3. 导出 PDF\n\n1. 在浏览器中打开 HTML 文件\n2. 按 `Ctrl + P` (Windows) 或 `Cmd + P` (Mac)\n3. 目标打印机选择「另存为 PDF」\n4. 取消勾选「页眉和页脚」\n5. 保存 — 每张幻灯片即为一页 PDF\n\n### 4. 编写新幻灯片\n\nSKILL.md 中定义了 8 种典型页面类型：\n\n| 页面类型 | 适用场景 |\n|----------|----------|\n| 封面页 | 第一页，大标题 + 视觉冲击背景 |\n| 目录页 | 第二页，2×2 或 1×N 卡片网格 |\n| 双栏内容页 | 文字 + 图片 / 列表 |\n| 全图页 | 图片铺满 + 半透明遮罩文字 |\n| 数据页 | 大数字 + 进度条 + 指标说明 |\n| 时间线页 | 历史 / 流程 / 路线图 |\n| 引用页 | 金句 / 观点 / 名人名言 |\n| 结尾页 | 致谢 / Q&A / 联系方式 |\n\n---\n\n## 设计系统\n\n详见 `references/design-system.md`，包含：\n\n### 预设颜色主题\n\n| 主题 | 场景 | 主色 |\n|------|------|------|\n| 🌑 深空暗黑 | 科技 / 互联网 | `#4F8EF7` |\n| 🏮 金墨 | 中国文化 / 历史 | `#D4A017` |\n| 🌿 自然绿 | 环保 / 农业 / 医疗 | `#34D399` |\n| ☁️ 纯白简约 | 学术 / 报告 | `#2563EB` |\n| 🔥 暖橙 | 创业 / 品牌 / 活力 | `#F97316` |\n| 🧊 冰蓝 | 金融 / 咨询 / 企业 | `#1E40AF` |\n\n### 字体体系\n\n- **中文展示**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）\n- **中文正文**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）\n- **英文展示**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`\n- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用）\n\n### CSS 组件\n\n| 组件 | 类名 | 用途 |\n|------|------|------|\n| 超大展示标题 | `.title-xl` | 封面页主标题（6.5vw） |\n| 页面主标题 | `.title-lg` | 内页大标题（3.8vw） |\n| 章节标题 | `.title-md` | 小节标题（2.4vw） |\n| 正文 | `.body-text` | 描述文字（1.2vw） |\n| 小标签 | `.label` | 标签 / 副标题 |\n| 卡片 | `.card` | 内容区块容器 |\n| 统计数字 | `.stat-num` | 数据展示（5vw） |\n| 分割线 | `.divider` | 装饰分隔 |\n| 高亮 | `.hl` / `.hl-2` | 强调文字颜色 |\n| 图标圆 | `.icon-circle` | 图标背景容器 |\n| 进度条 | `.progress-bar-bg/fill` | 百分比进度 |\n\n### 背景装饰\n\n- **网格背景** — 科技感细线网格\n- **光晕装饰 (Glow)** — 模糊彩色光晕\n- **大字水印** — 半透明背景文字\n- **斜线分割** — 135° 斜线划分\n- **圆点阵列** — 规律小圆点背景\n\n---\n\n## 技术原理\n\n### 16:9 比例\n\n```css\n.slide {\n width: 100vw;\n height: 56.25vw; /* 9 ÷ 16 × 100 = 56.25 */\n scroll-snap-align: start;\n}\n```\n\n`56.25vw = 9/16 × 100vw`，确保在任何分辨率下都精确保持 16:9 比例。\n\n### 翻页机制\n\n使用 CSS `scroll-snap-type: y mandatory` 实现强制逐页对齐，结合 `scrollIntoView({ behavior: 'smooth' })` 实现平滑跳转。\n\n### 打印适配\n\n```css\n@media print {\n .slide {\n width: 297mm; /* A4 横向宽度 */\n height: 167.0625mm; /* 297 × 9/16 */\n page-break-after: always;\n }\n #nav-dots, #nav-arrows { display: none; }\n}\n```\n\n打印时自动隐藏导航元素，每张幻灯片精准适配 A4 纸 16:9 区域。\n\n---\n\n## 许可\n\n仅供个人和商业演示使用。Google Fonts 引用的字体遵循各自的开源许可（OFL 等）。\n\n---\n\n*由 HTML PPT Skill V1.0.0 生成 — 用代码重新定义演示文稿*\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn7ae6m5fzwqs7fmdmh97gr1yh82m2py\",\n \"slug\": \"html-ppt-skill\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1779957745803\n}\n\nFile v1.0.0:references/design-system.md\n\n# HTML PPT Design System\n\n设计组件库与预设主题，供 SKILL.md 引用。\n\n---\n\n## 目录\n1. [预设颜色主题](#预设颜色主题)\n2. [通用 CSS 组件](#通用-css-组件)\n3. [背景装饰模式](#背景装饰模式)\n4. [布局模板代码](#布局模板代码)\n5. [动画效果库](#动画效果库)\n\n---\n\n## 预设颜色主题\n\n### 🌑 深空暗黑（科技/互联网）\n```css\n--c-bg: #0D0F14; --c-surface: #151820;\n--c-accent: #4F8EF7; --c-accent2: #A78BFA;\n--c-text: #F0F2F8; --c-muted: rgba(240,242,248,0.45);\n```\n\n### 🏮 金墨（中国文化/历史/政府）\n```css\n--c-bg: #1A1209; --c-surface: #251A0D;\n--c-accent: #D4A017; --c-accent2: #C0392B;\n--c-text: #FAF5E8; --c-muted: rgba(250,245,232,0.5);\n--f-display: 'ZCOOL XiaoWei', serif;\n```\n\n### 🌿 自然绿（环保/农业/医疗）\n```css\n--c-bg: #0A1A0F; --c-surface: #0F2415;\n--c-accent: #34D399; --c-accent2: #6EE7B7;\n--c-text: #ECFDF5; --c-muted: rgba(236,253,245,0.5);\n```\n\n### ☁️ 纯白简约（学术/报告/通用）\n```css\n--c-bg: #FFFFFF; --c-surface: #F8F9FA;\n--c-border: rgba(0,0,0,0.08);\n--c-accent: #2563EB; --c-accent2: #7C3AED;\n--c-text: #111827; --c-muted: #6B7280;\n```\n\n### 🔥 暖橙（创业/品牌/活力）\n```css\n--c-bg: #0F0A06; --c-surface: #1A1208;\n--c-accent: #F97316; --c-accent2: #FBBF24;\n--c-text: #FFF7ED; --c-muted: rgba(255,247,237,0.5);\n```\n\n### 🧊 冰蓝（金融/咨询/企业）\n```css\n--c-bg: #F0F4F8; --c-surface: #FFFFFF;\n--c-border: rgba(30,64,175,0.1);\n--c-accent: #1E40AF; --c-accent2: #0EA5E9;\n--c-text: #0F172A; --c-muted: #475569;\n```\n\n---\n\n## 通用 CSS 组件\n\n### 基础排版\n```css\n/* 超大展示标题 */\n.title-xl {\n font-family: var(--f-display);\n font-size: 6.5vw; line-height: 1.1;\n letter-spacing: 0.04em;\n}\n/* 页面主标题 */\n.title-lg {\n font-family: var(--f-serif, var(--f-body));\n font-size: 3.8vw; line-height: 1.25; font-weight: 700;\n}\n/* 章节标题 */\n.title-md {\n font-size: 2.4vw; line-height: 1.3; font-weight: 700;\n}\n/* 正文 */\n.body-text {\n font-size: 1.2vw; line-height: 1.9; color: var(--c-muted); font-weight: 300;\n}\n/* 小标签 */\n.label {\n font-size: 0.85vw; letter-spacing: 0.35em; text-transform: uppercase;\n color: var(--c-accent); font-weight: 500; margin-bottom: 1%;\n}\n```\n\n### 分割线\n```css\n.divider {\n width: 5vw; height: 2px;\n background: linear-gradient(90deg, var(--c-accent), transparent);\n margin: 1.5% 0;\n}\n```\n\n### 卡片\n```css\n.card {\n background: rgba(255,255,255,0.04);\n border: 1px solid var(--c-border);\n border-radius: 4px;\n padding: 2% 2.5%;\n transition: border-color 0.3s;\n}\n.card:hover { border-color: rgba(79,142,247,0.3); }\n/* 顶部强调线变体 */\n.card-accent { border-top: 2px solid var(--c-accent); }\n```\n\n### 数据统计\n```css\n.stat-num {\n font-family: var(--f-display);\n font-size: 5vw; color: var(--c-accent); line-height: 1;\n}\n.stat-label {\n font-size: 0.9vw; color: var(--c-muted);\n letter-spacing: 0.15em; margin-top: 0.3vw;\n}\n```\n\n### 列表\n```css\n.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 0.8%; }\n.bullet-list li {\n font-size: 1.15vw; color: var(--c-muted);\n padding-left: 1.4vw; position: relative; line-height: 1.7;\n}\n.bullet-list li::before {\n content: ''; position: absolute; left: 0; top: 0.65vw;\n width: 0.4vw; height: 0.4vw;\n border-radius: 50%; background: var(--c-accent);\n}\n```\n\n### 进度条\n```css\n/* 容器 */\n.progress-bar-bg {\n height: 0.35vw; background: rgba(255,255,255,0.08); border-radius: 2px;\n}\n/* 填充：用 style=\"width:75%\" 控制百分比 */\n.progress-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));\n border-radius: 2px;\n}\n```\n\n### 图标圆\n```css\n.icon-circle {\n width: 4vw; height: 4vw; border-radius: 50%;\n background: rgba(79,142,247,0.12);\n border: 1px solid rgba(79,142,247,0.3);\n display: flex; align-items: center; justify-content: center;\n font-size: 1.8vw; flex-shrink: 0;\n}\n```\n\n### 页码\n```css\n.slide-num {\n position: absolute; bottom: 2.2%; right: 3%;\n font-size: 0.9vw; color: rgba(255,255,255,0.2);\n letter-spacing: 0.15em; z-index: 10;\n}\n```\n\n### 高亮文字\n```css\n.hl { color: var(--c-accent); }\n.hl-2 { color: var(--c-accent2); }\n.hl-gold { color: #F5C842; }\n```\n\n---\n\n## 背景装饰模式\n\n### 网格背景\n```html\n
\n```\n\n### 光晕装饰（Glow）\n```html\n\n
\n```\n\n### 大字背景水印\n```html\n
关键词
\n```\n\n### 斜线装饰分割\n```html\n
\n```\n\n### 圆点阵列\n```html\n
\n```\n\n---\n\n## 布局模板代码\n\n### 封面页\n```html\n
\n \n
\n
\n\n
\n

副标题标签 · 年份

\n

主标题
关键词

\n
\n

一句话描述演示内容，简洁有力。

\n
\n 01 / N\n
\n```\n\n### 双栏内容页\n```html\n
\n
\n

章节名

\n

页面标题

\n
\n\n
\n
\n
\n
\n
\n N / Total\n
\n```\n\n### 四格卡片页\n```html\n
\n
\n
🔍
\n
\n

小标题

\n

描述文字。

\n
\n
\n \n
\n```\n\n### 数据统计页\n```html\n
\n
\n
99%
\n

指标说明

\n
\n \n
\n```\n\n### 时间线页（横向）\n```html\n
\n \n
\n \n
\n
\n

年份

\n

标题

\n

描述

\n
\n
\n```\n\n---\n\n## 动画效果库\n\n### 入场动画（加在 .slide 的直接子元素）\n```css\n@keyframes fadeUp {\n from { opacity:0; transform:translateY(1.5vw); }\n to { opacity:1; transform:none; }\n}\n/* 用法：style=\"animation: fadeUp 0.8s 0.2s both\" */\n/* 叠加延迟：每个元素 delay + 0.15s 产生错落感 */\n```\n\n### 脉冲光圈\n```css\n@keyframes pulse-ring {\n 0% { transform:scale(1); opacity:0.6; }\n 100% { transform:scale(1.8); opacity:0; }\n}\n```\n\n### 无限滚动背景网格\n```css\n@keyframes gridDrift {\n from { transform:translateY(0); }\n to { transform:translateY(4vw); }\n}\n/* background-size 与 animation 步长一致 */\n```\n\n---\n\n## 导航组件完整代码\n\n```css\n/* 右侧导航点 */\n#nav-dots {\n position:fixed; right:1.5vw; top:50%; transform:translateY(-50%);\n display:flex; flex-direction:column; gap:8px; z-index:1000;\n}\n.dot {\n width:6px; height:6px; border-radius:50%;\n background:rgba(255,255,255,0.25); cursor:pointer;\n transition:all 0.3s; border:none; padding:0;\n}\n.dot.active { background:var(--c-accent); transform:scale(1.4); }\n\n/* 底部箭头 */\n#nav-arrows {\n position:fixed; bottom:2.5vw; left:50%; transform:translateX(-50%);\n display:flex; gap:16px; z-index:1000;\n}\n.arrow-btn {\n width:36px; height:36px; border:1px solid rgba(255,255,255,0.2);\n background:rgba(255,255,255,0.05); backdrop-filter:blur(8px);\n color:rgba(255,255,255,0.6); cursor:pointer; font-size:14px;\n border-radius:50%; transition:all 0.2s;\n display:flex; align-items:center; justify-content:center;\n}\n.arrow-btn:hover { background:rgba(79,142,247,0.2); border-color:var(--c-accent); color:var(--c-accent); }\n```\n\n```javascript\n// 完整导航 JS\nconst slides = Array.from(document.querySelectorAll('.slide'));\nconst dotsContainer = document.getElementById('nav-dots');\n\nslides.forEach((_, i) => {\n const btn = document.createElement('button');\n btn.className = 'dot' + (i === 0 ? ' active' : '');\n btn.title = `第 ${i+1} 页`;\n btn.addEventListener('click', () => goTo(i));\n dotsContainer.appendChild(btn);\n});\n\nconst dots = () => Array.from(dotsContainer.querySelectorAll('.dot'));\nlet current = 0;\n\nfunction goTo(i) {\n i = Math.max(0, Math.min(slides.length-1, i));\n slides[i].scrollIntoView({ behavior:'smooth' });\n dots().forEach((d,idx) => d.classList.toggle('active', idx===i));\n current = i;\n}\n\ndocument.addEventListener('keydown', e => {\n if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }\n if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); goTo(current-1); }\n});\n\ndocument.getElementById('btn-up').addEventListener('click', () => goTo(current-1));\ndocument.getElementById('btn-dn').addEventListener('click', () => goTo(current+1));\n\nnew IntersectionObserver(entries => {\n entries.forEach(en => {\n if (en.isIntersecting) {\n current = slides.indexOf(en.target);\n dots().forEach((d,i) => d.classList.toggle('active', i===current));\n }\n });\n}, { threshold:0.6 }).observe = (() => {\n const io = new IntersectionObserver(entries => {\n entries.forEach(en => {\n if (en.isIntersecting) {\n current = slides.indexOf(en.target);\n dots().forEach((d,i) => d.classList.toggle('active', i===current));\n }\n });\n }, { threshold:0.6 });\n slides.forEach(s => io.observe(s));\n})();\n```\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nGenerates HTML-based slide decks as a modern alternative to PPT/PPTX, using 16:9 CSS scroll-snap slides with keyboard, scroll, on-screen navigation, and browser print-to-PDF export.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[boboy-j](https://clawhub.ai/user/boboy-j)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, and presentation authors use this skill to create responsive HTML slide decks for technical talks, academic reports, product pitches, brand presentations, and organization history or culture presentations.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill strongly defaults presentation requests to HTML output instead of PPTX.\n\nMitigation: Ask the agent explicitly for PPTX when that format is required.\n\nRisk: Generated decks may save files as part of the slide creation workflow.\n\nMitigation: Review generated file paths and contents before sharing or deploying the deck.\n\nRisk: Generated HTML decks may load fonts from Google when opened in a browser.\n\nMitigation: Request local fonts or approved font sources when external font loading is not acceptable.\n\n## Reference(s):\n\n- [HTML PPT Design System](artifact/references/design-system.md)\n- [Blank Starter Template](artifact/assets/blank-starter.html)\n\n## Skill Output:\n\n**Output Type(s):** [code, markdown, configuration, guidance]\n\n**Output Format:** [HTML, CSS, JavaScript, and Markdown guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces 16:9 browser-rendered slide decks that can be exported to PDF through browser print.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release evidence)\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.","readmeExcerpt":"Skill: html-ppt-skill Owner: boboy-j Summary: 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T08:42:25.803Z | auto Initial release of html-ppt-skill: - Create fully responsive HTML-based slideshows as a modern PPT alternative. - Enforces strict 16:9 r","codeSnippets":[],"executableExamples":[{"language":"css","snippet":"/* 每张幻灯片：宽 = 100vw，高 = 56.25vw（即 9/16）*/\n.slide {\n width: 100vw;\n height: 56.25vw;\n overflow: hidden;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n}\n\n/* body 开启强制对齐 */\nbody {\n scroll-snap-type: y mandatory;\n overflow-y: scroll;\n height: 100%;\n}\nhtml { height: 100%; }"},{"language":"css","snippet":"@media print {\n html, body { height: auto; overflow: visible; scroll-snap-type: none; }\n #nav-dots, #nav-arrows { display: none !important; }\n .slide {\n width: 297mm;\n height: 167.0625mm; /* 297 × 9/16 = 167.0625 */\n page-break-after: always;\n break-after: page;\n scroll-snap-align: none;\n }\n}"},{"language":"javascript","snippet":"const slides = Array.from(document.querySelectorAll('.slide'));\nlet current = 0;\n\nfunction goTo(i) {\n i = Math.max(0, Math.min(slides.length - 1, i));\n slides[i].scrollIntoView({ behavior: 'smooth' });\n current = i;\n updateDots(i);\n}\n\n// 键盘支持\ndocument.addEventListener('keydown', e => {\n if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }\n if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); goTo(current-1); }\n});\n\n// IntersectionObserver 同步当前页\nconst io = new IntersectionObserver(entries => {\n entries.forEach(en => { if (en.isIntersecting) { current = slides.indexOf(en.target); updateDots(current); }});\n}, { threshold: 0.6 });\nslides.forEach(s => io.observe(s));"},{"language":"text","snippet":"\n Google Fonts 引入（选择与主题匹配的中文字体）\n \n\n\n \n
↑ ↓ 按钮
\n\n
...
\n
...
\n ...\n\n \n"},{"language":"css","snippet":":root {\n /* 根据主题替换以下变量 */\n --c-bg: #0D0F14; /* 背景色 */\n --c-surface: #151820; /* 卡片背景 */\n --c-border: rgba(255,255,255,0.08);\n --c-accent: #4F8EF7; /* 主强调色 */\n --c-accent2: #A78BFA; /* 副强调色 */\n --c-text: #F0F2F8; /* 主文字色 */\n --c-muted: rgba(240,242,248,0.45); /* 次要文字 */\n\n --f-display: 'ZCOOL XiaoWei', serif;\n --f-body: 'Noto Sans SC', sans-serif;\n\n /* 固定不变 */\n --slide-w: 100vw;\n --slide-h: 56.25vw;\n}"},{"language":"text","snippet":"V1.0.0/\n├── SKILL.md # Skill 核心指令（AI 调用入口）\n├── assets/\n│ └── blank-starter.html # 空白起始模板（开箱即用）\n├── references/\n│ └── design-system.md # 完整设计系统文档\n│ ├── 6 套预设颜色主题\n│ ├── 通用 CSS 组件（排版 / 卡片 / 统计 / 列表等）\n│ ├── 5 种背景装饰模式\n│ ├── 5 种布局模板代码\n│ ├── 动画效果库\n│ └── 导航组件完整代码\n└── README.md # 本文件"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: html-ppt\ndescription: >\n 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9\n 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。\n 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"deck\"\n 等关键词时，必须触发本 skill，优先以 HTML 形式交付，而非生成 .pptx 文件。\n 即使用户只说\"帮我做个介绍某主题的 PPT\"而未指明格式，也应主动采用本 skill 的方案。\n---\n\n# HTML PPT Skill\n\n用 HTML + CSS 制作媲美专业设计软件的幻灯片，视觉效果远超传统 PPT 工具。\n\n## 核心规范（必须遵守）\n\n### 1. 比例与分页\n\n```css\n/* 每张幻灯片：宽 = 100vw，高 = 56.25vw（即 9/16）*/\n.slide {\n width: 100vw;\n height: 56.25vw;\n overflow: hidden;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n}\n\n/* body 开启强制对齐 */\nbody {\n scroll-snap-type: y mandatory;\n overflow-y: scroll;\n height: 100%;\n}\nhtml { height: 100%; }\n```\n\n**原理**：`56.25vw = 9/16 × 100vw`，无论屏幕分辨率如何，每页都精确为 16:9。\n\n### 2. 打印 / 导出 PDF\n\n```css\n@media print {\n html, body { height: auto; overflow: visible; scroll-snap-type: none; }\n #nav-dots, #nav-arrows { display: none !important; }\n .slide {\n width: 297mm;\n height: 167.0625mm; /* 297 × 9/16 = 167.0625 */\n page-break-after: always;\n break-after: page;\n scroll-snap-align: none;\n }\n}\n```\n\n用户按 **Ctrl+P → 另存为 PDF** 即可导出，每页精确对应一张幻灯片。\n\n### 3. 导航 JS（标准实现，每次必须包含）\n\n```javascript\nconst slides = Array.from(document.querySelectorAll('.slide'));\nlet current = 0;\n\nfunction goTo(i) {\n i = Math.max(0, Math.min(slides.length - 1, i));\n slides[i].scrollIntoView({ behavior: 'smooth' });\n current = i;\n updateDots(i);\n}\n\n// 键盘支持\ndocument.addEventListener('keydown', e => {\n if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }\n if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); goTo(current-1); }\n});\n\n// IntersectionObserver 同步当前页\nconst io = new IntersectionObserver(entries => {\n entries.forEach(en => { if (en.isIntersecting) { current = slides.indexOf(en.target); updateDots(current); }});\n}, { threshold: 0.6 });\nslides.forEach(s => io.observe(s));\n```\n\n---\n\n## 标准文件结构\n\n每次生成的 HTML 文件必须包含以下部分：\n\n```\n\n Google Fonts 引入（选择与主题匹配的中文字体）\n \n\n\n \n
↑ ↓ 按钮
\n\n
...
\n
...
\n ...\n\n \n\n```\n\n---\n\n## 设计规范\n\n详细设计组件库见 `references/design-system.md`。\n\n### 字体选择原则\n- **中文展示字体**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）\n- **中文正文字体**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）\n- **英文展示字体**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`\n- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用，无设计感）\n\n### 颜色主题选择\n根据演示主题选择合适的色系，参考 `references/design-system.md` 中的预设主题。\n\n### 每张幻灯片的尺寸感知\n- 字体大小使用 `vw` 单位（如 `3.5vw`），随屏幕等比缩放\n- 间距使用 `%` 或 `vw` 单位，避免固定 `px`\n- 内容区 padding 建议：`4% 6%`\n\n---\n\n## 典型页面类型\n\n| 页面类型 | 适用场景 | 布局要点 |\n|----------|----------|----------|\n| 封面页 | 第一页 | 大标题居中或左对齐，背景有视觉冲击"},{"path":"README.md","content":"# HTML PPT Skill — 用 HTML + CSS 制作专业幻灯片\n\n> **版本**：V1.0.0 \n> **语言**：HTML / CSS / JavaScript \n> **核心理念**：用 Web 技术取代传统 PPT/PPTX，制作 16:9 比例、可键盘翻页、可导出 PDF 的专业演示文稿。\n\n---\n\n## 概述\n\nHTML PPT Skill 是一套完整的基于 HTML + CSS 制作幻灯片的工作流方案。与 PowerPoint / Keynote / Canva 等传统工具不同，它利用 **CSS `scroll-snap`** 实现精准的页面切割，以 **16:9 视口比例** 固定每张幻灯片，最终可通过浏览器 **Ctrl+P 导出为 PDF**。\n\n适用场景：\n- 技术分享 / 开发者演讲\n- 学术报告 / 论文答辩\n- 品牌宣传 / 产品路演\n- 企业文化 / 历史展示\n\n---\n\n## 特性\n\n| 特性 | 说明 |\n|------|------|\n| 🎯 **16:9 精确比例** | 每张幻灯片严格 `100vw × 56.25vw`，任何屏幕均等比例显示 |\n| ⌨️ **键盘导航** | `↑ ↓ ← → PageUp PageDown` 均可翻页 |\n| 🔵 **导航指示器** | 右侧圆点导航 + 底部箭头按钮，自动高亮当前页 |\n| 🖨️ **一键导出 PDF** | 浏览器打印 → 另存为 PDF，每页精确对应一张幻灯片 |\n| 📱 **响应式** | 所有尺寸使用 `vw` 单位，手机 / 平板 / 投影仪等比缩放 |\n| 🎨 **预设主题** | 6 套精心搭配的配色方案（深空暗黑、金墨、自然绿、纯白简约、暖橙、冰蓝） |\n| 🧩 **即用组件** | 排版系统、卡片、数据统计、进度条、时间线等开箱即用 |\n| ✨ **动画效果** | 入场动画、脉冲光圈、滚动网格等轻量 CSS 动画 |\n| 🖼️ **背景装饰** | 网格、光晕、水印、斜线分割、圆点阵列 5 种背景模式 |\n\n---\n\n## 快速开始\n\n### 方式一：从空白模板开始\n\n直接打开 `assets/blank-starter.html`，在 `` 注释下方复制 `.slide` 块即可。\n\n### 方式二：从设计系统模板开始\n\n参考 `references/design-system.md` 中的布局代码（封面页、双栏页、四格卡片页、数据页、时间线页），复制粘贴后修改内容。\n\n---\n\n## 文件结构\n\n```\nV1.0.0/\n├── SKILL.md # Skill 核心指令（AI 调用入口）\n├── assets/\n│ └── blank-starter.html # 空白起始模板（开箱即用）\n├── references/\n│ └── design-system.md # 完整设计系统文档\n│ ├── 6 套预设颜色主题\n│ ├── 通用 CSS 组件（排版 / 卡片 / 统计 / 列表等）\n│ ├── 5 种背景装饰模式\n│ ├── 5 种布局模板代码\n│ ├── 动画效果库\n│ └── 导航组件完整代码\n└── README.md # 本文件\n```\n\n---\n\n## 使用指南\n\n### 1. 核心 HTML 结构\n\n```html\n
\n
\n \n
\n 01 / 10\n
\n```\n\n每张幻灯片必备：\n- `class=\"slide\"` — 应用 16:9 尺寸和 scroll-snap 对齐\n- `id=\"slide-N\"` — 唯一标识（N 为页码序号）\n- `.slide-num` — 底部页码\n\n### 2. 导航系统（自动生效）\n\n- **右侧圆点**：点击跳转对应页面\n- **底部箭头**：上 / 下翻页\n- **键盘**：`↑ ↓ ← →` 或 `PageUp / PageDown`\n- **滚动**：鼠标滚轮 / 触控板逐页滑动\n- **IntersectionObserver**：滚动时自动同步高亮当前页\n\n### 3. 导出 PDF\n\n1. 在浏览器中打开 HTML 文件\n2. 按 `Ctrl + P` (Windows) 或 `Cmd + P` (Mac)\n3. 目标打印机选择「另存为 PDF」\n4. 取消勾选「页眉和页脚」\n5. 保存 — 每张幻灯片即为一页 PDF\n\n### 4. 编写新幻灯片\n\nSKILL.md 中定义了 8 种典型页面类型：\n\n| 页面类型 | 适用场景 |\n|----------|----------|\n| 封面页 | 第一页，大标题 + 视觉冲击背景 |\n| 目录页 | 第二页，2×2 或 1×N 卡片网格 |\n| 双栏内容页 | 文字 + 图片 / 列表 |\n| 全图页 | 图片铺满 + 半透明遮罩文字 |\n| 数据页 | 大数字 + 进度条 + 指标说明 |\n| 时间线页 | 历史 / 流程 / 路线图 |\n| 引用页 | 金句 / 观点 / 名人名言 |\n| 结尾页 | 致谢 / Q&A / 联系方式 |\n\n---\n\n## 设计系统\n\n详见 `references/design-system.md`，包含：\n\n### 预设颜色主题\n\n| 主题 | 场景 | 主色 |\n|------|------|------|\n| 🌑 深空暗黑 | 科技 / 互联网 | `#4F8EF7` |\n| 🏮 金墨 | 中国文化 / 历史 | `#D4A017` |\n| 🌿 自然绿 | 环保 / 农业 / 医疗 | `#34D399` |\n| ☁️ 纯白简约 | 学术 / 报告 | `#2563EB` |\n| 🔥 暖橙 | 创业 / 品牌 / 活力 | `#F97316` |\n| 🧊 冰蓝 | 金融 / 咨询 / 企业 | `#1E40AF` |\n\n### 字体体系\n\n- **中文展示**：`ZCOOL XiaoWei`（庄重）、`Ma Shan Zheng`（书法）、`Long Cang`（手写）\n- **中文正文**：`Noto Serif SC`（衬线）、`Noto Sans SC`（无衬线）\n- **英文展示**：`Playfair Display`、`Cormorant Garamond`、`Space Mono`\n- **禁止使用**：Arial、Inter、Roboto、system-ui（太通用）\n\n### CSS 组件\n\n| 组件 | 类名 | 用途 |\n|------|------|-----"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7ae6m5fzwqs7fmdmh97gr1yh82m2py\",\n \"slug\": \"html-ppt-skill\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1779957745803\n}"},{"path":"references/design-system.md","content":"# HTML PPT Design System\n\n设计组件库与预设主题，供 SKILL.md 引用。\n\n---\n\n## 目录\n1. [预设颜色主题](#预设颜色主题)\n2. [通用 CSS 组件](#通用-css-组件)\n3. [背景装饰模式](#背景装饰模式)\n4. [布局模板代码](#布局模板代码)\n5. [动画效果库](#动画效果库)\n\n---\n\n## 预设颜色主题\n\n### 🌑 深空暗黑（科技/互联网）\n```css\n--c-bg: #0D0F14; --c-surface: #151820;\n--c-accent: #4F8EF7; --c-accent2: #A78BFA;\n--c-text: #F0F2F8; --c-muted: rgba(240,242,248,0.45);\n```\n\n### 🏮 金墨（中国文化/历史/政府）\n```css\n--c-bg: #1A1209; --c-surface: #251A0D;\n--c-accent: #D4A017; --c-accent2: #C0392B;\n--c-text: #FAF5E8; --c-muted: rgba(250,245,232,0.5);\n--f-display: 'ZCOOL XiaoWei', serif;\n```\n\n### 🌿 自然绿（环保/农业/医疗）\n```css\n--c-bg: #0A1A0F; --c-surface: #0F2415;\n--c-accent: #34D399; --c-accent2: #6EE7B7;\n--c-text: #ECFDF5; --c-muted: rgba(236,253,245,0.5);\n```\n\n### ☁️ 纯白简约（学术/报告/通用）\n```css\n--c-bg: #FFFFFF; --c-surface: #F8F9FA;\n--c-border: rgba(0,0,0,0.08);\n--c-accent: #2563EB; --c-accent2: #7C3AED;\n--c-text: #111827; --c-muted: #6B7280;\n```\n\n### 🔥 暖橙（创业/品牌/活力）\n```css\n--c-bg: #0F0A06; --c-surface: #1A1208;\n--c-accent: #F97316; --c-accent2: #FBBF24;\n--c-text: #FFF7ED; --c-muted: rgba(255,247,237,0.5);\n```\n\n### 🧊 冰蓝（金融/咨询/企业）\n```css\n--c-bg: #F0F4F8; --c-surface: #FFFFFF;\n--c-border: rgba(30,64,175,0.1);\n--c-accent: #1E40AF; --c-accent2: #0EA5E9;\n--c-text: #0F172A; --c-muted: #475569;\n```\n\n---\n\n## 通用 CSS 组件\n\n### 基础排版\n```css\n/* 超大展示标题 */\n.title-xl {\n font-family: var(--f-display);\n font-size: 6.5vw; line-height: 1.1;\n letter-spacing: 0.04em;\n}\n/* 页面主标题 */\n.title-lg {\n font-family: var(--f-serif, var(--f-body));\n font-size: 3.8vw; line-height: 1.25; font-weight: 700;\n}\n/* 章节标题 */\n.title-md {\n font-size: 2.4vw; line-height: 1.3; font-weight: 700;\n}\n/* 正文 */\n.body-text {\n font-size: 1.2vw; line-height: 1.9; color: var(--c-muted); font-weight: 300;\n}\n/* 小标签 */\n.label {\n font-size: 0.85vw; letter-spacing: 0.35em; text-transform: uppercase;\n color: var(--c-accent); font-weight: 500; margin-bottom: 1%;\n}\n```\n\n### 分割线\n```css\n.divider {\n width: 5vw; height: 2px;\n background: linear-gradient(90deg, var(--c-accent), transparent);\n margin: 1.5% 0;\n}\n```\n\n### 卡片\n```css\n.card {\n background: rgba(255,255,255,0.04);\n border: 1px solid var(--c-border);\n border-radius: 4px;\n padding: 2% 2.5%;\n transition: border-color 0.3s;\n}\n.card:hover { border-color: rgba(79,142,247,0.3); }\n/* 顶部强调线变体 */\n.card-accent { border-top: 2px solid var(--c-accent); }\n```\n\n### 数据统计\n```css\n.stat-num {\n font-family: var(--f-display);\n font-size: 5vw; color: var(--c-accent); line-height: 1;\n}\n.stat-label {\n font-size: 0.9vw; color: var(--c-muted);\n letter-spacing: 0.15em; margin-top: 0.3vw;\n}\n```\n\n### 列表\n```css\n.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 0.8%; }\n.bullet-list li {\n font-size: 1.15vw; color: var(--c-muted);\n padding-left: 1.4vw; position: relative; line-height: 1.7;\n}\n.bullet-list li::before {\n content: ''; position: absolute; left: 0; top: 0.65vw;\n width: 0.4vw; height: 0.4vw;\n border-radius: 50%; background: var(--c-accent);\n}\n```\n\n### 进度条\n```css\n/* 容器 */\n"},{"path":"skill-card.md","content":"## Description:\n\nGenerates HTML-based slide decks as a modern alternative to PPT/PPTX, using 16:9 CSS scroll-snap slides with keyboard, scroll, on-screen navigation, and browser print-to-PDF export.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[boboy-j](https://clawhub.ai/user/boboy-j)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, and presentation authors use this skill to create responsive HTML slide decks for technical talks, academic reports, product pitches, brand presentations, and organization history or culture presentations.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill strongly defaults presentation requests to HTML output instead of PPTX.\n\nMitigation: Ask the agent explicitly for PPTX when that format is required.\n\nRisk: Generated decks may save files as part of the slide creation workflow.\n\nMitigation: Review generated file paths and contents before sharing or deploying the deck.\n\nRisk: Generated HTML decks may load fonts from Google when opened in a browser.\n\nMitigation: Request local fonts or approved font sources when external font loading is not acceptable.\n\n## Reference(s):\n\n- [HTML PPT Design System](artifact/references/design-system.md)\n- [Blank Starter Template](artifact/assets/blank-starter.html)\n\n## Skill Output:\n\n**Output Type(s):** [code, markdown, configuration, guidance]\n\n**Output Format:** [HTML, CSS, JavaScript, and Markdown guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces 16:9 browser-rendered slide decks that can be exported to PDF through browser print.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release evidence)\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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de... Skill: html-ppt-skill Owner: boboy-j Summary: 制作以 HTML 为载体的幻灯片演示文稿（代替传统 PPT/PPTX）。每张幻灯片严格遵循 16:9 比例，使用 CSS scroll-snap 实现翻页，支持键盘/滚轮操作，并可通过浏览器打印导出 PDF。 每当用户提到\"做 PPT\"、\"做幻灯片\"、\"做演示文稿\"、\"写 PPT\"、\"制作 slides\"、\"de... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-28T08:42:25.803Z | auto Initial release of html-ppt-skill: - Create fully responsive HTML-based slideshows as a modern PPT alternative. - Enforces strict 16:9 r","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":893,"uniquenessScore":53,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T03:39:34.205Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T03:39:34.205Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:53:43.657Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}