DeepSeek V3-0324探索-使用prompt生成精美PPT

背景

2025年3月25日，DeepSeek-V3 模型更新:

DeepSeek V3 模型已完成小版本升级，目前版本号 DeepSeek-V3-0324，用户登录官方网页、APP、小程序进入对话界面后，关闭深度思考即可体验。API 接口和使用方式保持不变。 如非复杂推理任务，建议使用新版本 V3 模型，即刻享受速度更加流畅、效果全面提升的对话体验。

各方面能力得到了提升，其中就包含了前端开发能力增强：在 HTML 等代码前端任务上，新版 V3 模型生成的代码可用性更高，视觉效果也更加美观、富有设计感。

作为紧跟时代的工程师（代码敲多了不想敲了），让我们来看看DeepSeek V3-0324 版本可以生成什么样的页面效果。

Step 1-使用prompt生成网页

我们先来试试DeepSeek V3-0324 的HTML页面生成能力。根据文档，打开DeepSeek官方网页，关闭深度思考：

回车之后我们可以看到DeepSeek正在给我们生成页面：

页面生成之后，我们可以点击Run HTML直接进行预览：

我们可以看到，通过一句简单的prompt，DeepSeek可以快速的给我们生成页面，并且效果还不错。

Step 2 - 使用prompt生成网页版PPT

网上看到有些使用Refly生成精美卡片、使用Claude3.7生成精美PPT的，对于很多人来说简直就是一大利器。那我们来看看使用DeepSeek V3-0324 是不是也可以达到相同的效果。

修改一下之前的prompt，让DeepSeek给我们生成一个HTML的PPT页面： 生成之后点击预览：

我们可以看到，DeepSeek已经根据我们的要求生成了网页版的PPT，可以左右非翻页，效果还不错的样子。

当然整体生成的页面并不完善，相关的图表并没有展示只是做了占位，PPT的排版以及交互还有待提升，还不能直接使用。

我们可以对prompt进行优化，已达到可以直接使用的效果。

Step 3 - 优化prompt，生成精美的网页PPT

网上翻了一些优秀prompt的书写，才知道原来prompt还可以这么写，"借鉴"了一下，整理为以下格式： ** prompt格式 **

1. 角色定位
2. 能力要求
3. 技术规范
4. 设计要求
5. 输出要求

根据以上几点，我整理出了一份完整的prompt，适用于科技风数据展示类的，把待处理内容、时间和主题替换一下即可，如果待处理内容想要大模型自主搜索，可以不填。

完整的prompt示例：

您是一位PPT排版设计专家兼前端可视化开发专家，同时具备视觉设计能力和前端开发技术能力。主要负责将专业设计理念与前端技术实现相结合，产出高质量的演示文档和Web交互界面。在日常工作中需要平衡美学表达与技术实现，为产品提供从视觉呈现到代码落地的全链路解决方案。

** 核心能力要求 - 设计维度 ** 
在PPT排版设计方面，专家级人才需要精通封面设计、内容页布局、色彩搭配和创意表现。具体包括：能根据专家照片特点设计专业大气的PPT模板，掌握图文混排、网格布局等专业技巧，熟练使用形状样式和修饰元素保持风格统一。对动画效果、图标运用有深刻理解，能够通过视觉层次突出重点内容，确保信息传达效果

** 核心能力要求 - 技术维度 **
前端可视化开发专家需要精通HTML5、CSS3和JavaScript等基础技术，并深入掌握SVG、Canvas、WebGL等图形渲染技术。对主流可视化库如ECharts、D3.js 、HighCharts、Three.js 等有深刻理解，能够根据业务场景灵活选用合适的可视化工具。同时需要熟悉数据绑定、动画交互等高级特性，能够实现复杂的数据可视化效果。

** 跨领域协同能力 **
该角色需具备将设计思维转化为代码实现的能力，具体表现为：能将UI设计稿精准转换为前端页面，理解W3C标准和Web语义化；掌握Canvas/SVG等可视化技术实现动态效果；

**技术规范：**

* 使用HTML5、Tailwind CSS和必要的JavaScript
* Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
* Tailwind CSS: [https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css](https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css)
* Echarts : https://s3.ssl.qhres2.com/static/e4b726ed78536682.js
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 保证页面能正常运行，代码无报错信息

**PPT设计要求**
配色应以冷色调为主，推荐使用深蓝色、紫色和银灰色作为基础色系，这些颜色能够传达科技感和未来感。蓝色象征宇宙与科技，紫色代表神秘与创新，而银灰色则能体现金属质感与高科技。主色与辅色建议采用渐变效果，通过调整透明度来增强视觉层次感，例如从深空蓝到星云紫的渐变过渡。


视觉元素运用:
高质量图像、自定义形状和动态效果是打造炫酷风格的核心手段。推荐使用3D渲染素材、粒子特效或全息投影等科技元素，搭配渐变色块、抽象线条增强层次感。动画效果需适度，优先采用平滑转场、路径移动等高级动画，避免过度堆砌导致视觉干扰。封面页建议使用高冲击力的视觉主图，如星空、光效或几何结构。

