Frontend Slides 完整指南：用零依赖 HTML演示文稿 替代 PPT 的理由

Frontend Slides 完整指南用零依赖 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/ECCECCEverything Claude Code里的 Frontend Slides 技能能把你的内容变成一个零依赖的 HTML演示文稿 单文件不用装软件、离线就能打开、随手提交进 Git。 为什么不用 PPT单文件路线的优势传统 PPT 文件很娇气要装对应软件、依赖特定系统二进制格式放进 Git 里也没法做差异对比。Frontend Slides 反其道而行最终产物就是一个 HTML 文件样式和脚本全部内联不引用任何外部资源。好处有三点随处可开任何现代浏览器都能打开Windows、Mac、手机、公司老旧电脑都不需要安装软件。离线可用断网也不影响打开就能讲把文件发到聊天工具里演示文稿就跟着走。Git 友好纯文本可版本化、可对比差异、可回滚演示文稿从此像代码一样好维护。单文件就像自带行李到哪打开都能讲。 它是怎么做出漂亮演示的三步工作流整个过程分三步类似摄影师定方案 → 看样片 → 交付成片第一步摸清内容。先问三件事用途路演、分享、内部同步、篇幅短 5-10 页、中 10-20 页、长 20 页以上、素材完成度。有内容就先把内容贴出来再谈风格。系统还有一条内容密度硬规则内容页最多 4-6 个要点代码页最多 8-10 行——装不下就拆页而不是把字缩到看不清。第二步展示而非提问。很多工具会问你想要什么风格新手根本答不上来。Frontend Slides 改问你希望听众看完什么感觉印象深刻、兴奋、专注还是被触动。根据回答它生成三张不同风格、各自可打开的单页预览你挑最顺眼的一张也可以混搭要 A 的配色、B 的字体。如果直接报出预设名字这步可以跳过。第三步一键产出。生成 presentation.html 后它还会自检在五种窗口尺寸下打开确认每一页都不溢出、不出现滚动条通过后才交付并说明文件位置和换主题的方法。上图是生成演示文稿的典型单页版式一屏刚好放下不出现内部滚动。 12种视觉预设怎么选按情绪匹配风格技能内置了 12 套风格预设每套都配好了字体、配色和标志性元素。不需要懂设计按情绪对号入座即可情绪 / 场合推荐预设技术会议、开发者工具分享Terminal Green、Neon Cyber产品发布、投资路演Bold Signal、Electric Studio内部同步、数据分析Swiss Modern、Notebook Tabs品牌故事、叙事长文Dark Botanical、Paper Ink比如技术会议用 Terminal Green等宽字体加终端绿极客味直接拉满内部分享用 Swiss Modern网格加极简版式信息最清楚。12 套预设的字体、配色与适用场合完整列在 STYLE_PRESETS.md 里。上图是 ECC 项目概览Frontend Slides 只是其中几百个技能模块之一可以和代码审查、测试等其他技能配合使用。 旧 PPT 翻新记PPTX 一键转换步骤手里已有 PPT、只想换个皮的话用内置脚本提取文字、图片和演讲者备注python3 skills/frontend-slides/scripts/extract-pptx.py old.pptx脚本依赖 python-pptx读取 PowerPoint 文件的 Python 库。没装时可以选装或退回手动导出流程全程跨平台。提取完成后走和新建完全相同的流程选情绪、看三张预览、产出新的 HTML演示文稿原页面顺序和备注都会保留。边界也要知道能带过来的是文字、图片和备注动画、图表等富媒体不迁移。老的 .ppt 格式建议先在 PowerPoint 里另存为 .pptx。如果原件只有几页纯文字从头新建可能更快。⚖️ 真实场景与选型建议值得用的三种场景技术会议、对外演讲跨平台、要展示代码片段Terminal Green 或 Neon Cyber 预设很对味。产品技术推介问题-方案-优势的三部曲结构用 Bold Signal 或 Electric Studio屏幕冲击力强。内部技术分享信息密度可以高一些Swiss Modern 或 Paper Ink顺手附仓库和文档链接。不建议的四种场景有严格品牌规范、指定色值和字体的企业演示。需要逐帧精细控制复杂动画时间线。完全没有现代浏览器的纯离线环境。面向非技术受众、必须拖拽式编辑界面。在 ECC 里这个技能像插件一样随叫随到不需要额外安装。⚠️ 容易踩的 3 个坑症状与解法各一句话坑一小设备上内容撑爆屏幕。解法不写死固定高度用 CSS 变量给内容设上限装不下就拆成两页。.slide-content { max-height: min(80vh, 700px); overflow: hidden; }坑二不同窗口里字体和间距对不齐。解法字号和边距统一用 clamp()让数值随窗口宽度在区间内伸缩的 CSS 函数绑定等比缩放不变形。坑三低端设备动画卡顿。解法只动画 transform 和 opacity 这类显卡能加速的属性并响应系统的减少动态效果设置自动关掉动画。✅ 快速上手检查清单确认用途、篇幅和素材完成度在 12 套预设里选定情绪或直接报预设名三张预览文件都打开过选定或混搭出偏好成品在桌面和手机两种尺寸下各检查一遍每一页一屏放下无内部滚动条交付时记下文件路径和可改的主题变量位置 文档与资源在哪找主技能文档 SKILL.md完整工作流与质量门规则STYLE_PRESETS.md12 套预设、密度上限与必备基础样式html-template.md页面结构模板viewport-base.css视口适配基础样式animation-patterns.md动画模式参考scripts/extract-pptx.pyPPT 内容提取脚本打开技能目录照着走一遍就能出第一版。【免费下载链接】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），仅供参考