零依赖HTML演示文稿如何快速生成Frontend Slides技能完全指南【免费下载链接】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/ECCFrontend Slides 是 ECCEverything Claude Code项目内置的技能它能把你的主题、笔记甚至一份现成的 PPTX 文件变成单文件、零依赖、可离线打开且带动画的 HTML 演示文稿。适合想做漂亮 slides 但没时间折腾设计的开发者。 它是什么解决什么问题传统演示工具各有各的麻烦PPT 是二进制文件不好进版本库在线工具依赖网络自己拼的 HTML 幻灯片又常常依赖一堆外部 JS。Frontend Slides 的产出更简单粗暴——永远是一个 HTML 文件CSS 和 JS 全部内联本地文件直接双击浏览器就能放映不需要装 PowerPoint 也不需要联网。这个技能由 ECC 的插件系统加载和运行和其他模块走同一套机制技能里写死了两条铁律决定了成品质量的下限一屏一张幻灯片禁止内部滚动。每张 slide 高度锁死为视口内容必须装下装不下就拆页而不是把字号缩到看不清。展示而非提问。你说不清自己要什么风格时它不甩给你一份设计问卷而是先生成 3 张真实的预览单页你挑一张就行。 最快上手生成第一份HTML演示先把仓库克隆下来git clone https://gitcode.com/GitHub_Trending/ev/ECC。技能核心在 skills/frontend-slides/ 目录完整流程写在 SKILL.md 里。然后在你的 agentClaude Code、Codex 等里直接说我要做一个关于 XX 的演示。AI 只会问你三件事用途分享 / 产品推介 / 内部同步、篇幅5-10 页 / 10-20 页 / 20 页以上、内容是否成稿。有现成文稿就先贴过去别让它猜。风格说不清也没关系你只需要描述想要的感觉——震撼一点、沉稳一点还是科技感拉满。AI 会在.ecc-design/slide-previews/里生成 3 张单页预览你挑一张或指定混搭哪几张的元素它才开始正式构建。最终产出一个presentation.html保存后直接用浏览器打开就能放。视口适配是内建在基础模板里的核心就下面这么几行每张 slide 锁死为整个视口、溢出裁掉字号间距全部交给clamp()随窗口缩放——.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; } :root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); }它做的事就是保证从 1080p 大屏到 375px 宽的手机任何一张幻灯片都不溢出、不出滚动条。 三个典型场景分别怎么玩场景一从零做一份分享。先按密度上限组织内容内容页 4-6 个要点或 2 段短文代码页 8-10 行封顶——满屏子弹点和需要滚动的代码块是文档里明令禁止的反模式。技术演讲推荐 Terminal Green 或 Neon Cyber 预设等宽字体加终端绿黑客味直接到位。场景二把现成 PPTX 转成网页。技能自带scripts/extract-pptx.py基于 python-pptx 库pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py your-deck.pptx ./它会把每页的文本、图片、演讲者备注拆成 JSON图片落盘到assets/目录之后 AI 按从零创建的流程重新排版。原有页序和备注都会保留跨平台可用不依赖任何 macOS 专属工具。场景三给已有 HTML 幻灯片抛光。布局乱、动效糙、字距不舒服都可以丢给技能修。做完如果还要发 PDF邮件附件、打印scripts/export-pdf.sh会以 1920x1080 逐页截图合成 PDF——颜色字体布局都在动画自然就没有了。 用之前先知道这三件事12 套风格预设随取随用。STYLE_PRESETS.md 里有完整目录和情绪→预设映射要自信冲击感选 Bold Signal要平静聚焦选 Paper Ink。知道名字就直接点名可以跳过预览环节。避开 CSS 静默失效坑。写right: -clamp(...)这种负号开头的函数时浏览器会直接忽略还不报错技能文档要求统一写成calc(-1 * clamp(...))的形态。交互能力是标配不用自己加。生成的幻灯片自带键盘方向键、滚轮、触摸滑动三种导航加进度指示也尊重系统的减少动态效果设置手机上看也不会出问题。 适合谁谁要三思适合你如果你演示面向开发者希望 slides 是纯文本、能进 git 做版本管理手头有一批 PPTX 想批量转成网页或者需要在笔记本、客户机器、手机上多环境放映。要三思如果你有严格的企业品牌规范每个色值都被 VI 手册钉死、受众完全非技术且你必须要拖拽式编辑界面——这些场景传统工具反而更顺手。另外记住成品是 AI 生成的文件想微调要么自己改 HTML要么再跟 agent 说一轮需求。✅ 下一步行动打开 skills/frontend-slides/SKILL.md把七步工作流读一遍跑通最小流程丢一个 5 页的主题给它生成presentation.html后浏览器打开有旧 PPT 的话先跑一遍extract-pptx.py看看能抽出什么翻一遍 STYLE_PRESETS.md 的 12 套预设圈出你最喜欢的两套装备用【免费下载链接】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），仅供参考 零依赖HTML演示文稿如何快速生成：Frontend Slides技能完全指南
零依赖HTML演示文稿如何快速生成Frontend Slides技能完全指南【免费下载链接】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/ECCFrontend Slides 是 ECCEverything Claude Code项目内置的技能它能把你的主题、笔记甚至一份现成的 PPTX 文件变成单文件、零依赖、可离线打开且带动画的 HTML 演示文稿。适合想做漂亮 slides 但没时间折腾设计的开发者。 它是什么解决什么问题传统演示工具各有各的麻烦PPT 是二进制文件不好进版本库在线工具依赖网络自己拼的 HTML 幻灯片又常常依赖一堆外部 JS。Frontend Slides 的产出更简单粗暴——永远是一个 HTML 文件CSS 和 JS 全部内联本地文件直接双击浏览器就能放映不需要装 PowerPoint 也不需要联网。这个技能由 ECC 的插件系统加载和运行和其他模块走同一套机制技能里写死了两条铁律决定了成品质量的下限一屏一张幻灯片禁止内部滚动。每张 slide 高度锁死为视口内容必须装下装不下就拆页而不是把字号缩到看不清。展示而非提问。你说不清自己要什么风格时它不甩给你一份设计问卷而是先生成 3 张真实的预览单页你挑一张就行。 最快上手生成第一份HTML演示先把仓库克隆下来git clone https://gitcode.com/GitHub_Trending/ev/ECC。技能核心在 skills/frontend-slides/ 目录完整流程写在 SKILL.md 里。然后在你的 agentClaude Code、Codex 等里直接说我要做一个关于 XX 的演示。AI 只会问你三件事用途分享 / 产品推介 / 内部同步、篇幅5-10 页 / 10-20 页 / 20 页以上、内容是否成稿。有现成文稿就先贴过去别让它猜。风格说不清也没关系你只需要描述想要的感觉——震撼一点、沉稳一点还是科技感拉满。AI 会在.ecc-design/slide-previews/里生成 3 张单页预览你挑一张或指定混搭哪几张的元素它才开始正式构建。最终产出一个presentation.html保存后直接用浏览器打开就能放。视口适配是内建在基础模板里的核心就下面这么几行每张 slide 锁死为整个视口、溢出裁掉字号间距全部交给clamp()随窗口缩放——.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; } :root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); }它做的事就是保证从 1080p 大屏到 375px 宽的手机任何一张幻灯片都不溢出、不出滚动条。 三个典型场景分别怎么玩场景一从零做一份分享。先按密度上限组织内容内容页 4-6 个要点或 2 段短文代码页 8-10 行封顶——满屏子弹点和需要滚动的代码块是文档里明令禁止的反模式。技术演讲推荐 Terminal Green 或 Neon Cyber 预设等宽字体加终端绿黑客味直接到位。场景二把现成 PPTX 转成网页。技能自带scripts/extract-pptx.py基于 python-pptx 库pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py your-deck.pptx ./它会把每页的文本、图片、演讲者备注拆成 JSON图片落盘到assets/目录之后 AI 按从零创建的流程重新排版。原有页序和备注都会保留跨平台可用不依赖任何 macOS 专属工具。场景三给已有 HTML 幻灯片抛光。布局乱、动效糙、字距不舒服都可以丢给技能修。做完如果还要发 PDF邮件附件、打印scripts/export-pdf.sh会以 1920x1080 逐页截图合成 PDF——颜色字体布局都在动画自然就没有了。 用之前先知道这三件事12 套风格预设随取随用。STYLE_PRESETS.md 里有完整目录和情绪→预设映射要自信冲击感选 Bold Signal要平静聚焦选 Paper Ink。知道名字就直接点名可以跳过预览环节。避开 CSS 静默失效坑。写right: -clamp(...)这种负号开头的函数时浏览器会直接忽略还不报错技能文档要求统一写成calc(-1 * clamp(...))的形态。交互能力是标配不用自己加。生成的幻灯片自带键盘方向键、滚轮、触摸滑动三种导航加进度指示也尊重系统的减少动态效果设置手机上看也不会出问题。 适合谁谁要三思适合你如果你演示面向开发者希望 slides 是纯文本、能进 git 做版本管理手头有一批 PPTX 想批量转成网页或者需要在笔记本、客户机器、手机上多环境放映。要三思如果你有严格的企业品牌规范每个色值都被 VI 手册钉死、受众完全非技术且你必须要拖拽式编辑界面——这些场景传统工具反而更顺手。另外记住成品是 AI 生成的文件想微调要么自己改 HTML要么再跟 agent 说一轮需求。✅ 下一步行动打开 skills/frontend-slides/SKILL.md把七步工作流读一遍跑通最小流程丢一个 5 页的主题给它生成presentation.html后浏览器打开有旧 PPT 的话先跑一遍extract-pptx.py看看能抽出什么翻一遍 STYLE_PRESETS.md 的 12 套预设圈出你最喜欢的两套装备用【免费下载链接】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），仅供参考