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

``` #### ⚠️ Background on .slide-content Directly **Do NOT create a full-size background DIV inside `.slide-content`. Set the background directly on `.slide-content` itself.** ```html

Title

``` #### ⚠️ No Bold for Body Text and Captions - Body paragraphs, descriptions, and explanatory text → normal weight (400–500) - Image captions, chart legends, footnotes → light-weight - Reserve bold (`font-weight: 600+`) for titles, headings, and key emphasis only ### Appendix C — Color Palette Rules (REQUIRED) #### ⚠️ Strict Color Palette Adherence - All colors MUST come from the chosen palette - Do NOT create or modify color values - Do NOT use colors outside the palette - **Only exception**: You may add opacity to palette colors (e.g., `rgba(r,g,b,0.1)`) #### ⚠️ No Gradients Allowed - No CSS `linear-gradient()`, `radial-gradient()`, `conic-gradient()` - No SVG ``, `` - All fills, backgrounds, borders → solid colors only #### ⚠️ No Animations Allowed - No CSS `animation`, `@keyframes`, or `transition` - No JavaScript animations - No hover effects with motion - No SVG animations (``, ``, ``) - All slides are static presentation assets **For visual hierarchy without gradients/animations:** 1. Use different colors from the palette 2. Use solid color + opacity overlay 3. Combine palette colors strategically ### Appendix D — SVG Conversion Constraints (CRITICAL) The HTML-to-PPTX converter has STRICT SVG support limitations. #### Supported SVG Elements (WHITELIST) - ✅ `` — rectangles (with `rx`/`ry` for rounded corners) - ✅ `` — circles - ✅ `` — ellipses - ✅ `` — straight lines - ✅ `` — connected line segments (stroke only, NO fill) - ✅ `` — closed polyline (stroke only, NO fill) - ✅ `` — **ONLY with M/L/H/V/Z commands** - ✅ `` — repeating patterns #### `` Command Restrictions (CRITICAL) **ONLY these commands are supported:** - ✅ `M/m` — moveTo - ✅ `L/l` — lineTo - ✅ `H/h` — horizontal line - ✅ `V/v` — vertical line - ✅ `Z/z` — close path **FORBIDDEN commands (SVG will be SKIPPED in PPTX):** - ❌ `Q/q` — quadratic Bézier curve - ❌ `C/c` — cubic Bézier curve - ❌ `S/s` — smooth cubic Bézier - ❌ `T/t` — smooth quadratic Bézier - ❌ `A/a` — elliptical arc #### Additional SVG Constraints - ❌ NO rotated shapes — `transform="rotate()"` causes fallback failure - ❌ NO `` in complex SVGs — becomes rasterized in PPTX - ❌ Filled `` must form closed rectangles (M/L/H/V/Z only) - ⚠️ Gradients technically supported but DISCOURAGED #### ⚠️ CRITICAL: Pie Charts — Image Generation Tool is MANDATORY **Pie charts MUST be created using `GenerateImage`. There is NO SVG alternative.** - SVG pie charts require arc commands (`A`) which are FORBIDDEN - ALL workarounds (layered circles, stroke-dasharray, clip-paths, conic-gradient, rotated segments) WILL FAIL in PPTX - The ONLY correct approach: generate as PNG/JPG image via `GenerateImage`, embed with `` ```html ``` ### Appendix E — Advanced Techniques (REQUIRED) #### SVG — ONLY for Decorative Shapes (NOT a replacement for real images) - ⚠️ SVG is for **decorative elements ONLY**. It does NOT satisfy the "real image" requirement. - You MUST still use `GenerateImage` for actual photos/illustrations even if SVG is used for diagrams. - Do NOT use SVG to "draw" illustrations, backgrounds, or hero visuals. #### SVG Usage Guidelines - Prefer SVG for all decorative shapes (lines/dividers, corner accents, badges, frames, arrows) - SVG gives pixel-crisp geometry that won't blur under `transform: scale()` - Use SVG for masks/overlays and diagram-like UI (timeline rails, connectors) - Rule of thumb: if it's a "shape" (not text, not a photo), SVG is usually cleanest - ⚠️ ALWAYS check Appendix D constraints before writing SVG paths #### ⚠️ CRITICAL: Background Shapes Must Use SVG Do NOT use CSS background/border for decorative background shapes. These must use SVG: - Badge/tag backgrounds (rounded rectangles, pill shapes) - Feature tag backgrounds - Card borders - Button-like backgrounds - Dividers (NOT CSS `background`, `border`, or `

