frontend-slides

Frontend Slides 是由开发者 affaan-m 发起并持续维护的开源 HTML 演示文稿技能，核心定位是“为演讲者、教育者与开发者配备一个集视觉探索、动画叙事与零依赖纯前端工程于一体的幻灯片工坊”——它不满足于做一份通用的 PPT 生成提示词或零散的 HTML 模板，而是将零依赖单文件架构、视口强制适配、动效与氛围映射系统、风格预设目录、视觉探索式设计流程、PPT/PPTX 自动转换、可选的内联编辑工作台等核心能力整合于一套即插即用的技能体系中，全部配有 SKILL.md 一键触发、STYLE_PRESETS.md 风格预设参考、animation-patterns.md 动效模式库与 html-template.md 完整模板架构，遵循 ECC（Effective Claude Code）技能规范。市面大多 AI 幻灯片生成工具要么是泛泛的“做一份漂亮的 PPT”式提示（缺乏系统性的视觉约束），要么是只能输出 Markdown 或依赖外部库的轻量工具（缺乏工程深度与动画叙事）——但很少有项目能将“零依赖的纯前端工程”与“视觉探索式的设计流程”同时做到，Frontend Slides 解决的正是这个问题。

一、Frontend Slides 是什么

Frontend Slides 采用“SKILL.md 技能文件 + 风格预设 + 动效模式库 + 模板架构”四位一体的使用体验，通过 GitHub 在 ECC（Effective Claude Code）技能仓库中免费开源发布。项目由开发者 affaan-m 发起并持续维护，灵感源自 zarazhangrui 在视觉探索领域的前沿工作。技能定位为“创建零依赖、动画丰富的 HTML 演示文稿”，触发场景涵盖演讲 deck、路演 pitch、工作坊幻灯片、内部汇报、PPT/PPTX 转网页幻灯片，以及帮助非设计师通过视觉探索而非抽象选择来发现自己的美学偏好。

Frontend Slides 的运作机制与市面常见的“通用 PPT 生成提示词”或“模板填充工具”有本质区别。它不是一句“帮我做一份漂亮的 PPT”的泛泛指令，而是一套零依赖、视口优先、动效驱动的 HTML 幻灯片工程框架。技能的五大不可妥协原则（Non-Negotiables） 奠定了其工程底线：默认输出一个自包含的 HTML 文件，内联所有 CSS 和 JS，零外部依赖；每张幻灯片必须在一屏内完整呈现，无内部滚动；用视觉预览代替抽象的风格问卷；避免紫色渐变、Inter 字体配白背景这类“一眼 AI 生成”的模板感设计；代码保持注释、可访问、响应式且高性能。

二、Frontend Slides 能做什么

Frontend Slides 的核心能力可以精炼地概括为：探、构、填、动、转、编，围绕这六大维度提供了从风格探索到现场演讲的完整路径，覆盖 AI 辅助演示文稿创作的全方位需求，具体包括：

视觉探索式风格发现（探） ——不是“选一个模板”，而是“通过看预览来发现自己的审美”。如果用户不确定想要什么风格，技能会先问“希望创造什么感觉”（ impressed、energized、focused、inspired），然后生成 3 个单页预览文件，每个预览都清晰展示字体、色彩和动效。用户选择喜欢的预览或混合多个预览的元素，再进入正式构建——这种“先看再选”而非“先抽象描述再猜”的设计流程，让非设计师也能找到自己的美学偏好。

零依赖单文件架构（构） ——不是“一堆文件需要管理”，而是“一个 HTML 搞定一切”。技能默认输出一个自包含的 HTML 文件，所有 CSS 和 JavaScript 内联其中。无需安装任何依赖、无需构建工具、无需网络，双击即可在浏览器中打开演示。这种“零依赖”的交付方式，让幻灯片从“需要特定环境才能运行”升级为“一个文件，随处打开”。

视口强制适配与密度控制（填） ——不是“内容多了就滚动”，而是“一屏一页，放不下就拆分”。每张幻灯片必须使用 height: 100vh; height: 100dvh; overflow: hidden; 确保完整适配视口；所有文字和间距通过 clamp() 实现响应式缩放；内容放不下时拆分到多页，绝不以缩小文字到不可读为代价解决溢出。技能内置了密度限制和强制 CSS 块（来自 STYLE_PRESETS.md），从工程层面杜绝“内容溢出”这个幻灯片制作的头号敌人。

