杂志风格 Web PPT 生成

要解决的具体问题

传统演示工具如 PowerPoint 生成的 .pptx 文件依赖特定软件，不易在网页中直接嵌入或分享，尤其当需要跨平台、无需安装插件的演示时。同时，许多在线工具缺乏高度定制化的视觉风格，难以快速创建具有杂志感或极简信息驱动设计的幻灯片。

技能如何工作

html-ppt生成 技能通过生成单文件 HTML 解决这些问题，该文件集成 CSS、WebGL 着色器、翻页 JavaScript 和 CDN 字体/图标，无需外部依赖即可运行。核心能力包括：

• 两种预设视觉风格：

- 风格 A · 电子杂志风：使用 WebGL 流体背景、衬线字体（如 Noto Serif SC）和等宽元数据，适合人文分享。
- 风格 B · 瑞士国际主义风：采用 WebGL 网格背景、无衬线字体（如 Inter）和高反差功能色，适合科技数据汇报。

• 关键工作流程：

1. 需求澄清：通过 7 个问题对齐风格、受众、素材等输入。
2. 模板拷贝与预检：选择对应风格的模板（template.html 或 template-swiss.html），并预检类名（如 h-hero、kpi-hero）是否在模板中已定义。
3. 内容填充：从 layouts.md 或 layouts-swiss.md 中选择现成布局骨架（如数据大字报、左文右图），粘贴并修改文案。
4. 主题色设置：从 5 套预设中选一套（如墨水经典、靛蓝瓷），替换模板的 :root 变量。

• 附加能力：支持 Lucide 图标、Motion One 入场动效，以及可选的 GPT-M 2.0 配图生成（仅限 Codex 环境）。

适用边界与注意点

适合场景：

• 线下分享、AI 产品发布、个人风格强烈的演讲。
• 需要可编辑 .pptx 文件或网页版 slides 的场合。

不适合场景：

• 大段表格数据或图表叠加（推荐常规 PPT）。
• 培训课件（信息密度不足）。
• 多人协作编辑（这是静态 HTML）。

关键注意点：

• 风格不混用：一份 deck 只能选择风格 A 或 B，不能混合。
• 类名预检：在填充内容前，必须确保使用的类（如 .grid-2-7-5、.kpi-hero）在模板的 <style> 块中已定义，否则会 fallback 到默认样式。
• 布局限制：风格 B 必须使用原始 22 个版式（如 S01–S22），不能临时发明新结构。
• 图片比例规范：图片需遵循标准比例（如 21:9、16:10），并避免进入分页组件区域。
• 主题节奏规划：每页需指定主题类（如 hero dark），避免连续多页同主题导致视觉疲劳。