frontend-slides

用途

Frontend Slides 用于创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。它支持三种工作模式：从零新建演示文稿、将 .ppt 或 .pptx 文件转换为 HTML 演示、以及对已有 HTML 幻灯片进行布局、动效或排版方面的改进。

生成单文件 HTML 演示文稿，内联 CSS 和 JS，默认零依赖。
将 PowerPoint 文件（.ppt/.pptx）转换为 HTML 演示，优先使用 python3 与 python-pptx 提取文本、图片和备注，保留幻灯片顺序、演讲者备注和提取的资源。
通过视觉预览方式探索设计风格：生成 3 个单页预览文件，展示排版、色彩和动效，供用户选择或混合。
内置演示控制器，支持键盘、滚轮和触摸/滑动导航，以及进度指示器或幻灯片索引。
使用 Intersection Observer 实现进入时的揭示动画，并支持 reduced-motion。

工作流程分为七步：

检测模式：新建、PPT 转换或增强。
发现内容：询问目的、长度和内容状态，若用户已有内容则请其先粘贴。
发现风格：默认视觉探索；若用户已知预设则直接使用。否则询问期望感受（impressed、energized、focused、inspired），生成 3 个预览文件于 .ecc-design/slide-previews/，每个预览自包含、约 100 行以内，然后请用户选择或混合。
构建演示：输出 presentation.html 或 [presentation-name].html；仅当包含提取或用户提供的图片时使用 assets/ 文件夹。结构要求包括语义化幻灯片区块、来自 STYLE_PRESETS.md 的视口安全 CSS 基础、CSS 自定义属性、演示控制器类、Intersection Observer 和 reduced-motion 支持。
强制视口适配：每个 .slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;，所有字号和间距使用 clamp() 缩放，内容不适配时拆分为多张幻灯片，不得缩小文字至可读尺寸以下，不得出现幻灯片内滚动条。
验证：在 1920x1080、1280x720、768x1024、375x667、667x375 尺寸下检查；若可用浏览器自动化，则验证无溢出且键盘导航正常。
交付：删除临时预览文件（除非用户保留），用平台对应方式打开演示，总结文件路径、所用预设、幻灯片数量和主题自定义点。打开命令：macOS 用 open file.html，Linux 用 xdg-open file.html，Windows 用 start "" file.html。

生成前需阅读 STYLE_PRESETS.md 获取视口安全 CSS 基础、密度限制、预设目录和 CSS 注意事项。

零依赖：默认单个自包含 HTML 文件，内联 CSS 和 JS，除非用户明确要求多文件项目。
视口适配为硬性要求：每张幻灯片必须适配单个视口，无内部滚动。
内容密度上限（除非用户明确要求更密集且可读性仍可保证）：标题页 1 标题 + 1 副标题 + 可选标语；内容页 1 标题 + 4-6 个要点或 2 个短段落；功能网格最多 6 张卡片；代码最多 8-10 行；引用 1 条引用 + 出处；图片 1 张受视口约束。
反模式：无视觉标识的通用创业渐变、系统字体演示（除非有意编辑风格）、长要点墙、需要滚动的代码块、在短屏幕上断裂的固定高度内容框、无效的否定 CSS 函数如 -clamp(...)。
字体可来自 Google Fonts 或 Fontshare。
可访问性要求：语义化结构（main、section、nav）、可读对比度、仅键盘导航支持、尊重 prefers-reduced-motion。
PPT 转换需保持跨平台，不依赖仅 macOS 工具。若 python-pptx 不可用，需询问是否安装或回退到手动/导出工作流。