Frontend Slides 完整指南如何 5 分钟生成零依赖 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技术分享开始前投影比例出了问题16:9 的页面被裁掉两角字体回退成宋体翻页动画卡在半途。重新导出要十分钟而五分钟后就要上台。Everything Claude CodeECC仓库里的 Frontend Slides 技能换了个思路直接生成一个零依赖的 HTML 文件交付物只需要一个浏览器。一张图看懂跑在浏览器里的演示文件先说结论它是一个提示词进、单文件出的生成技能不是幻灯片编辑器。输入可以是主题、零散笔记或者一个现成的.pptx输出是一个内联全部 CSS 和 JS 的presentation.html双击就能放。它服务的是需要定期对外或对内做技术分享的开发者团队。和 PowerPoint 最大的区别在于交付形态产物是纯文本可以进 Git、可以 diff、可以在任何装了浏览器的设备上放映不存在你电脑里没装 Office这个事故源。机制拆解一次生成要过的三道硬关卡关卡一只问用途和长度不问风格流程的第一步是模式判定之后只收集三个最小信息用途路演、教学、会议演讲、内部汇报、长度短 5–10 页、中 10–20 页、长 20 页以上、内容状态成稿、粗稿、只有主题。类比一下这就像挂号分诊医生先问哪里不舒服、看了多久而不是先让你选科室装修。内容没给全之前样式讨论一律推迟——先有稿子再谈好看。关卡二看三个预览文件做决定而不是填风格问卷风格发现走的是展示而非描述路线你先说想要什么感受被说服、有能量、专注、被打动它在.ecc-design/slide-previews/下生成 3 个独立的单页预览 HTML每个文件完整呈现字体、配色和动效内容控制在约 100 行以内。你打开看一眼说要第二个的背景第一个的标题字。类比挑窗帘商家不会给你读面料参数而是递三个样板让你摸。12 种预设Bold Signal、Terminal Green、Neon Cyber 等都写在STYLE_PRESETS.md里已经知道要哪个的人可以直接点名跳过预览环节。关卡三一张幻灯片等于一个视口验不过不交付这是整个技能里唯一的不可协商规则每张幻灯片必须在单个视口内完整放下禁止内部滚动。生成后的验证要在 5 个分辨率下过一遍1920x1080、1280x720、768x1024、375x667、667x375如果环境里有浏览器自动化就用它确认没有溢出、键盘翻页可用。类比海报装裱框子多大画就裁多大内容放不下时唯一正确动作是把画拆成两张而不是把字缩小到看不清。配套的内容密度上限同样写死内容页 1 个标题加 4–6 条要点代码页 8–10 行封顶。和 Reveal.js、Marp、PowerPoint 摆在一起它适合什么时候维度Frontend Slides 产物Reveal.jsMarpPowerPoint上手成本无需安装产物开箱即放要理解框架配置与依赖目录会写 Markdown 即可但需 CLI 渲染低人人会但换机容易翻车维护负担单文件纯文本改主题只动 CSS 变量框架升级、插件生态需持续跟进依赖 CLI 与主题版本二进制文件只能整体替换协作与版本化可 diff、可合并、可 code review可进 Git但带依赖源码 MarkdownGit 友好锁定式编辑云端同步二次开发空间CSS 变量 控制器类文件级可改JS API 与插件生态空间最大以主题、插件扩展为主宏/VBA生态封闭分发方式发一个 .html或导出 PDF需带依赖目录或托管需再渲染成 HTML/PDF需装软件或导出 PDF一句话结论当幻灯片里要放代码、且你希望 deck 本身进仓库参与版本控制时选它。第一次生成走通的 5 个步骤拿到仓库。执行下面的命令技能文件位于skills/frontend-slides/目录# 克隆 ECC 仓库 git clone https://gitcode.com/GitHub_Trending/ev/ECC cd ECC # 对支持该技能的 agent 下达指令例如 # 用 Frontend Slides 做一份 10 页的 RAG 技术分享 # 风格 Terminal Green内容我粘贴在这里……交代用途和长度。按用途 页数区间 内容状态三件套提供信息内容尽量直接粘贴成稿别只给一个主题词。定风格。两种走法已知偏好就点名预设12 选 1如Bold Signal不确定就让它出 3 个预览文件你挑一个或指定混搭。本地放映并自查。macOS 用open presentation.htmlLinux 用xdg-openWindows 用start随后按 5 个验证分辨率检查有无溢出。需要纸质版时导出 PDF。脚本会起本地服务、逐页截图再拼成 PDF颜色字体都保留动画除外# 默认 1920x1080文件较大 bash skills/frontend-slides/scripts/export-pdf.sh presentation.html # 加 --compact 用 1280x720体积可缩小约三成以上 bash skills/frontend-slides/scripts/export-pdf.sh presentation.html slides.pdf --compact两个剧本技术会议演讲与产品推介剧本 A技术会议演讲目标在会场大屏和观众手机上都不翻车代码可信。关键配置预设选 Terminal Green 或 Neon Cyber动效走 Techy/Futuristic 方向每页代码控制在 8–10 行超了就拆页保留键盘、滚轮、触摸三种翻页并尊重prefers-reduced-motion。交付物presentation.html一个文件 提前导出的 PDF 备份。剧本 B产品技术推介目标同时说服技术负责人和非技术决策人。关键配置预设选 Bold Signal 或 Electric Studio走高对比 keynote 风格结构按问题—方案—技术优势三段铺页图表用 SVG 而不是截图。交付物单文件 HTML现场放映--compact导出的 PDF会后邮件分发。避坑手记三个真实的故障模式坑一幻灯片里冒出滚动条。症状1080p 笔记本上某页底部内容被切或页面内出现滚动条。原因内容超出单视口上限——通常是固定高度的容器或一条页塞了 8 条以上要点。修复先拆页再检查文字间距是否都走了clamp()密度上限照查内容页 1 标题 4–6 条要点别把字缩小当解法。坑二装饰元素莫名消失或错位。症状某个绝对定位的装饰块在部分浏览器里不见了控制台没有报错。原因写了取反的函数比如right: -clamp(28px, 3.5vw, 44px);——浏览器会静默忽略这类无效声明。修复改成先取正再相乘一行解决right: calc(-1 * clamp(28px, 3.5vw, 44px));坑三导出 PDF 后字体变了、排版错位。症状浏览器里看着正常PDF 里字体回退、图片缺失。原因web 字体和相对资源在file://协议下加载受限直接在浏览器里打印为 PDF绕过了正确的加载环境。修复不要用浏览器打印走export-pdf.sh它会自动起一个本地 HTTP 服务再逐页截图等document.fonts.ready完成后才导出。扩展点与后续路线技能本身预留了三个扩展位。主题层面可以在.ecc-design/themes/下按 CSS 自定义属性的命名约定加新主题并定义进入、退出和强调三组动画预设再用内置视口测试工具过一遍跨设备兼容。集成层面原文档提到的方向包括与代码审查联动检查幻灯片里的代码片段、Git 提交时生成演示快照、在 CI 构建里自动产出技术文档演示仓库内frontend-patterns、liquid-glass-design、e2e-testing三个技能也可配合使用。路线图方面官方材料里已列出的分三档短期是 Web 组件化、WebSocket 实时协作、LLM 内容优化与 Lighthouse 性能评估中期是 WebGL 3D 场景、语音控制、从数据库直出可视化页、i18n 补全长期是 AR/VR 放映、基于观众反馈的内容调整、区块链存证与量子安全加密。这些目前都是规划尚未落地选型时不要把它们算进能力清单。什么场合用它什么场合别碰适合技术团队内部演示要版本控制和代码展示、开源项目文档要嵌入可交互示例、技术会议演讲要跨设备和流畅动画、产品技术白皮书要响应式和可访问性。不适合有严格品牌合规审查的企业演示、需要逐帧精细控制的复杂动画时间线、没有现代浏览器环境的离线编辑场景、以及必须给非技术受众提供拖拽式编辑的场合。资源索引都在仓库skills/frontend-slides/下SKILL.md是工作流总纲STYLE_PRESETS.md有 12 种预设和必选基础 CSShtml-template.md是生成结构的参考架构scripts/下是 PPTX 提取和 PDF 导出两个工具脚本。打开仓库让 agent 给你生成第一张幻灯片。【免费下载链接】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），仅供参考