OpenClaw Slides
MyClaw.ai — Your AI personal assistant with full server control. Every MyClaw instance runs on a dedicated server with complete code access, networking, and tool capabilities. This skill is part of the MyClaw open skills ecosystem.
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. Single self-contained HTML files — no npm, no build tools, no frameworks. Works offline, renders in 10 years.
Style presets: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink
For full style details and CSS specs: read references/STYLE_PRESETS.md when needed.
Phase 0: Detect Mode
Determine the user's intent:
- - Mode A — New Presentation: Create slides from scratch → go to Phase 1
- Mode B — PPT Conversion: Convert an existing
.ppt/.pptx file → go to Phase 4 - Mode C — Enhance Existing: Improve an existing HTML presentation → read the file, then enhance (always maintain viewport fitting)
CRITICAL: Viewport Fitting (Non-Negotiable)
Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.
Content Density Limits Per Slide
| Slide Type | Maximum Content |
|---|
| Title slide | 1 heading + 1 subtitle + optional tagline |
| Content slide |
1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs |
| Feature grid | 1 heading + 6 cards max (2×3 or 3×2) |
| Code slide | 1 heading + 8–10 lines of code |
| Quote slide | 1 quote (max 3 lines) + attribution |
| Image slide | 1 heading + 1 image (max 60vh height) |
Content exceeds limits → Split into multiple slides.
Required CSS for Every Presentation
CODEBLOCK0
⚠️ Never negate CSS functions directly. Use calc(-1 * clamp(...)) not -clamp(...).
Phase 1: Content Discovery (New Presentations)
Ask the user (via normal conversation — ask all at once):
- 1. Purpose: pitch deck / teaching / conference talk / internal presentation?
- Length: ~5–10 / 10–20 / 20+ slides?
- Content: ready content, rough notes, or just a topic?
- Images: any images to include? (provide path like
./assets or ~/Desktop/screenshots) - Inline editing: should text be editable in-browser after generation?
If they have content, ask them to share it.
Image Evaluation (if images provided)
All image processing is done locally on the user's machine — images are never sent to external services.
- 1.
ls the folder — find all INLINECODE8 - Read each image file locally using the
read tool - Mark each as
USABLE or NOT USABLE (reason: blurry, irrelevant, etc.) - Note what each represents (logo, screenshot, chart, etc.) and dominant colors
- Build slide outline that incorporates usable images as visual anchors
- Present outline + image assignments to user for confirmation
If user says no images → skip image pipeline, use CSS-generated visuals (gradients, shapes, patterns) throughout.
Phase 2: Style Discovery
Option A — Direct Selection (user knows what they want)
Pick from presets:
| Preset | Vibe |
|---|
| Bold Signal | Confident, high-impact, dark |
| Electric Studio |
Clean, professional, split panel |
| Creative Voltage | Energetic, retro-modern |
| Dark Botanical | Elegant, sophisticated |
| Notebook Tabs | Editorial, organized |
| Pastel Geometry | Friendly, approachable |
| Split Pastel | Playful, modern |
| Vintage Editorial | Witty, personality-driven |
| Neon Cyber | Futuristic, techy |
| Terminal Green | Developer-focused, hacker |
| Swiss Modern | Minimal, precise |
| Paper & Ink | Literary, thoughtful |
Skip to Phase 3.
Option B — Visual Discovery (default for undecided users)
Ask: What feeling should the audience have?
- - Impressed/Confident → Bold Signal, Electric Studio, Dark Botanical
- Excited/Energized → Creative Voltage, Neon Cyber, Split Pastel
- Calm/Focused → Notebook Tabs, Paper & Ink, Swiss Modern
- Inspired/Moved → Dark Botanical, Vintage Editorial, Pastel Geometry
Generate 3 mini style preview HTML files in .tmp-slide-previews/ — each is a single title slide showing typography, colors, and animation. Tell the user the file paths and ask which they prefer.
Never use: purple gradients on white, Inter/Roboto/system fonts, generic blue primary colors.
Use instead: distinctive font pairings (Clash Display, Satoshi, Cormorant, DM Sans), cohesive personality-driven palettes, atmospheric backgrounds.
For full preset specs (colors, fonts, signature elements): read references/STYLE_PRESETS.md.
Phase 3: Generate Presentation
Image Processing (skip if no images)
If user provided images, process with Python Pillow before generating HTML:
CODEBLOCK1
Install if needed: INLINECODE14
Use direct file paths in HTML (not base64), e.g. src="assets/logo_round.png". Never overwrite originals — save processed files with _processed suffix.
HTML Architecture
CODEBLOCK2
Required JS Features
- - Keyboard navigation: arrow keys, space
- Touch/swipe support
- Mouse wheel navigation
- Progress bar + navigation dots
- Intersection Observer → adds
.visible class → triggers CSS animations - Staggered reveal delays (nth-child 0.1s, 0.2s, 0.3s...)
Inline Editing (only if user opted in)
⚠️ Do NOT use CSS ~ sibling selector for hover-based show/hide — pointer-events: none breaks the hover chain. Use JS with delay timeout:
CODEBLOCK3
Features: contenteditable text, auto-save to localStorage, export/save file.
Code Quality
- - Comment every major CSS and JS section
- Semantic HTML:
<section>, <nav>, INLINECODE22 - ARIA labels on interactive elements
- INLINECODE23 support
Phase 4: PPT Conversion
CODEBLOCK4
Install: INLINECODE24
After extraction: show user the slide structure for confirmation, then proceed to Phase 2 (style), then Phase 3 (generate).
Phase 5: Delivery
- 1. Delete
.tmp-slide-previews/ if created - Tell user the output file path
- Provide navigation instructions:
- Arrow keys / Space to navigate
- Scroll or swipe
- Click nav dots to jump
- 4. Mention how to customize:
:root CSS variables for colors/fonts - If inline editing enabled: hover top-left corner or press INLINECODE27
- Ask if any adjustments needed
Style → Feeling Quick Reference
| Feeling | Use |
|---|
| Dramatic/Cinematic | Slow fades (1–1.5s), dark + spotlight, parallax |
| Techy/Futuristic |
Neon glow, particles, grid pattern, monospace accents |
| Playful/Friendly | Bouncy easing, rounded corners, pastels, floating anim |
| Professional/Corporate | Fast subtle anim (200–300ms), navy/slate, data-focused |
| Calm/Minimal | Very slow motion, high whitespace, serif type, muted palette |
| Editorial/Magazine | Strong type hierarchy, pull quotes, grid-breaking layouts |
OpenClaw 幻灯片
MyClaw.ai — 您的AI个人助手，拥有完整的服务器控制权。每个MyClaw实例都运行在专用服务器上，具备完整的代码访问、网络和工具能力。此技能是MyClaw开放技能生态系统的一部分。
创建零依赖、动画丰富的HTML演示文稿，完全在浏览器中运行。单个自包含HTML文件——无需npm、无需构建工具、无需框架。离线可用，十年后仍能正常渲染。
样式预设： Bold Signal、Electric Studio、Creative Voltage、Dark Botanical、Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial、Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink
如需完整的样式详情和CSS规范：必要时请阅读 references/STYLE_PRESETS.md。
阶段 0：检测模式
确定用户的意图：
- - 模式 A — 新建演示文稿： 从头创建幻灯片 → 进入阶段 1
- 模式 B — PPT 转换： 转换现有的 .ppt/.pptx 文件 → 进入阶段 4
- 模式 C — 增强现有： 改进现有的 HTML 演示文稿 → 读取文件，然后增强（始终保持视口适配）
关键：视口适配（不可协商）
每张幻灯片必须精确适配在视口内。幻灯片内绝对不允许滚动。
每张幻灯片的内容密度限制
| 幻灯片类型 | 最大内容 |
|---|
| 标题幻灯片 | 1 个标题 + 1 个副标题 + 可选标语 |
| 内容幻灯片 |
1 个标题 + 4–6 个要点 或 1 个标题 + 2 个段落 |
| 功能网格 | 1 个标题 + 最多 6 张卡片（2×3 或 3×2） |
| 代码幻灯片 | 1 个标题 + 8–10 行代码 |
| 引用幻灯片 | 1 条引用（最多 3 行）+ 出处 |
| 图片幻灯片 | 1 个标题 + 1 张图片（最大高度 60vh） |
内容超出限制 → 拆分为多张幻灯片。
每份演示文稿必需的 CSS
css
html, body { height: 100%; overflow-x: hidden; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.slide {
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
scroll-snap-align: start;
display: flex;
flex-direction: column;
position: relative;
}
.slide-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-height: 100%;
overflow: hidden;
padding: var(--slide-padding);
}
:root {
--title-size: clamp(1.5rem, 5vw, 4rem);
--h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
--body-size: clamp(0.75rem, 1.5vw, 1.125rem);
--slide-padding: clamp(1rem, 4vw, 4rem);
--content-gap: clamp(0.5rem, 2vw, 2rem);
}
img, .image-container { max-width: 100%; max-height: min(50vh, 400px); object-fit: contain; }
.card, .container { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); }
@media (max-height: 700px) { :root { --slide-padding: clamp(0.75rem, 3vw, 2rem); --title-size: clamp(1.25rem, 4.5vw, 2.5rem); } }
@media (max-height: 600px) { :root { --title-size: clamp(1.1rem, 4vw, 2rem); --body-size: clamp(0.7rem, 1.2vw, 0.95rem); } .nav-dots, .keyboard-hint { display: none; } }
@media (max-height: 500px) { :root { --title-size: clamp(1rem, 3.5vw, 1.5rem); --slide-padding: clamp(0.4rem, 2vw, 1rem); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { , ::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } }
⚠️ 切勿直接否定 CSS 函数。 使用 calc(-1 * clamp(...)) 而不是 -clamp(...)。
阶段 1：内容发现（新建演示文稿）
询问用户（通过正常对话——一次性询问所有问题）：
- 1. 用途： 推介演示 / 教学 / 会议演讲 / 内部演示？
- 长度： ~5–10 / 10–20 / 20+ 张幻灯片？
- 内容： 现成内容、粗略笔记，还是仅有一个主题？
- 图片： 是否包含任何图片？（提供路径，如 ./assets 或 ~/Desktop/screenshots）
- 内联编辑： 生成后是否应在浏览器中可编辑文本？
如果他们有内容，请让他们分享。
图片评估（如果提供了图片）
所有图片处理均在用户本地机器上完成——图片绝不会发送到外部服务。
- 1. ls 该文件夹——找到所有 .png/.jpg/.jpeg/.gif/.svg/.webp 文件
- 使用 read 工具在本地读取每个图片文件
- 将每个标记为 USABLE（可用）或 NOT USABLE（不可用，原因：模糊、无关等）
- 记录每个图片代表什么（标志、截图、图表等）以及主色调
- 构建幻灯片大纲，将可用图片作为视觉锚点
- 向用户展示大纲 + 图片分配以供确认
如果用户说没有图片 → 跳过图片流程，全程使用 CSS 生成的视觉效果（渐变、形状、图案）。
阶段 2：样式发现
选项 A — 直接选择（用户知道自己想要什么）
从预设中选择：
| 预设 | 氛围 |
|---|
| Bold Signal | 自信、高冲击力、深色 |
| Electric Studio |
简洁、专业、分屏 |
| Creative Voltage | 充满活力、复古现代 |
| Dark Botanical | 优雅、精致 |
| Notebook Tabs | 编辑风格、条理清晰 |
| Pastel Geometry | 友好、平易近人 |
| Split Pastel | 俏皮、现代 |
| Vintage Editorial | 诙谐、个性驱动 |
| Neon Cyber | 未来感、科技感 |
| Terminal Green | 开发者导向、黑客风格 |
| Swiss Modern | 极简、精确 |
| Paper & Ink | 文学性、深思熟虑 |
跳转到阶段 3。
选项 B — 视觉发现（适用于未决定的用户，默认）
询问：观众应该有什么感受？
- - 印象深刻/自信 → Bold Signal、Electric Studio、Dark Botanical
- 兴奋/充满活力 → Creative Voltage、Neon Cyber、Split Pastel
- 平静/专注 → Notebook Tabs、Paper & Ink、Swiss Modern
- 受到启发/感动 → Dark Botanical、Vintage Editorial、Pastel Geometry
在 .tmp-slide-previews/ 中生成 3 个迷你样式预览 HTML 文件——每个文件是一个显示排版、颜色和动画的标题幻灯片。告知用户文件路径并询问他们更喜欢哪一个。
切勿使用： 白色背景上的紫色渐变、Inter/Roboto/系统字体、通用的蓝色主色调。
应使用： 独特的字体搭配（Clash Display、Satoshi、Cormorant、DM Sans）、具有凝聚力的个性驱动调色板、氛围感背景。
如需完整的预设规范（颜色、字体、标志性元素）：请阅读 references/STYLE_PRESETS.md。
阶段 3：生成演示文稿
图片处理（如果没有图片则跳过）
如果用户提供了图片，在生成 HTML 之前使用 Python Pillow 进行处理：
python
from PIL import Image, ImageDraw
圆形裁剪（用于标志）
def crop
circle(inputpath, output_path):
img = Image.open(input_path).convert(RGBA)
w, h = img.size
size = min(w,