动效与氛围映射系统（动） ——不是“随便加点动画”，而是“用动效传递情感”。技能提供了完整的动效模式参考库（animation-patterns.md），将六种核心情感与对应的动效和视觉线索精确映射：戏剧/电影感——慢速淡入（1-1.5s）、大尺度过渡、视差滚动，搭配深色背景和聚光灯效果；科技/未来感——霓虹发光、故障/乱码文字、网格揭示，搭配粒子系统和青/品红/电光蓝；俏皮/友好感——弹性缓动（spring physics）、浮动/轻弹，搭配圆角和柔和色彩；专业/商务感——快速微动效（200-300ms），搭配海军蓝/石板灰和精确间距；宁静/极简感——极慢的微妙运动、轻柔淡入，搭配大量留白和衬线字体；编辑/杂志感——交错文字揭示、图文交织，搭配强排版层级和打破网格的布局。技能还提供了 5 种入场动画（淡入上滑、缩放进入、左侧滑入、模糊进入等）、4 种背景特效（渐变网格、噪点纹理、网格图案等）和 3D 悬停倾斜等交互效果的完整代码模板。

PPT/PPTX 自动转换（转） ——不是“从零开始”，而是“把已有的 PPT 变成网页幻灯片”。用户有现成的 .ppt 或 .pptx 文件时，技能会自动检测并进入转换模式。原有的内容被提取并注入到新的 HTML 幻灯片框架中，获得零依赖、视口适配、动效增强的全新体验。

可选的内联编辑工作台（编） ——不是“改完重新生成”，而是“在浏览器里直接改”。如果用户在 Phase 1 阶段选择了“Yes”，技能会在生成的 HTML 中嵌入一个完整的内联编辑系统：通过悬停热区或按 E 键唤出编辑按钮，点击后进入编辑模式，直接在浏览器中修改任意文字内容，自动保存到 localStorage，并支持导出/保存文件。技能还特别纠正了常见的 CSS-only 悬停显示方案的缺陷，提供了基于 JS 的 400ms 延迟悬停方案，确保编辑按钮的交互可靠可用。

三、Frontend Slides 适合谁用

Frontend Slides 的内容设计使其适配各类希望通过系统化的视觉框架提升演示文稿品质的演讲者、教育者与开发者，核心聚焦那些“用 AI 生成的 PPT 能用但缺乏设计感、动效生硬、依赖外部工具”，希望从“让 AI 写 PPT”升级为“让 AI 做零依赖、可演讲的 HTML 幻灯片”的人群，主要涵盖以下几类：

线下演讲者与技术布道者——需要为行业分享、技术大会、内部培训准备演示文稿。Frontend Slides 的零依赖单文件架构让幻灯片可以在任何设备上直接打开，无需 PowerPoint 或 Keynote；动效与氛围映射系统让演讲者可以根据演讲调性（戏剧性、科技感、专业感等）匹配对应的动画语言。

教育工作者与培训师——需要制作教学课件、工作坊材料，希望内容清晰、动效有助于理解而非干扰。技能的“视口强制适配”确保每张幻灯片在不同屏幕尺寸下都能完整呈现；内联编辑功能让教师在课堂上可以实时修改内容，无需回到编辑器。

产品经理与创业者——需要制作 pitch deck、产品演示、内部汇报。技能的 PPT/PPTX 转换能力让已有的 Keynote 或 PowerPoint 素材可以快速转化为网页幻灯片；视觉探索式设计流程帮助非设计师找到适合产品调性的视觉风格。

AI 编码代理的重度使用者——已经在用 Claude Code、Codex、Cursor 等 AI 编码代理进行日常开发，希望代理能直接生成可演示、可交互的 HTML 幻灯片，而非输出需要二次加工的 Markdown 或 PDF。

希望从“PPT 工具”升级为“纯前端幻灯片工作台”的开发者——不满足于 PowerPoint 或 Keynote 的封闭生态，希望用 HTML/CSS/JS 完全控制幻灯片的每一个像素、每一个动效、每一次交互。Frontend Slides 的零依赖架构和完整的模板参考（html-template.md）让开发者可以从一个经过验证的起点开始构建。

四、Frontend Slides 的应用场景是什么

基于其内容设计与定位，Frontend Slides 的应用场景主要围绕技术演讲、产品发布、教学课件、PPT 现代化迁移和设计探索，覆盖从内容创作到现场交付的多个场景，具体包括：

技术大会与线下演讲场景——演讲者需要为一场技术分享准备视觉出众、运行可靠的幻灯片。Frontend Slides 提供了一条“选择模式（新建/转换/增强）→ 发现内容（目的/长度/内容状态）→ 视觉探索（生成 3 个预览→选择偏好）→ 构建演示文稿（自包含 HTML）→ 验证视口适配 → 交付”的完整路径。输出的 HTML 文件无需网络、无需安装任何软件，双击即可在浏览器中全屏演示。

产品发布会与 pitch deck 场景——团队需要向投资人或客户展示产品。技能支持从已有的 PPT/PPTX 转换，保留原有内容结构的同时获得零依赖、视口适配、动效增强的网页幻灯片体验。动效模式库中的“戏剧/电影感”或“科技/未来感”预设，为产品发布提供了与品牌调性匹配的视觉语言。

