题目只是一个玩笑。不过有的时候我们确实会遇到这样的情况:我们不太追求汇报展示的完美,但是希望至少能保证全篇审美不错无功无过;我们没有太多的时间死磕排版与动画,想把有限的时间分给内容的雕琢。
这种时候,我们或许可以考虑PPT之外的另一种可能:html。因为不再是在一种“所见即所得”的窗口交互工具上操作,AI的代码能力可以获得充分释放,用一个“本地化的网页”来呈现汇报内容,或许效果可能不错。本文就是基于一次相对粗糙的尝试,来分享一下如何速成AI+HTML的汇报成果。
1、汇总整理汇报使用的讲稿word文档
·文档中间添加##注释,来辅助AI生成一些结构化的内容
2、建立一个专门的工作文件夹,子文件夹内放置文档中的插图原图
3、workbuddy进入工作文件夹,告知它可用材料的位置,生成内容的目标
·这种龙虾类软件(openclaw/Qclaw/miclaw)可以比较方便地跑到文件夹里各个位置查找文件并基本适应各种文档类型的阅读,同时html的图片插入依赖相对路径的输入,在这方面使用CLI类软件会比较有优势
·提示词工程(大致目标交给豆包,获取专用提示词)
你可以读取当前工作文件夹内的所有文件,包含本次的汇报讲稿文档(含口语化内容)、所有本地图片资源。
任务:基于文件夹内的汇报讲稿完整内容,优化后生成一份多页PPT风格HTML演示网页,纯HTML+CSS+原生JS,可本地直接打开运行。
硬性规则必须严格遵守,缺一不可:
1.内容优化与保留:完整读取汇报讲稿全文,剔除其中的口语化表述,保留核心学术表达,确保整体行文严谨、贴合学术汇报规范;
2.重点内容标注:精准识别讲稿中的重点部分,在生成的HTML页面中,用加粗或高亮的方式保留这些重点内容,突出核心信息,不遗漏关键要点;
3.注释内容参考:严格参照讲稿中##注释 的所有内容,将注释信息合理融入对应段落的HTML页面中(可作为补充说明、标注等形式),不篡改、不遗漏、不偏离注释原意;
4.图文排版要求:严格识别讲稿中【文字与图片的相对位置关系】,完全复刻原版排版:图片在段落上方/下方/侧边的位置完全不变,图文顺序不打乱、不随意移位;
5.图片引用规则:文件夹内已提前放置好对应配图,所有图片直接使用【本地相对路径 ./文件名】引入,禁止使用网络图片、禁止生成占位图、禁止自行额外配图;
6.图片适配要求:自动匹配语段对应的图片,就近插入对应文本板块内,一页内图文混排自然;图片做自适应等比缩放,适配PPT页面宽度,不拉伸、不溢出、排版整洁;
7.PPT基础功能:保留PPT核心功能:键盘左右键翻页、平滑切换动画、简洁商务排版(贴合学术汇报场景);
8.整体规范:整体风格简约清爽、学术严谨,文字易读,图文间距合理,重点内容(加粗/高亮)清晰可见,注释内容衔接自然,输出完整无缺失、可本地直接运行的代码。
如果需要避免投影中出现错误,可以固定长宽比:
……
6. 布局防错乱强制要求【最重要】:
页面采用**标准16:9固定PPT画布**,整体内容容器居中锁定比例,**禁止随屏幕宽度自动拉伸**;
大屏/投影仪只预留左右白边,内部文字、图片、布局完全固定不变,适配教室投影仪、台式机大屏,任何分辨率下排版都不乱、不变形、不溢出;
7. 图片适配:图片自适应在固定画布内等比缩放,不拉伸、不溢出、排版整洁;
……
4、获取到输出的前端网页,检阅并进行调整
·使用VS Code、Trae等IDE打开工作文件夹,来添加新页面,做复杂修改
这些任务并不要求保留工作记忆(龙虾总是这样做),所以使用直接AI改代码的软件效率会高很多;


·对于仅仅是想要改一个段落位置的小调整,可以直接在浏览器实现

对着想要改动的元素右键“检查”,就可以直接看到对应的文字,实现直接编辑
如果是想要更改元素位置,则可以长按拖动,放进子树正确的枝杈上。
具体的细节,看明白远不及上手尝试学的快,要写的也就这些,感谢观看😊