mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-04-11 03:43:30 +08:00
abcf38b085
* docs(zh-CN): sync Chinese docs with latest upstream changes * docs(zh-CN): update link --------- Co-authored-by: neo <neo.dowithless@gmail.com>
196 lines
6.3 KiB
Markdown
196 lines
6.3 KiB
Markdown
---
|
||
name: frontend-slides
|
||
description: 从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
|
||
origin: ECC
|
||
---
|
||
|
||
# 前端幻灯片
|
||
|
||
创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。
|
||
|
||
受 zarazhangrui（鸣谢：@zarazhangrui）作品中展示的视觉探索方法的启发。
|
||
|
||
## 何时启用
|
||
|
||
* 创建演讲文稿、推介文稿、研讨会文稿或内部演示文稿时
|
||
* 将 `.ppt` 或 `.pptx` 幻灯片转换为 HTML 演示文稿时
|
||
* 改进现有 HTML 演示文稿的布局、动效或排版时
|
||
* 与尚不清楚其设计偏好的用户一起探索演示文稿风格时
|
||
|
||
## 不可妥协的原则
|
||
|
||
1. **零依赖**：默认使用一个包含内联 CSS 和 JS 的自包含 HTML 文件。
|
||
2. **必须适配视口**：每张幻灯片必须适配一个视口，内部不允许滚动。
|
||
3. **展示，而非描述**：使用视觉预览，而非抽象的风格问卷。
|
||
4. **独特设计**：避免通用的紫色渐变、白色背景加 Inter 字体、模板化的文稿外观。
|
||
5. **生产质量**：保持代码注释清晰、可访问、响应式且性能良好。
|
||
|
||
在生成之前，请阅读 `STYLE_PRESETS.md` 以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。
|
||
|
||
## 工作流程
|
||
|
||
### 1. 检测模式
|
||
|
||
选择一条路径：
|
||
|
||
* **新演示文稿**：用户有主题、笔记或完整草稿
|
||
* **PPT 转换**：用户有 `.ppt` 或 `.pptx`
|
||
* **增强**：用户已有 HTML 幻灯片并希望改进
|
||
|
||
### 2. 发现内容
|
||
|
||
只询问最低限度的必要信息：
|
||
|
||
* 目的：推介、教学、会议演讲、内部更新
|
||
* 长度：短 (5-10张)、中 (10-20张)、长 (20+张)
|
||
* 内容状态：已完成文案、粗略笔记、仅主题
|
||
|
||
如果用户有内容，请他们在进行样式设计前粘贴内容。
|
||
|
||
### 3. 发现风格
|
||
|
||
默认采用视觉探索方式。
|
||
|
||
如果用户已经知道所需的预设，则跳过预览并直接使用。
|
||
|
||
否则：
|
||
|
||
1. 询问文稿应营造何种感觉：印象深刻、充满活力、专注、激发灵感。
|
||
2. 在 `.ecc-design/slide-previews/` 中生成 **3 个单幻灯片预览文件**。
|
||
3. 每个预览必须是自包含的，清晰地展示排版/色彩/动效，并且幻灯片内容大约保持在 100 行以内。
|
||
4. 询问用户保留哪个预览或混合哪些元素。
|
||
|
||
在将情绪映射到风格时，请使用 `STYLE_PRESETS.md` 中的预设指南。
|
||
|
||
### 4. 构建演示文稿
|
||
|
||
输出以下之一：
|
||
|
||
* `presentation.html`
|
||
* `[presentation-name].html`
|
||
|
||
仅当文稿包含提取的或用户提供的图像时，才使用 `assets/` 文件夹。
|
||
|
||
必需的结构：
|
||
|
||
* 语义化的幻灯片部分
|
||
* 来自 `STYLE_PRESETS.md` 的视口安全的 CSS 基础
|
||
* 用于主题值的 CSS 自定义属性
|
||
* 用于键盘、滚轮和触摸导航的演示文稿控制器类
|
||
* 用于揭示动画的 Intersection Observer
|
||
* 支持减少动效
|
||
|
||
### 5. 强制执行视口适配
|
||
|
||
将此视为硬性规定。
|
||
|
||
规则：
|
||
|
||
* 每个 `.slide` 必须使用 `height: 100vh; height: 100dvh; overflow: hidden;`
|
||
* 所有字体和间距必须随 `clamp()` 缩放
|
||
* 当内容无法适配时，将其拆分为多张幻灯片
|
||
* 切勿通过将文本缩小到可读尺寸以下来解决溢出问题
|
||
* 绝不允许幻灯片内部出现滚动条
|
||
|
||
使用 `STYLE_PRESETS.md` 中的密度限制和强制性 CSS 代码块。
|
||
|
||
### 6. 验证
|
||
|
||
在这些尺寸下检查完成的文稿：
|
||
|
||
* 1920x1080
|
||
* 1280x720
|
||
* 768x1024
|
||
* 375x667
|
||
* 667x375
|
||
|
||
如果可以使用浏览器自动化，请使用它来验证没有幻灯片溢出且键盘导航正常工作。
|
||
|
||
### 7. 交付
|
||
|
||
在交付时：
|
||
|
||
* 除非用户希望保留，否则删除临时预览文件
|
||
* 在有用时使用适合当前平台的开源工具打开文稿
|
||
* 总结文件路径、使用的预设、幻灯片数量以及简单的主题自定义点
|
||
|
||
为当前操作系统使用正确的开源工具：
|
||
|
||
* macOS: `open file.html`
|
||
* Linux: `xdg-open file.html`
|
||
* Windows: `start "" file.html`
|
||
|
||
## PPT / PPTX 转换
|
||
|
||
对于 PowerPoint 转换：
|
||
|
||
1. 优先使用 `python3` 和 `python-pptx` 来提取文本、图像和备注。
|
||
2. 如果 `python-pptx` 不可用，询问是安装它还是回退到基于手动/导出的工作流程。
|
||
3. 保留幻灯片顺序、演讲者备注和提取的资源。
|
||
4. 提取后，运行与新演示文稿相同的风格选择工作流程。
|
||
|
||
保持转换跨平台。当 Python 可以完成任务时，不要依赖仅限 macOS 的工具。
|
||
|
||
## 实现要求
|
||
|
||
### HTML / CSS
|
||
|
||
* 除非用户明确希望使用多文件项目，否则使用内联 CSS 和 JS。
|
||
* 字体可以来自 Google Fonts 或 Fontshare。
|
||
* 优先使用氛围背景、强烈的字体层次结构和清晰的视觉方向。
|
||
* 使用抽象形状、渐变、网格、噪点和几何图形，而非插图。
|
||
|
||
### JavaScript
|
||
|
||
包含：
|
||
|
||
* 键盘导航
|
||
* 触摸/滑动导航
|
||
* 鼠标滚轮导航
|
||
* 进度指示器或幻灯片索引
|
||
* 进入时触发的揭示动画
|
||
|
||
### 可访问性
|
||
|
||
* 使用语义化结构 (`main`, `section`, `nav`)
|
||
* 保持对比度可读
|
||
* 支持仅键盘导航
|
||
* 尊重 `prefers-reduced-motion`
|
||
|
||
## 内容密度限制
|
||
|
||
除非用户明确要求更密集的幻灯片且可读性仍然保持，否则使用以下最大值：
|
||
|
||
| 幻灯片类型 | 限制 |
|
||
|------------|-------|
|
||
| 标题 | 1 个标题 + 1 个副标题 + 可选标语 |
|
||
| 内容 | 1 个标题 + 4-6 个要点或 2 个短段落 |
|
||
| 功能网格 | 最多 6 张卡片 |
|
||
| 代码 | 最多 8-10 行 |
|
||
| 引用 | 1 条引用 + 出处 |
|
||
| 图像 | 1 张受视口约束的图像 |
|
||
|
||
## 反模式
|
||
|
||
* 没有视觉标识的通用初创公司渐变
|
||
* 除非是特意采用编辑风格，否则避免系统字体文稿
|
||
* 冗长的要点列表
|
||
* 需要滚动的代码块
|
||
* 在短屏幕上会损坏的固定高度内容框
|
||
* 无效的否定 CSS 函数，如 `-clamp(...)`
|
||
|
||
## 相关 ECC 技能
|
||
|
||
* `frontend-patterns` 用于围绕文稿的组件和交互模式
|
||
* `liquid-glass-design` 当演示文稿有意借鉴苹果玻璃美学时
|
||
* `e2e-testing` 如果您需要为最终文稿进行自动化浏览器验证
|
||
|
||
## 交付清单
|
||
|
||
* 演示文稿可在浏览器中从本地文件运行
|
||
* 每张幻灯片适配视口，无需滚动
|
||
* 风格独特且有意图
|
||
* 动画有意义，不喧闹
|
||
* 尊重减少动效设置
|
||
* 在交付时解释文件路径和自定义点
|