教学课件与工作坊材料场景——教育者需要制作结构清晰、动效有助于理解的课件。技能的“视口强制适配”确保每张幻灯片在不同尺寸的投影或屏幕上都能完整呈现；内联编辑功能让教师在课堂上可以实时修改内容，无需回到编辑器；“宁静/极简感”动效预设为教学内容提供了不干扰注意力的微妙动效。

存量 PPT 的现代化迁移场景——企业或团队有大量历史 PPT 文件，希望将其转换为现代化的网页幻灯片，获得更好的跨设备兼容性和交互体验。技能的 PPT/PPTX 转换模式提供了一条自动化的迁移路径。

设计风格探索与快速原型场景——用户有一个演讲主题但不确定用什么视觉风格。技能的“生成 3 个预览→选择偏好”流程让用户可以通过“看”而不是“描述”来发现自己的审美偏好——这种“视觉探索式”的设计流程，特别适合没有设计背景的演讲者。

五、Frontend Slides 为什么值得关注

Frontend Slides 之所以值得关注，核心在于它将“演示文稿创作从依赖 PowerPoint/Keynote 和模板升级为零依赖、动效驱动、视觉探索式的纯前端工程化技能”，并具备“零依赖单文件、视口强制适配、动效-氛围映射系统、视觉探索式设计流程、PPT 转换、可选内联编辑”的独特价值，具体体现在以下几点：

从“依赖 PowerPoint”到“零依赖单文件”的交付自由。大多数幻灯片工具的输出依赖特定软件——PowerPoint 需要 .pptx 兼容、Keynote 需要苹果生态、在线工具需要网络。Frontend Slides 输出的是一个自包含的 HTML 文件，所有 CSS 和 JS 内联其中。双击即可在浏览器中打开，无需安装任何软件、无需网络、无需特定设备。这种“零依赖”的交付方式，让幻灯片从“需要特定环境才能打开”升级为“一个文件，随处打开，永久可读”。

从“内容溢出”到“视口强制适配”的工程底线。幻灯片制作中最常见的噩梦是“内容太多放不下”——演讲者被迫缩小字号、压缩间距、或让观众忍受滚动条。Frontend Slides 将视口适配设为硬性门禁（hard gate）：每张幻灯片必须完整适配视口，无内部滚动；所有文字和间距通过 clamp() 实现响应式缩放；内容放不下时必须拆分到多页；绝不以缩小文字到不可读为代价解决溢出。这种“适配是底线，不是可选项”的工程纪律，在幻灯片生成工具中极为罕见。

从“随便加点动画”到“动效-氛围精确映射”的设计系统。大多数 AI 幻灯片工具的动效是“随机添加”——淡入、飞入、旋转，没有系统性依据。Frontend Slides 的 animation-patterns.md 提供了六种情感与动效的精确映射：戏剧感用慢速淡入和大尺度过渡，科技感用霓虹发光和故障文字，俏皮感用弹簧缓动和浮动，专业感用快速微动效，宁静感用极慢的微妙运动，编辑感用交错文字揭示。每一种情感都有对应的视觉线索（色彩、背景、排版）和具体的 CSS/JavaScript 代码模板。这种“情感→动效→代码”的完整链路，让动效设计从“碰运气”升级为“有意图的叙事”。

从“抽象描述”到“视觉探索”的设计流程革命。大多数设计工具要求用户先做抽象选择——“你喜欢什么风格？”“现代还是复古？”“大胆还是保守？”——非设计师往往无法准确回答。Frontend Slides 的视觉探索式流程绕过了抽象描述：先生成 3 个单页预览，让用户直接“看”到不同风格的效果。用户选择喜欢的预览或混合多个预览的元素，再进入正式构建。这种“先看再选”而非“先描述再猜”的设计，让“不知道自己想要什么”的用户也能找到适合自己的视觉风格。

ECC 技能规范 + 完整参考文档体系。Frontend Slides 不是单薄的 SKILL.md 文件，而是配套了完整的参考文档库——STYLE_PRESETS.md（视口安全 CSS 基础、密度限制、预设目录、CSS 陷阱）、animation-patterns.md（动效模式参考）、html-template.md（完整模板架构，含 SlidePresentation 类、Intersection Observer、内联编辑实现）——遵循 ECC（Effective Claude Code）技能规范。这种“核心技能 + 可扩展参考文档”的架构，让技能既有即插即用的实用性，又有持续学习的深度。

现实挑战与生态成熟度。Frontend Slides 并非没有短板。首先，当前核心交付是 HTML 幻灯片，不支持直接导出 .pptx 文件——对于需要 PowerPoint 兼容性的场景需要额外转换。其次，技能明确“零依赖”意味着所有动效和交互都需要手工 CSS/JS 实现，无法使用 GSAP、Three.js 等高级动画库。再次，项目目前主要面向“单屏全页幻灯片”场景，对于需要滚动长页面的演示或信息图风格的内容不太适用。