把我要一套PPT变成双击就开的单文件网页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 是 ECC 仓库里的一个 HTML 演示文稿生成技能你给它一个主题、一份大纲或一份旧 PPT它还你一个在浏览器里双击就能放的单 HTML 文件。最核心的特点是一页锁死一个视口——每页高度刚好等于屏幕高度页内绝不出现滚动条且整个文件零外部依赖。 这几个场景你会真的用到它先说场景再说原理。你大概率会在下面三种情况里碰到它马上要上台讲内部分享、大会发言临时起意写份 PPT 来不及你想直接产出一份能在任何机器上打开的网页版讲稿手里有一份 pptx 想翻新公司发来的 PowerPoint 模板很土你想把它变成可在浏览器演示的网页版本已有一版 HTML 幻灯片布局和动画有点糙你不想推倒重来只希望它按一套明确规则被重排、重做动效。它和 Reveal.js 这类框架最大的区别不在功能数量而在于交付物——它给的是你能直接发进邮箱、拷进 U 盘的单个文件。幕后是怎么跑的三步拆透先出样稿让你挑而不是问你喜欢什么颜色做什么帮你确定视觉风格但不用问卷。怎么做你只回答一个问题——这套片子想让人印象深刻、兴奋、专注还是受启发。然后它会在一个预览目录里生成 3 个单页样稿每个都是自包含的小 HTML各自演示一种字体、配色和动效单页内容控制在百行以内。你挑一个或者要求把 A 的配色和 B 的排版拼一起。如果你已经明确要哪种预设样稿环节直接跳过。为什么审美是看得到、说不清的东西3 张实打实的样稿比 10 个问题更能定位你的偏好。所有代码塞进一个文件屏幕缩放靠一套公式做什么生成最终可交付的演示文件。怎么做CSS 和 JavaScript 全部内联进 HTML字体只从 Google Fonts 或 Fontshare 在线加载支持字体交换不阻塞渲染。字号、行距、内边距统一交给 CSS 的 clamp() 函数——你可以把它理解成给一个最小值和最大值屏幕多宽它就自动取中间合适的数。在 700px、600px、500px 三个屏高断点处逐级收紧尺寸横屏小屏还会自动隐藏导航圆点这类装饰元素。为什么单文件意味着没有构建、没有部署、没有丢文件的风险内网电脑和会场备用机都能直接放。旧 PPT 也走同一条流水线做什么把 pptx 变成同样风格的网页幻灯片。怎么做优先用 Python 的 python-pptx 库把文字、图片、演讲者备注全部抽出来保持原页序抽完之后不另起炉灶直接进和新建完全相同的选风格、出样稿、生成流程。为什么复用一条链路转换件和新做件的质量标准一致不会出现转出来的比新做的差。几条碰了就翻车的死规矩这套技能把硬性规则写进了文档见 SKILL.md 和 STYLE_PRESETS.md违反任何一条产物基本不能看死规矩违反会怎样每页高度锁定为 100vh / 100dvh并设 overflow: hidden只写 vh 不写 dvh 的话手机浏览器地址栏一收放内容就被裁掉一块所有字号、间距必须用 clamp() 随视口缩放写死 px 后小屏上字大得顶出页面大屏上又空旷得可怜内容放不下就拆页严禁靠缩小字号硬塞缩到 0.5rem 的蚂蚁体台下谁也读不了密度上限内容页 4~6 条要点、网格最多 6 张卡、代码 8~10 行超了就变成项目符号墙演讲节奏被一页打断图片最高不超过视口一半左右且 object-fit: contain一张大图把整页撑爆标题被挤到屏幕外尊重 prefers-reduced-motion动效可整体降级对前庭敏感的用户盯着旋转渐入的页面会头晕另外它还点了一个容易踩的 CSS 坑clamp() 不能写负号取反像-clamp(...)这种是非法语法。从你的输入到最终交付动线长这样第一步你给什么三选一——新建给主题、笔记或完整文稿、转换给 .ppt/.pptx、增强给已有 HTML。它只会追问最少的问题用途路演、教学、大会还是内部汇报、篇幅短 5~10 页 / 中 10~20 页 / 长 20 页、内容到什么程度了。有文案就先粘文案别急着谈样式。第二步它走哪些步骤选定或样稿定风格生成presentation.html含图片时才多一个 assets 目录内置键盘、滚轮、触摸三种翻页和一个进度指示器进场动画交给 Intersection Observer 触发。最后按 5 种屏幕尺寸自查1920×1080、1280×720、768×1024、375×667、667×375确认没有一页溢出、键盘能翻。第三步你拿到什么一个 HTML 文件外加一段交接说明——文件路径、用了哪个预设、总共几页、改哪几个 CSS 变量能整套换肤。临时样稿默认删掉你要求保留才留。打开方式按系统来# 三种系统各自的双击式打开命令 macOS: open presentation.html Linux: xdg-open presentation.html Windows: start presentation.html和其他方案差在哪对比维度Reveal.js 等传统框架frontend-slides交付形态多文件、带依赖通常要构建或静态托管单个 HTMLCSS/JS 内联双击即放响应式做法逐个手写固定断点和媒体查询clamp() 平滑缩放外加 3 个屏高断点兜底风格确定方式翻模板库靠看感觉先定情绪基调再出 3 份单页样稿让你挑内容约束框架不限靠开发者自觉页型密度有硬上限超了拆页功能上它不是超集没有演讲者提词视图、没有多人协作。它的赌注是约束换交付速度——把选择权压缩到 3 张样稿和一组死规矩里换来一份你不需要再修任何一行代码就能直接讲的片子。该用它还是别用它回到开头的场景如果你要赶一场分享、想把旧 PPT 翻新成能到处发的单文件、或者只是想把一版 HTML 幻灯片的版式做整齐frontend-slides 是合适的选择按给内容、挑样稿、收文件三步走完就行。反过来如果你的片子需要演讲者模式、多人在线编辑或者要塞进公司现有的前端工程里长期维护选 Reveal.js 这类可工程化扩展的框架更稳。一句话一次性交付、强调打开就能讲用它要长期迭代、多人共建用它当参考标准别当主框架。【免费下载链接】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），仅供参考 把“我要一套PPT“变成双击就开的单文件网页：frontend-slides 的完整规则与实操指南
把我要一套PPT变成双击就开的单文件网页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 是 ECC 仓库里的一个 HTML 演示文稿生成技能你给它一个主题、一份大纲或一份旧 PPT它还你一个在浏览器里双击就能放的单 HTML 文件。最核心的特点是一页锁死一个视口——每页高度刚好等于屏幕高度页内绝不出现滚动条且整个文件零外部依赖。 这几个场景你会真的用到它先说场景再说原理。你大概率会在下面三种情况里碰到它马上要上台讲内部分享、大会发言临时起意写份 PPT 来不及你想直接产出一份能在任何机器上打开的网页版讲稿手里有一份 pptx 想翻新公司发来的 PowerPoint 模板很土你想把它变成可在浏览器演示的网页版本已有一版 HTML 幻灯片布局和动画有点糙你不想推倒重来只希望它按一套明确规则被重排、重做动效。它和 Reveal.js 这类框架最大的区别不在功能数量而在于交付物——它给的是你能直接发进邮箱、拷进 U 盘的单个文件。幕后是怎么跑的三步拆透先出样稿让你挑而不是问你喜欢什么颜色做什么帮你确定视觉风格但不用问卷。怎么做你只回答一个问题——这套片子想让人印象深刻、兴奋、专注还是受启发。然后它会在一个预览目录里生成 3 个单页样稿每个都是自包含的小 HTML各自演示一种字体、配色和动效单页内容控制在百行以内。你挑一个或者要求把 A 的配色和 B 的排版拼一起。如果你已经明确要哪种预设样稿环节直接跳过。为什么审美是看得到、说不清的东西3 张实打实的样稿比 10 个问题更能定位你的偏好。所有代码塞进一个文件屏幕缩放靠一套公式做什么生成最终可交付的演示文件。怎么做CSS 和 JavaScript 全部内联进 HTML字体只从 Google Fonts 或 Fontshare 在线加载支持字体交换不阻塞渲染。字号、行距、内边距统一交给 CSS 的 clamp() 函数——你可以把它理解成给一个最小值和最大值屏幕多宽它就自动取中间合适的数。在 700px、600px、500px 三个屏高断点处逐级收紧尺寸横屏小屏还会自动隐藏导航圆点这类装饰元素。为什么单文件意味着没有构建、没有部署、没有丢文件的风险内网电脑和会场备用机都能直接放。旧 PPT 也走同一条流水线做什么把 pptx 变成同样风格的网页幻灯片。怎么做优先用 Python 的 python-pptx 库把文字、图片、演讲者备注全部抽出来保持原页序抽完之后不另起炉灶直接进和新建完全相同的选风格、出样稿、生成流程。为什么复用一条链路转换件和新做件的质量标准一致不会出现转出来的比新做的差。几条碰了就翻车的死规矩这套技能把硬性规则写进了文档见 SKILL.md 和 STYLE_PRESETS.md违反任何一条产物基本不能看死规矩违反会怎样每页高度锁定为 100vh / 100dvh并设 overflow: hidden只写 vh 不写 dvh 的话手机浏览器地址栏一收放内容就被裁掉一块所有字号、间距必须用 clamp() 随视口缩放写死 px 后小屏上字大得顶出页面大屏上又空旷得可怜内容放不下就拆页严禁靠缩小字号硬塞缩到 0.5rem 的蚂蚁体台下谁也读不了密度上限内容页 4~6 条要点、网格最多 6 张卡、代码 8~10 行超了就变成项目符号墙演讲节奏被一页打断图片最高不超过视口一半左右且 object-fit: contain一张大图把整页撑爆标题被挤到屏幕外尊重 prefers-reduced-motion动效可整体降级对前庭敏感的用户盯着旋转渐入的页面会头晕另外它还点了一个容易踩的 CSS 坑clamp() 不能写负号取反像-clamp(...)这种是非法语法。从你的输入到最终交付动线长这样第一步你给什么三选一——新建给主题、笔记或完整文稿、转换给 .ppt/.pptx、增强给已有 HTML。它只会追问最少的问题用途路演、教学、大会还是内部汇报、篇幅短 5~10 页 / 中 10~20 页 / 长 20 页、内容到什么程度了。有文案就先粘文案别急着谈样式。第二步它走哪些步骤选定或样稿定风格生成presentation.html含图片时才多一个 assets 目录内置键盘、滚轮、触摸三种翻页和一个进度指示器进场动画交给 Intersection Observer 触发。最后按 5 种屏幕尺寸自查1920×1080、1280×720、768×1024、375×667、667×375确认没有一页溢出、键盘能翻。第三步你拿到什么一个 HTML 文件外加一段交接说明——文件路径、用了哪个预设、总共几页、改哪几个 CSS 变量能整套换肤。临时样稿默认删掉你要求保留才留。打开方式按系统来# 三种系统各自的双击式打开命令 macOS: open presentation.html Linux: xdg-open presentation.html Windows: start presentation.html和其他方案差在哪对比维度Reveal.js 等传统框架frontend-slides交付形态多文件、带依赖通常要构建或静态托管单个 HTMLCSS/JS 内联双击即放响应式做法逐个手写固定断点和媒体查询clamp() 平滑缩放外加 3 个屏高断点兜底风格确定方式翻模板库靠看感觉先定情绪基调再出 3 份单页样稿让你挑内容约束框架不限靠开发者自觉页型密度有硬上限超了拆页功能上它不是超集没有演讲者提词视图、没有多人协作。它的赌注是约束换交付速度——把选择权压缩到 3 张样稿和一组死规矩里换来一份你不需要再修任何一行代码就能直接讲的片子。该用它还是别用它回到开头的场景如果你要赶一场分享、想把旧 PPT 翻新成能到处发的单文件、或者只是想把一版 HTML 幻灯片的版式做整齐frontend-slides 是合适的选择按给内容、挑样稿、收文件三步走完就行。反过来如果你的片子需要演讲者模式、多人在线编辑或者要塞进公司现有的前端工程里长期维护选 Reveal.js 这类可工程化扩展的框架更稳。一句话一次性交付、强调打开就能讲用它要长期迭代、多人共建用它当参考标准别当主框架。【免费下载链接】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），仅供参考