Frontend Slides：3 分钟把 PPT 变成零依赖网页演示

Frontend Slides3 分钟把 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你有没有遇到过这种情况PPT 发给客户换台电脑字体就跑了或者明明想做一个带动画的分享却要花一下午调对齐。ECC 项目里的 frontend-slides 技能就是为了解决这类问题告诉它你的主题它直接产出一个零依赖的 HTML 演示文稿双击浏览器就能开讲PPT 转网页也能直接上手。它到底能干什么5 个你真正用得上的能力 零依赖单文件所有样式和脚本都内联在一个 HTML 文件里发给别人就是发一个文件对方不需要装任何软件也不依赖网络。 PPT 转网页它能读取 .pptx 里的文字、图片和演讲者备注按原顺序重新生成网页版旧演示稿不用重做。 12 种风格预设从开发者风的 Terminal Green 到杂志感的 Vintage Editorial不问你喜欢什么配色这种玄学问题直接给你看样例。 每页都保证不超屏每张幻灯片都锁死在一个视口内手机、平板、投屏大屏上都不会出现页内滚动条。 一键导出 PDF附带脚本能把网页演示逐页截图拼成 PDF方便发邮件或打印。3 个真实场景旧 PPT 翻新、新幻灯片速成、导出 PDF 发客户三步把旧 PPT 变成网页演示先安装解析依赖再运行仓库里现成的提取脚本pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py 旧文件.pptx接着让 AI 基于提取出的 JSON 和图片重建网页演示最后用open presentation.htmlmacOS或xdg-open presentation.htmlLinux打开检查。小提示脚本会把图片存到assets/目录让 AI 引用这个目录图片就能直接落位不用你手动搬。三步从零做出会议演讲幻灯片第一步把三件事说清楚用途内部分享还是客户提案、长度5-10 页、10-20 页还是更长、你手里有没有现成文案。第二步如果你不知道自己要什么风格它会先在.ecc-design/slide-previews/目录生成 3 张单页样例你只看效果挑一个或者说把 A 的配色和 C 的字体拼一下。第三步挑定后生成presentation.html浏览器里用方向键翻页即可。小提示已经认准某个预设的话直接报名字比如 Terminal Green可以跳过预览环节省一步。一条命令把演示导出成 PDF运行bash skills/frontend-slides/scripts/export-pdf.sh presentation.html脚本会自动起本地服务、按 1920x1080 逐页截图、拼成横版 PDF动画部分以静态图呈现颜色字体都保留。导出后可以直接拖进邮件。小提示文件太大就加--compact参数改按 1280x720 导出体积能小一半以上脚本需要本机已装 Node.js。它和 PowerPoint 们比有什么不一样维度Frontend SlidesPowerPointReveal.js上手成本描述主题即可AI 生成手动排版需学操作自己写代码搭结构是否需要联网否本地文件直开否常依赖 CDN 或本地部署能否进 Git能纯文本可 diff不能二进制文件能分享方式发一个 HTML发 .pptx 并祈祷不跑版发一组文件适配小屏内置 clamp() 自适应缩放后文字糊依赖自己写断点需要版本管理、跨设备演示、或者想嵌入代码片段的场景选它如果你要的是客户能自己拖拽编辑的源文件还是老老实实用 PowerPoint。进阶小技巧改主题、挑风格、控制代码页改 3 个 CSS 变量换全套配色生成出来的文件顶部有一组 CSS 变量背景、强调色、字体都从这读。想换风格不用动任何 HTML只改这里:root { --bg-primary: #0a0f1c; --accent: #00ffcc; --font-body: Satoshi, sans-serif; }用情绪关键词 10 秒定位风格预设文档里有一张情绪对照表想要被说服、有压迫感选 Bold Signal 或 Electric Studio讲 AI、基建、开发者工具选 Neon Cyber 或 Terminal Green数据汇报、策略评审选 Swiss Modern。把我想要什么感觉翻译对比纠结配色快得多。代码页记住 3 个上限代码幻灯片最多 8-10 行超了就拆页代码块绝不允许出现滚动条字体用等宽预设比如 Terminal Green 里的 JetBrains Mono。这三条是内置的硬性约束生成时它自己会遵守你手动改稿时也建议别破例。我提前帮你踩过的坑⚠️ 内容一页放不下拆成两页别靠缩小字号硬塞——预设里明确禁止把字缩到不可读。负号函数会被浏览器静默忽略right: -clamp(28px, 3.5vw, 44px)这种写法不报错但完全无效正确姿势是calc(-1 * clamp(28px, 3.5vw, 44px))。PDF 导出跑不起来九成是缺 Node.js先node -v确认一下再找其他原因。下一步资源入口skills/frontend-slides/SKILL.md完整工作流与交付验收标准skills/frontend-slides/STYLE_PRESETS.md12 种预设的详细配色、字体和情绪对照表skills/frontend-slides/scripts/export-pdf.shPDF 导出脚本现在打开终端git clone https://gitcode.com/GitHub_Trending/ev/ECC把仓库拉到本地然后对 AI 说一句帮我做一个 10 页的 HTML 演示3 分钟后你就能在浏览器里翻到第一页。【免费下载链接】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），仅供参考