用HTML替代PPT,让AI创建你想要的
- 2026-10-29 13:02:46
用HTML替代PPT,让AI创建你想要的最近我做了一次内部分享，本来按以往习惯，应该是让 AI 先出一份 PPT，但因为要做中英双语，考虑到内容要不断调整，AI生成后改起来太麻烦，所以这次我换了个做法：不让它直接做 PPT，而是让它做一份 HTML 演示材料。 做完后，感觉HTML 对 AI 来说更像一份能继续修改的源码，你让它统一标题，补双语，换背景，修移动端，通常比让它改一份 PPT 文件顺手很多。 开始前先准备两份材料 第一份材料，是公司 PPT 模板。 大部分公司都有自己特定的PPT模板，分享要求模板统一。可以从PPT模板中截图或者取母版，做封面图，背景图，品牌色，标题层级，表格样式。目的很简单，让 AI 先把背景固定了。 第二份材料，是这次分享的大体框架或者内容 最好先把这些事说清楚，或者把资料喂给AI，先生成演示的内容 还有一个小坑，正式生成之前，需要先建一个独立文件夹，比如 下面是提示词 第一版HTML做的时候是一点点优化，下面提示词是让AI反向解析了我们成品做的，然后反复让AI读这篇文档生成调试后的成果。 提供你的素材，用下面这段可以直接改成你自己的目录和主题： （注意：我这篇文章被AI拆分为了10页，所以定义了10页内容） 你是一名资深前端演示稿设计师。请在下面这个目标文件夹中生成一份零依赖、单文件的 HTML 演示文稿，文件名为 index.html。 目标文件夹：/Users/xxxx/Desktop/DEMO-HTML 要求： 1. 只在这个目标文件夹内读取素材和写入产物。 2. 生成的 index.html、验证截图和检查报告都放在这个目标文件夹内。 3. 不要复用其他目录里以前生成过的 HTML、截图或背景图。 【素材】 1. 使用目标文件夹中的 01.jpg、02.jpg、03.jpg 作为背景图。 2. 每次刷新页面时，为每个 slide 从这 3 张图中随机分配背景。 3. 尽量避免相邻两页使用同一张背景图，并尽量避免和上一次刷新完全相同。 4. 背景上可以加浅色遮罩，但遮罩不能太重：图片要看得见，文字要读得清。 【主题与内容】 主题：用HTML替代PPT，让AI创建你想要的 请生成 10 页左右，结构如下： 1. 封面：只放标题。中文模式只显示中文标题；中英双语模式显示中文标题和英文标题。封面不要放副标题，也不要放解释性段落。 2. 为什么考虑 HTML：说明 PPT 更像视觉结果，HTML 更像可编辑源码，AI 更适合改结构化文本和代码。 3. 提前准备什么：公司 PPT 模板、PPT 大体框架。 4. 先规划要实现的功能：多语言、页码和进度条、页面选择、统一样式。 5. 多语言怎么做：不要另存多个文件，在同一份 HTML 中切换中文和中英双语。 6. 页码、进度条和页面选择：自动计算页数，可以直接跳页。 7. 统一样式：让 AI 改 CSS 和组件规则，而不是逐页手工改。 8. 完整提示词怎么写：展示一段简化版完整提示词，让观众知道应该把素材、结构、交互和自检一次说清。 9. 后续迭代：基于当前 HTML 修改，不要重新生成多份文件。 10. 结束页：总结 HTML 不是替代所有 PPT，而是更适合 AI 持续修改。 【页面结构】 1. 一页一个 <section class="slide">。 2. 页面保持 16:9 演示比例。 3. 所有样式和脚本都写在同一个 HTML 文件里，不依赖外部库。 4. 每个 slide 必须使用 height: 100vh 和 height: 100dvh，并设置 overflow: hidden，不能出现页面内部滚动条。 5. 顶部语言按钮、底部页码/选择器和翻页按钮是固定控件，slide 内容必须为这些控件预留安全区域，不能被遮挡。 【双语要求】 1. 右上角提供两个按钮：中文、中英双语。 2. 中文模式只展示中文：不要显示英文翻译、英文栏目名、英文按钮文案、英文页码选项。 3. 中英双语模式才展示中文 + 英文。 4. 中英双语模式必须让所有可见内容都有英文：标题、正文、卡片、步骤、表格、提示词、按钮、页面选择。 5. 不要只翻译标题页或少数内容。 6. 英文是辅助层级，字号要比中文更克制，不要继承中文大标题字号。 7. 首页和大标题页要给中英文独立层级，避免英文把页面撑乱，也避免中文断字。 【交互要求】 1. 左下角显示当前页 / 总页数。 2. 顶部增加进度条，当前页变化时自动更新。 3. 页码旁边增加页面选择下拉框，可以直接跳到指定页。 4. 右下角提供上一页、下一页按钮。 5. 支持键盘左右方向键、空格、Home、End 翻页。 6. 可以支持鼠标滚轮和触摸滑动，但不要影响页面稳定性。 【视觉要求】 1. 风格统一、浅色、商务、适合公司内部分享。 2. 标题、卡片、表格、提示词区要使用同一套视觉规则。 3. 卡片不要一页一个风格。 4. 背景图要明显可见，但不能影响文字阅读。 5. 不要使用花哨渐变背景替代我提供的图片。 6. 文本必须适配常见尺寸，至少检查 1920x1080、1280x720、768x1024、375x667、667x375。 【响应式适配要求】 1. 不要只保证桌面 16:9 好看；375x667 竖屏和 667x375 短横屏也必须能完整展示当前页主要内容。 2. 小屏或低高度模式下，可以自动压缩辅助内容：隐藏标签、次要说明、长表格、长提示词段落，或把多列内容改成更紧凑的布局。 3. 压缩内容时必须成块隐藏，中文和英文要一起隐藏；不能只隐藏英文导致双语模式不完整，也不能只隐藏中文。 4. 如果一页内容在小屏放不下，优先重排、减少辅助信息或拆分内容，不要用 overflow: hidden 把文字硬裁掉。 5. 固定按钮、页码、页面选择器不能盖住标题、卡片、表格或正文。 6. 不要用随视口宽度连续缩放的超小字体解决问题；字号可以通过明确断点调整，但必须保持可读。 【自检】 生成后请检查： 1. index.html、验证截图和检查报告是否都在目标文件夹内。 2. 所有背景图能加载。 3. 刷新页面后背景分配会变化。 4. 中文 / 中英双语切换正常。 5. 中英双语模式下所有可见内容都有英文。 6. 页面选择、上一页、下一页、键盘翻页正常。 7. 逐页检查 1920x1080、1280x720、768x1024、375x667、667x375，在中文和中英双语两种模式下都没有文字溢出、遮挡、断字、内部滚动或被控件盖住。 8. 如果某个尺寸、语言切换或交互失败，请基于当前 index.html 做修复，不要重写整份文件。 这段提示词看着长，但它解决的是另一个问题：别让 AI 一边猜素材，一边猜页面，一边猜你到底想要什么。 我现在更愿意把第一版做成“能继续改”的版本，而不是追求一口气完美。 第一版出来后，人工检查下 HTML 也不会魔法一样一次全对。 按照上面提示词，第一版通常能把内容结构，主体交互和大部分样式做出来。但截图一跑，小屏，短横屏，双语，固定按钮和背景图可能会叠在一起，还是可能出问题。 所以我会接着做三件事： 这里最重要的一句话是：不要动不动就让它“重新做一份”。 重新生成看着省事，结果经常是旧问题没了，新问题又冒出来。基于当前文件小步改，反而更稳。 后面怎么改 比如双语没补全，我会这样写： 请基于当前 index.html 修改，不要重写整份文件。 问题：中英双语模式没有覆盖所有内容，或者中文模式混入了英文。 要求： 1. 中文模式只能显示中文，不要出现英文翻译、英文栏目名、英文按钮文案、英文页码选项。 2. 中英双语模式显示中文 + 英文。 3. 中英双语模式下，所有可见中文内容都要有英文版本。 4. 覆盖标题、正文、卡片、步骤、表格、提示词、按钮和页面选择。 5. 英文作为辅助层级，字号不要过大。 6. 修改后检查中文模式、中英双语模式和跳页是否正常。 背景太淡，直接说背景太淡： 请基于当前 index.html 修改，不要重写整份文件。 问题：背景图被浅色遮罩压得太淡。 要求： 1. 降低遮罩强度，让 01.jpg、02.jpg、03.jpg 更明显。 2. 保持文字可读。 3. 不要删除刷新随机背景逻辑。 4. 修改后截图检查首页和内容页。 封面太满，就让它只留标题： 请基于当前 index.html 修改，不要重写整份文件。 问题：首页不够像标题页。 要求： 1. 首页只保留标题。 2. 中文模式只显示中文标题。 3. 中英双语模式显示中文标题和英文标题。 4. 删除首页下面的说明段落。 5. 调整标题字号和换行，让中英文显示自然。 样式乱了，也不用一页页改： 请基于当前 index.html 做一次统一样式调整，不要改正文内容。 要求： 1. 所有 h2 标题使用统一字号和行距。 2. 所有卡片使用统一圆角、边框、阴影和内边距。 3. 表格标题行使用浅色背景。 4. 提示词区使用统一深色样式。 5. 不要影响中文 / 中英双语切换、页码、跳页和随机背景。 6. 修改后检查 1280x720 和 1920x1080 下是否有遮挡或溢出。 移动端溢出，就把问题讲具体： 请基于当前 index.html 修改，不要重写整份文件。 问题：375x667 竖屏或 667x375 短横屏下，部分 slide 文字、卡片、表格或底部控件出现溢出、遮挡或被裁切。 要求： 1. 为固定语言按钮、页码、页面选择器和翻页按钮预留安全区域。 2. 对小屏和低高度模式增加响应式压缩规则。 3. 可以隐藏次要说明、标签、长表格或长提示词段落，但必须中文和英文成块一起隐藏。 4. 不要只用 overflow: hidden 裁掉内容，也不要把字体缩到不可读。 5. 保留中文 / 中英双语切换、页码、跳页和随机背景逻辑。 6. 修改后逐页检查 1920x1080、1280x720、768x1024、375x667、667x375。 你会发现，这些修改都不是在“讲审美”，而是在讲规则，AI 更吃这一套。 我为什么更愿意用 HTML PPT 当然还能用，尤其是一次性汇报，或者团队已经有很成熟的模板，但只要材料会反复改，HTML 就舒服很多。 你可以让 AI 一次性改所有标题，一次性补所有双语，一次性调整所有卡片和表格，AI去改HTML源码比改PPT要快很多。 对我来说，这比拿着一份 AI 生成的 PPT 再手工拖半天，要省心不少。 下次如果你也想试，可以少问一句： 帮我做一份 PPT。 换成： 帮我做一份 HTML 演示材料，后续我还要继续让你修改。 得到的会是一份文件，也会是一份还能继续让 AI 接着改的材料。 
封面标题是什么。 中间大概分几段。 哪些页放案例，哪些页放流程或表格。 需要哪些功能，比如双语，页码，跳页，统一样式。 收尾那页希望听的人记住什么。
DEMO-HTML，再把要用的背景图放进去，命名成 01.jpg，02.jpg，03.jpg。提示词里需要把完整路径写清楚，要求 index.html，截图和检查报告都放在这个目录。先生成一份能打开，能翻页，能切语言的初版。 用浏览器截图检查几个常见尺寸。 把具体问题丢回给 AI，让它基于当前 index.html小步改。
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
