前两天，小米发布了2024年度的完整年报。
三顿本来想挑其中一些重要的内容，给大家做一份完整的PPT。但我打开一看，有整整379页：
手动整理？吭哧吭哧地读、提取、再做成PPT？那估计得熬好几天，头发都得掉一把。
就在我感觉快要被这379页“活埋”的时候，脑子里突然闪过一个念头：这种事，能不能让AI来帮我扛？
折腾研究了很久这个提示词该怎么写，迭代了16个版本：
终于让我整出了一个不错的效果，你只需要把这样几百页的财报丢给AI，直接就能帮你生成一个可视化的网页：
**2分钟干完你好几天的工作，**它会把这样几百页的文档转换一个个卡片，有内容、有数据、有图表。
随手再丢个文件，比如我让它处理特斯拉的Q4季度财报，分分钟就生成了这种颜值爆表、专业感十足的页面：
放大给你们感受一下生成的质量…就，非常夸张：
而且，不仅是能做成网页形式，还能直接帮你转换成可以播放的PPT：
平心而论，咱不能吹牛说这效果能把顶级设计师按在地上摩擦，但老实讲，用来做日常汇报，那绝对是绰绰有余，甚至可以说是相当能打！
那具体三顿是怎么把这样一篇几百页的报告，转换成这样的PPT的呢？
这篇文章，我不光会把迭代了16次的“提示词” 发给你，你一键就能用。更重要的是，我会把背后每一步的思考逻辑，以及我是如何一步步引导AI、踩过哪些坑，都掰开了、揉碎了分享给你。
将年报转为分析报告
这样一份几百页的年报，如果直接让AI转成PPT，它会有些摸不着头脑。
这事儿跟我们人处理复杂问题一样，不能指望一口吃成胖子。得先让AI像个专业的分析师一样，把这份报告吃透、消化掉，提炼出精华。
我用到了这样一个提示词：
我需要分析以下财务报表数据，请帮我：
1. 概括公司整体财务状况
2. 分析关键财务指标（包括但不限于：流动比率、资产负债率、毛利率、净利率、ROE等）
3. 识别财务报表中的异常或需要关注的地方
4. 与行业平均水平对比（如有行业数据）
5. 提出具体的改进建议
请以专业财务分析师的角度进行详细分析，并用通俗易懂的语言解释各项指标的含义，最终请你给我一份不少于3000字的深度分析报告。
配合上谷歌Gemini最新的DeepResearch功能，你一下就能得到一份内容详尽的分析报告：
操作很简单，用到的是这个网址：
模型选择DeepResearch，再把年报的网址和三顿前面分享的提示词一起发送过去。
AI就能一步步的帮你分析思考，联网查询，最终输出一份完整的报告。
三顿体验下来，这是免费工具中生成效果最好的。
它提供了免费的次数，如果不够用，你还可以在这里用谷歌最新的2.5Pro模型，免费且完全不限量：
当然，DeepSeek、豆包等等也都可以使用这个提示词，把文件和提示词一起丢给AI，你就能得到一份分析报告。
将分析报告转成可视化网页
得到分析报告后，我们就可以把它转成可视化的网页啦。提示词怎么写呢？
针对这样较为复杂的内容，如果只是给AI一句“帮我转换成可视化的网页”，你只能得到这样的效果：
好像还行，但看起来还是费劲。因此我们需要把转换的方法教给它。
其实针对年报类型的内容，在PPT里有一个非常简单、好上手，还出效果的处理方法，叫做“卡片式设计”。
什么是卡片式设计呢？给大家看看苹果发布会里的例子：
面对大量的参数、数据内容，大家看看苹果的发布会是怎么做的？
它把内容放到了一个个卡片内，对不对？这就是一个处理大量数据、巨量文字，很好用的方法，卡片式设计。
你会发现这种方法自由度很高，每个卡片的大小、卡片的数量你都可以任意调节。而且其实装了很多的内容，整个页面也不会显得拥挤。
我们需要把这个方法，教给AI。
我是这样写的提示词：
1. **整体风格：**
* 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. **布局核心：卡片式布局**
* **主卡片 (Main Cards)：** 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。
* **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：**
* **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
* **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
* **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4`）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。
* **嵌套布局：** 主卡片可以包含迷你卡片网格。
这个提示词其实经过了很多轮的调试，因为三顿在尝试的过程中，我发现AI其实很难理解卡片的用法。
它控制不好大小，应该放大的标题部分，被做成了小字：
它不知道怎么处理内容逻辑，会把一个句子按逗号粗暴的拆分，还不知道把它们排在一行里。
没关系，这其实都很正常。
三顿在写这个提示词的时候，即使我做过非常多这样的设计，我也很难完整的梳理出它的要点。
别怕，把问题找出来，让AI自己一点点优化。比如它就在前面这个提示词的基础上，给我加上了这样的约束：
**内容呈现与布局（核心优化）：**
1. **全面的基础数据：**
* 准确提取并展示源文档中的所有关键信息、核心数据点（特别是财务数据、增长率、市场份额）、结论和分析。
2. **核心要点提取与卡片化（关键）：**
* **语义理解：** 超越简单的句子分割。理解逻辑和语义，识别段落或列表**内部独立、并列的核心观点/元素**。
* **转换：** 将每个提取出的核心要点转化为**一个独立的迷你卡片**。
* **目标：** 将复杂信息解构成结构化、可视化的网格，使其成为易于扫视的单元。
3. **迷你卡片内部结构与细节（关键）：**
* **结构优先级：**
* **强调数字优先：** 如果核心要点包含一个关键、突出的数字/指标，则将该**数字/指标本身**作为顶部元素，使用超大、粗体字号（例如 `text-5xl` 或 `text-6xl`, `font-bold`，使用高亮色）。目的是为了最大化视觉冲击力。
* **文本标题：** 如果核心要点是概念性的或数字是次要的，则使用一个**简洁、加粗的中文短语**（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 `text-3xl` 或 `text-4xl`, `font-bold`，白色或高亮色）。
* **支撑文本：** 在大的数字/标题下方，使用较小字号（例如 `text-sm`, `text-gray-400`）。
* **当大元素是数字时：** 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。
* **当大元素是文本标题时：** 提供具体细节、解释、数据支撑或影响。
* **可选双语副标题（选择性应用）：**
* 在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），添加一个**非常简洁的英文短语**，使用小字号（例如 `text-xs` 或 `text-sm`）、常规字重和柔和的颜色（例如 `text-gray-500` 或 `text-gray-400`）。示例：“YoY Growth”，“Total Revenue”，“Market Share”。**审慎地应用**以增加视觉风格，而非死板地用于每个卡片。
* **专注与简洁：** 严格遵守“**一个卡片，一个核心要点**”。大的元素和支撑文本都必须**高度简洁**。避免在单个迷你卡片中使用长句或包含多个观点。
这是内容的部分，设计的部分怎么写呢？
其实相对就简单很多，我让AI自己写了这样一个简易的视觉识别系统，可以根据内容中提到的品牌，自己选择页面的主要颜色。小米用黄色、特斯拉用红色…前面的配色部分就是这样自动生成的：
**背景：**
* 纯黑页面背景 (`#000000`)。
**高亮颜色**
* **自动品牌色：** 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 `#FF6900`）作为**唯一的核心高亮色**。
* **备选方案：** 如果品牌/颜色识别失败，则使用专业的科技蓝 (`#00AEEF`) 或亮橙色 (`#FFA500`)。
* **应用：** 统一应用于关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
除此之外你还可以对样式进行约束，如果你不知道怎么写的话，可以找一些参考图片，比如我前面发的苹果发布会的图片，让它自己分析思考、生成提示词：
**科技感渐变 (Tech Gradient)：**
* **仅应用于高亮色：** 创建从 `rgba(高亮色, 0.7)` 到 `rgba(高亮色, 0.3)` 的透明度渐变。
* **用途：** 用作卡片/区域、图表区域或文本背景的微妙底色。**禁止使用多色渐变**。
**卡片样式 (Card Styling)：**
* **背景：** 所有卡片（主卡片和迷你卡片）均使用深灰色背景（例如 `#1a1a1a` 或 `#222222`）。
* **圆角：** 主卡片使用较大圆角半径（`rounded-xl` 或 `rounded-2xl`），迷你卡片使用较小圆角半径（`rounded-lg`）。
* **分隔：** 使用细微边框（`border: 1px solid #333;`）或适合暗黑模式的轻微阴影（`shadow-md` 或 `shadow-lg`）。
这样一个部分一个部分的编写、调试，我就得到了**这个最终版的提示词：**
基于提供的源文档（例如，财务报告、分析报告、产品信息），生成一个单一、完整、可直接运行的 HTML 文件。此文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并严格遵守以下设计和实现要求：
**核心要求：**
1. **单一 HTML 文件输出：**
* 最终交付物必须是**一个 .html 文件**，包含所有必要的 HTML 结构、CSS 样式（通过 `<style>` 标签或内联 Tailwind 类）和 JavaScript（通过 `<script>` 标签，包括 CDN 引入和初始化逻辑）。
* 不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
**视觉设计与布局：**
1. **整体风格：**
* 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. **布局核心：卡片式布局**
* **主卡片 (Main Cards)：** 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。
* **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：**
* **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
* **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
* **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4`）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。
* **嵌套布局：** 主卡片可以包含迷你卡片网格。
3. **背景：**
* 纯黑页面背景 (`#000000`)。
4. **高亮颜色**
* **自动品牌色：** 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 `#FF6900`）作为**唯一的核心高亮色**。
* **备选方案：** 如果品牌/颜色识别失败，则使用专业的科技蓝 (`#00AEEF`) 或亮橙色 (`#FFA500`)。
* **应用：** 统一应用于关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
5. **科技感渐变 (Tech Gradient)：**
* **仅应用于高亮色：** 创建从 `rgba(高亮色, 0.7)` 到 `rgba(高亮色, 0.3)` 的透明度渐变。
* **用途：** 用作卡片/区域、图表区域或文本背景的微妙底色。**禁止使用多色渐变**。
6. **卡片样式 (Card Styling)：**
* **背景：** 所有卡片（主卡片和迷你卡片）均使用深灰色背景（例如 `#1a1a1a` 或 `#222222`）。
* **圆角：** 主卡片使用较大圆角半径（`rounded-xl` 或 `rounded-2xl`），迷你卡片使用较小圆角半径（`rounded-lg`）。
* **分隔：** 使用细微边框（`border: 1px solid #333;`）或适合暗黑模式的轻微阴影（`shadow-md` 或 `shadow-lg`）。
7. **主标题强化 (Main Title Enhancement)：**
* 使主中文标题显著增大（例如，`text-5xl` 或 `text-6xl`, `font-bold`）。
* 在其下方添加一个较小的、对应的英文标题（例如，`text-xl` 或 `text-lg`, `font-semibold`，颜色稍浅，如 `text-gray-300` 或 `text-gray-400`）。示例：“Xiaomi Corporation 2024 Annual Financial Report Analysis”。
**内容呈现与布局（核心优化）：**
1. **全面的基础数据：**
* 准确提取并展示源文档中的所有关键信息、核心数据点（特别是财务数据、增长率、市场份额）、结论和分析。
2. **核心要点提取与卡片化（关键）：**
* **语义理解：** 超越简单的句子分割。理解逻辑和语义，识别段落或列表**内部独立、并列的核心观点/元素**。
* **转换：** 将每个提取出的核心要点转化为**一个独立的迷你卡片**。
* **目标：** 将复杂信息解构成结构化、可视化的网格，使其成为易于扫视的单元。
3. **迷你卡片内部结构与细节（关键）：**
* **结构优先级：**
* **强调数字优先：** 如果核心要点包含一个关键、突出的数字/指标，则将该**数字/指标本身**作为顶部元素，使用超大、粗体字号（例如 `text-5xl` 或 `text-6xl`, `font-bold`，使用高亮色）。目的是为了最大化视觉冲击力。
* **文本标题：** 如果核心要点是概念性的或数字是次要的，则使用一个**简洁、加粗的中文短语**（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 `text-3xl` 或 `text-4xl`, `font-bold`，白色或高亮色）。
* **支撑文本：** 在大的数字/标题下方，使用较小字号（例如 `text-sm`, `text-gray-400`）。
* **当大元素是数字时：** 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。
* **当大元素是文本标题时：** 提供具体细节、解释、数据支撑或影响。
* **可选双语副标题（选择性应用）：**
* 在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），添加一个**非常简洁的英文短语**，使用小字号（例如 `text-xs` 或 `text-sm`）、常规字重和柔和的颜色（例如 `text-gray-500` 或 `text-gray-400`）。示例：“YoY Growth”，“Total Revenue”，“Market Share”。**审慎地应用**以增加视觉风格，而非死板地用于每个卡片。
* **专注与简洁：** 严格遵守“**一个卡片，一个核心要点**”。大的元素和支撑文本都必须**高度简洁**。避免在单个迷你卡片中使用长句或包含多个观点。
4. **强烈的视觉层级：**
* 利用显著的**字号差异**（例如，数字用 `text-5xl/6xl` vs 文本标题用 `text-3xl/4xl` vs 支撑文本用 `text-sm` vs 英文副标题用 `text-xs`）、**字重**（`font-bold` vs `font-normal`）和**颜色**（高亮色、白色、灰色系）来在主要信息（大数字/标题）和次要信息（支撑文本、英文副标题）之间创建清晰的视觉区分。
5. **语言策略：**
* **主要语言：** 使用**中文或数字**承载核心信息、主标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。
* **次要/装饰性语言：** 使用**英文**作为主标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。
**图形元素与图表：**
1. **图标 (Font Awesome)：**
* **来源：** 通过 CDN 引入 Font Awesome (v5/v6)。
* **风格：** 偏好简洁、现代的**线框风格 (outline-style)** 图标。
* **使用：** 放置于主标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。**严格禁止使用 Emoji 作为功能性图标**。颜色应协调；关键图标可使用高亮色。
2. **数据可视化 (推荐 Chart.js)：**
* **应用场景：** 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据 [引用：数据可视化最佳实践]。
* **技术：** 通过 CDN 嵌入 Chart.js。
* **位置：** 放置在讨论财务或业务分析的相关主卡片内部。
* **样式：** 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。
**技术与动画：**
1. **技术栈：**
* HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2. **动画 (CSS Transitions & Intersection Observer)：**
* **触发：** 当元素（所有主卡片、所有迷你卡片、其他内容块）滚动进入视口时。
* **效果：** 平滑、微妙的**淡入/向上滑动**效果（模仿 Apple 风格）。通过 JavaScript 的 `Intersection Observer API` 添加/移除 CSS 类来触发 `CSS Transitions` 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
3. **响应式设计：**
* **强制要求**。使用 Tailwind 的响应式修饰符（特别是针对网格布局），确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
**最终输出：**
* 生成一个**单一、可运行的 .html 文件**，该文件精确实现了上述所有要求，特别注意**优先使用卡片布局**，**避免大段文字**，**核心要点提取到迷你卡片**、通过**更大的数字和选择性双语**实现的增强视觉层级，以及整体的**美学一致性**。
别看过程很复杂，三顿我已经把坑给你们都踩完了。你要用的时候，直接发这个提示词+文件就可以。
这里推荐使用谷歌的Gemini 2.5 Pro，免费、效果也好。当然Claude、GPT，还有DeepSeek这几个模型也是完全可以的。
把网页转成PPT
最后，怎么把这种网页转换成PPT呢？其实也很简单，我写了这样一个提示词：
请你修改HTML文件，改成类似PPT的形式，每页都是16:9，可以滚动切换。注意放大文字大小，以适配16：9的页面尺寸
一个可以轮播、尺寸是16:9的页面就生成啦：
依然是网页的形式，你可以F11将浏览器设为全屏，直接就能播放。
如果想要修改，可以直接编辑HTML文件，或者是把需求告诉AI，让它微调修改即可。
感谢，作业有救了
