企业官网建设流程全解析

Frontend Slides：3步生成零依赖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.md，examples/目录下还能找到更多演示相关示例。

【免费下载链接】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