Html Presentation Generator

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, 汇报, 报告.

tianheihei002@tianheihei002

Install

openclaw skills install @tianheihei002/html-presentation-generator

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:

Classify every slide as exactly one of the 5 page types
For content pages, assign a content subtype
Ensure variety in layouts across slides
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:

Be saved as slides/slide-01.html, slides/slide-02.html, etc. (zero-padded two digits)
Store any generated images in slides/imgs/
Use the exact 960×540 .slide-content dimensions
Use Times New Roman font for all text (Chinese and English)
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:

Asymmetric Left-Right — Text on one side, image on the other

text

|  Title & Subtitle  |    Visual/Image    |
|  Description       |                    |

Center-Aligned — Content centered over background image

text

|           [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:

Analyze topic, audience, purpose
Generate image (MANDATORY) — wait for file path
Choose layout
Write HTML (embed actual image path, never a placeholder)
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:

Numbered Vertical List — Clean left-aligned structure

text

|  TABLE OF CONTENTS            |
|  01  Section Title One         |
|  02  Section Title Two         |

Two-Column Grid — 2×N grid with numbers + titles
Sidebar Navigation — Colored sidebar with section markers
Card-Based — Section cards in a row/grid

Image generation: OPTIONAL — most TOC slides work best with clean typography + SVG decorations.

Workflow:

Analyze section list and count
Choose layout (3 sections → vertical; 4–6 → grid/compact; 7+ → multi-column)
Plan visual hierarchy
Generate image (optional)
Write HTML with page number badge
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:

Bold Center — Number + title centered
Left-Aligned with Accent Block — Colored bar on left
Split Background — Two color zones
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:

Analyze section number, title, intro
Choose layout
Generate image (optional)
Write HTML with page number badge
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

text

|  SLIDE TITLE                          |
|  • Bullet point one                   |
|  • Bullet point two                   |
|  • Bullet point three                 |

4b. Mixed Media

Two-column: image on one side, text on the other

text

|  SLIDE TITLE                          |
|  Text content     |  [Image/Visual]   |
|  and bullets      |                   |

4c. Data Visualization

SVG chart (bar/progress/ring) + 1–3 key takeaways + data source

text

|  SLIDE TITLE                          |
|  [SVG Chart]      |  Key Takeaway 1   |
|                   |  Key Takeaway 2   |
|                   Source: xxx          |

4d. Comparison

Side-by-side columns/cards (A vs B, pros/cons)

text

|  SLIDE TITLE                          |
|  ┌─ Option A ─┐  ┌─ Option B ─┐      |
|  │  Detail 1  │  │  Detail 1  │      |
|  └────────────┘  └────────────┘      |

4e. Timeline / Process

Steps with arrows, numbered connectors

text

|  SLIDE TITLE                          |
|  [1] ──→ [2] ──→ [3] ──→ [4]         |
|  Step    Step    Step    Step          |

4f. Image Showcase

Hero image as primary element, text supporting

text

|  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):

Slide Title — always required, top of slide
Body Content — based on subtype
Visual Element — image, chart, icon, or SVG shape — ALWAYS required
Source / Caption — include when showing data
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:

Analyze content, determine subtype
Generate image (MANDATORY) — wait for file path
Choose layout variant for the subtype
Write HTML with page number badge
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:

Key Takeaways — 3–5 points with icons/check marks
CTA / Next Steps — Action items + contact info
Thank You / Contact — Centered thank-you + contact details
Split Recap — Left: takeaways; Right: CTA/contact

Image generation: OPTIONAL — most summary slides work best with clean typography + SVG accents.

Workflow:

Analyze closing content type
Choose layout
Generate image (optional)
Write HTML with page number badge
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. 外层容器 ≥ 内层圆角

text

正确：外 > 内
  .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 <head> and before </body>:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
.slide-content {
  width: 960px;
  height: 540px;
  position: relative;
  transform-origin: center center;
}
</style>
<script>
function scaleSlide() {
  const slide = document.querySelector('.slide-content');
  if (!slide) return;
  const slideWidth = 960;
  const slideHeight = 540;
  const scaleX = window.innerWidth / slideWidth;
  const scaleY = window.innerHeight / slideHeight;
  const scale = Math.min(scaleX, scaleY);
  slide.style.width = slideWidth + 'px';
  slide.style.height = slideHeight + 'px';
  slide.style.transform = `scale(${scale})`;
  slide.style.transformOrigin = 'center center';
  slide.style.flexShrink = '0';
}
window.addEventListener('load', scaleSlide);
window.addEventListener('resize', scaleSlide);
</script>

