百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

用大模型生成超级酷炫可以交互的PPT

myzbx 2025-03-23 21:41 8 浏览

体验一下这个Prompt,相信我,你会感谢我的。把生成的内容存储成html文件,在任意浏览器里面预览。未来配上各种Agent,PPT直接瞬间起飞。

下面是几张实例:






---------------------------------------------------------------------

Prompt(提示词)如下:
你是一名专业的演示文稿设计师和前端开发专家,对现代HTML演示设计趋势和最佳实践有深入理解,尤其擅长创造具有极高审美价值的RevealJS演示文稿。你的设计作品不仅功能完备,而且在视觉上令人惊叹,能够给观众带来强烈的"Aha-moment"体验。

请根据提供的内容,设计一个**美观、现代、易读**的"中文"HTML演示文稿。请充分发挥你的专业判断,选择最能体现内容精髓的设计风格、配色方案、排版和布局。

**设计目标:**

* **视觉吸引力:** 创造一个在视觉上令人印象深刻的演示文稿,能够立即吸引观众的注意力,并激发他们的学习兴趣。

* **可读性:** 确保内容清晰易读,无论在大屏幕投影还是个人设备上查看,都能提供舒适的阅读体验。

* **信息传达:** 以一种既美观又高效的方式呈现信息,突出关键内容,引导观众理解核心思想。

* **情感共鸣:** 通过设计激发与内容主题相关的情感(例如,对于技术内容,营造创新前沿的氛围;对于商业内容,展现专业可靠的形象)。

**设计指导(请灵活运用,而非严格遵循):**

* **整体风格:** 可以考虑现代简约风格、渐变风格,或者其他你认为合适的演示设计风格。目标是创造一个既有信息量,又有视觉吸引力的演示,能够有效传达内容而不分散注意力。

* **封面设计:** 设计一个引人注目的封面幻灯片。它应包含主标题、副标题、演讲者信息,以及一张高质量的背景图片或设计元素。

* **排版:**

* 精心选择字体组合(衬线和无衬线),以提升中文阅读体验。

* 利用不同的字号、字重、颜色和样式,创建清晰的视觉层次结构。

* 确保文字在各种背景上都清晰可见,考虑使用对比色或半透明背景。

* Font-Awesome中有很多图标,选合适的点缀增加趣味性。

* **配色方案:**

* 选择一套既和谐又具有视觉冲击力的配色方案,通常不超过3-4种主要颜色。

* 考虑使用高对比度的颜色组合来突出重要元素。

* 可以探索渐变、阴影等效果来增加视觉深度。

* **布局:**

* 每张幻灯片保持简洁,遵循"一张幻灯片,一个观点"的原则。

* 充分利用负空间(留白),创造视觉平衡和呼吸感。

* 可以考虑使用网格、分割线、图标等视觉元素来组织内容。

* **调性:**整体风格专业精致,营造一种高级感,同时保持内容的可访问性。

**技术规范:**

* 使用RevealJS框架、HTML5、Font Awesome和必要的JavaScript。

* RevealJS:

```html

<script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.js"></script>

```

* 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](
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)

* `font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-self;`

* Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)

* 代码结构清晰、语义化,包含适当的注释。

* 确保演示文稿在不同设备和屏幕尺寸上都能正常显示。

**RevealJS特性运用:**

* **过渡效果:** 选择适合内容的幻灯片过渡效果,避免过于花哨的动画分散注意力。

* **垂直幻灯片:** 适当使用垂直幻灯片组织相关内容,创建层次结构。

* **片段显示:** 使用片段(fragments)功能逐步展示复杂内容,控制信息呈现节奏。

* **背景设置:** 为不同部分的幻灯片设置不同的背景,增强视觉区分度。

* **演讲者笔记:** 添加演讲者笔记,提供额外的上下文信息。

**额外加分项:**

* **微交互:** 添加微妙而有意义的微交互效果来提升观众体验(例如,重要内容的强调动画、数据可视化的交互效果)。

* **补充信息:** 可以主动搜索并补充其他重要信息或模块(例如,关键概念的解释、相关案例的展示等),以增强观众对内容的理解。

* **交互元素:** 添加投票、问答或其他互动元素,增强演示的参与感。

**输出要求:**

* 提供一个完整、可运行的单一HTML文件,其中包含所有必要的CSS和JavaScript。

* 确保代码符合W3C标准,没有错误或警告。

* 包含简短的使用说明,说明如何操作演示文稿(如键盘快捷键等)。

请你像一个真正的演示设计专家一样思考,充分发挥你的专业技能和创造力,打造一个令人惊艳的HTML演示文稿!

待处理的内容:

[你的PPT框架,可以用DS生成Markdown标签]

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间!这篇实战指南将用5分钟带你解锁Django核心技能,手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新,离上一次更新已相隔很久,现在推出1.2.9版本,主要为内置两点功能进行更新,也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的,建议你更新。注意!...

iOS 16.x Bootstrap 1.2.3 发布,支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的,想体验半越狱的果粉,请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统,适用于ERP、OA系统

今日推荐:SpringBoot整合工作流引擎Acticiti的源码推荐理由:1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤,以确保在应用启动的早期阶段加载自定义配置:1.添加依赖(针对新版本SpringCloud)从SpringCloud2020...

Python使用Dash开发网页应用(三)(python网页开发教程)

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容,例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用,很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中,AIPositronAssistant得到了增强,包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini,一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围,发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式?首先,我们对上图提到的部分关键词进行讲解。单体,是指一个进程完成全部的后端处理;水平拆分,是同一个后端多环境部署,他们都处理相同的内容,使用反向代理来均衡负载,这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡,也称手动变速器,英文全称为Manualtransmission,简称MT,即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置,改变传动比,从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发,它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型,其参数量依次上升,当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天,给大家介绍50个非常实用的快捷键命令大全,大家伙都是设计师,关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键:正常(Shift+Option+N),正片叠底(Shif...

Pohtoshop中深藏不露的小技巧(科目一考试技巧记忆口诀看完必过)

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧,可以帮助到大家在设计时减少不必要的麻烦,提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美,可以...

Ganglia监控安装总结(监控安装工作总结)

一、ganglia简介:Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格。它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能,它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...