Frontend Slides 完整指南三步快速生成零依赖 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/ECCECCEverything Claude Code是一个面向 AI Agent 的性能优化系统其中的 Frontend Slides 技能能把主题或粗糙笔记变成零依赖的 HTML 演示文稿产物是单个 HTML 文件CSS 与 JS 全部内联双击就能在浏览器打开无需构建和运行时依赖同时支持把 PPTX 转成网页版幻灯片。适合需要制作技术演讲、产品路演或内部分享并希望演示稿能进 Git、能在任意设备上放映的开发者。一个 HTML 文件能做什么这个技能的核心是一组硬约束最终交付物只有一个 HTML 文件单文件输出样式与脚本全内联不引 CDN不装依赖离线可放映。一页一视口每页都被限定在一个视口内页内不允许滚动内容超量就拆页不靠缩小字号硬塞。12 套风格预设从等宽字体的 Terminal Green 到衬线书卷气的 Paper Ink每套都固定了字体、配色和标志性视觉元素。预览选风格你说不清要什么风格时它会先问希望观众感受到什么再生成 3 个单页预览文件你从画面里选而不是从文字描述里猜。导航与无障碍齐全键盘、滚轮、触摸滑动、进度指示都有且响应prefers-reduced-motion。PPTX 抽取自带extract-pptx.py基于 python-pptx 取出每页文字、图片与演讲者备注顺序保持不变。PDF 导出export-pdf.sh用无头浏览器按 1920×1080 逐页截图拼成横版 PDF适合邮件和打印动画不保留。技能的完整定义在 skills/frontend-slides/ 下包含流程说明、预设目录、HTML 模板和两个脚本。什么时候用三类典型场景场景推荐预设说明技术会议 / AI、基础设施话题Neon Cyber、Terminal Green等宽字体与光效贴合代码内容代码页上限 8–10 行产品路演 / 发布会Bold Signal、Electric Studio高对比、强冲击每页信息宜短内部技术分享 / 汇报Swiss Modern、Paper Ink极简、数据导向信息密度可略高方便挂文档链接也有三种情况不建议用有严格品牌规范的企业演示预设是固定风格贴合品牌需要二次定制。需要逐帧精细控制动画时间线内置动画是入场揭示型没有时间线编辑器。接收方还要继续编辑交付物是 HTML 而非 .pptx对方若必须在 PowerPoint 里改稿就不匹配。一页一视口约束如何实现这是它区别于普通演示框架的关键逻辑上可以归纳为四点视口硬门槛。基础 CSS 要求每个.slide使用100dvh动态视口高度加overflow: hidden和 scroll-snap页内物理上滚不动.slide { width: 100vw; height: 100vh; height: 100dvh; /* 动态视口高度适配移动端浏览器工具栏 */ overflow: hidden; scroll-snap-align: start; }尺寸全走 clamp()。字号、内边距、间距都是clamp(最小值, vw, 最大值)形式从 1920×1080 到 375×667 按比例缩放另设 700px、600px、500px 三个矮屏断点。你能得到一套代码全尺寸适配要注意的是不要给内容盒子写固定高度。密度上限替代自动压缩。标题页 1 主标题 1 副标题正文页 4–6 个要点或 2 段短文字功能卡片最多 6 张代码页 8–10 行。超出就拆页——规则明确禁止把字号缩到不可读来解决溢出。主题等于一组 CSS 变量。颜色、字体、间距全是自定义属性换主题只改变量值不动 HTML 结构。完整的基础 CSS 与校验清单在 STYLE_PRESETS.md 里。生成流程在交付前还有一步视口验证在 1920×1080、1280×720、768×1024、375×667、667×375 五个尺寸下检查是否有溢出、键盘导航是否可用。动画也是同一套思路Intersection Observer 在元素入场时触发揭示动画动画属性只碰transform和opacity交给 GPU 处理。与常见演示方案横向对比维度Frontend SlidesPowerPointReveal.js输出形态单个 HTMLCSS/JS 内联.pptx 二进制HTML 外部 JS/CSS运行依赖现代浏览器即可完全离线需安装桌面应用浏览器 依赖文件加载版本控制纯文本Git 可 diff二进制只能整文件对比纯文本但多文件多端适配clamp() dvh视口适配是硬约束固定 16:9 画布取决于所用主题风格选择12 套预设 3 预览视觉挑选自行设计社区主题包动画方式CSS 过渡硬件加速应用内软件渲染JS 驱动一句话总结交付物要发给别人继续编辑就选 PowerPoint要进仓库当代码资产管理就选 Frontend SlidesReveal.js 居中适合把演示当网页项目长期维护的团队。PPTX 转换的三个步骤转换脚本在 scripts/ 里共三步抽取运行python3 scripts/extract-pptx.py deck.pptx out/输出逐页的 JSON标题、正文、备注和 assets/ 目录下的提取图片。环境缺 python-pptx 时先安装或退回手动导出不依赖特定平台工具。选风格复用与新建演示相同的流程——定情绪、出 3 个预览、锁定预设。原 PPT 单页内容过挤时按密度上限拆页是常态不是失败。验证交付同前面一样做多分辨率视口检查交付时附页数统计和主题修改点。全程保留页序与演讲者备注提取的图片存到 assets/ 后以相对路径引用跨平台可用。高频问题与避坑建议问题原因规避方式移动端出现滚动条、内容被裁页面没被视口约束保持100dvh overflow: hidden组合内容超量就拆页低配设备动画卡顿动画触发布局重排只动 transform/opacity并保留 reduced-motion 回退代码页被迫滚动行数超限单页 8–10 行封顶其余放链接PDF 导出后动画丢失导出本质是静态截图属预期行为加--compact以 1280×720 导出可减小体积还有一处 CSS 写法值得单独提醒/* 错误取负的 clamp 会被浏览器静默忽略 */ right: -clamp(28px, 3.5vw, 44px); /* 正确用 calc 包一层再取负 */ right: calc(-1 * clamp(28px, 3.5vw, 44px));写错不会报任何错误元素会悄悄停在不该在的位置——你能得到的是布局莫名跑偏且找不到原因所以负值函数一律走calc。下一步Frontend Slides 把做演示变成了一件可以版本化的事纯文本、可离线、跨设备、风格可换。想上手的动作只有三个克隆仓库git clone https://gitcode.com/GitHub_Trending/ev/ECC读一遍 SKILL.md重点看密度上限表和视口校验尺寸直接让 Agent 生成一份 10 页演示指定 Terminal Green 预设再用五个分辨率自己验收一遍【免费下载链接】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），仅供参考