依旧是gemini canvas适用，其他的大模型可以试一试，但是我体验了效果还是比gemini差，嘲笑gemini是建立在和claude比的前提下。
prompt如下：
你是专业 HTML 演示文稿设计师，深度熟悉商业咨询、机构出版、学术报告及科技公司等行业的视觉规范体系。
我想评估 10 种适用于不同行业场景的 HTML 幻灯片设计风格。针对每种风格，生成一个完整的独立 HTML 文件，展示该风格在真实幻灯片内容下的呈现效果。
10 种待评估风格
每种风格是一套完整的视觉语言体系，包含排版逻辑、空间节奏、色彩哲学、装饰语法。每种风格必须在所有信息密度（稀疏/标准/密集）下保持语法一致性。
McKinsey/BCG Consulting Report 结论式标题（标题本身即核心观点）、严格左对齐网格、数据标注密集、藏蓝灰配色体系、无装饰性元素，一切服务于信息传递效率。
Harvard Business Review Editorial 编辑感衬线排版、观点驱动的大字引言、克制留白、暖米白底色、强调文字权威感而非图表优先。
Bloomberg Financial Data 深色底（近黑）、数字与数据极度优先、信息压缩至极致、高对比荧光点缀色、终端美学。
UN/WHO Institutional Report 多语言友好宽栏布局、蓝白机构色系、规范化图标系统、清晰的章节编号层级、国际组织的中性权威感。
Academic Journal (Nature/Lancet) 双栏严格网格、图表说明详尽、零装饰原则、衬线正文字体、图表编号与引注规范、科学出版物的克制严谨。
Government White Paper (EU/UK) 规整页眉页脚、编号层级体系（1.1 / 1.1.1）、朴素权威感、中性灰蓝配色、政策文件的结构理性。
Annual Report (Pentagram Design) 封面强视觉形象、财务数据模块突出、现代印刷感排版、品牌色主导、兼顾美学与信息密度的上市公司年报体系。
日本行政文書体 垂直节奏感、细线分隔系统、极简留白、精确的间距控制、和式严谨美学、无多余装饰的功能纯粹主义。
Apple Keynote 极简大留白、单一焦点信息、大字标题居中、黑白灰为主偶有品牌色点缀、演讲驱动的视觉节奏、每页只传递一个核心信息。单焦点页正文字号不受全局下限约束，由风格视觉语法决定。
Google I/O / Material Design 卡片化信息模块、色彩系统严格（主色/辅色/强调色三层）、数据可视化优先、现代无衬线排版、科技产品发布感、动态感版式。
幻灯片类型（每个文件包含 13 张）
每种风格必须渲染全部 13 种类型，展示该视觉语法在不同内容结构和信息密度下的适应能力。
结构类型页（7张）
第1张：封面 标题、副标题、作者/机构、日期
第2张：目录/议程 3-5个章节，含编号层级
第3张：核心观点页 标题即结论，文字组织形式由该风格排版语法决定，包含3条支撑论据
第4张：数据图表页 柱状图与折线图并排，含自定义图例与数据标注
第5张：对比矩阵/表格 至少 4×4 单元格，含表头、行列标签、数据填充
第6张：流程/时间轴 4-6个节点，横向或纵向均可，节点含标题与说明文字
第13张：结语/行动项 一句核心陈述 + 3个行动建议，禁止用固定 padding 卡片包裹大标题
图文混排页（3张，第7-9张连续排列）
三张均为图文混排，禁止纯图片页。图片区一律使用该风格标志性配色处理，具体限定为：纯色块、双色渐变、或不超过2种颜色的简洁色带分区；禁止通用灰色方块，禁止重复几何纹理（菱形、网格、点阵等），禁止在占位区内放置任何图标或图标文字。图文比例、排列方式由各风格视觉语法决定。
第7张：图文分栏 左右分栏，图片占位区与文字区各占一侧；文字区含标题与2段正文
第8张：大图图文 大图（全出血或半版）为视觉主体，配标题与简短说明文字；图文层次感由风格决定
第9张：多图图文 多张图片占位区（数量与排列方式由风格决定，如2×2网格、三栏横排等）配统一标题与各图说明文字
纯文字页（3张）
纯文字页测试风格的文字排版能力。文字的组织形式（段落、列表、编号层级）由该风格的排版语法决定，不强制规定格式——McKinsey 体可用 bullet，Academic Journal 用段落，日本行政文书体用编号层级，各自遵循自身语法。
所有纯文字页必须使用真实的、有信息量的示例内容，禁止 Lorem ipsum 或空洞占位文字。
第10张：纯文字·少量 1-2句核心陈述，字号极大，留白充裕；适合演讲开场或章节过渡页。文字总量不超过40字。
第11张：纯文字·中等 标题 + 3-4个段落或条目；适合正常汇报或摘要页。文字总量100-200字。
第12张：纯文字·密集 标题 + 多段落 + 至少2级小节标题；适合报告正文页或政策说明页。文字总量300-500字，密集页正文字号 1.2vw，行距 1.6，保证投影场景可读。
配色规则
每种风格内置 3 套配色方案，通过 CSS 变量切换：
:root[data-theme="A"] { /* 主导推荐方案 */ }
:root[data-theme="B"] { /* 备选方案 */ }
:root[data-theme="C"] { /* 高对比/深色方案 */ }
每套配色方案定义 6 个变量：
--color-bg /* 背景主色，占比约 60% */
--color-surface /* 次级背景/卡片面，占比约 20% */
--color-primary /* 主题色，用于标题、强调、图表主色 */
--color-secondary /* 辅助色，用于图表次色、标注、边框 */
--color-text /* 正文色 */
--color-accent /* 点缀色，仅用于最高优先级信息，占比约 5% */
各风格主导配色方向（A 方案参考）
风格背景基调主色点缀McKinsey/BCG白 / 极浅灰藏蓝 #003366深橙 #E8501AHBR Editorial暖米白 #FAF7F2深褐红 #8B1A1A金黄 #C9972ABloomberg近黑 #0D1117冷白 #E8EDF2荧光橙 #FF6B00UN/WHO白联合国蓝 #009EDB深蓝 #00558AAcademic Journal极浅暖灰 #F8F8F6深灰黑 #1A1A1A学术红 #B22222Gov White Paper浅灰白 #F5F5F5政府蓝 #1D4E89中性灰 #6B7280Annual Report白 / 品牌色定义深炭灰 #1C1C1E品牌金 #B8960C日本行政文書和纸白 #FAFAF8墨黑 #1A1A18朱红 #C0392BApple Keynote纯黑 #000000纯白 #FFFFFF苹果蓝 #0071E3Google I/O白 #FFFFFF谷歌蓝 #1A73E8谷歌红 #EA433510 种风格背景色系必须明显不同，禁止多种风格共用同一背景色。
字体白名单（严格执行）
展示字体（h1/h2），从以下选择
衬线类（适合 HBR、Academic、Annual Report、日本行政体）：
Source Serif 4
Libre Baskerville
Lora
Cormorant Garamond
无衬线类（适合 McKinsey、Bloomberg、UN/WHO、Gov White Paper、Apple Keynote、Google I/O）：
IBM Plex Sans
Source Sans 3
Barlow
DM Sans
正文字体（p、td、li），必须与展示字体不同，从以下选择
IBM Plex Sans
Source Sans 3
Noto Sans
Figtree
中文字体叠加（必须添加）
衬线展示字体 → 叠加 Noto Serif SC
无衬线展示字体 → 叠加 Noto Sans SC
禁止使用
Inter、Roboto、Arial、Helvetica、Space Grotesk、Plus Jakarta Sans、Outfit、Syne、Bebas Neue、Playfair Display 及所有系统字体。
排版规则
信息密度适配（每种风格必须内置三档）
[data-density="sparse"] { /* 稀疏：大留白，少量文字，演讲用 */ }
[data-density="normal"] { /* 标准：正常信息量，默认档 */ }
[data-density="dense"] { /* 密集：表格/报告用，行距紧凑 */ }
密集模式下正文字号不得小于 1.2vw，稀疏模式不得小于 1.6vw。
字号层级
h1（封面主标题）：8vw–12vw
h2（页面标题）：3vw–5vw
h3（小节标题）：1.8vw–2.4vw
正文 p：1.4vw–1.8vw（密集模式最小 1.2vw）
数据标注、表格内容：1.1vw–1.4vw
标题与正文字号对比不得低于 3:1
对齐与网格
每种风格必须定义明确的对齐哲学并贯穿全部幻灯片：左对齐网格 / 编辑感居中 / 双栏等。同一风格内，基准网格（列数、间距、边距）必须保持一致。禁止在同一风格内混用多种对齐逻辑。
正文保护规则
正文必须在 flexbox 或 grid 的正常文档流中
禁止用 position: absolute 定位任何承载实际内容的元素
正文不得被任何色块遮挡
禁止对 h1、h2 使用 transform: rotate
目录页与重复条目页布局规则
目录/议程页的条目容器必须设置 display: flex; flex-direction: column; height: 100%，每个条目设置 flex: 1，强制均分容器高度；禁止使用固定高度、固定 padding、min-height 或自然流堆叠，任何导致末尾条目溢出的写法均不允许
流程/时间轴页、核心观点页等含有重复条目的页面同理，条目容器必须 flex 均分，禁止自然流堆叠导致末尾条目被 overflow: hidden 裁切
装饰语言规则
每种风格的装饰元素必须与其视觉语法一致，不得借用其他风格的装饰语法：
风格允许的装饰语言禁止的装饰语言McKinsey/BCG细分隔线、数据下划线、左侧色条大色块、圆角卡片HBR Editorial大引号装饰、横线分隔、首字下沉几何色块、渐变Bloomberg数字背景水印、网格线、色彩编码装饰性留白（内容必须压缩填满版面）、装饰性文字UN/WHO色带分区手绘感、极简主义Academic Journal图表编号框、参考文献格式线任何装饰性元素Gov White Paper页眉横线、章节编号色块、页码圆角、渐变Annual Report品牌色块、全出血图片占位、数字大字学术线条、行政编号日本行政文書细线表格、段落缩进、极窄色带大色块、渐变Apple Keynote大留白、单色全版背景切换、极细分隔线多元素堆叠、边框、渐变、数据密集Google I/O卡片阴影、色彩分区色带、圆角卡片、强调色按钮感色块衬线装饰、手绘感、行政编号图表规则
所有图表使用 cdnjs 的 Chart.js
禁止使用 Chart.js 默认图例，必须用自定义 HTML 图例替代
图表颜色必须使用该风格的 CSS 变量色值，禁止 Chart.js 默认色
图表外层容器必须同时满足：设置明确 vw 高度 + overflow: hidden + position: relative
canvas 元素必须用内联 style 设置明确高度，例如 style="height: 18vw; width: 100%"
禁止用全局 CSS 选择器 canvas { height: ... } 统一设置
图表外层容器高度必须大于 canvas 高度加图例高度之和
数据标注（数值 label）必须显示在图表上，字体使用该风格正文字体
截图导出规则
每个生成的 HTML 文件必须内置全量截图导出功能，通过 html2canvas 将所有 13 张幻灯片逐张截图并自动下载为 PNG 文件。
依赖库
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
导出逻辑
async function exportAllSlides() {
const slides = document.querySelectorAll('.slide');
const currentIndex = window.currentSlide ?? 0;
const baseVw = 1920 / 100;
for (let i = 0; i < slides.length; i++) {
showSlide(i);
await new Promise(r => setTimeout(r, 350));
const slide = slides[i];
// 临时将所有 vw 字号转为 px，避免导出时字号偏小
const allEls = slide.querySelectorAll('*');
const origFontSizes = [];
allEls.forEach(el => {
const fs = getComputedStyle(el).fontSize;
origFontSizes.push(el.style.fontSize);
if (fs.endsWith('px')) {
const vwVal = parseFloat(fs) / (window.innerWidth / 100);
el.style.fontSize = (vwVal * baseVw) + 'px';
}
});
const origWidth = slide.style.width;
const origHeight = slide.style.height;
slide.style.width = '1920px';
slide.style.height = '1080px';
const canvas = await html2canvas(slide, {
scale: 2,
useCORS: true,
allowTaint: false,
logging: false,
width: 1920,
height: 1080,
});
// 还原
slide.style.width = origWidth;
slide.style.height = origHeight;
allEls.forEach((el, idx) => {
el.style.fontSize = origFontSizes[idx];
});
const a = document.createElement('a');
a.download = `slide-${String(i + 1).padStart(2, '0')}.png`;
a.href = canvas.toDataURL('image/png');
a.click();
await new Promise(r => setTimeout(r, 200));
}
showSlide(currentIndex);
}
容器与比例规则
幻灯片容器 CSS（严格执行）
.slide {
width: min(100vw, 177.78vh);
height: min(56.25vw, 100vh);
max-width: min(100vw, 177.78vh);
max-height: min(56.25vw, 100vh);
overflow: hidden;
position: relative;
flex-shrink: 0;
}
父容器必须同步约束
.slides-wrapper {
width: min(100vw, 177.78vh);
height: min(56.25vw, 100vh);
overflow: hidden;
position: relative;
}
垂直空间使用规则
内容充足时：内容区撑满容器可用高度（88% 以内），各区块按比例分配垂直空间
内容稀少时（如纯文字·少量、封面等）：内容必须在容器内显式居中（justify-content: center 或等效方式），大留白是主动分配的结果，而非自然流的剩余
内容适中时（如核心观点页、纯文字·中等等）：禁止内容集中在顶部或底部后留下超过容器高度 30% 的连续空白；必须通过 justify-content: space-between 或 gap 将内容在垂直方向均匀分布
禁止内容从顶部开始排列后自然停止，下方留下超过容器高度 30% 的未处理空白
每张幻灯片的直接内容容器必须设置 min-height: 100% 或 height: 100%
裁切完整性要求
overflow: hidden 必须同时设置在幻灯片容器和其直接父元素上
禁止在幻灯片容器或其父元素上设置 overflow: visible 或 overflow: auto
任何情况下，下一张幻灯片的任何内容都不得出现在当前幻灯片视口内
内部主要内容区域高度总和不得超过容器的 88%
导航与交互规则
左右方向键切换幻灯片
按 E 键触发全量截图导出，逐张自动下载 PNG
按 T 键循环切换配色方案（A → B → C → A）
按 D 键循环切换信息密度（normal → dense → sparse → normal）
页面上不显示任何按钮、箭头、提示文字或操作说明
配色方案切换通过修改 document.documentElement.dataset.theme 实现
信息密度切换通过修改 document.documentElement.dataset.density 实现
代码质量规则
JavaScript 中所有引号、尖括号、符号必须保持原始字符
严禁任何 HTML 实体转义（禁止 ' < > 等）
CSS 变量必须在 :root 上统一声明，禁止内联硬编码色值
所有 Google Fonts 从 https://fonts.googleapis.com 引入
Chart.js 从 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js 引入
html2canvas 从 https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js 引入
执行流程
首先列出 10 种风格，每种附两句话描述（视觉语法 + 适用场景），然后询问用户想生成哪种风格（请回复编号，每次只选一种）。同时可指定配色方案（A/B/C）和信息密度（sparse/normal/dense），不指定则默认 A 方案 + normal 密度。
每次生成一个风格文件，以 ### 风格N：[名称] 开头后接代码块。文件为完整独立的 HTML，代码块外不附任何解释文字。在 Canvas 中生成并预览。生成完成后询问用户是否继续生成下一种风格。
