frontend-slides

Topics in the source

• 前端幻灯片
• 何时启用
• 不可妥协的原则
• 工作流程
• 1. 检测模式
• 2. 发现内容
• 3. 发现风格
• 4. 构建演示文稿

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。 受 zarazhangrui（鸣谢：@zarazhangrui）作品中展示的视觉探索方法的启发。 创建演讲文稿、推介文稿、研讨会文稿或内部演示文稿时 将 .ppt 或 .pptx 幻灯片转换为 HTML 演示文稿时 改进现有 HTML 演示文稿的布局、动效或排版时 与尚不清楚其设计偏好的用户一起探索演示文稿风格时 1. 零依赖：默认使用一个包含内联 CSS 和 JS 的自包含 HTML 文件。 2. 必须适配视口：每张幻灯片必须适配一个视口，内部不允许滚动。 3. 展示，而非描述：使用视觉预览，而非抽象的风格问卷。 4. 独特设计：避免通用的紫色渐变、白色背景加 Inter 字体、模板化的文稿外观。 5. 生产质量：保持代码注释清晰、可访问、响应式且性能良好。 在生成之前，请阅读 STYLEPRESETS.md 以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。 选择一条路径： 新演示文稿：用户有主题、笔记或完整草稿 PPT 转换：用户有 .ppt 或 .pptx 增强：用户已有 HTML 幻灯片并希望改进 只询问最低限度的必要信息： 目的：推介、教学、会议演讲、内部更新 长度：短 (5-10张)、中 (10-20张)、长 (20+张) 内容状态：已完成文案、粗略笔记、仅主题 如果用户有内容，请他们在进行样式设计前粘贴内容。 默认采用视觉探索方式。 如果用户已经知道所需的预设，则跳过预览并直接使用。 否则： 1. 询问文稿应营造何种感觉：印象深刻、充满活力、专注、激发灵感。 2. 在 .ecc-design/slide-previews/ 中生成 3 个单幻灯片预览文件。 3. 每个预览必须是自包含的，清晰地展示排版/色彩/动效，并且幻灯片内容大约保持在 100 行以内。 4. 询问用户保留哪个预览或混合哪些元素。 在将情绪映射到风格时，请使用 STYLEPRESETS.md 中的预设指南。 输出以下之一： presentation.html [presentation-name].html 仅当文稿包含提取的或用户提供的图像时，才使用 assets/ 文件夹。 必需的结构： 语义化的幻灯片部分 来自 STYLEPRESETS.md 的视口安全的 CSS 基础 用于主题值的 CSS 自定义属性 用于键盘、滚轮和触摸导航的演示文稿控制器类 用于揭示动画的 Intersection Observer 支持减少动效 将此视为硬性规定。 规则： 每个 .slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden; 所有字体和间距必须随 clamp() 缩放 当内容无法适配时，将其拆分为多张幻灯片 切勿通过将文本缩小到可读尺寸以

This is an excerpt. Refer to the complete source and its current requirements.