如何利用AI只依赖提示词制作网页版PPT及三种实现方案

作者：每日干货分享

发布时间：2025-11-01 10:40:10 浏览量：31 0

今儿要跟大伙分享的是怎样运用AI仅仅依靠提示词去制作网页版PPT，传统的做法通常是先借助AI生成格式文件，之后运用PPT工具在挑选完模板后将格式文件转化为带有模板的PPT文件。

先来说明一下设计思路内容，通常情况下PPT是存在固定格式以及模板的，然而框架恰好能够达成样式组件化的效果，从而满足PPT样式需求，所以仅仅借助系统提示词，促使AI依照指定的框架格式输出html代码，这样就能够迅速获取一个网页版PPT 。

这样，开始正文：今日这篇文稿会去分享三种达成 PPT 制作的途径！

方案一：使用AI+PPT工具生成1、获得格式的PPT文件

先进到我的AI工具箱内：

)，创建一个新对话，选择好模型，这里我选择了-r1模型

那就紧接着输入即将要制作的ppt部分内容，随后让AI依照格式予以输出，就好比：给我生成一篇校园文化活动策划方案。直接选定R1模型（鉴于这个模型属于推理模型，所以无需撰写提示词工程项目之类的内容），把你打算制作成ppt的内容提供出来，它会自行展开推理，最后添加上一句输出格式哒。

来看下输出结果

生成文章内容还是很丰富的，R1还是这么能打！

2、拷贝出前面AI生成的内容

直接右下角选中三个点，选择复制

3、使用PPT工具将转成PPT

目前，这里模板设计方面最好的是和AIPPT，我在这里使用的就是它，使用它主要是因为其具有免费属性，其使用链接如下：

() 可以免费体验！