动态光效与霓虹元素：
为增强未来感，可在配色中加入荧光色点缀，如霓虹蓝(#00FFFF)、量子绿(#00FF9D)或离子紫(#CC00FF)。这些高饱和色彩适合用于关键数据、标题文字或界面边框，通过明暗对比营造全息投影效果。背景建议使用深色（如#0A0A1A）搭配粒子光点或网格线条，文字则采用浅色（#E0E0FF）保证可读性。动态光效可通过PPT的发光和模糊效果实现。

材质与纹理搭配：
金属质感是未来科幻风的重要元素，可通过渐变灰（#2B2B2B→#AAAAAA）模拟合金表面，搭配拉丝纹理或电路板图案。星空背景可使用NASA高清星云图，叠加10%-20%透明度的紫色/蓝色蒙版。数据可视化部分推荐半透明玻璃材质效果（如40%透明度的#2D5F91），搭配LED风格的亮色描边。

完整模板应包含：动态封面（含主标题与视觉焦点）、目录页（带进度指示）、章节过渡页（强化主题）、图文混排内容页（70%视觉+30%文字）、总结页（强化记忆点）。商务场景可增加数据仪表盘页，产品发布需突出全屏图片展示。每页核心信息不超过3点，通过动画分阶段呈现。

**输出要求：**
* 内容以PPT的形式进行展示，输出到HTML中， 提供一个完整的HTML文件。
* PPT要具备首页和结束页。
* PPT内容完整，排版合理，不能有元素溢出画布，无滚动条以及内容显示不全的情况，PPT尺寸 16: 9
* 涉及到图表相关的，请自动引入相关的js代码库进行实现。
* 翻页按钮在PPT左右两侧，鼠标悬停2秒及以上的时间，翻页按钮全部隐藏，鼠标滑动时再次显示。
* 翻页按钮不支持循环播放，隐藏时无法通过点击的方式进行翻页。
* 不需要显示翻页进度条。
* 确保风格共享相同的内容，但视觉表现完全不同。
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求。
* 单位，用中文单位，用亿、万中文单位，不要用B,M,K

待处理内容：
日期：{{2025.04.09}}
主题：{{24年阿里财报分析}}

这个prompt可以直接复制粘贴使用，可能是token长度的限制，DeepSeek在生成比较长的代码时会有中断的现象，这时候点击一下代码块右下角的continue就可以继续生成了。

接下来解析一下prompt格式各个模块。

一、角色要求

因为要生成网页版的PPT，所以需要同时具备设计PPT的能力以及页面开发的能力。在这里指定了一下角色以及主要工作：

您是一位PPT排版设计专家兼前端可视化开发专家，同时具备视觉设计能力和前端开发技术能力。主要负责将专业设计理念与前端技术实现相结合，产出高质量的演示文档和Web交互界面。在日常工作中需要平衡美学表达与技术实现，为产品提供从视觉呈现到代码落地的全链路解决方案。

二、核心能力要求

两个角色，所以会有两个维度的能力要求以及融合能力：

** 核心能力要求 - 设计维度 **
在PPT排版设计方面，专家级人才需要精通封面设计、内容页布局、色彩搭配和创意表现。具体包括：能根据专家照片特点设计专业大气的PPT模板，掌握图文混排、网格布局等专业技巧，熟练使用形状样式和修饰元素保持风格统一。对动画效果、图标运用有深刻理解，能够通过视觉层次突出重点内容，确保信息传达效果

** 核心能力要求 - 技术维度 **
前端可视化开发专家需要精通HTML5、CSS3和JavaScript等基础技术，并深入掌握SVG、Canvas、WebGL等图形渲染技术。对主流可视化库如ECharts、D3.js 、HighCharts、Three.js 等有深刻理解，能够根据业务场景灵活选用合适的可视化工具。同时需要熟悉数据绑定、动画交互等高级特性，能够实现复杂的数据可视化效果。

** 跨领域协同能力 **
该角色需具备将设计思维转化为代码实现的能力，具体表现为：能将UI设计稿精准转换为前端页面，理解W3C标准和Web语义化；掌握Canvas/SVG等可视化技术实现动态效果；

** Tips:** 这里，可能有些同学不知道对应的能力要求该怎么写，可以通过AI给你生成。比如问AI：PPT排版专家核心能力要求。

三、技术规范

这里主要对页面生成的技术规范进行了约束，比如指定使用框架和库之类的。除了这个之外，我还指定了资源的引用路径，因为没有指定的情况下，会默认使用国外的CDN，导致整个页面加载比较慢。

**技术规范：**
* 使用HTML5、Tailwind CSS和必要的JavaScript
* Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
* Tailwind CSS: [https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css](https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css)
* Echarts : https://s3.ssl.qhres2.com/static/e4b726ed78536682.js
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 保证页面能正常运行，代码无报错信息

四、设计要求

这里主要是对PPT排版设计的要求，这个要求直接是通过AI生成的。可以让AI出一个科技风PPT详细设计要求。

**PPT设计要求**
配色应以冷色调为主，推荐使用深蓝色、紫色和银灰色作为基础色系，这些颜色能够传达科技感和未来感。蓝色象征宇宙与科技，紫色代表神秘与创新，而银灰色则能体现金属质感与高科技。主色与辅色建议采用渐变效果，通过调整透明度来增强视觉层次感，例如从深空蓝到星云紫的渐变过渡。

视觉元素运用:
高质量图像、自定义形状和动态效果是打造炫酷风格的核心手段。推荐使用3D渲染素材、粒子特效或全息投影等科技元素，搭配渐变色块、抽象线条增强层次感。动画效果需适度，优先采用平滑转场、路径移动等高级动画，避免过度堆砌导致视觉干扰。封面页建议使用高冲击力的视觉主图，如星空、光效或几何结构。

动态光效与霓虹元素：
为增强未来感，可在配色中加入荧光色点缀，如霓虹蓝(#00FFFF)、量子绿(#00FF9D)或离子紫(#CC00FF)。这些高饱和色彩适合用于关键数据、标题文字或界面边框，通过明暗对比营造全息投影效果。背景建议使用深色（如#0A0A1A）搭配粒子光点或网格线条，文字则采用浅色（#E0E0FF）保证可读性。动态光效可通过PPT的发光和模糊效果实现。

材质与纹理搭配：
金属质感是未来科幻风的重要元素，可通过渐变灰（#2B2B2B→#AAAAAA）模拟合金表面，搭配拉丝纹理或电路板图案。星空背景可使用NASA高清星云图，叠加10%-20%透明度的紫色/蓝色蒙版。数据可视化部分推荐半透明玻璃材质效果（如40%透明度的#2D5F91），搭配LED风格的亮色描边。

完整模板应包含：动态封面（含主标题与视觉焦点）、目录页（带进度指示）、章节过渡页（强化主题）、图文混排内容页（70%视觉+30%文字）、总结页（强化记忆点）。商务场景可增加数据仪表盘页，产品发布需突出全屏图片展示。每页核心信息不超过3点，通过动画分阶段呈现。

五、输出要求

这里是对整个页面的输出的要求，比如要求所有的代码都完整的输出到一个HTML中，这样方便展示，复制出来之后，直接浏览器打开HTML文件就行。还可以指定一些交互细节，根据需求和实际的效果对输出进行调整。

**输出要求：**
* 内容以PPT的形式进行展示，输出到HTML中， 提供一个完整的HTML文件。
* PPT要具备首页和结束页。
* PPT内容完整，排版合理，不能有元素溢出画布，无滚动条以及内容显示不全的情况，PPT尺寸 16: 9
* 涉及到图表相关的，请自动引入相关的js代码库进行实现。
* 翻页按钮在PPT左右两侧，鼠标悬停2秒及以上的时间，翻页按钮全部隐藏，鼠标滑动时再次显示。
* 翻页按钮不支持循环播放，隐藏时无法通过点击的方式进行翻页。
* 不需要显示翻页进度条。
* 确保风格共享相同的内容，但视觉表现完全不同。
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求。
* 单位，用中文单位，用亿、万中文单位，不要用B,M,K

六、最终效果

我们来看看这个prompt生成的效果，是不是很炫酷？反正比我自己做的强多了～

结束

以上就是对DeepSeek V3-0324的一次尝鲜，感觉整体的效果还是不错的，目前比较适用于不是非常正式下的汇报或分享：内部分享，部门内周会/月会汇报等。如果需要在更正式的环境下使用，还需要不断进行优化。

这个月自己刚好有个内部的技术分享，可以试试水，希望到时候不会翻车。

当然，DeepSeek V3-0324还有更多的玩法等待大家的探索与分享。

最后附上一些我个人prompt调试过程中的心得：

1. 观察模型推理结果 每次输出完代码之后，DeepSeek都会在后面描述所生产HTML文件的特点： 通过这些描述，我们可以看出DeepSeek对咱们输入prompt理解了多少，发现理解不了的，我们可以针对性的修改prompt。

2. 了解大模型思考过程 调试过程中发现，有时候DeepSeek给我生产的页面里没有图表，只有占位图，我问了一下：

通过它的回答，我们可以发现，默认情况下生成的代码里是不自动集成JavaScript库的，可以通过指定使用Echarts库来解决这个问题。

3. 其他

• 专有名词搜索：有些专有名词不知道叫什么，可以把模式给到AI，让AI给总结一下，如：把文字转化成图文，便于理解，这叫什么？------信息可视化。
• 垂直领域能力要求：通过AI生成，如上面提到的PPT排版专家核心能力要求。
• 细节微调：不同的模型对prompt的解析理解不一样，一套prompt并不一定在各个模型中都通用，我们需要进行不同的调节。