最近帮朋友做个PPT，发现现在主流的方案都是生图，虽然几家大模型汉字显示没啥问题了，但是PPT对即时修改的要求很高，而且一些看起来好看的图片明显上班不能用，所以只能自己解决。最后的解决方案是生产HTML版的PPT，然后用claude转成PPTX版，效果拔群，和正常的PPT一样，体验比看似精美的图片靠谱的多，唯一需要的就是，让AI参考主流网站设计风格来做html PPT，没错，参考网站设计和配色就可以，不用参考PPT。做标准的，商务PPT模版太容易了，所以就顺手搞了一些当年上班时看着很帅的设计感PPT，2小时做了个粗版，下面是一些截图。因为没人可汇报，不打算深入做了，prompt公布，目前gemini用的基本问题不大，可任意使用迭代，记得标注我这个原始创造者。生成的ppt有撑爆画面的问题也没事，直接丢给cluade生成pptx，claude会帮你修复。设计感ppt万能pormpt
作者：娄老师说的对
你是顶级 HTML 演示文稿设计师。
我想评估 8 种 HTML 幻灯片的设计风格。针对每种风格，生成一个完整的独立 HTML 文件，展示该风格在真实幻灯片内容下的呈现效果。
8 种待评估风格：
每个 HTML 文件必须包含 5 张幻灯片：
- 第2张：文字页，包含标题和3段正文，禁止使用 bullet point
- 第3张：图文分栏，图片占位区必须使用该风格的标志性配色处理，禁止用通用灰色方块
- 第5张：结语页，一句大型陈述句配一个视觉锚点，禁止用固定 padding 的卡片包裹大标题
字体白名单（严格执行）：
展示字体（h1/h2）从以下选一：Playfair Display、Fraunces、Syne、Bebas Neue、DM Serif Display、Cormorant Garamond
正文字体（p）从以下选一：DM Sans、Outfit、Figtree、Epilogue
中文字体必须叠加（内容含中文时）：Noto Sans SC 或 Noto Serif SC。衬线展示字体（Playfair Display、Fraunces、DM Serif Display、Cormorant Garamond）配 Noto Serif SC，无衬线展示字体（Syne、Bebas Neue）配 Noto Sans SC。
展示字体与正文字体必须不同。禁止使用白名单以外的任何字体，包括 Inter、Roboto、Arial、Space Grotesk、Plus Jakarta Sans 等。
配色规则：
8种风格必须各自使用明显不同的配色方向，禁止多个风格共用同一背景色系。至少4种风格使用浅色或中性色背景，禁止所有风格都用黑色背景。每种风格颜色选3色：主色（60%）+ 配色（30%）+ 点缀（10%），用 CSS 变量统一管理。
美学规则：
- 每张幻灯片必须有一个最抢眼的视觉锚点：超大数字、粗体关键词、大色块或图表
- 标题与正文必须有极端字号对比，标题至少是正文字号的10倍
- 正文（p 标签）字号不得小于 1.4vw，确保在演示场景下可读。不能被任何色块遮挡。正文必须在 flexbox 或 grid 的正常文档流中，禁止用 position: absolute 定位正文
- 每张幻灯片的视觉重心必须明显偏向一侧，禁止所有元素居中对齐
- 装饰性色块面积至少占幻灯片的30%，禁止只用细线和小圆点做装饰
- 标题（h1/h2）允许且鼓励压在色块之上，制造视觉张力
- 创意排版只能用于纯装饰性元素（opacity 低于 0.1 的背景字）。所有承载实际内容的元素（标题、正文、图表）必须在正常文档流中，高度由幻灯片容器约束而非由内容撑开
- 禁止对 h1、h2 使用 transform: rotate——标题旋转会破坏文档流高度计算，是导致内容溢出的首要原因
- 幻灯片容器必须设置 overflow: hidden，内部主要内容区域高度总和不得超过容器的 90%
容器与比例规则：
幻灯片容器必须使用以下 CSS，禁止单独使用 100vw / 56.25vw：
width: min(100vw, 177.78vh);
height: min(56.25vw, 100vh);
所有 vw 字号必须在此容器宽度内，不能超出边界。
图表规则：
所有图表使用 cdnjs 的 Chart.js。禁止使用 Chart.js 默认图例，必须用自定义 HTML 图例替代。图表外层容器必须同时满足三个条件：设置明确的 vw 高度、设置 overflow: hidden、设置 position: relative——缺少任何一条都会导致图表循环增长。canvas 元素本身必须用内联 style 设置明确高度，例如 style="height: 18vw; width: 100%"，禁止用全局 CSS 选择器 canvas { height: ... } 统一设置。图表外层容器的高度必须大于 canvas 高度加上图例高度之和，禁止让 canvas 撑开父容器。图表颜色必须匹配该风格的配色，禁止使用 Chart.js 默认色。
导航：
仅支持键盘左右箭头切换，禁止在幻灯片上显示任何导航按钮、箭头或提示文字。
代码质量：
JavaScript 中所有引号、尖括号、符号必须保持原始字符，严禁任何 HTML 实体转义（禁止将 ' 写成 '，禁止将 < 写成 <，禁止将 > 写成 >）。
执行流程：
首先列出8种风格，每种附一句话描述，然后问我："请问您想生成哪几种风格？请回复编号或 all。"
确认后每次最多生成2个文件避免截断，每个文件以 ### 风格N：[名称] 开头后接代码块。
输出要求：
每种风格输出一个完整独立的 HTML 文件，代码块外不要任何解释文字。请在 Canvas 中生成并预览每个 HTML 文件。
