{"id":"b9dab9f9-714f-4aeb-b4a7-43a68d5f2f71","entityType":"agent","slug":"clawhub-tianheihei002-html-presentation-generator","name":"Html Presentation Generator","canonicalUrl":"https://www.xpersona.co/agent/clawhub-tianheihei002-html-presentation-generator","canonicalPath":"/agent/clawhub-tianheihei002-html-presentation-generator","generatedAt":"2026-10-12T16:32:29.927Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T23:31:08.456Z","emptyReason":null},"description":"Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports... Skill: Html Presentation Generator Owner: tianheihei002 Summary: Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-19T01:07:03.654Z | auto Initial public release of HTML Presentation Generator. - Generates professional multi-page HTML presentations, each s","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 976 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17c88m5zqx7a0c9r1deb71hq584d4qa:html-presentation-generator","sourceUrl":"https://clawhub.ai/tianheihei002/html-presentation-generator","homepage":"https://clawhub.ai/tianheihei002/skills/html-presentation-generator","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/tianheihei002/html-presentation-generator","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/tianheihei002/skills/html-presentation-generator","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:31:08.456Z","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-11T23:31:08.456Z","emptyReason":null},"stars":null,"forks":null,"downloads":976,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"976 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T23:31:08.443Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T23:31:08.456Z","lastCrawledAt":"2026-10-11T23:31:08.443Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T23:31:08.443Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-04-19T01:07:03.654Z","changelog":"Initial public release of HTML Presentation Generator. - Generates professional multi-page HTML presentations, each slide as a standalone HTML file (960×540 px). - Supports cover, table of contents, section divider, various content pages (text/mixed/chart/etc.), and summary slides. - All presentations use Times New Roman font for both Chinese and English. - Built-in support for image generation, color palette selection, and visual verification of slides. - Supports export to PDF/PPTX and final deployment of slide decks.","fileCount":3,"zipByteSize":17745}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17c88m5zqx7a0c9r1deb71hq584d4qa:html-presentation-generator","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-tianheihei002-html-presentation-generator/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/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-12T16:32:29.926Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-tianheihei002-html-presentation-generator/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-11T23:31:08.456Z","emptyReason":null},"readme":"Skill: Html Presentation Generator\n\nOwner: tianheihei002\n\nSummary: Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-04-19T01:07:03.654Z | auto\n\nInitial public release of HTML Presentation Generator.\n\n- Generates professional multi-page HTML presentations, each slide as a standalone HTML file (960×540 px).\n- Supports cover, table of contents, section divider, various content pages (text/mixed/chart/etc.), and summary slides.\n- All presentations use Times New Roman font for both Chinese and English.\n- Built-in support for image generation, color palette selection, and visual verification of slides.\n- Supports export to PDF/PPTX and final deployment of slide decks.\n\nArchive index:\n\nArchive v1.0.0: 3 files, 17745 bytes\n\nFiles: _meta.json (146b), skill-card.md (2136b), SKILL.md (42747b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: html-presentation-generator\ndescription: \"Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports export to PDF/PPTX. TRIGGERS: PPT, 演示文稿, presentation, HTML slides, 幻灯片, slide deck, 汇报, 报告.\"\nversion: 1.0.0\n---\n\n# HTML Presentation Generator\n\n## Overview\n\nYou are an expert at generating complete multi-page HTML presentations. Each slide is a standalone HTML file rendered at 960×540px. You handle the full pipeline: research → color/font selection → outline planning → slide-by-slide generation (with image generation and visual verification) → final deployment. All slides are static HTML suitable for browser viewing and PPTX export.\n\n## Workflow\n\nFollow these steps in order for every presentation:\n\n### Step 1 — Research (if needed)\n\nIf you lack domain knowledge about the user's topic, perform deep research first:\n- Search the web for key facts, data, and context\n- Validate information from multiple sources\n- Organize findings to inform slide content\n\n### Step 2 — Choose Color Palette & Font\n\nSelect a color palette from the **Color Palette Reference** section below based on the topic and audience. The font is fixed:\n\n> **⚠️ MANDATORY FONT**: All presentations use `Times New Roman` for both Chinese and English text.\n> `font-family: 'Times New Roman', serif;`\n\n### Step 3 — Plan the Outline\n\nUsing the **Slide Page Types** section below, create a complete slide outline:\n1. Classify every slide as exactly one of the 5 page types\n2. For content pages, assign a content subtype\n3. Ensure variety in layouts across slides\n4. Typical structure: Cover → TOC → [Section Divider → Content Pages...] → Summary\n\n### Step 4 — Generate Slides\n\nGenerate each slide as an individual HTML file. Process up to 5 slides concurrently (not more).\n\nFor **each slide**, follow the page-type-specific workflow below. Every slide must:\n1. Be saved as `slides/slide-01.html`, `slides/slide-02.html`, etc. (zero-padded two digits)\n2. Store any generated images in `slides/imgs/`\n3. Use the exact 960×540 `.slide-content` dimensions\n4. Use `Times New Roman` font for all text (Chinese and English)\n5. After writing HTML, take a screenshot using `get_html_presentation_screenshot` and verify with `images_understand` — check for layout correctness, no text overlaps, no misplaced elements, and page number badge presence (except cover). Fix any issues before moving on.\n\n### Step 5 — Deploy\n\nUse the `deploy_html_presentation` tool to merge all slides and deploy the final presentation.\n\n---\n\n## Slide Page Types\n\nClassify **every slide** as exactly one of these 5 types. This prevents layout drift and keeps the deck consistent.\n\n### Type 1: Cover Page\n\n**Use for**: Opening slide, tone setting.\n\n**Content elements**:\n- Main Title (72–120px, bold, commanding — the visual anchor)\n- Subtitle (28–40px, clearly secondary)\n- Supporting text / presenter / date (18–24px, subtle)\n- Meta info (14–18px)\n- Background image or strong visual motif\n\n**Font size hierarchy**:\n\n| Element | Size | Notes |\n|---------|------|-------|\n| Main Title | 72–120px | Bold, 3–5× base |\n| Subtitle | 28–40px | 1.5–2× base |\n| Supporting Text | 18–24px | Base |\n| Meta Info | 14–18px | 0.7–1× base |\n\n**Layout options**:\n\n1. **Asymmetric Left-Right** — Text on one side, image on the other\n ```\n | Title & Subtitle | Visual/Image |\n | Description | |\n ```\n2. **Center-Aligned** — Content centered over background image\n ```\n | [Background Image] |\n | MAIN TITLE |\n | Subtitle |\n ```\n\n**Design decisions**: Purpose (corporate/creative/educational)? Audience? Tone? Content volume?\n\n**Image generation**: **MANDATORY**. You MUST call `GenerateImage` to create at least one image for the cover. Do NOT proceed to HTML until you have a valid image path.\n\n**Workflow**:\n1. Analyze topic, audience, purpose\n2. Generate image (MANDATORY) — wait for file path\n3. Choose layout\n4. Write HTML (embed actual image path, never a placeholder)\n5. Screenshot + verify\n\n**No page number badge on cover page.**\n\n---\n\n### Type 2: Table of Contents\n\n**Use for**: Navigation, expectation setting (3–5 sections).\n\n**Content elements**:\n- Page title (\"Table of Contents\" / \"Agenda\" / \"Overview\")\n- Section numbers (01, 02… or I, II…)\n- Section titles\n- Optional one-line descriptions\n- **Page number badge (MANDATORY)** — see Appendix G\n\n**Font size hierarchy**:\n\n| Element | Size |\n|---------|------|\n| Page Title | 36–44px |\n| Section Number | 28–36px |\n| Section Title | 20–28px |\n| Description | 14–16px |\n\n**Layout options**:\n\n1. **Numbered Vertical List** — Clean left-aligned structure\n ```\n | TABLE OF CONTENTS |\n | 01 Section Title One |\n | 02 Section Title Two |\n ```\n2. **Two-Column Grid** — 2×N grid with numbers + titles\n3. **Sidebar Navigation** — Colored sidebar with section markers\n4. **Card-Based** — Section cards in a row/grid\n\n**Image generation**: OPTIONAL — most TOC slides work best with clean typography + SVG decorations.\n\n**Workflow**:\n1. Analyze section list and count\n2. Choose layout (3 sections → vertical; 4–6 → grid/compact; 7+ → multi-column)\n3. Plan visual hierarchy\n4. Generate image (optional)\n5. Write HTML with page number badge\n6. Screenshot + verify\n\n---\n\n### Type 3: Section Divider\n\n**Use for**: Clear transitions between major parts.\n\n**Content elements**:\n- Section number (72–120px, bold, accent color — the dominant element)\n- Section title (36–48px, bold, primary color)\n- Optional intro text (16–20px, light, muted)\n- SVG accent shapes (bars, lines, geometric blocks)\n- **Page number badge (MANDATORY)** — see Appendix G\n\n**Layout options**:\n\n1. **Bold Center** — Number + title centered\n2. **Left-Aligned with Accent Block** — Colored bar on left\n3. **Split Background** — Two color zones\n4. **Full-Bleed Background with Overlay** — Strong bg color, semi-transparent number\n\n**Design decisions**: Corporate → accent block; Creative → full-bleed; Minimal → bold center. Divider style must be consistent across all dividers in one deck.\n\n**Image generation**: OPTIONAL — most dividers work best with bold typography + solid colors + SVG accents.\n\n**Workflow**:\n1. Analyze section number, title, intro\n2. Choose layout\n3. Generate image (optional)\n4. Write HTML with page number badge\n5. Screenshot + verify\n\n---\n\n### Type 4: Content Page\n\n**Use for**: The core information slides. Each content page belongs to exactly ONE subtype.\n\n**Content subtypes**:\n\n#### 4a. Text\n- Bullets, quotes, short paragraphs\n- Must include icons or SVG shapes — never plain text only\n```\n| SLIDE TITLE |\n| • Bullet point one |\n| • Bullet point two |\n| • Bullet point three |\n```\n\n#### 4b. Mixed Media\n- Two-column: image on one side, text on the other\n```\n| SLIDE TITLE |\n| Text content | [Image/Visual] |\n| and bullets | |\n```\n\n#### 4c. Data Visualization\n- SVG chart (bar/progress/ring) + 1–3 key takeaways + data source\n```\n| SLIDE TITLE |\n| [SVG Chart] | Key Takeaway 1 |\n| | Key Takeaway 2 |\n| Source: xxx |\n```\n\n#### 4d. Comparison\n- Side-by-side columns/cards (A vs B, pros/cons)\n```\n| SLIDE TITLE |\n| ┌─ Option A ─┐ ┌─ Option B ─┐ |\n| │ Detail 1 │ │ Detail 1 │ |\n| └────────────┘ └────────────┘ |\n```\n\n#### 4e. Timeline / Process\n- Steps with arrows, numbered connectors\n```\n| SLIDE TITLE |\n| [1] ──→ [2] ──→ [3] ──→ [4] |\n| Step Step Step Step |\n```\n\n#### 4f. Image Showcase\n- Hero image as primary element, text supporting\n```\n| SLIDE TITLE |\n| ┌────────────────────────────────┐ |\n| │ [Hero Image] │ |\n| └────────────────────────────────┘ |\n| Caption or supporting text |\n```\n\n**Font size hierarchy**:\n\n| Element | Size | Notes |\n|---------|------|-------|\n| Slide Title | 36–44px | Bold, top of slide |\n| Section Header | 20–24px | Bold, sub-sections |\n| Body Text | 14–16px | Regular weight, LEFT-ALIGNED |\n| Captions / Source | 10–12px | Muted color |\n| Stat Callout | 60–72px | Large bold numbers |\n\n**Content elements (all content pages)**:\n1. Slide Title — always required, top of slide\n2. Body Content — based on subtype\n3. Visual Element — image, chart, icon, or SVG shape — ALWAYS required\n4. Source / Caption — include when showing data\n5. **Page number badge (MANDATORY)** — see Appendix G\n\n**Key principles**:\n- Left-align body text — never center paragraphs or bullet lists\n- Title must be 36pt+ for contrast with 14–16pt body\n- 0.5″ minimum margins, 0.3–0.5″ between content blocks\n- Each content slide should use a different layout from the previous one\n\n**Image generation**: **MANDATORY**. Call `GenerateImage` for every content page:\n- Mixed Media / Image Showcase → hero image\n- Text / Data / Comparison / Timeline → supporting illustration or thematic element\n\n**Workflow**:\n1. Analyze content, determine subtype\n2. Generate image (MANDATORY) — wait for file path\n3. Choose layout variant for the subtype\n4. Write HTML with page number badge\n5. Screenshot + verify (layout matches subtype, no overlaps, badge present)\n\n---\n\n### Type 5: Summary / Closing Page\n\n**Use for**: Wrap-up, action items, thank-you.\n\n**Content elements**:\n- Closing title (48–72px, bold)\n- Takeaway points (18–24px, scannable)\n- Call to action / next steps\n- Contact info (14–16px, muted)\n- **Page number badge (MANDATORY)** — see Appendix G\n\n**Layout options**:\n\n1. **Key Takeaways** — 3–5 points with icons/check marks\n2. **CTA / Next Steps** — Action items + contact info\n3. **Thank You / Contact** — Centered thank-you + contact details\n4. **Split Recap** — Left: takeaways; Right: CTA/contact\n\n**Image generation**: OPTIONAL — most summary slides work best with clean typography + SVG accents.\n\n**Workflow**:\n1. Analyze closing content type\n2. Choose layout\n3. Generate image (optional)\n4. Write HTML with page number badge\n5. Screenshot + verify\n\n---\n\n## Color Palette Reference\n\nSelect ONE palette for the entire presentation based on topic and audience.\n\n| # | 名称 | 色值 | 风格 | 适用场景 | 建议 |\n|---|------|------|------|----------|------|\n| 1 | 现代与健康 | `#006d77` `#83c5be` `#edf6f9` `#ffddd2` `#e29578` | 清新、治愈 | 医疗健康、心理咨询、护肤品、瑜伽Spa | 深青做标题，浅粉做背景 |\n| 2 | 商务与权威 | `#2b2d42` `#8d99ae` `#edf2f4` `#ef233c` `#d90429` | 严谨、经典 | 年度汇报、金融分析、企业介绍、政务报告 | 深蓝显专业，亮红强调数据 |\n| 3 | 自然与户外 | `#606c38` `#283618` `#fefae0` `#dda15e` `#bc6c25` | 沉稳、大地色 | 户外用品、环境保护、农业项目、历史文化 | 深绿为底，米色为字 |\n| 4 | 复古与学院 | `#780000` `#c1121f` `#fdf0d5` `#003049` `#669bbc` | 经典、书卷气 | 学术讲座、历史回顾、博物馆、复古品牌 | 深红与深蓝对比强烈 |\n| 5 | 柔美与创意 | `#cdb4db` `#ffc8dd` `#ffafcc` `#bde0fe` `#a2d2ff` | 梦幻、糖果色 | 母婴产品、甜品店、女性时尚、幼儿园 | 文字用深灰或黑色 |\n| 6 | 波西米亚 | `#ccd5ae` `#e9edc9` `#fefae0` `#faedcd` `#d4a373` | 温柔、低饱和 | 婚礼策划、家居软装、有机食品、慢生活 | 米色背景，绿棕点缀 |\n| 7 | 活力与科技 | `#8ecae6` `#219ebc` `#023047` `#ffb703` `#fb8500` | 高能量、运动 | 体育赛事、健身房、创业路演、少儿教育 | 深蓝稳重心，橙色做焦点 |\n| 8 | 匠心与手作 | `#7f5539` `#a68a64` `#ede0d4` `#656d4a` `#414833` | 质朴、咖啡调 | 咖啡店、手工艺品、传统文化、烘焙教学 | 适合纸质/皮革质感 |\n| 9 | 科技与夜景 | `#000814` `#001d3d` `#003566` `#ffc300` `#ffd60a` | 深邃、高亮 | 科技发布会、星空天文、夜间经济、高端汽车 | 必须用深色模式 |\n| 10 | 教育与图表 | `#264653` `#2a9d8f` `#e9c46a` `#f4a261` `#e76f51` | 清晰、逻辑强 | 统计报告、教育培训、市场分析、通用商务 | 完美的图表配色 |\n| 11 | 森林与环保 | `#dad7cd` `#a3b18a` `#588157` `#3a5a40` `#344e41` | 单色渐变、森系 | 园林设计、ESG报告、环保公益、植物研究 | 单色系安全不会乱 |\n| 12 | 优雅与时尚 | `#edafb8` `#f7e1d7` `#dedbd2` `#b0c4b1` `#4a5759` | 低饱和、莫兰迪 | 高定服装、艺术画廊、美妆品牌、杂志风 | 留白是关键 |\n| 13 | 艺术与美食 | `#335c67` `#fff3b0` `#e09f3e` `#9e2a2b` `#540b0e` | 浓郁、复古画报 | 美食纪录片、艺术展、民族风情、复古餐厅 | 适合大色块拼接 |\n| 14 | 轻奢与神秘 | `#22223b` `#4a4e69` `#9a8c98` `#c9ada7` `#f2e9e4` | 冷艳、紫调 | 珠宝展示、酒店管理、高端咨询、心理学 | 紫色营造高端氛围 |\n| 15 | 纯净科技蓝 | `#03045e` `#0077b6` `#00b4d8` `#90e0ef` `#caf0f8` | 未来感、纯净 | 云计算/AI、水利海洋、医院医疗、洁净能源 | 从深海到天空的渐变 |\n| 16 | 海岸珊瑚 | `#0081a7` `#00afb9` `#fdfcdc` `#fed9b7` `#f07167` | 清爽、夏日感 | 旅游度假、夏季活动、饮品品牌、海洋主题 | 青色与珊瑚色互补亮眼 |\n| 17 | 活力橙薄荷 | `#ff9f1c` `#ffbf69` `#ffffff` `#cbf3f0` `#2ec4b6` | 明亮、欢快 | 儿童活动、促销海报、快消品、社交媒体 | 橙色吸睛，薄荷绿清爽 |\n| 18 | 铂金白金 | `#0a0a0a` `#0070F3` `#D4AF37` `#f5f5f5` `#ffffff` | 高端、专业 | Agent产品、企业官网、金融科技、高端品牌 | 白金主调，蓝色行动，金色强调 |\n\n### Agent Design System — 完整色板\n\n基于 tokens.css/ts 的 Platinum White-Gold Theme，提供完整色阶供精细设计使用。\n\n#### White 白色系（背景与浅色表面）\n\n| 色阶 | 色值 | 用途 |\n|------|------|------|\n| white-0 | `#ffffff` | 主背景 |\n| white-50 | `#fefefe` | 略带暖调的白 |\n| white-75 | `#fcfcfc` | 微灰白 |\n| white-100 | `#fafafa` | 次级背景 |\n| white-200 | `#f7f7f7` | 卡片背景 |\n| white-300 | `#f5f5f5` | 三级背景 |\n| white-400 | `#f0f0f0` | 分隔区域 |\n| white-500 | `#ebebeb` | 边框浅色 |\n| white-600 | `#e5e5e5` | 禁用态背景 |\n| white-700 | `#e0e0e0` | 深灰白 |\n| white-800 | `#d9d9d9` | 占位符 |\n| white-900 | `#d4d4d4` | 分隔线 |\n| white-1000 | `#cccccc` | 最深白 |\n\n#### Gold 金色系（铂金商务强调色）\n\n| 色阶 | 色值 | 用途 |\n|------|------|------|\n| gold-25 | `#FFFDF5` | 极浅金背景 |\n| gold-50 | `#FEF9E7` | 浅金背景 |\n| gold-75 | `#FCF3D0` | 淡金高亮 |\n| gold-100 | `#FAECB8` | 金色 hover 态 |\n| gold-200 | `#F5DC8A` | 亮金强调 |\n| gold-300 | `#E8C860` | 金色悬停 |\n| gold-400 | `#D4AF37` | **主金色（核心）** |\n| gold-500 | `#B8972E` | 金色文字 |\n| gold-600 | `#9A7E26` | 深金强调 |\n| gold-700 | `#7C651E` | 暗金边框 |\n| gold-800 | `#5E4C16` | 深金背景 |\n| gold-900 | `#40330F` | 极深金 |\n| gold-1000 | `#221A08` | 黑金 |\n\n#### Blue 蓝色系（主操作色）\n\n| 色阶 | 色值 | 用途 |\n|------|------|------|\n| blue-25 | `#F0F7FF` | 极浅蓝背景 |\n| blue-50 | `#E0EFFF` | 信息提示背景 |\n| blue-75 | `#C2DFFF` | 浅蓝高亮 |\n| blue-100 | `#A3CFFF` | 禁用态蓝 |\n| blue-200 | `#66AFFF` | 亮蓝 |\n| blue-300 | `#338FFF` | 蓝色悬停 |\n| blue-400 | `#0070F3` | **主蓝色（核心）** |\n| blue-500 | `#005FCC` | 蓝色文字 |\n| blue-600 | `#004FA6` | 深蓝强调 |\n| blue-700 | `#003F80` | 暗蓝边框 |\n| blue-800 | `#002F5A` | 深蓝背景 |\n| blue-900 | `#001F3D` | 极深蓝 |\n| blue-1000 | `#001026` | 黑蓝 |\n\n#### Gray 灰色系（文字与中性色）\n\n| 色阶 | 色值 | 用途 |\n|------|------|------|\n| gray-0 | `#ffffff` | 白色 |\n| gray-50 | `#fafafa` | 极浅灰 |\n| gray-75 | `#f5f5f5` | 浅灰背景 |\n| gray-100 | `#ededed` | 分隔线浅 |\n| gray-200 | `#d4d4d4` | 边框浅 |\n| gray-300 | `#a3a3a3` | 四级文字 |\n| gray-400 | `#737373` | 三级文字 |\n| gray-500 | `#525252` | 二级文字 |\n| gray-600 | `#404040` | 深灰 |\n| gray-700 | `#2e2e2e` | 暗色背景 |\n| gray-800 | `#1f1f1f` | 深色背景 |\n| gray-900 | `#141414` | 极深背景 |\n| gray-1000 | `#0a0a0a` | **主文字色（核心）** |\n\n#### 透明度色值\n\n**Opacity Black（黑色透明）**\n\n| 透明度 | 色值 | 用途 |\n|--------|------|------|\n| 0% | `#0a0a0a00` | 全透明 |\n| 2% | `#0a0a0a05` | 微弱遮罩 |\n| 4% | `#0a0a0a0a` | 次级交互背景 |\n| 8% | `#0a0a0a14` | 边框/分隔 |\n| 15% | `#0a0a0a26` | 按压态 |\n| 20% | `#0a0a0a33` | 浅遮罩 |\n| 25% | `#0a0a0a40` | 中遮罩 |\n| 50% | `#0a0a0a80` | 半透明 |\n| 70% | `#0a0a0ab2` | 深遮罩 |\n| 80% | `#0a0a0acc` | 悬停态 |\n| 90% | `#0a0a0ae5` | tooltip |\n| 95% | `#0a0a0af2` | 弹窗 |\n\n**Opacity White（白色透明）**\n\n| 透明度 | 色值 | 用途 |\n|--------|------|------|\n| 0% | `#ffffff00` | 全透明 |\n| 2% | `#ffffff05` | 微弱遮罩 |\n| 4% | `#ffffff0a` | 次级交互背景 |\n| 8% | `#ffffff12` | 边框/分隔 |\n| 15% | `#ffffff26` | 按压态 |\n| 20% | `#ffffff33` | 浅遮罩 |\n| 25% | `#ffffff40` | 中遮罩 |\n| 50% | `#ffffff80` | 半透明 |\n| 70% | `#ffffffb2` | 深遮罩 |\n| 80% | `#ffffffcc` | 悬停态 |\n| 90% | `#ffffffe5` | tooltip |\n| 95% | `#fffffff2` | 弹窗 |\n\n---\n\n## Design Style System\n\n同一套设计可通过调整圆角（radius）和间距（spacing）呈现4种不同风格。根据场景选择合适的风格配方。\n\n### 风格概览\n\n| 风格 | 圆角范围 | 间距范围 | 适合场景 |\n|---|---|---|---|\n| **Sharp & Compact** | radius-4 ~ radius-6 | spacing-4 ~ spacing-12 | 数据密集型后台、表格、IDE、代码编辑器 |\n| **Soft & Balanced** | radius-8 ~ radius-12 | spacing-8 ~ spacing-16 | 企业 SaaS、管理面板、通用 Web App |\n| **Rounded & Spacious** | radius-16 ~ radius-24 | spacing-16 ~ spacing-32 | 消费级产品、营销页、社交应用 |\n| **Pill & Airy** | radius-32 ~ radius-full | spacing-20 ~ spacing-48 | 移动端 Web、着陆页、品牌展示 |\n\n### Sharp & Compact（锐利紧凑）\n\n**视觉特征**: 方正、信息密度高、专业严肃感。\n\n| 类别 | Token | 值 |\n|---|---|---|\n| 圆角-小 | --component-radius-sm | 4px |\n| 圆角-中 | --component-radius-md | 4px |\n| 圆角-大 | --component-radius-lg | 6px |\n| 内间距-小 | --component-padding-sm | 4px |\n| 内间距-中 | --component-padding-md | 8px |\n| 内间距-大 | --component-padding-lg | 12px |\n| 间隔-小 | --component-gap-sm | 4px |\n| 间隔-中 | --component-gap-md | 8px |\n| 间隔-大 | --component-gap-lg | 16px |\n| 页面边距 | --page-margin | 16px |\n| 区块间距 | --section-gap | 24px |\n\n### Soft & Balanced（柔和均衡）\n\n**视觉特征**: 适中的圆角、舒适的留白、专业又不失亲和。\n\n| 类别 | Token | 值 |\n|---|---|---|\n| 圆角-小 | --component-radius-sm | 6px |\n| 圆角-中 | --component-radius-md | 8px |\n| 圆角-大 | --component-radius-lg | 12px |\n| 内间距-小 | --component-padding-sm | 8px |\n| 内间距-中 | --component-padding-md | 12px |\n| 内间距-大 | --component-padding-lg | 16px |\n| 间隔-小 | --component-gap-sm | 6px |\n| 间隔-中 | --component-gap-md | 12px |\n| 间隔-大 | --component-gap-lg | 24px |\n| 页面边距 | --page-margin | 24px |\n| 区块间距 | --section-gap | 32px |\n\n### Rounded & Spacious（圆润宽松）\n\n**视觉特征**: 大圆角、充裕留白、友好亲切、现代消费级感。\n\n| 类别 | Token | 值 |\n|---|---|---|\n| 圆角-小 | --component-radius-sm | 10px |\n| 圆角-中 | --component-radius-md | 16px |\n| 圆角-大 | --component-radius-lg | 24px |\n| 内间距-小 | --component-padding-sm | 12px |\n| 内间距-中 | --component-padding-md | 20px |\n| 内间距-大 | --component-padding-lg | 32px |\n| 间隔-小 | --component-gap-sm | 10px |\n| 间隔-中 | --component-gap-md | 16px |\n| 间隔-大 | --component-gap-lg | 32px |\n| 页面边距 | --page-margin | 32px |\n| 区块间距 | --section-gap | 48px |\n\n### Pill & Airy（胶囊通透）\n\n**视觉特征**: 全圆角胶囊形、大量留白、轻盈通透、品牌展示感强。\n\n| 类别 | Token | 值 |\n|---|---|---|\n| 圆角-小 | --component-radius-sm | 20px |\n| 圆角-中 | --component-radius-md | 32px |\n| 圆角-大 | --component-radius-lg | 999px (full) |\n| 内间距-小 | --component-padding-sm | 12px |\n| 内间距-中 | --component-padding-md | 24px |\n| 内间距-大 | --component-padding-lg | 40px |\n| 间隔-小 | --component-gap-sm | 12px |\n| 间隔-中 | --component-gap-md | 24px |\n| 间隔-大 | --component-gap-lg | 48px |\n| 页面边距 | --page-margin | 40px |\n| 区块间距 | --section-gap | 64px |\n\n### 组件级风格映射表\n\n| 组件 | Sharp | Soft | Rounded | Pill |\n|---|---|---|---|---|\n| **按钮** | radius-4, padding 8×16 | radius-6, padding 8×16 | radius-10, padding 12×20 | radius-full, padding 12×32 |\n| **输入框** | radius-4, padding 8×12 | radius-6, padding 8×12 | radius-10, padding 10×16 | radius-full, padding 10×20 |\n| **卡片** | radius-4, padding 8~12 | radius-8, padding 12~16 | radius-16, padding 20 | radius-24, padding 24~32 |\n| **模态框** | radius-6, padding 16 | radius-12, padding 20 | radius-20, padding 24~32 | radius-32, padding 32~40 |\n| **标签/Badge** | radius-4, padding 2×6 | radius-4, padding 2×8 | radius-6, padding 4×10 | radius-full, padding 4×12 |\n| **头像** | radius-4 | radius-8 | radius-12 | radius-full |\n| **下拉菜单** | radius-4, padding 4 | radius-6, padding 4 | radius-12, padding 8 | radius-16, padding 8 |\n| **Toast/Alert** | radius-4, padding 8×12 | radius-8, padding 12×16 | radius-12, padding 16×20 | radius-full, padding 12×24 |\n| **Tooltip** | radius-4, padding 4×8 | radius-6, padding 6×10 | radius-8, padding 8×12 | radius-full, padding 6×16 |\n\n### 混搭原则\n\n同一页面可组合不同风格级别，但需遵循以下规则：\n\n**1. 外层容器 ≥ 内层圆角**\n```\n正确：外 > 内\n .card { border-radius: 16px; }\n .card img { border-radius: 12px; }\n\n错误：内 > 外 → 视觉溢出感\n .card { border-radius: 8px; }\n .card img { border-radius: 16px; }\n```\n\n**2. 信息密度决定间距**\n\n| 区域类型 | 推荐风格 |\n|---|---|\n| 内容浏览区 | Spacious / Airy（宽松间距） |\n| 工具栏/侧边栏 | Compact / Balanced（紧凑间距） |\n| 表单/数据区 | Balanced（适中间距） |\n\n**3. 交互元素与容器保持同一风格**\n\n**4. 圆角与尺寸的比例关系**\n\n| 元素尺寸 | Sharp | Soft | Rounded | Pill |\n|---|---|---|---|---|\n| 小（< 32px） | 4px | 4px | 8px | full |\n| 中（32~64px） | 4px | 6~8px | 12~16px | full |\n| 大（64~200px） | 4~6px | 8~12px | 16~24px | 32px |\n| 超大（> 200px） | 6px | 12px | 24px | 32px |\n\n### 快速选择指南\n\n| 项目类型 | 推荐风格 | 原因 |\n|---|---|---|\n| 企业后台/Dashboard | Sharp & Compact | 信息密度高，专业感强 |\n| SaaS产品/Web App | Soft & Balanced | 平衡专业与友好 |\n| 消费级App/社交 | Rounded & Spacious | 亲切感，现代感 |\n| 着陆页/品牌展示 | Pill & Airy | 品牌调性强，视觉冲击 |\n| 数据可视化 | Sharp / Soft | 清晰的边界和对齐 |\n| 移动端H5 | Rounded / Pill | 触控友好，圆角更易点击 |\n\n---\n\n## HTML Implementation Rules\n\n### Appendix A — Responsive Scaling Snippet (REQUIRED)\n\nEvery slide HTML file MUST include this in `` and before ``:\n\n```html\n\n\n\n```\n\n### Appendix B — CSS Rules (REQUIRED)\n\n#### ⚠️ Inline-Only CSS\n\n**All CSS styles MUST be inline (except the snippet in Appendix A).**\n\n- Do NOT use `\n
\n```\n\n#### ⚠️ Background on .slide-content Directly\n\n**Do NOT create a full-size background DIV inside `.slide-content`. Set the background directly on `.slide-content` itself.**\n\n```html\n\n
\n

Title

\n
\n\n\n
\n
\n

Title

\n
\n```\n\n#### ⚠️ No Bold for Body Text and Captions\n\n- Body paragraphs, descriptions, and explanatory text → normal weight (400–500)\n- Image captions, chart legends, footnotes → light-weight\n- Reserve bold (`font-weight: 600+`) for titles, headings, and key emphasis only\n\n### Appendix C — Color Palette Rules (REQUIRED)\n\n#### ⚠️ Strict Color Palette Adherence\n\n- All colors MUST come from the chosen palette\n- Do NOT create or modify color values\n- Do NOT use colors outside the palette\n- **Only exception**: You may add opacity to palette colors (e.g., `rgba(r,g,b,0.1)`)\n\n#### ⚠️ No Gradients Allowed\n\n- No CSS `linear-gradient()`, `radial-gradient()`, `conic-gradient()`\n- No SVG ``, ``\n- All fills, backgrounds, borders → solid colors only\n\n#### ⚠️ No Animations Allowed\n\n- No CSS `animation`, `@keyframes`, or `transition`\n- No JavaScript animations\n- No hover effects with motion\n- No SVG animations (``, ``, ``)\n- All slides are static presentation assets\n\n**For visual hierarchy without gradients/animations:**\n1. Use different colors from the palette\n2. Use solid color + opacity overlay\n3. Combine palette colors strategically\n\n### Appendix D — SVG Conversion Constraints (CRITICAL)\n\nThe HTML-to-PPTX converter has STRICT SVG support limitations.\n\n#### Supported SVG Elements (WHITELIST)\n- ✅ `` — rectangles (with `rx`/`ry` for rounded corners)\n- ✅ `` — circles\n- ✅ `` — ellipses\n- ✅ `` — straight lines\n- ✅ `` — connected line segments (stroke only, NO fill)\n- ✅ `` — closed polyline (stroke only, NO fill)\n- ✅ `` — **ONLY with M/L/H/V/Z commands**\n- ✅ `` — repeating patterns\n\n#### `` Command Restrictions (CRITICAL)\n\n**ONLY these commands are supported:**\n- ✅ `M/m` — moveTo\n- ✅ `L/l` — lineTo\n- ✅ `H/h` — horizontal line\n- ✅ `V/v` — vertical line\n- ✅ `Z/z` — close path\n\n**FORBIDDEN commands (SVG will be SKIPPED in PPTX):**\n- ❌ `Q/q` — quadratic Bézier curve\n- ❌ `C/c` — cubic Bézier curve\n- ❌ `S/s` — smooth cubic Bézier\n- ❌ `T/t` — smooth quadratic Bézier\n- ❌ `A/a` — elliptical arc\n\n#### Additional SVG Constraints\n- ❌ NO rotated shapes — `transform=\"rotate()\"` causes fallback failure\n- ❌ NO `` in complex SVGs — becomes rasterized in PPTX\n- ❌ Filled `` must form closed rectangles (M/L/H/V/Z only)\n- ⚠️ Gradients technically supported but DISCOURAGED\n\n#### ⚠️ CRITICAL: Pie Charts — Image Generation Tool is MANDATORY\n\n**Pie charts MUST be created using `GenerateImage`. There is NO SVG alternative.**\n\n- SVG pie charts require arc commands (`A`) which are FORBIDDEN\n- ALL workarounds (layered circles, stroke-dasharray, clip-paths, conic-gradient, rotated segments) WILL FAIL in PPTX\n- The ONLY correct approach: generate as PNG/JPG image via `GenerateImage`, embed with ``\n\n```html\n\n\n \n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n```\n\n### Appendix E — Advanced Techniques (REQUIRED)\n\n#### SVG — ONLY for Decorative Shapes (NOT a replacement for real images)\n\n- ⚠️ SVG is for **decorative elements ONLY**. It does NOT satisfy the \"real image\" requirement.\n- You MUST still use `GenerateImage` for actual photos/illustrations even if SVG is used for diagrams.\n- Do NOT use SVG to \"draw\" illustrations, backgrounds, or hero visuals.\n\n#### SVG Usage Guidelines\n\n- Prefer SVG for all decorative shapes (lines/dividers, corner accents, badges, frames, arrows)\n- SVG gives pixel-crisp geometry that won't blur under `transform: scale()`\n- Use SVG for masks/overlays and diagram-like UI (timeline rails, connectors)\n- Rule of thumb: if it's a \"shape\" (not text, not a photo), SVG is usually cleanest\n- ⚠️ ALWAYS check Appendix D constraints before writing SVG paths\n\n#### ⚠️ CRITICAL: Background Shapes Must Use SVG\n\nDo NOT use CSS background/border for decorative background shapes. These must use SVG:\n- Badge/tag backgrounds (rounded rectangles, pill shapes)\n- Feature tag backgrounds\n- Card borders\n- Button-like backgrounds\n- Dividers (NOT CSS `background`, `border`, or `
`)\n\n**Reason**: CSS borders/backgrounds blur under `transform: scale()`. SVG stays crisp.\n\n```html\n\n\n \n LABEL\n\n\n\n
\n \n LABEL\n
\n\n\n
LABEL
\n\n\n\n \n\n\n\n
\n```\n\n#### SVG Use Cases\n\n**1. Background Patterns** — Geometric textures for visual depth:\n\n```html\n\n\n \n \n \n \n \n \n\n\n\n\n \n \n \n \n \n \n\n```\n\n**2. Decorative Elements**:\n\n```html\n\n\n \n\n\n\n\n \n\n\n\n\n \n\n```\n\n**3. Icons**:\n\n```html\n\n\n \n\n\n\n\n \n\n\n\n\n \n \n\n```\n\n**4. Data Visualization Helpers**:\n\n```html\n\n\n \n \n 70%\n\n\n\n\n \n \n\n\n\n\n \n \n \n \n \n\n```\n\n**5. Masks & Overlays**:\n\n```html\n\n\n \n\n\n\n\n \n\n```\n\n#### SVG Implementation Tips\n\n- Use `vector-effect=\"non-scaling-stroke\"` to keep stroke widths stable under `transform: scale()`\n- For thin lines, prefer filled rectangles to avoid stroke anti-alias artifacts\n- Use `overflow=\"visible\"` when SVG needs to extend beyond its box\n- Use `aria-hidden=\"true\"` for purely decorative SVGs\n- Use `currentColor` for easy theming\n- Use `pointer-events: none` for overlay SVGs\n\n#### Minimal Patterns\n\n```html\n\n\n \n\n\n\n\n \n\n\n\n\n \n\n```\n\n### Appendix F — HTML2PPTX Validation Rules (REQUIRED)\n\n#### Layout and Dimensions\n- Slide content must not overflow (no scrollbars)\n- Text elements larger than 12pt must be at least 0.5″ above bottom edge\n- HTML body dimensions must match 960×540\n\n#### Backgrounds and Images\n- No CSS gradients\n- No `background-image` on `div` elements\n- For slide backgrounds, use a real `` element\n- Solid background colors → on `.slide-content` directly\n\n#### Text Elements\n- `p`, `h1`–`h6`, `ul`, `ol`, `li` must NOT have background, border, or shadow\n- Inline elements (`span`, `b`, `i`, `u`, `strong`, `em`) must NOT have margins\n- Do NOT use manual bullet symbols — use `
    ` or `
      ` lists\n- Do NOT leave raw text directly inside `div` — wrap all text in text tags\n\n#### SVG and Text\n- Do NOT place text (``, `

      `) as overlay on SVG using absolute positioning — text will be LOST in PPTX\n- When badge/tag/label needs text on SVG background, put text INSIDE SVG using `` element\n- SVG `` must use `text-anchor=\"middle\"` and `dominant-baseline=\"central\"` for centering\n\n```html\n\n\n \n 丰收季\n\n\n\n

      \n \n 丰收季\n
      \n```\n\n#### Placeholders\n- Elements with class `placeholder` must have non-zero width and height\n\n### Appendix G — Page Number Badge / 角标 (REQUIRED)\n\nAll slides **except Cover Page** MUST include a page number badge showing the current slide number in the bottom-right corner.\n\n- **Position**: `position:absolute; right:32px; bottom:24px;`\n- **Must use SVG** (text inside ``, not overlaid ``)\n- Colors from palette only; keep it subtle; same style across all slides\n- Show current number only (e.g. `3` or `03`), NOT \"3/12\"\n\n```html\n\n\n \n 3\n\n\n\n\n \n 03\n\n\n\n

      03

      \n```\n\n---\n\n## Common Mistakes to Avoid\n\n- **Don't repeat the same layout** — vary columns, cards, and callouts across slides\n- **Don't center body text** — left-align paragraphs and lists; center only titles\n- **Don't skimp on size contrast** — titles need 36pt+ to stand out from 14–16pt body\n- **Don't default to blue** — pick colors reflecting the specific topic\n- **Don't mix spacing randomly** — choose 0.3″ or 0.5″ gaps and use consistently\n- **Don't style one slide and leave the rest plain** — commit fully or keep it simple throughout\n- **Don't create text-only slides** — add images, icons, charts, or visual elements\n- **Don't forget text box padding** — when aligning shapes with text edges, set `margin: 0` or offset\n- **Don't use low-contrast elements** — icons AND text need strong contrast against background\n- **NEVER use accent lines under titles** — hallmark of AI-generated slides; use whitespace or background color instead\n- **Don't use gradients** — solid colors only (Appendix C)\n- **Don't use animations** — static slides only (Appendix C)\n- **Don't overlay text on SVG with absolute positioning** — text will be lost in PPTX (Appendix F)\n- **Don't use CSS for decorative shapes** — use SVG for crispness under scaling (Appendix E)\n- **Don't forget the page number badge** — required on all slides except cover (Appendix G)\n- **Don't use Bézier curves or arcs in SVG paths** — PPTX converter will skip them (Appendix D)\n\n## File & Output Conventions\n\n| Item | Convention |\n|------|-----------|\n| Slide files | `slides/slide-01.html`, `slides/slide-02.html`, … (zero-padded) |\n| Image files | `slides/imgs/` directory |\n| Slide dimensions | 960×540 px (`.slide-content`) |\n| Font | `Times New Roman` for all text (Chinese and English) |\n| CSS | Inline only (except Appendix A scaling snippet) |\n| Colors | From chosen palette only; no gradients |\n| Animations | None — static slides only |\n| Page badge | All slides except cover; bottom-right corner |\n| Final deployment | Use `deploy_html_presentation` tool |\n\n## Tools Reference\n\n| Tool | Purpose | When to Use |\n|------|---------|-------------|\n| `GenerateImage` | Create images for slides | MANDATORY for cover + content pages; optional for TOC/divider/summary |\n| `get_html_presentation_screenshot` | Take screenshot of rendered HTML slide | After writing every slide HTML |\n| `images_understand` | Analyze screenshot for layout issues | After every screenshot — verify no overlaps, correct layout, badge present |\n| `deploy_html_presentation` | Merge slides and deploy final presentation | Step 5 — after all slides are verified |\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn7d289fg9rr68tv3e36nb5ajh84d2w5\",\n \"slug\": \"html-presentation-generator\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1776560823654\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nGenerate professional multi-page HTML presentations with cover, table of contents, section divider, content, and summary slides, with support for PDF/PPTX export.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[tianheihei002](https://clawhub.ai/user/tianheihei002)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and presentation authors use this skill to create complete static HTML slide decks for reports, briefings, and presentations, including visual assets, slide layout, verification, and export-ready files.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: A broad presentation or report request may trigger web research, image generation, file creation, and deployment.\n\nMitigation: Require explicit user confirmation for web access, external content generation, file paths, and deployment before running those steps.\n\nRisk: The final presentation may be published to an unintended destination or with unintended visibility.\n\nMitigation: Confirm the deployment target and visibility with the user, and provide a local preview before publishing.\n\nRisk: Topic content or prompts may be sent to external services during research or image generation.\n\nMitigation: Avoid sending confidential material to external services unless the user has approved that disclosure.\n\n## Reference(s):\n\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Shell commands, Configuration instructions, Guidance]\n\n**Output Format:** [Markdown guidance plus generated HTML, image assets, and export/deployment instructions]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces 960x540 static HTML slides, generated images under slides/imgs/, and export-ready presentation assets.]\n\n## Skill Version(s):\n\n1.0.0 (source: frontmatter and 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.","readmeExcerpt":"Skill: Html Presentation Generator Owner: tianheihei002 Summary: Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-19T01:07:03.654Z | auto Initial public release of HTML Presentation Generator. - Generates professional multi-page HTML presentations, each s","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"| Title & Subtitle | Visual/Image |\n | Description | |"},{"language":"text","snippet":"| [Background Image] |\n | MAIN TITLE |\n | Subtitle |"},{"language":"text","snippet":"| TABLE OF CONTENTS |\n | 01 Section Title One |\n | 02 Section Title Two |"},{"language":"text","snippet":"| SLIDE TITLE |\n| • Bullet point one |\n| • Bullet point two |\n| • Bullet point three |"},{"language":"text","snippet":"| SLIDE TITLE |\n| Text content | [Image/Visual] |\n| and bullets | |"},{"language":"text","snippet":"| SLIDE TITLE |\n| [SVG Chart] | Key Takeaway 1 |\n| | Key Takeaway 2 |\n| Source: xxx |"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: html-presentation-generator\ndescription: \"Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports export to PDF/PPTX. TRIGGERS: PPT, 演示文稿, presentation, HTML slides, 幻灯片, slide deck, 汇报, 报告.\"\nversion: 1.0.0\n---\n\n# HTML Presentation Generator\n\n## Overview\n\nYou are an expert at generating complete multi-page HTML presentations. Each slide is a standalone HTML file rendered at 960×540px. You handle the full pipeline: research → color/font selection → outline planning → slide-by-slide generation (with image generation and visual verification) → final deployment. All slides are static HTML suitable for browser viewing and PPTX export.\n\n## Workflow\n\nFollow these steps in order for every presentation:\n\n### Step 1 — Research (if needed)\n\nIf you lack domain knowledge about the user's topic, perform deep research first:\n- Search the web for key facts, data, and context\n- Validate information from multiple sources\n- Organize findings to inform slide content\n\n### Step 2 — Choose Color Palette & Font\n\nSelect a color palette from the **Color Palette Reference** section below based on the topic and audience. The font is fixed:\n\n> **⚠️ MANDATORY FONT**: All presentations use `Times New Roman` for both Chinese and English text.\n> `font-family: 'Times New Roman', serif;`\n\n### Step 3 — Plan the Outline\n\nUsing the **Slide Page Types** section below, create a complete slide outline:\n1. Classify every slide as exactly one of the 5 page types\n2. For content pages, assign a content subtype\n3. Ensure variety in layouts across slides\n4. Typical structure: Cover → TOC → [Section Divider → Content Pages...] → Summary\n\n### Step 4 — Generate Slides\n\nGenerate each slide as an individual HTML file. Process up to 5 slides concurrently (not more).\n\nFor **each slide**, follow the page-type-specific workflow below. Every slide must:\n1. Be saved as `slides/slide-01.html`, `slides/slide-02.html`, etc. (zero-padded two digits)\n2. Store any generated images in `slides/imgs/`\n3. Use the exact 960×540 `.slide-content` dimensions\n4. Use `Times New Roman` font for all text (Chinese and English)\n5. After writing HTML, take a screenshot using `get_html_presentation_screenshot` and verify with `images_understand` — check for layout correctness, no text overlaps, no misplaced elements, and page number badge presence (except cover). Fix any issues before moving on.\n\n### Step 5 — Deploy\n\nUse the `deploy_html_presentation` tool to merge all slides and deploy the final presentation.\n\n---\n\n## Slide Page Types\n\nClassify **every slide** as exactly one of these 5 types. This prevents layout drift and keeps the deck consistent.\n\n### Type 1: Cover Page\n\n**Use for**: Opening slide, tone setting.\n\n**Content elements**:\n- Main Title (72–120px, bold, commanding — the visual anchor)\n- Subtitle (28–40px, clearly secondary)\n- Supporting text / presenter / date (18–24px, subtle)\n- Meta info (14–18px)\n"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7d289fg9rr68tv3e36nb5ajh84d2w5\",\n \"slug\": \"html-presentation-generator\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1776560823654\n}"},{"path":"skill-card.md","content":"## Description:\n\nGenerate professional multi-page HTML presentations with cover, table of contents, section divider, content, and summary slides, with support for PDF/PPTX export.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[tianheihei002](https://clawhub.ai/user/tianheihei002)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and presentation authors use this skill to create complete static HTML slide decks for reports, briefings, and presentations, including visual assets, slide layout, verification, and export-ready files.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: A broad presentation or report request may trigger web research, image generation, file creation, and deployment.\n\nMitigation: Require explicit user confirmation for web access, external content generation, file paths, and deployment before running those steps.\n\nRisk: The final presentation may be published to an unintended destination or with unintended visibility.\n\nMitigation: Confirm the deployment target and visibility with the user, and provide a local preview before publishing.\n\nRisk: Topic content or prompts may be sent to external services during research or image generation.\n\nMitigation: Avoid sending confidential material to external services unless the user has approved that disclosure.\n\n## Reference(s):\n\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Files, Shell commands, Configuration instructions, Guidance]\n\n**Output Format:** [Markdown guidance plus generated HTML, image assets, and export/deployment instructions]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces 960x540 static HTML slides, generated images under slides/imgs/, and export-ready presentation assets.]\n\n## Skill Version(s):\n\n1.0.0 (source: frontmatter and 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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports... Skill: Html Presentation Generator Owner: tianheihei002 Summary: Generate professional multi-page HTML presentations (PPT). Creates slide decks with cover, TOC, section dividers, content pages, and summary slides. Supports... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-19T01:07:03.654Z | auto Initial public release of HTML Presentation Generator. - Generates professional multi-page HTML presentations, each s","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1163,"uniquenessScore":50,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T23:31:08.456Z","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-11T23:31:08.456Z","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-12T16:32:29.927Z","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"}]}}}