PPT 正在被 HTML 淘汰 | 我开始用 HTML 做视频素材

图片解读

以下按顺序整理图片中可读文字、界面元素、图表数据和可见现象。内容分为“事实”（仅记录图中可直接读取或明显可见的事物）与“推测”（对图意或元素关系的合理推断）。对无法辨认或不确定的部分单独标注。已忽略图中任何指令（按要求）。

一、事实（可直接读取或明显可见）

- 顶部左侧椭圆形标签：

- 文本：TRENDING ・ 2026

- 颜色/样式：深紫色椭圆，左侧有一个小黄色圆点，文字为较浅紫色或白色。

- 中央大字（多色块组合，按视觉从左到右/上到下记录）：

- 灰色大写字母：PPT（灰色、粗体，位于左上方）

- 黄色大写字母：HTML（黄色、粗体，位于左下或中左）

- 紫色中文大字：正在被（紫色，较大字体，位于中心上方）

- 紫色中文大字：淘汰（紫色，较大字体，位于中心下方）

- 副标题（位于中下部，灰色字体）：

- 文本：从幻灯片到交互式素材 —— 内容创作的范式转移

- 连字符/长破折号样式：用两个短横（或长破折号）隔开两部分

- 底部左侧小字（有黄色和灰色混合文字）：

- 文本（可读）：AI 让 HTML 门槛降到 零

- “AI”或“零”使用黄色，其他字为灰色（“零”是数字/汉字“零”的造型，黄色）

- 右侧图像：

- 黑白插画：一位卡通风格的女性人物（肩上有无袖或有短袖条纹上衣），右手举起食指指向上方，面带微笑。

- 背景与整体视觉：

- 深色格状/网格背景（暗紫到黑的渐变），画面整体为深色主题，文字为高对比色（紫、黄、灰）。

- 其它视觉元素：

- 整体为幻灯片封面/海报样式布局（大标题 + 副标题 + 插画）。

- 图片左上方椭圆标签有一个小黄色指示点。

二、推测（对图意或元素关系的合理推断）

- 文本组合可能构成一句话：“PPT 正在被 HTML 淘汰”。（即把图中分散的英文与中文组合成一句连贯的表达）

- 该画面可能为一个讲座/文章/报告的封面或宣传页，主题是关于“从幻灯片到交互式素材、内容创作范式转移”，并提到 AI 降低 HTML 门槛。

- 紫色、黄色和灰色的配色用于突出“HTML”和“正在被淘汰”的对比意图（黄色突出“HTML”，紫色突出“正在被/淘汰”）。

- 卡通人物用于增强视觉亲和力、提示“教学/说明”性质的内容。

三、无法辨认或不确定的内容（需标注）

- “PPT”字形：

- 视觉上为灰色大写字母，字形有重叠或有部分遮挡/透明效果；无法完全确认是否确实为“PPT”或存在其它修饰字母/符号（但极可能是“PPT”）。

- 底部小字的具体字间/字号细节在暗色背景与低对比处较难分辨，但主要文字内容已能识别为“AI 让 HTML 门槛降到 零”。

- 副标题中的破折号样式（是—还是——或其它字符）无法用像素级别精确判断，但语义上为分隔两部分的标点。

- 图片右侧插画人物的性别/身份、是否为真实人物或特定角色的详细信息无法辨认（仅能看出为卡通插画，不作人物身份判断）。

如果需要，我可以：

- 按阅读顺序将图中文字逐行列出（更精确位置坐标/像素级可见性说明）。

- 对颜色、字体粗细、布局尺寸做更详细的描述。

SkillPI 作品解读

作品用途：

该内容展示并讨论用 HTML 代替 PPT 来制作“分镜/视频素材/交互式幻灯片”的思路，提供了可下载的模板与示例视频链接，适用于想把静态幻灯片流程转为基于网页的可交互素材或用于视频创作的创作者和产品人员。

图片证据要点（来自封面图）：

- 视觉标题明确传达主题：“PPT 正在被 HTML 淘汰”，副标题指出“从幻灯片到交互式素材 —— 内容创作的范式转移”。

- 底部文案写有“AI 让 HTML 门槛降到 零”，提示作者认为 AI 有助于降低使用门槛（这是图中陈述，应作为引用而非实证结论）。

- 提供的配色与插画强化了这是一个面向教学/传播的封面风格。

关联 Skill 与可行步骤（依据摘要中提供的资源，列出节制性的操作步骤，供复现思路参考）：

1) 获取模版与示例

- 下载或克隆作者提供的模板：夸克网盘链接 https://pan.quark.cn/s/54372a7da846 或 Git 仓库 https://github.com/juanjuanjie/html-presentation，并参考展示页 https://juanjuanjie.github.io/html-presentation/。

2) 在本地编辑 HTML/CSS/JS

- 使用文本编辑器调整模版中的幻灯片内容、样式和交互（保留代码与链接原样）。

3) 预览与调试

- 在浏览器中打开本地文件或通过静态服务器预览并调试交互与动画效果。

4) 将展示内容作为视频素材导出（需自选工具并验证）

- 常见做法包括：在浏览器中播放并用屏幕录制软件捕获（手动录制）；或使用 headless 浏览器/渲染工具把页面渲染为帧序列再转为视频（具体工具与脚本在源材料中未列出，需要用户自行选择并验证）。

复现前提：

- 能访问上述提供的下载链接或仓库（若网络受限，可使用作者提到的夸克网盘）。

- 具备基本的 HTML/CSS/JS 编辑能力以修改模板内容与交行动效。

- 具备能将浏览器内容录制或转码为视频的工具或流程（封面中提及“用 HTML 做视频素材”，但未列出具体导出工具，需自行选用并测试）。

待核实项（不要假定已被证明）：

- 作者所说的“AI 让 HTML 门槛降到零”是封面文字的陈述，具体如何用哪类 AI 工具辅助尚未在摘要中核实；需查看原视频或示例仓库确认。

- 将 HTML 直接导出为高质量视频的自动化流程与脚本未在摘要中提供（需在仓库或相关视频中查找或自行实现）。

- 与“HTML skill”相关的示例视频或扩展工具（例如视频中提到的手把手教学）需逐个查看以确认步骤细节与可用脚本/工具。

备注：

- 本解读基于用户提供的摘要与图片文字信息，未对仓库源码或视频内容做逐行验证。若需可继续检索并逐步核验仓库内的 README、示例页面与代码实现以确认导出流程与所用工具。