一个没有滚动条的 HTML 文件frontend-slides 的 5 条硬约束与 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/ECCfrontend-slides 是 ECC 项目里生成零依赖单文件 HTML 演示文稿的技能。它强制每页幻灯片完整占满一个视口、不允许内部滚动把 12 套视觉预设按情绪做映射最终产出一个双击就能打开的 presentation.html。从一份 PPT 到一个 HTML 文件工作流如何分流你跟 Agent 说帮我做个演示frontend-slides 不会直接动手写代码。它先判断你属于哪条路径新建你手里有主题、笔记或完整文稿、PPT 转换你有 .ppt/.pptx 文件、增强你已有 HTML 幻灯片想改进布局、动画或排版。三条路径都要先过内容发现而它只问三个问题问题选项用途路演、教学、大会演讲、内部汇报长度短 5–10 页 / 中 10–20 页 / 长 20 页内容状态成稿、粗略笔记、只有主题如果你已经有内容它会先让你把文字贴进来再谈样式。这个顺序是刻意的风格应该由内容决定而不是反过来。路径定了但真正决定成品质量的是一套渲染约束。 5 条硬约束为什么单页永远不出现滚动条frontend-slides 的核心不是风格生成而是视口适配viewport fit保证每页幻灯片完整占满屏幕且不产生滚动条体系一共五条高度锁死每个 .slide 同时写height: 100vh和height: 100dvhdvh 是动态视口单位指移动端浏览器窗口实际占用的高度能消除工具栏伸缩造成的偏移再加overflow: hidden从 CSS 层面禁止内部滚动。溢出就拆页内容放不下时拆成两页绝不靠缩小字号硬塞。密度上限标题页 1 个标题 1 个副标题内容页 4–6 条要点或 2 个短段网格页6 张卡片封顶代码页8–10 行封顶引用页 1 条引文 出处。连续缩放所有字号和间距走 clamp()一个传入最小值、理想值、最大值的 CSS 函数让尺寸随视口宽度平滑变化另设 700/600/500px 三个短屏高度断点600px 档还会隐藏导航圆点和装饰元素。分辨率验证交付前在 1920×1080、1280×720、768×1024、375×667、667×375 五档尺寸下逐一检查有浏览器自动化环境时它会自动验证无溢出、键盘导航可用。强制基础 CSS 的核心片段.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; }约束管住了骨架那脸面由什么决定这一环最容易让用户抓狂。 不让你从色卡里挑视觉探索与 12 套预设选择法技能的默认流程是展示而不是询问。它先问一个问题——这份演示希望给人什么感觉印象深刻、兴奋、专注还是被启发——然后在 .ecc-design/slide-previews/ 目录生成3 种单页预览文件。每个预览都是自包含的 HTML内容控制在 100 行以内用一页就展示清楚字体、配色和动画。你看到的是 3 个真实画面不是 12 个风格名。选定一种、或指明要混合哪两个预览里的元素风格就定了如果你能直接点名预设比如用 Neon Cyber预览环节整个跳过。12 套风格预设与情绪的对应关系情绪预设典型场景自信 / 印象深刻Bold Signal、Electric Studio、Dark Botanical主题演讲、产品发布、路演活力 / 兴奋Creative Voltage、Neon Cyber、Split Pastel创意工作室、品牌故事平静 / 专注Notebook Tabs、Paper Ink、Swiss Modern技术报告、数据分析启发 / 被打动Dark Botanical、Vintage Editorial、Pastel Geometry思想领袖、教育内容每套预设自带字体组合、配色和动画气质动画也按情绪走商务场景用克制的 200–300ms 过渡技术场景用辉光和粒子动效。骨架和脸面都定了一份 PPT 进来会经历什么一份 PPT 的真实旅程转换不是逐页翻译顺序是固定的提取用 python-pptx能读取 PPTX 文件内部 XML 结构的 Python 库解析文件抽走文本、图片和演讲者备注。保留维持原幻灯片顺序演讲备注完整保留抽出的图片资源放进 assets/ 目录。分类判断每页类型标题、内容、代码、图片套用上面那套密度上限。选风格提取结果进入与新建完全相同的视觉探索流程。整个过程只依赖 Python跨平台跑通不碰任何 macOS 专属工具。⚡ 为什么单文件反而跑得快零依赖的直接回报是全部 CSS 和 JS 内联进 HTML零 HTTP 请求无构建步骤双击即开。字体走 Google Fonts 或 Fontshare用 woff2 格式加 display swap先用后备字体显示正文字体加载完再替换避免白屏。动画只用 transform 和 opacity 这两个走 GPU 合成层、不触发重排的属性由 Intersection Observer浏览器原生的元素进入视口检测 API在幻灯片滚入时触发初始渲染不播任何动画。可访问性同样是硬要求语义标签main/section/nav、键盘全控制方向键、PageUp/Down、Home/End加触摸滑动和滚轮prefers-reduced-motion 生效时所有动画压到 0.01ms。还有一个容易中招的静默坑-clamp(...)这种取负函数会被浏览器直接忽略布局悄悄错位。需要取负时必须写成right: calc(-1 * clamp(28px, 3.5vw, 44px));但单文件也不是银弹没有服务器、没有评论区、没有协作编辑。值不值得换与 Reveal.js / Slidev 的对比和适用边界维度传统框架frontend-slides依赖npm 安装 构建工具链零依赖单 HTML 文件视口策略媒体查询断点调整100dvh 锁死 密度上限溢出只能拆页字号缩放固定断点跳变clamp() 连续缩放部署静态站托管双击打开文件直接发邮箱风格差异化模板市场12 套预设 情绪映射边界很清楚演讲、路演、教学这类打开就能讲的内容单文件架构是优势需要评论、投票、多人协作这类服务端能力或者演示要由团队长期维护传统框架仍是对的工具。下一步可以试把一页塞了 14 条要点的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 一个没有滚动条的 HTML 文件：frontend-slides 的 5 条硬约束与 12 套预设选择法
一个没有滚动条的 HTML 文件frontend-slides 的 5 条硬约束与 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/ECCfrontend-slides 是 ECC 项目里生成零依赖单文件 HTML 演示文稿的技能。它强制每页幻灯片完整占满一个视口、不允许内部滚动把 12 套视觉预设按情绪做映射最终产出一个双击就能打开的 presentation.html。从一份 PPT 到一个 HTML 文件工作流如何分流你跟 Agent 说帮我做个演示frontend-slides 不会直接动手写代码。它先判断你属于哪条路径新建你手里有主题、笔记或完整文稿、PPT 转换你有 .ppt/.pptx 文件、增强你已有 HTML 幻灯片想改进布局、动画或排版。三条路径都要先过内容发现而它只问三个问题问题选项用途路演、教学、大会演讲、内部汇报长度短 5–10 页 / 中 10–20 页 / 长 20 页内容状态成稿、粗略笔记、只有主题如果你已经有内容它会先让你把文字贴进来再谈样式。这个顺序是刻意的风格应该由内容决定而不是反过来。路径定了但真正决定成品质量的是一套渲染约束。 5 条硬约束为什么单页永远不出现滚动条frontend-slides 的核心不是风格生成而是视口适配viewport fit保证每页幻灯片完整占满屏幕且不产生滚动条体系一共五条高度锁死每个 .slide 同时写height: 100vh和height: 100dvhdvh 是动态视口单位指移动端浏览器窗口实际占用的高度能消除工具栏伸缩造成的偏移再加overflow: hidden从 CSS 层面禁止内部滚动。溢出就拆页内容放不下时拆成两页绝不靠缩小字号硬塞。密度上限标题页 1 个标题 1 个副标题内容页 4–6 条要点或 2 个短段网格页6 张卡片封顶代码页8–10 行封顶引用页 1 条引文 出处。连续缩放所有字号和间距走 clamp()一个传入最小值、理想值、最大值的 CSS 函数让尺寸随视口宽度平滑变化另设 700/600/500px 三个短屏高度断点600px 档还会隐藏导航圆点和装饰元素。分辨率验证交付前在 1920×1080、1280×720、768×1024、375×667、667×375 五档尺寸下逐一检查有浏览器自动化环境时它会自动验证无溢出、键盘导航可用。强制基础 CSS 的核心片段.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; }约束管住了骨架那脸面由什么决定这一环最容易让用户抓狂。 不让你从色卡里挑视觉探索与 12 套预设选择法技能的默认流程是展示而不是询问。它先问一个问题——这份演示希望给人什么感觉印象深刻、兴奋、专注还是被启发——然后在 .ecc-design/slide-previews/ 目录生成3 种单页预览文件。每个预览都是自包含的 HTML内容控制在 100 行以内用一页就展示清楚字体、配色和动画。你看到的是 3 个真实画面不是 12 个风格名。选定一种、或指明要混合哪两个预览里的元素风格就定了如果你能直接点名预设比如用 Neon Cyber预览环节整个跳过。12 套风格预设与情绪的对应关系情绪预设典型场景自信 / 印象深刻Bold Signal、Electric Studio、Dark Botanical主题演讲、产品发布、路演活力 / 兴奋Creative Voltage、Neon Cyber、Split Pastel创意工作室、品牌故事平静 / 专注Notebook Tabs、Paper Ink、Swiss Modern技术报告、数据分析启发 / 被打动Dark Botanical、Vintage Editorial、Pastel Geometry思想领袖、教育内容每套预设自带字体组合、配色和动画气质动画也按情绪走商务场景用克制的 200–300ms 过渡技术场景用辉光和粒子动效。骨架和脸面都定了一份 PPT 进来会经历什么一份 PPT 的真实旅程转换不是逐页翻译顺序是固定的提取用 python-pptx能读取 PPTX 文件内部 XML 结构的 Python 库解析文件抽走文本、图片和演讲者备注。保留维持原幻灯片顺序演讲备注完整保留抽出的图片资源放进 assets/ 目录。分类判断每页类型标题、内容、代码、图片套用上面那套密度上限。选风格提取结果进入与新建完全相同的视觉探索流程。整个过程只依赖 Python跨平台跑通不碰任何 macOS 专属工具。⚡ 为什么单文件反而跑得快零依赖的直接回报是全部 CSS 和 JS 内联进 HTML零 HTTP 请求无构建步骤双击即开。字体走 Google Fonts 或 Fontshare用 woff2 格式加 display swap先用后备字体显示正文字体加载完再替换避免白屏。动画只用 transform 和 opacity 这两个走 GPU 合成层、不触发重排的属性由 Intersection Observer浏览器原生的元素进入视口检测 API在幻灯片滚入时触发初始渲染不播任何动画。可访问性同样是硬要求语义标签main/section/nav、键盘全控制方向键、PageUp/Down、Home/End加触摸滑动和滚轮prefers-reduced-motion 生效时所有动画压到 0.01ms。还有一个容易中招的静默坑-clamp(...)这种取负函数会被浏览器直接忽略布局悄悄错位。需要取负时必须写成right: calc(-1 * clamp(28px, 3.5vw, 44px));但单文件也不是银弹没有服务器、没有评论区、没有协作编辑。值不值得换与 Reveal.js / Slidev 的对比和适用边界维度传统框架frontend-slides依赖npm 安装 构建工具链零依赖单 HTML 文件视口策略媒体查询断点调整100dvh 锁死 密度上限溢出只能拆页字号缩放固定断点跳变clamp() 连续缩放部署静态站托管双击打开文件直接发邮箱风格差异化模板市场12 套预设 情绪映射边界很清楚演讲、路演、教学这类打开就能讲的内容单文件架构是优势需要评论、投票、多人协作这类服务端能力或者演示要由团队长期维护传统框架仍是对的工具。下一步可以试把一页塞了 14 条要点的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考