Frontend Slides：3步生成零依赖HTML演示文稿的完整指南

Frontend Slides3步生成零依赖HTML演示文稿的完整指南【免费下载链接】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上台前 20 分钟会议室电脑上字体全变了样翻页还卡了一下。想避开这类麻烦可以试试 ECC 开源项目里的 Frontend Slides 技能它把你讲的内容做成 HTML 演示文稿产出是一个零依赖的单文件浏览器里双击就能放映。Frontend Slides 是什么一个文件装下整场演示Frontend Slides 是 ECC一个 AI 编程助手项目里的一个技能。你给它一个主题、一套笔记或者一份现成的 PPT它会输出一个自包含的演示文件样式、翻页脚本、动画逻辑全部嵌在同一个 HTML 里不依赖网络也不依赖任何第三方库。打开文件后用方向键、滚轮或手指滑动都能翻页。这个技能还规定每张幻灯片的内容密度上限比如代码页只放 8 到 10 行内容放不下时优先拆页而不是把字缩小硬塞。所以你看到的每一页在任何屏幕上都是刚好一屏的量。为什么值得用单文件、多设备、进得了 Git零依赖单文件。文件生成后直接邮件发给同事对方笔记本上不用装任何演示软件就能放映存到 U 盘带到没网的机房照样能用。多设备自适应。文件里的字号和留白都通过 clamp() 这类函数设定——它是一种在大小区间里按屏幕宽度自动取值的写法。同一份文件投到会议室大屏或 iPad 上都不会被裁切不需要准备手机版。对 Git 友好。产出是纯文本文件可以直接提交进仓库。谁改了哪页的文案、动了哪个配色变量diff 里一目了然二进制格式的 PPT 做不到这一点。⚡ 3步生成演示文稿从笔记到单文件先把项目拉到本地git clone https://gitcode.com/GitHub_Trending/ev/ECC这条命令把 ECC 项目完整下载到本地Frontend Slides 技能就在其中的 skills 目录下。第一步准备内容。打开 AI 编程助手告诉它你要做演示文稿把笔记或完整稿粘进去。它只确认几件事用途是什么、大概几页、内容是否定稿然后才开始动手。第二步选风格。如果你说不出自己要什么风格不用硬从清单里挑它会先生成 3 个单页预览文件字体、配色、动画各不相同你指着其中一张说要这个感觉也可以要求把两张的元素混搭。第三步生成或转换。从零开始它会直接输出 presentation.html如果你已有 .pptx它会先用 python-pptx 提取文字、图片和演讲者备注再走一遍同样的选风格流程备注不会丢。按场景挑风格会议、推介、内部分享技术会议演讲建议选深色高对比的风格比如终端绿或赛博霓虹和台下开发者的设备气质搭。代码块控制在几行以内页面角落放一个可点击的演示链接比讲十遍我们做了个 demo管用。产品推介适合更醒目的配色组合结构上推荐问题—方案—技术优势三段式。数据尽量用带动效的 SVG 图表呈现比直接贴表格更容易被记住。内部技术分享用简洁克制的风格就好例如瑞士现代或纸墨质感。技术细节可以写得更密一些页面里附上仓库地址和文档链接方便同事散会后自己深挖。进阶小技巧离线放映、低端设备、代码可复制离线放映。样式和脚本都嵌在文件里没网的会议室照样放。心里没底的话U 盘里放一份备份不占地方。低端设备跑得稳。文件里的动画只让画面做位移和缩放也就是 transform 与透明度两件事不碰会牵动整个版面的宽高属性所以老设备也不容易卡。视口规则也是写死的.slide { height: 100vh; height: 100dvh; overflow: hidden; }这几行样式把每张幻灯片锁定为恰好一屏高页内永远不会出现滚动条。文件同时识别系统的减弱动态效果设置旧电脑觉得花哨时可以关掉入场动画只保留翻页。代码可复制。每页代码放在可选中复制的代码块里观众能直接拷走。写稿时注明最多 8 到 10 行页内就不需要滚动抄起来也完整。❓ 常见疑问溢出、字体、动画卡顿手机上内容会溢出吗不会。这是技能的硬性规定一页放不下就拆成两页禁止缩小文字硬塞也禁止页内滚动条。交付前还会按手机横竖屏在内的几种分辨率逐一检查。不同浏览器字体显示不一致所有字号都经过 clamp()大小差异被限制在预设区间内。若追求更强一致性技能建议从 Google Fonts 或 Fontshare 选字体这两家的字族覆盖更全。低端设备上动画会卡吗动画只改 transform 和透明度不触发整页重排同时尊重系统减弱动态效果偏好会自动省去入场动画。实测旧笔记本上翻页也是流畅的。适合谁用谁别用Frontend Slides 把做演示从软件操作问题拉回内容问题产出是一个发给谁都能放的文件。如果你是开发者、技术团队或习惯用 Git 管理工作需要能进版本库、能离线放、代码多的演示文稿它正合适。如果你要拖拽式可视化编辑器、必须严格套用企业 VI 规范或者离不开 PowerPoint 的离线编辑生态它可能不是好选择。想继续了解的话核心技能文档在skills/frontend-slides/SKILL.md风格预设参考在skills/frontend-slides/STYLE_PRESETS.mdexamples/目录下还能找到更多演示相关示例。【免费下载链接】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），仅供参考