`) **Reason**: CSS borders/backgrounds blur under `transform: scale()`. SVG stays crisp. ```html

LABEL

``` #### SVG Use Cases **1. Background Patterns** — Geometric textures for visual depth: ```html ``` **2. Decorative Elements**: ```html ``` **3. Icons**: ```html ``` **4. Data Visualization Helpers**: ```html ``` **5. Masks & Overlays**: ```html ``` #### SVG Implementation Tips - Use `vector-effect="non-scaling-stroke"` to keep stroke widths stable under `transform: scale()` - For thin lines, prefer filled rectangles to avoid stroke anti-alias artifacts - Use `overflow="visible"` when SVG needs to extend beyond its box - Use `aria-hidden="true"` for purely decorative SVGs - Use `currentColor` for easy theming - Use `pointer-events: none` for overlay SVGs #### Minimal Patterns ```html ``` ### Appendix F — HTML2PPTX Validation Rules (REQUIRED) #### Layout and Dimensions - Slide content must not overflow (no scrollbars) - Text elements larger than 12pt must be at least 0.5″ above bottom edge - HTML body dimensions must match 960×540 #### Backgrounds and Images - No CSS gradients - No `background-image` on `div` elements - For slide backgrounds, use a real `` element - Solid background colors → on `.slide-content` directly #### Text Elements - `p`, `h1`–`h6`, `ul`, `ol`, `li` must NOT have background, border, or shadow - Inline elements (`span`, `b`, `i`, `u`, `strong`, `em`) must NOT have margins - Do NOT use manual bullet symbols — use `

`, `

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

丰收季

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

``` --- ## Common Mistakes to Avoid - **Don't repeat the same layout** — vary columns, cards, and callouts across slides - **Don't center body text** — left-align paragraphs and lists; center only titles - **Don't skimp on size contrast** — titles need 36pt+ to stand out from 14–16pt body - **Don't default to blue** — pick colors reflecting the specific topic - **Don't mix spacing randomly** — choose 0.3″ or 0.5″ gaps and use consistently - **Don't style one slide and leave the rest plain** — commit fully or keep it simple throughout - **Don't create text-only slides** — add images, icons, charts, or visual elements - **Don't forget text box padding** — when aligning shapes with text edges, set `margin: 0` or offset - **Don't use low-contrast elements** — icons AND text need strong contrast against background - **NEVER use accent lines under titles** — hallmark of AI-generated slides; use whitespace or background color instead - **Don't use gradients** — solid colors only (Appendix C) - **Don't use animations** — static slides only (Appendix C) - **Don't overlay text on SVG with absolute positioning** — text will be lost in PPTX (Appendix F) - **Don't use CSS for decorative shapes** — use SVG for crispness under scaling (Appendix E) - **Don't forget the page number badge** — required on all slides except cover (Appendix G) - **Don't use Bézier curves or arcs in SVG paths** — PPTX converter will skip them (Appendix D) ## File & Output Conventions | Item | Convention | |------|-----------| | Slide files | `slides/slide-01.html`, `slides/slide-02.html`, … (zero-padded) | | Image files | `slides/imgs/` directory | | Slide dimensions | 960×540 px (`.slide-content`) | | Font | `Times New Roman` for all text (Chinese and English) | | CSS | Inline only (except Appendix A scaling snippet) | | Colors | From chosen palette only; no gradients | | Animations | None — static slides only | | Page badge | All slides except cover; bottom-right corner | | Final deployment | Use `deploy_html_presentation` tool | ## Tools Reference | Tool | Purpose | When to Use | |------|---------|-------------| | `GenerateImage` | Create images for slides | MANDATORY for cover + content pages; optional for TOC/divider/summary | | `get_html_presentation_screenshot` | Take screenshot of rendered HTML slide | After writing every slide HTML | | `images_understand` | Analyze screenshot for layout issues | After every screenshot — verify no overlaps, correct layout, badge present | | `deploy_html_presentation` | Merge slides and deploy final presentation | Step 5 — after all slides are verified |

Html Presentation Generator

Description

Latest Changes

Install Html Presentation Generator with One Click