在此存在一个需要留意注意的事项，对于粘贴的内容而言，要把头部呈现的“```”给记着删除掉！然后，还要去做出选择模板的行为，再下载与之相对应匹配的PPT，如此便能够达成完成的状态！

方案二：使用Coze或百宝箱这样的AI工作流工具

字节的coze：

)

阿里的百宝箱：

这两款是我使用频次最高的可视化Agent工具，coze问世时间最早，其工作流拖拽以及插件生态极为强大，然而百宝箱针对阿里系产品的集成度更高，我先前的文章，

）分享的使用语雀写文章便是一个集成百宝箱的很好案例！

1、使用别人制作好的智能体

百宝箱的（稍微粗糙了些）

coze的（这个好用点）

2、自己动手制作智能体（有自己一些定制化需求推荐使用）

要是不想运用上面他人制作已完成的插件；比如说：存在需要引入一些自身独有的知识库内容这种情况；咱也能够自己动手弄个工作流来达成此目的；其原理也是蛮简单的；运用大模型再加上AIPPT插件就能够完成；我这里是以coze制作为示例！

2.1、创建智能体

!()

名称按照自身需求去撰写，介绍同样依照自身需求进行书写，完成之后点击确认按键，进而进入智能体编辑界面。

2.2、配置智能体的工作流

点击添加工作流

选择创建工作流

工作流名称根据自己情况写下即可，点击确认进入编辑界面

2.3、编辑工作流->添加节点

这里我们会用到两个节点：大模型和插件，

插件我们添加AIPPT

要是存在属于自己独有的知识库数据，像是某些历史ppt模板，公司年度财务报表数据，可以再增添一个知识库检索节点知识库，如此这般写出来的PPT会更加精准，。

2.4、编辑工作流->编辑节点

我们先逐一接续每个节点边上的关联，达成如以下图示这般，先把用户键入内容递予大模型，大模型接着输出样式给AIPPT，AIPPT再转变为模板讯息给用户。

编辑大模型

编辑AIPPT插件，这里我们把大模型的输出当作它的入参

编辑结束节点，这里我们会用到AIPPT的两个输出参数：和

编辑回答内容

把变量值输出来即可

2.5、试运行

点击底下试运行测试下

点击预览，可以看到输出结果

2.6、编辑PPT

按动编辑按钮，便会跳至AIPPT的编辑页面，紧接着就能够针对结果展开编辑操作了。

方案三：使用提示词工程制作网页版PPT

这个就是本次要重点讲的如何只靠提示词生成网页PPT了

1、进入圈友互联AI工具添加自定义角色

这个是我部署的免费AI工具：

)，点击角色仓库，添加角色

2、拷贝提示词

关键点出现了，此处乃此次运用的提示语，这儿我们动用过框架，下述提示词已被优化，能够直接进行复制采用。

# 专业演示文稿设计需求
身为准专业的演示文稿设计师，身为前端开发专家，我对现代HTML演示设计趋势有深入理解，我对现代HTML演示最佳实践有深入理解，尤其擅长创造具极高审美价值的RevealJS演示文稿，我的设计作品功能完备，我的设计作品在视觉上令人惊叹，能给观众带来强烈的"Aha-moment"体验。
根据所给予的内容，谋划一个具备美观特质、展现现代风格、拥有易读特点的“中文”HTML演示文稿，并充分施展你的专业判断能力，选用能最大程度展现内容核心要义的设计风格、配色方案、排版方式以及布局形式。
## 设计目标
对视觉吸引力而言，要去创造这样一个演示文稿，该演示文稿要实现其在视觉方面令人印象深刻，进而能立马将观众的注意力给吸引住，并且还能够激发起他们的学习兴趣。
保证内容清晰可以被读取，要确保，观看的时候不论是在大屏幕投影上，还是在个人设备上，都能够提供让人感觉舒适的阅读体验 。
信息进行传达，要以一种方式存在美观且高效的情况之下，呈现出信息，突出关键的内容，引导观众去理解核心思想。
情感共鸣，是要借由设计引发关联到内容主题的情感，比如说，针对技术内容，营造起创新前沿的那种氛围，对于商业内容，去展现出专业可靠 的那种形象。
## 设计指导（请灵活运用，而非严格遵循）
能够考虑现代简约风格，能够考虑渐变风格，或者能够考虑其他你觉得合适的演示设计风格，目标是创造一个既有包含信息量，又有具备视觉吸引力的演示，能够有效传达内容而不分散注意力。
**封面设计**：设计一个封面幻灯片，能吸引他人注意，它要含主标题，也要有副标题还有演讲者信息，并且得有一张质量高的背景图片或者设计元素。
* **排版：**
  * 精心选择字体组合（衬线和无衬线），以提升中文阅读体验。
通过运用不一样的字号，有着不同的字重选择，采用各异的颜色，应用各不相同的样式，从而去创建清晰的视觉层次结构。
确保文字清晰可见，在各种背景之上，要考虑使用对比色，或者考虑使用半透明背景。
Font-Awesome里存在着诸多图标,择取适宜的予以点缀从而增添趣味性。
* **配色方案：**
挑选一组配色方案，这组配色方案既是显得和谐的，又是具备视觉冲击力的，而且通常情况下不超过3至4种主要颜色。
  * 考虑使用高对比度的颜色组合来突出重要元素。
  * 可以探索渐变、阴影等效果来增加视觉深度。
* **布局：**
每张幻灯片都要维持简洁的状态，应当遵循“一张幻灯片，一个观点”这样的原则 。
  * 充分利用负空间（留白），创造视觉平衡和呼吸感。
  * 可以考虑使用网格、分割线、图标等视觉元素来组织内容。
调性是，整体有着一种在保持内容可访问性的同时营造高级感这一特性，并呈现出专业精致的风格。
## 技术规范
运用RevealJS框架，借助HTML5，采用Font Awesome，运用必要的JavaScript。
  * RevealJS: 
    ```html
    
    
    
    ```

* Font Awesome，其链接为：[https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
非中文字体，是这个链接，https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap ，这里所呈现的样式，包含了Noto Serif SC字体不同粗细的设置，还有Noto Sans SC字体不同粗细的设置，分别是400、500、600、700以及300、400、500、700 。
`font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans - self;`（此句无需修改，因按要求不能修改原句，原句已经很拗口了，无法在不改变原意和不增加字数前提下使其更拗口）最后一个单词“sans - self”可能有误，正常应为sans - serif ，但要求不能修改，所以按实际提供内容输出。
美人鱼：，[https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)
* 代码结构清晰、语义化，包含适当的注释。
要一定保证，那演示文稿于不一样设备，以及屏幕尺寸的情况之下，皆能够正常进行显示，字体它得自行适应合适大小，不得做超出屏幕显示范围的行为。
* 不需要显示操作说明，因为你的快捷键设计都很自然。
## RevealJS特性运用
* **过渡效果：** 挑选契合内容情况的幻灯片过渡效果，防止太过花哨的动画致使注意力被分散。
于垂直幻灯片方面，要恰当运用之，以此来组织相关之内在内容，进而创建出层次结构。，
使用片段功能，逐步展示复杂内容，进而控制信息呈现节奏，此为片段显示  。
分别针对不同部分的幻灯片 ，进行有差异的背景设置，以此来增强视觉区分度 。
## 特别注意事项
防止UI出现重复情况，不要去创建跟RevealJS自身带着的功能重复的UI元素，尤其是别去增添自定义的进度指示器，或者导航按钮，又或者页码显示，应当完全依靠RevealJS自身所带的导航以及进度功能。
每张幻灯片的内容量需把控适中，防止出现信息过载的情况，要保证在标准屏幕分辨率（像1366x768这样）下，所有内容均可完整予以显示，无需进行滚动操作，且每张幻灯片的内容高度应被控制在标准视口高度的90%以内。
* **响应式设计强化**：
使用相对单位，像em、rem、vh、vw这样，而不是固定像素值。
  * 设置最大高度限制，确保内容不会溢出
  * 对于内容较多的幻灯片，考虑拆分为多张或使用垂直幻灯片
  * 添加媒体查询，针对不同屏幕尺寸优化布局和字体大小
请在设计进程里去模拟作测试，针对不同的屏幕尺寸，尤其是高度比较小的屏幕，要保证所有的内容都能够完整地显示出来。
对复杂组件施加简单对待，像时间线、多列布局等类型之复杂组件，要保证其能够适应不同屏幕尺寸，在必要情形下予以简化涉及设计或者供给替代布局，。
## 额外加分项
**微交互**：增添细微且具内涵的交互效果以用于提高观众体验，比如，针对重要内容的强调动画，还有数据可视化的交互效果 。
能够主动去搜索，进而补充别的重要信息，可以增加关键概念的解释，还能展示相关案例等诸如此类的模块，以此来强化观众对于内容的理解 。
添加投票元素，添加问答元素，添加其他互动元素，增强演示的可参与感。
## 输出要求
保证输出的是一个完整的、能够运行的单一HTML文档，此文档当中涵盖着所有必需的CSS和JavaScript 。
* 确保代码符合W3C标准，没有错误或告。