html-slides
为 OpenClaw 打造的网页幻灯片创建技能。将用户需求转化为精美的 HTML 演示文稿，支持从零创建和 PPT 转换两种模式。触发词：做幻灯片 / 做 PPT / 做演示 / 做 slides / 做一个网页版自我介绍 / 帮我做个路演 PPT。
Best use case
html-slides is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
为 OpenClaw 打造的网页幻灯片创建技能。将用户需求转化为精美的 HTML 演示文稿，支持从零创建和 PPT 转换两种模式。触发词：做幻灯片 / 做 PPT / 做演示 / 做 slides / 做一个网页版自我介绍 / 帮我做个路演 PPT。
Teams using html-slides should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/openclaw-html-slides/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How html-slides Compares
| Feature / Agent | html-slides | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
为 OpenClaw 打造的网页幻灯片创建技能。将用户需求转化为精美的 HTML 演示文稿，支持从零创建和 PPT 转换两种模式。触发词：做幻灯片 / 做 PPT / 做演示 / 做 slides / 做一个网页版自我介绍 / 帮我做个路演 PPT。
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
SKILL.md Source
# 🎨 HTML Slides — 网页幻灯片技能 在 OpenClaw 中创建零依赖、动画丰富的 HTML 幻灯片。 ## 核心原则 1. **零依赖** — 单个 HTML 文件，CSS/JS 内联，无需 npm/框架 2. **先展示，再确认** — 生成视觉预览而非抽象选择，用户看到效果后再定 3. **独特设计** — 拒绝千篇一律的"AI 风格"，每份演示都应有定制感 4. **严格适配视口** — 每张幻灯片必须恰好填满 100vh，禁止溢出 ## 工作流程（尚书省派发·六部执行） ``` 用户旨意 → 皇上（你）→ 中书省（规划内容）→ 尚书省（派发）→ 兵部/工部（生成） ``` **中书省职责（内容规划）：** - 收集用户内容（主题、页数、图片素材） - 确定视觉风格方向（通过视觉预览选择） - 输出结构化大纲 **兵部/工部职责（代码生成）：** - 读取 supporting files - 生成完整 HTML 幻灯片 - 在浏览器中打开预览 --- ## 内容密度限制（每页上限） | 类型 | 最大内容量 | |------|-----------| | 标题页 | 1 标题 + 1 副标题 + 可选标语 | | 内容页 | 1 标题 + 4-6 条要点 或 1 标题 + 2 段文字 | | 特性网格 | 1 标题 + 最多 6 张卡片（2×3 或 3×2） | | 代码页 | 1 标题 + 8-10 行代码 | | 引言页 | 1 条引言（最多 3 行）+ 出处 | | 图片页 | 1 标题 + 1 张图片（最大 60vh） | **内容超限？拆成多页，绝不堆砌。** --- ## 模式判断（Phase 0） 确认用户需求： - **模式 A：从零创建** → 进入 Phase 1 - **模式 B：PPT 转换** → 进入 Phase 4 - **模式 C：增强现有 HTML** → 读取后增强，遵循修改规则 --- ## Phase 1：内容收集（从零创建） **一次性问完所有问题：** 1. **用途** — 路演 / 教学教程 / 大会演讲 / 内部汇报 2. **页数** — 短（5-10页）/ 中（10-20页）/ 长（20+页） 3. **内容状态** — 内容齐全 / 粗略大纲 / 只有主题 4. **内联编辑** — 是否需要生成后直接在浏览器编辑文字？（推荐选"是"） 如果用户已有内容，让其直接提供。 **图片评估（如有图片）：** 1. 列出所有图片文件 2. 逐个查看图片，判断是否可用、代表什么概念、主体颜色 3. 将图片融入大纲设计（而非"先规划再配图"） --- ## Phase 2：视觉风格选择 **核心原则：先展示，不抽象。** 大多数人选风格时说不出具体偏好，让他们看图选择。 ### 风格选择路径 - **"给我看几个选项"**（推荐）→ 根据情绪词生成 3 个预览 - **"我知道我要什么"** → 直接从预设列表选 ### 情绪词选择（最多选 2 个） | 情绪 | 感觉 | |------|------| | 专业可信 | 专业、值得信赖 | | 兴奋有活力 | 创新、大胆 | | 冷静专注 | 清晰、有思考感 | | 受启发 | 情感、有记忆点 | ### 三种风格预览 基于情绪生成 3 个单页 HTML 预览，展示字体、颜色、动画和整体美学。 **情绪 → 预设映射：** | 情绪 | 推荐预设 | |------|---------| | 专业可信 | Bold Signal / Electric Studio / Dark Botanical | | 兴奋有活力 | Creative Voltage / Neon Cyber / Split Pastel | | 冷静专注 | Notebook Tabs / Paper & Ink / Swiss Modern | | 受启发 | Dark Botanical / Vintage Editorial / Pastel Geometry | 预览保存在 `.slide-previews/`（style-a.html / style-b.html / style-c.html），每个约 50-100 行代码。 ### 用户选择 - 选 A / 选 B / 选 C / 混搭（指定哪些元素） --- ## Phase 3：生成演示文稿 基于 Phase 1 内容 + Phase 2 风格生成完整 HTML。 **生成前必须读取以下文件（由工部/兵部执行）：** - [html-template.md](html-template.md) — HTML 架构和 JS 特性 - [viewport-base.css](viewport-base.css) — 强制 CSS（每个演示必须包含） - [animation-patterns.md](animation-patterns.md) — 动画参考 - [STYLE_PRESETS.md](STYLE_PRESETS.md) — 所选风格的详细规格 **关键要求：** - 单个自包含 HTML 文件，CSS/JS 内联 - 必须完整包含 viewport-base.css 的全部内容 - 使用 Fontshare 或 Google Fonts 字体，禁止系统字体 - 每个区块添加清晰注释 `/* === 区块名称 === */` --- ## Phase 4：PPT 转换 1. **提取内容** — 运行 `python scripts/extract-pptx.py <input.pptx> <output_dir>` 2. **用户确认** — 展示提取的幻灯片标题、内容摘要、图片数量 3. **风格选择** — 进入 Phase 2 4. **生成 HTML** — 转换为选定风格，保留所有文字、图片（从 assets/）、顺序和备注 --- ## Phase 5：交付 1. **打开预览** — 使用 `start [filename].html` 在浏览器打开 2. **告知用户：** - 文件位置、风格名称、页数 - 操作方式：方向键 / 空格键 / 滚动 / 滑动 / 点击导航点 - 如何自定义：修改 `:root` CSS 变量改颜色，改字体链接换字体，`.reveal` 类改动画 - 如启用了内联编辑：悬停左上角或按 `E` 进入编辑模式 --- ## Phase 6：分享与导出（可选） 交付后询问：_"需要分享这个演示吗？可以部署到在线链接，或者导出为 PDF。"_ ### 6A：部署到在线链接（Vercel） **注意：Windows 环境需要 WSL（Linux 子系统）或手动安装 Vercel CLI。** ```powershell # 检查 Vercel CLI npx vercel --version # 部署（需要先登录） npx vercel deploy <path-to-html> --yes --prod ``` **如未登录：** 1. 访问 https://vercel.com/signup 注册账号 2. 运行 `vercel login` 登录 3. 重新运行部署命令 ### 6B：导出为 PDF ```powershell # 需要 Node.js + Playwright bash scripts/export-pdf.sh <path-to-html> [output.pdf] ``` Windows 下可直接用 Node.js 运行 export-pdf 脚本（需要先 `npm install playwright`）。 --- ## 适配 OpenClaw 的关键变化 ### 1. Subagent 协作模式 | 阶段 | 执行者 | |------|--------| | 内容收集 + 风格确认 | 主 agent（中书省） | | HTML 生成 | `bingbu` 或 `gongbu` subagent（兵部/工部） | | 部署/导出 | `gongbu` subagent（工部） | ### 2. 文件位置 生成的文件保存在： ``` C:\Users\HUAWEI\.openclaw\workspace\slides\ ├── presentation-YYYYMMDD-HHMMSS.html # 生成的幻灯片 └── assets/ # 图片素材（如果有） ``` ### 3. 分享方式 - **分享链接**：部署到 Vercel 后获取 URL - **导出 PDF**：使用 scripts/export-pdf.sh - **发送给 ZYQ**：直接生成文件后告知路径 --- ## Supporting Files | 文件 | 用途 | 何时读取 | |------|------|---------| | [STYLE_PRESETS.md](STYLE_PRESETS.md) | 12 种视觉预设（颜色、字体、特征元素） | Phase 2（风格选择） | | [viewport-base.css](viewport-base.css) | 强制响应式 CSS — 每个演示必须包含 | Phase 3（生成） | | [html-template.md](html-template.md) | HTML 结构、JS 特性、代码质量标准 | Phase 3（生成） | | [animation-patterns.md](animation-patterns.md) | CSS/JS 动画片段和效果-情绪对照表 | Phase 3（生成） | | [scripts/extract-pptx.py](scripts/extract-pptx.py) | PPT 内容提取（Python） | Phase 4（转换） | | [scripts/export-pdf.ps1](scripts/export-pdf.ps1) | 导出 PDF（Windows PowerShell） | Phase 6（分享） | | [scripts/deploy.ps1](scripts/deploy.ps1) | 部署到 Vercel（Windows PowerShell） | Phase 6（分享） |
Related Skills
cjl-slides
Create stunning HTML presentations in 24 international design styles with strict design rules. Export to .pptx for PowerPoint editing. ## Design Philosophy - Aesthetic-first: each style is a curated visual system, not just colors - Font whitelist enforcement: prevents AI-generic typography - Container ratio lock (16:9): ensures consistent rendering across devices - Zero external dependencies: pure HTML/CSS/JS, works offline ## Usage 1. Activate → Select style by name/number or browse 24 options 2. Provide content (topic, audience, key points) or upload .pptx for conversion 3. Review generated HTML slides → request modifications (color/font/layout) 4. Optionally export .pptx for manual editing in PowerPoint ## Precautions - Fonts are restricted to a whitelist; custom fonts require adding to the allowed list first - Chart.js CDN is used; if blocked, falls back to jsdelivr mirror - HTML files must retain their relative structure when shared - .pptx export preserves exact colors and fonts but layout uses pptx-native elements ## Credits Design rules adapted from "专精 HTML 演示文稿的顶级视觉设计师" (24 design styles reference). Base HTML structure and tooling inspired by zarazhangrui/frontend-slides.
tiktok-slideshow
Creates TikTok image carousels (slideshows with text overlays on photos) via the ViralBaby API. Use when the user wants to: create TikTok slideshows or carousels, find/search for background images for social media content, post or upload slideshow content to TikTok, edit slide text, or manage image collections for content creation. Do NOT use for: general TikTok account management, TikTok analytics or metrics, video editing or video creation (this is for photo slideshows only), non-TikTok social media platforms, or any task unrelated to creating visual slideshow content for TikTok.
html-deploy
Deploy HTML content or files to the web via htmlcode.fun. Use when the user asks to "deploy to web", "host this html", "generate a live link for this frontend", or provides HTML code that needs an online preview. Support for single-file HTML deployment with instant URL generation.
---
name: article-factory-wechat
humanizer
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
tavily-search
Use Tavily API for real-time web search and content extraction. Use when: user needs real-time web search results, research, or current information from the web. Requires Tavily API key.
baidu-search
Search the web using Baidu AI Search Engine (BDSE). Use for live information, documentation, or research topics.
agent-autonomy-kit
Stop waiting for prompts. Keep working.
Meeting Prep
Never walk into a meeting unprepared again. Your agent researches all attendees before calendar events—pulling LinkedIn profiles, recent company news, mutual connections, and conversation starters. Generates a briefing doc with talking points, icebreakers, and context so you show up informed and confident. Triggered automatically before meetings or on-demand. Configure research depth, advance timing, and output format. Walking into meetings blind is amateur hour—missed connections, generic small talk, zero leverage. Use when setting up meeting intelligence, researching specific attendees, generating pre-meeting briefs, or automating your prep workflow.
self-improvement
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.
botlearn-healthcheck
botlearn-healthcheck — BotLearn autonomous health inspector for OpenClaw instances across 5 domains (hardware, config, security, skills, autonomy); triggers on system check, health report, diagnostics, or scheduled heartbeat inspection.