Frontend Slides 完整指南3 步做出零依赖 HTML 演示文稿告别 PPT 依赖【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC在 ECCEverything Claude Code项目里Frontend Slides是一个专门做演示文稿的技能模块你给它主题、笔记甚至一个 .pptx 文件它就能生成零依赖 HTML 演示文稿——单个 HTML 文件样式和脚本全部内联双击就能在浏览器里放映无需安装任何软件、不依赖网络。它适合经常要做技术分享、产品推介或内部汇报的开发者尤其是那些内容早就写好了却被做 PPT 这件事卡住的人。 它解决了什么痛点为什么需要零依赖的 HTML 演示先说几个大多数人都遇到过的糟心场景二进制文件没法协作。PPT 文件进 Git 就是乱码改一个字产生整个文件的 diff评审和回滚都很痛苦换台电脑就变样。字体缺失、版式跑偏、动画失效演示前一晚还在救火在线工具把主动权交出去。上传、登录、等待加载弱网环境下直接罢工模板审美疲劳。紫色渐变 白色 Inter 字体的创业公司风一套模板用到底。HTML 演示文稿的思路是把幻灯片当成一个纯文本的、可版本控制的网页。它的好处直接对应上面的痛点——文本 diff 清晰、浏览器打开即用、离线可放、样式完全由你掌控。而 Frontend Slides 把这个过程自动化了你不用手写一行业务代码只需要描述内容和想要的感觉。核心能力拆解从能做什么讲起这个技能的能力可以拆成三块每一块都有明确的交付物。1. 内容生成先管住信息密度生成幻灯片前它会先做模式判断你是要全新创作、转换 PPT还是给已有 HTML 幻灯片做增强。内容层面有一套密度上限作为硬约束比如内容页最多 1 个标题加 4~6 条要点代码页最多 8~10 行。超了怎么办拆成更多页而不是把字缩到看不清。这个规则写死在 核心技能文档 里保证生成的片子不会变成文字墙。2. 样式预设视觉决策外包给预览不懂设计的人选风格靠想象描述是低效的。Frontend Slides 的做法是展示而非描述你只说想要被震慑还是被点燃的感觉它就用 样式预设参考 里的情绪映射表生成 3 个单页预览文件给你挑。选中的样式以 CSS 变量形式落进最终文件换色换字体只改变量不动结构。3. PPTX 转换把旧资产迁过来手里已有 .pptx 也不用从头再来。转换脚本 extract-pptx.py 优先用 python-pptx 抽取文字、图片和演讲者备注保留原有页序环境里没有该库时会提示你安装或走手动导出路线。抽取完成后走和新建完全相同的选择风格流程。三步上手从一句需求到成片的完整流程第一次用建议走完整流程如果还没克隆仓库执行git clone https://gitcode.com/GitHub_Trending/ev/ECC即可第 1 步说清目的贴出内容。只需回答三件事用途推介 / 教学 / 会议 / 内部同步、篇幅5~10 页算短、10~20 算中、20 以上算长、内容状态成稿 / 粗略笔记 / 只有一个主题。有现成文案就贴给它——先内容后样式顺序别反。第 2 步看预览选感觉。如果你已经知道想要哪种预设直接点名跳过这步。否则它会生成 3 个独立预览页每页都完整呈现排版、配色和动效你挑一个或者要求用 A 的配色 B 的字体。第 3 步验收交付。成片是一个 HTML 文件外加可选的 assets 图片目录。交付前它会在 5 个视口尺寸下自查1920×1080、1280×720、768×1024、375×667、667×375确认没有一页内部出现滚动条、键盘翻页可用然后把文件路径、所用预设和自定义入口一并告诉你。12 种视觉风格主题预设与选择策略预设目录里共有 12 套风格从赛博霓虹到纸质印刷各占一席。新手不用背名字按场合 → 情绪对号入座就行你想营造的感觉推荐预设典型场合终端感、硬核可信Terminal Green、Neon Cyber技术大会、开源项目发布清晰克制、信息优先Swiss Modern、Paper Ink内部分享、数据汇报有温度、易亲近Pastel Geometry、Notebook Tabs培训、工作坊有态度、商业张力Bold Signal、Electric Studio产品推介、融资演示叙事感、编辑质感Vintage Editorial、Dark Botanical品牌故事、主题演讲选择时的两个实用策略一是宁缺毋滥一场片子只用一套预设混搭超过两种视觉语言会让观众注意力涣散二是先定情绪再定细节震撼 / 专注 / 启发这类词比深蓝色背景更接近有效的输入。场景实战三种常见场合的配置建议技术会议演讲。选 Terminal Green 或 Neon Cyber动效走克制路线代码页严守 8~10 行上限超出的部分用下一页而不是滚动条解决能现场演示的放一个可点击的 Demo 入口比十页架构图更有说服力。产品技术推介。选 Bold Signal 或 Electric Studio结构上按问题 → 方案 → 差异点三段走数据页用 SVG 图表配合入场动画避免整屏数字堆叠。推介对象设备的屏幕尺寸未知交付前务必在 1280×720 下复检一遍。内部技术分享。选 Swiss Modern 或 Paper Ink信息密度可以适当放宽但代码块要保证可直接复制页脚附上仓库地址和文档位置让听众散会后能自助深入。适配与渲染避坑移动端溢出、字体一致性、动画卡顿⚡ 这三类问题是 HTML 幻灯片的翻车重灾区也是这套技能把规则写死的原因。坑一小屏上内容溢出。常见错误是给内容框写死高度。正确姿势是每张幻灯片锁死为视口高度并禁止内部滚动放不下就分页.slide { width: 100vw; height: 100dvh; overflow: hidden; scroll-snap-align: start; }坑二不同浏览器字体表现不一致。解法是把字号和间距全部交给clamp()做弹性缩放并在窄屏、矮屏断点下调小留白而不是逐设备打补丁:root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --slide-padding: clamp(1rem, 4vw, 4rem); }坑三低端设备动画卡顿。只动transform和opacity这两个可硬件加速的属性避免动画过程中改布局属性同时尊重系统的减少动态效果设置.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s, transform .5s; } .slide.active .reveal { opacity: 1; transform: none; }更多动效组合可以参考 动画模式文档里面有入场、强调类动画的现成写法。性能与加载让演示跑得更快零依赖不等于无性能意识几个默认就内置的做法值得留意关键样式全部内联。首屏样式就在 HTML 里不存在外部 CSS 的加载等待本地打开即是最终效果图片按需约束。图片统一用object-fit: contain限制在视口比例内大图建议先转 WebP 再放进 assets 目录字体防闪烁。网络字体Google Fonts / Fontshare配上font-display: swap避免文字区域长时间空白动画触发交给 Intersection Observer。只有翻页真正发生时才播放入场动画而不是预加载全部效果。如果片子需要打印或导出 PDF可以直接用现成的 导出脚本不用手动截图拼接。选型判断什么时候该用、什么时候别用适合 Frontend Slides 的情况演示需要进版本库团队成员要能 review、能 diff场合跨平台现场机器不可控需要一个浏览器就能放的保险方案内容里大量出现代码、命令行、架构图文本原生渲染比截图更清晰你希望片子有辨识度不想落入模板风。更适合继续用 PPT 的情况交付对象明确指定要 .pptx 文件且你无法让对方用浏览器打开需要非技术同事用拖拽方式反复微调对方没有改 HTML 的意愿动画要求精细到逐帧时间轴级别超出 CSS 过渡的表达范围。一句话判断标准问自己观众会怎么打开它——答案如果是浏览器选 HTML答案如果是 Office就别较劲。延伸阅读与资源想深入某个环节按这个顺序读文档收益最高核心技能文档完整工作流、不可妥协项与交付清单样式预设参考12 套预设目录、情绪映射与强制基础 CSSHTML 模板 与 视口基础样式想手写时的起点动画模式文档入场与强调动效的现成配方。另外三个相关技能值得顺手了解一下frontend-patterns围绕幻灯片的组件与交互模式、liquid-glass-design刻意走玻璃拟态风格时、e2e-testing需要自动化浏览器验证成片时。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/28 11:37:53 · 阅读 1.2k Frontend Slides 完整指南：3 步做出零依赖 HTML 演示文稿，告别 PPT 依赖
Frontend Slides 完整指南3 步做出零依赖 HTML 演示文稿告别 PPT 依赖【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC在 ECCEverything Claude Code项目里Frontend Slides是一个专门做演示文稿的技能模块你给它主题、笔记甚至一个 .pptx 文件它就能生成零依赖 HTML 演示文稿——单个 HTML 文件样式和脚本全部内联双击就能在浏览器里放映无需安装任何软件、不依赖网络。它适合经常要做技术分享、产品推介或内部汇报的开发者尤其是那些内容早就写好了却被做 PPT 这件事卡住的人。 它解决了什么痛点为什么需要零依赖的 HTML 演示先说几个大多数人都遇到过的糟心场景二进制文件没法协作。PPT 文件进 Git 就是乱码改一个字产生整个文件的 diff评审和回滚都很痛苦换台电脑就变样。字体缺失、版式跑偏、动画失效演示前一晚还在救火在线工具把主动权交出去。上传、登录、等待加载弱网环境下直接罢工模板审美疲劳。紫色渐变 白色 Inter 字体的创业公司风一套模板用到底。HTML 演示文稿的思路是把幻灯片当成一个纯文本的、可版本控制的网页。它的好处直接对应上面的痛点——文本 diff 清晰、浏览器打开即用、离线可放、样式完全由你掌控。而 Frontend Slides 把这个过程自动化了你不用手写一行业务代码只需要描述内容和想要的感觉。核心能力拆解从能做什么讲起这个技能的能力可以拆成三块每一块都有明确的交付物。1. 内容生成先管住信息密度生成幻灯片前它会先做模式判断你是要全新创作、转换 PPT还是给已有 HTML 幻灯片做增强。内容层面有一套密度上限作为硬约束比如内容页最多 1 个标题加 4~6 条要点代码页最多 8~10 行。超了怎么办拆成更多页而不是把字缩到看不清。这个规则写死在 核心技能文档 里保证生成的片子不会变成文字墙。2. 样式预设视觉决策外包给预览不懂设计的人选风格靠想象描述是低效的。Frontend Slides 的做法是展示而非描述你只说想要被震慑还是被点燃的感觉它就用 样式预设参考 里的情绪映射表生成 3 个单页预览文件给你挑。选中的样式以 CSS 变量形式落进最终文件换色换字体只改变量不动结构。3. PPTX 转换把旧资产迁过来手里已有 .pptx 也不用从头再来。转换脚本 extract-pptx.py 优先用 python-pptx 抽取文字、图片和演讲者备注保留原有页序环境里没有该库时会提示你安装或走手动导出路线。抽取完成后走和新建完全相同的选择风格流程。三步上手从一句需求到成片的完整流程第一次用建议走完整流程如果还没克隆仓库执行git clone https://gitcode.com/GitHub_Trending/ev/ECC即可第 1 步说清目的贴出内容。只需回答三件事用途推介 / 教学 / 会议 / 内部同步、篇幅5~10 页算短、10~20 算中、20 以上算长、内容状态成稿 / 粗略笔记 / 只有一个主题。有现成文案就贴给它——先内容后样式顺序别反。第 2 步看预览选感觉。如果你已经知道想要哪种预设直接点名跳过这步。否则它会生成 3 个独立预览页每页都完整呈现排版、配色和动效你挑一个或者要求用 A 的配色 B 的字体。第 3 步验收交付。成片是一个 HTML 文件外加可选的 assets 图片目录。交付前它会在 5 个视口尺寸下自查1920×1080、1280×720、768×1024、375×667、667×375确认没有一页内部出现滚动条、键盘翻页可用然后把文件路径、所用预设和自定义入口一并告诉你。12 种视觉风格主题预设与选择策略预设目录里共有 12 套风格从赛博霓虹到纸质印刷各占一席。新手不用背名字按场合 → 情绪对号入座就行你想营造的感觉推荐预设典型场合终端感、硬核可信Terminal Green、Neon Cyber技术大会、开源项目发布清晰克制、信息优先Swiss Modern、Paper Ink内部分享、数据汇报有温度、易亲近Pastel Geometry、Notebook Tabs培训、工作坊有态度、商业张力Bold Signal、Electric Studio产品推介、融资演示叙事感、编辑质感Vintage Editorial、Dark Botanical品牌故事、主题演讲选择时的两个实用策略一是宁缺毋滥一场片子只用一套预设混搭超过两种视觉语言会让观众注意力涣散二是先定情绪再定细节震撼 / 专注 / 启发这类词比深蓝色背景更接近有效的输入。场景实战三种常见场合的配置建议技术会议演讲。选 Terminal Green 或 Neon Cyber动效走克制路线代码页严守 8~10 行上限超出的部分用下一页而不是滚动条解决能现场演示的放一个可点击的 Demo 入口比十页架构图更有说服力。产品技术推介。选 Bold Signal 或 Electric Studio结构上按问题 → 方案 → 差异点三段走数据页用 SVG 图表配合入场动画避免整屏数字堆叠。推介对象设备的屏幕尺寸未知交付前务必在 1280×720 下复检一遍。内部技术分享。选 Swiss Modern 或 Paper Ink信息密度可以适当放宽但代码块要保证可直接复制页脚附上仓库地址和文档位置让听众散会后能自助深入。适配与渲染避坑移动端溢出、字体一致性、动画卡顿⚡ 这三类问题是 HTML 幻灯片的翻车重灾区也是这套技能把规则写死的原因。坑一小屏上内容溢出。常见错误是给内容框写死高度。正确姿势是每张幻灯片锁死为视口高度并禁止内部滚动放不下就分页.slide { width: 100vw; height: 100dvh; overflow: hidden; scroll-snap-align: start; }坑二不同浏览器字体表现不一致。解法是把字号和间距全部交给clamp()做弹性缩放并在窄屏、矮屏断点下调小留白而不是逐设备打补丁:root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --slide-padding: clamp(1rem, 4vw, 4rem); }坑三低端设备动画卡顿。只动transform和opacity这两个可硬件加速的属性避免动画过程中改布局属性同时尊重系统的减少动态效果设置.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s, transform .5s; } .slide.active .reveal { opacity: 1; transform: none; }更多动效组合可以参考 动画模式文档里面有入场、强调类动画的现成写法。性能与加载让演示跑得更快零依赖不等于无性能意识几个默认就内置的做法值得留意关键样式全部内联。首屏样式就在 HTML 里不存在外部 CSS 的加载等待本地打开即是最终效果图片按需约束。图片统一用object-fit: contain限制在视口比例内大图建议先转 WebP 再放进 assets 目录字体防闪烁。网络字体Google Fonts / Fontshare配上font-display: swap避免文字区域长时间空白动画触发交给 Intersection Observer。只有翻页真正发生时才播放入场动画而不是预加载全部效果。如果片子需要打印或导出 PDF可以直接用现成的 导出脚本不用手动截图拼接。选型判断什么时候该用、什么时候别用适合 Frontend Slides 的情况演示需要进版本库团队成员要能 review、能 diff场合跨平台现场机器不可控需要一个浏览器就能放的保险方案内容里大量出现代码、命令行、架构图文本原生渲染比截图更清晰你希望片子有辨识度不想落入模板风。更适合继续用 PPT 的情况交付对象明确指定要 .pptx 文件且你无法让对方用浏览器打开需要非技术同事用拖拽方式反复微调对方没有改 HTML 的意愿动画要求精细到逐帧时间轴级别超出 CSS 过渡的表达范围。一句话判断标准问自己观众会怎么打开它——答案如果是浏览器选 HTML答案如果是 Office就别较劲。延伸阅读与资源想深入某个环节按这个顺序读文档收益最高核心技能文档完整工作流、不可妥协项与交付清单样式预设参考12 套预设目录、情绪映射与强制基础 CSSHTML 模板 与 视口基础样式想手写时的起点动画模式文档入场与强调动效的现成配方。另外三个相关技能值得顺手了解一下frontend-patterns围绕幻灯片的组件与交互模式、liquid-glass-design刻意走玻璃拟态风格时、e2e-testing需要自动化浏览器验证成片时。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考