Appendix B — CSS Rules (REQUIRED)

⚠️ Inline-Only CSS

All CSS styles MUST be inline (except the snippet in Appendix A).

Do NOT use <style> blocks outside Appendix A
Do NOT use external stylesheets
Do NOT use CSS classes or class-based styling

html

<!-- ✅ Correct: Inline styles -->
<div style="position:absolute; left:60px; top:120px; width:840px; height:240px; background:#023047;"></div>
<p style="position:absolute; left:60px; top:140px; font-size:28px; color:#ffffff;">Title</p>

<!-- ❌ Wrong: Style blocks or classes -->
<style>
  .card { background:#023047; }
</style>
<div class="card"></div>

⚠️ 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

<!-- ✅ Correct: Background directly on .slide-content -->
<div class="slide-content" style="background:#023047;">
  <p style="position:absolute; left:60px; top:140px; ...">Title</p>
</div>

<!-- ❌ Wrong: Nested full-size background DIV -->
<div class="slide-content">
  <div style="position:absolute; left:0; top:0; width:960px; height:540px; background:#023047;"></div>
  <p style="position:absolute; left:60px; top:140px; ...">Title</p>
</div>

⚠️ 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 <linearGradient>, <radialGradient>
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 (<animate>, <animateTransform>, <animateMotion>)
All slides are static presentation assets

For visual hierarchy without gradients/animations:

Use different colors from the palette
Use solid color + opacity overlay
Combine palette colors strategically

Appendix D — SVG Conversion Constraints (CRITICAL)

The HTML-to-PPTX converter has STRICT SVG support limitations.

Supported SVG Elements (WHITELIST)

✅ <rect> — rectangles (with rx/ry for rounded corners)
✅ <circle> — circles
✅ <ellipse> — ellipses
✅ <line> — straight lines
✅ <polyline> — connected line segments (stroke only, NO fill)
✅ <polygon> — closed polyline (stroke only, NO fill)
✅ <path> — ONLY with M/L/H/V/Z commands
✅ <pattern> — repeating patterns

`<path>` 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 <text> in complex SVGs — becomes rasterized in PPTX
❌ Filled <path> 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 <img>

html

<!-- ✅ SUPPORTED: Simple shapes -->
<svg width="200" height="4">
  <rect width="200" height="4" rx="2" fill="#dda15e"/>
</svg>

<!-- ✅ SUPPORTED: Straight line paths -->
<svg width="100" height="100">
  <path d="M10 10 L50 10 L50 50 L10 50 Z" fill="#bc6c25"/>
</svg>

<!-- ❌ FORBIDDEN: Bézier curves -->
<svg><path d="M0 10 Q25 0 50 10 T100 10" stroke="#dda15e"/></svg>

<!-- ❌ FORBIDDEN: Arc commands -->
<svg><path d="M16 4a8 8 0 0 1 5 14.3" stroke="#dda15e"/></svg>

<!-- ⚠️ WORKAROUND: Approximate curves with line segments -->
<svg><path d="M0 10 L12 6 L25 4 L37 6 L50 10" stroke="#dda15e" stroke-width="2"/></svg>

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 <hr>)

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

html

<!-- ✅ Correct: SVG badge with text INSIDE the SVG -->
<svg width="180" height="52" viewBox="0 0 180 52">
  <rect width="180" height="52" rx="26" fill="#fb8500"/>
  <text x="90" y="26" text-anchor="middle" dominant-baseline="central"
        font-size="16" font-weight="700" fill="#ffffff">LABEL</text>
</svg>

<!-- ❌ Wrong: span overlay on SVG (text lost in PPTX) -->
<div class="badge">
  <svg><rect .../></svg>
  <span>LABEL</span>
</div>

<!-- ❌ Wrong: CSS background -->
<div style="background: #fb8500; border-radius: 26px;"><span>LABEL</span></div>

<!-- ✅ Correct: SVG divider -->
<svg width="120" height="4" aria-hidden="true">
  <rect width="120" height="4" rx="2" fill="#219ebc"/>
</svg>

<!-- ❌ Wrong: CSS divider -->
<div style="width: 120px; height: 4px; background: #219ebc;"></div>

SVG Use Cases

1. Background Patterns — Geometric textures for visual depth:

html

<!-- Dot grid pattern -->
<svg width="100%" height="100%" style="position:absolute;top:0;left:0;opacity:0.08;pointer-events:none;">
  <defs>
    <pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="2" fill="currentColor"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

<!-- Diagonal stripes -->
<svg width="100%" height="100%" style="position:absolute;top:0;left:0;opacity:0.05;pointer-events:none;">
  <defs>
    <pattern id="stripes" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="10" height="20" fill="currentColor"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#stripes)"/>
</svg>

2. Decorative Elements:

html

<!-- L-shaped corner decoration -->
<svg width="40" height="40" style="position:absolute;top:0;left:0;" aria-hidden="true">
  <path d="M0 35 L0 0 L35 0" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
</svg>

<!-- Straight divider line -->
<svg width="400" height="2" aria-hidden="true">
  <rect width="400" height="2" fill="currentColor" opacity="0.3"/>
</svg>

<!-- Simple arrow (right-pointing) -->
<svg width="40" height="16" viewBox="0 0 40 16" aria-hidden="true">
  <path d="M0 8 L32 8 M24 2 L32 8 L24 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

3. Icons:

html

<!-- Checkmark icon (polyline - SUPPORTED) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="20 6 9 17 4 12"/>
</svg>

<!-- Simple arrow icon (path with L/M - SUPPORTED) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12 L19 12 M12 5 L19 12 L12 19"/>
</svg>

<!-- Plus sign icon (lines - SUPPORTED) -->
<svg width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <line x1="12" y1="5" x2="12" y2="19"/>
  <line x1="5" y1="12" x2="19" y2="12"/>
</svg>

4. Data Visualization Helpers:

html

<!-- Percentage ring (70%) -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="#e0e0e0" stroke-width="8" fill="none"/>
  <circle cx="50" cy="50" r="40" stroke="#4CAF50" stroke-width="8" fill="none"
          stroke-dasharray="251.3" stroke-dashoffset="75.4" stroke-linecap="round"
          transform="rotate(-90 50 50)"/>
  <text x="50" y="50" text-anchor="middle" dominant-baseline="central" font-size="20" font-weight="bold" fill="currentColor">70%</text>
</svg>

<!-- Horizontal progress bar -->
<svg width="200" height="12" viewBox="0 0 200 12">
  <rect x="0" y="0" width="200" height="12" rx="6" fill="#e0e0e0"/>
  <rect x="0" y="0" width="140" height="12" rx="6" fill="#2196F3"/>
</svg>

<!-- Mini bar chart -->
<svg width="80" height="40" viewBox="0 0 80 40">
  <rect x="0" y="20" width="12" height="20" fill="currentColor" opacity="0.6"/>
  <rect x="17" y="10" width="12" height="30" fill="currentColor" opacity="0.8"/>
  <rect x="34" y="5" width="12" height="35" fill="currentColor"/>
  <rect x="51" y="15" width="12" height="25" fill="currentColor" opacity="0.7"/>
  <rect x="68" y="8" width="12" height="32" fill="currentColor" opacity="0.9"/>
</svg>

5. Masks & Overlays:

html

<!-- Bottom overlay for text readability -->
<svg width="100%" height="300" style="position:absolute;bottom:0;left:0;pointer-events:none;">
  <rect width="100%" height="100%" fill="#000000" fill-opacity="0.7"/>
</svg>

<!-- Side overlay -->
<svg width="400" height="100%" style="position:absolute;left:0;top:0;pointer-events:none;">
  <rect width="100%" height="100%" fill="#000000" fill-opacity="0.8"/>
</svg>

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

<!-- Crisp divider line -->
<svg overflow="visible" width="320" height="2" aria-hidden="true">
  <rect width="320" height="2" fill="rgba(255,255,255,0.35)"></rect>
</svg>

<!-- Consistent stroke under scaling -->
<svg overflow="visible" width="320" height="2" aria-hidden="true">
  <path vector-effect="non-scaling-stroke" d="M0 1 L320 1" stroke="rgba(255,255,255,0.55)" stroke-width="2"></path>
</svg>

<!-- Solid overlay -->
<svg width="100%" height="200" style="position:absolute;bottom:0;left:0;pointer-events:none;">
  <rect width="100%" height="100%" fill="#000000" fill-opacity="0.6"/>
</svg>

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 <img> 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 <ul> or <ol> lists
Do NOT leave raw text directly inside div — wrap all text in text tags

SVG and Text

Do NOT place text (<span>, <p>) 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 <text> element
SVG <text> must use text-anchor="middle" and dominant-baseline="central" for centering

html

<!-- ✅ Correct: Text inside SVG -->
<svg width="100" height="32" viewBox="0 0 100 32">
  <rect width="100" height="32" rx="16" fill="#bc6c25"/>
  <text x="50" y="16" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="700" fill="#fefae0" letter-spacing="3">丰收季</text>
</svg>

<!-- ❌ Wrong: Text overlaid on SVG (LOST in PPTX) -->
<div class="badge">
  <svg aria-hidden="true"><rect .../></svg>
  <span style="position:absolute;">丰收季</span>
</div>

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 <text>, not overlaid <span>)
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

<!-- ✅ Circle badge (default) -->
<svg style="position:absolute; right:32px; bottom:24px;" width="36" height="36" viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="18" fill="#219ebc"/>
  <text x="18" y="18" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="600" fill="#ffffff">3</text>
</svg>

<!-- ✅ Pill badge -->
<svg style="position:absolute; right:32px; bottom:24px;" width="48" height="28" viewBox="0 0 48 28">
  <rect width="48" height="28" rx="14" fill="#219ebc"/>
  <text x="24" y="14" text-anchor="middle" dominant-baseline="central"
        font-size="13" font-weight="600" fill="#ffffff">03</text>
</svg>

<!-- ✅ Minimal (number only) -->
<p style="position:absolute; right:36px; bottom:24px; margin:0; font-size:13px; font-weight:500; color:#8ecae6;">03</p>

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

Install

HTML Presentation Generator

Overview

Workflow

Step 1 — Research (if needed)

Step 2 — Choose Color Palette & Font

Step 3 — Plan the Outline

Step 4 — Generate Slides

Step 5 — Deploy

Slide Page Types

Type 1: Cover Page

Type 2: Table of Contents

Type 3: Section Divider

Type 4: Content Page

4a. Text

4b. Mixed Media

4c. Data Visualization

4d. Comparison

4e. Timeline / Process

4f. Image Showcase

Type 5: Summary / Closing Page

Color Palette Reference

Agent Design System — 完整色板

White 白色系（背景与浅色表面）

Gold 金色系（铂金商务强调色）

Blue 蓝色系（主操作色）

Gray 灰色系（文字与中性色）

透明度色值

Design Style System

风格概览

Sharp & Compact（锐利紧凑）

Soft & Balanced（柔和均衡）

Rounded & Spacious（圆润宽松）

Pill & Airy（胶囊通透）

组件级风格映射表

混搭原则

快速选择指南

HTML Implementation Rules

Appendix A — Responsive Scaling Snippet (REQUIRED)

Appendix B — CSS Rules (REQUIRED)

⚠️ Inline-Only CSS

⚠️ Background on .slide-content Directly

⚠️ No Bold for Body Text and Captions

Appendix C — Color Palette Rules (REQUIRED)

⚠️ Strict Color Palette Adherence

⚠️ No Gradients Allowed

⚠️ No Animations Allowed

Appendix D — SVG Conversion Constraints (CRITICAL)

Supported SVG Elements (WHITELIST)

<path> Command Restrictions (CRITICAL)

Additional SVG Constraints

⚠️ CRITICAL: Pie Charts — Image Generation Tool is MANDATORY

Appendix E — Advanced Techniques (REQUIRED)

SVG — ONLY for Decorative Shapes (NOT a replacement for real images)

SVG Usage Guidelines

⚠️ CRITICAL: Background Shapes Must Use SVG

SVG Use Cases

SVG Implementation Tips

Minimal Patterns

Appendix F — HTML2PPTX Validation Rules (REQUIRED)

Layout and Dimensions

Backgrounds and Images

Text Elements

SVG and Text

Placeholders

Appendix G — Page Number Badge / 角标 (REQUIRED)

Common Mistakes to Avoid

File & Output Conventions

Tools Reference

Related skills

`<path>` Command Restrictions (CRITICAL)