一个没有滚动条的 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/ECC

frontend-slides 是 ECC 项目里生成零依赖单文件 HTML 演示文稿的技能。它强制每页幻灯片完整占满一个视口、不允许内部滚动，把 12 套视觉预设按情绪做映射，最终产出一个双击就能打开的 presentation.html。

从一份 PPT 到一个 HTML 文件：工作流如何分流

你跟 Agent 说"帮我做个演示"，frontend-slides 不会直接动手写代码。它先判断你属于哪条路径：新建（你手里有主题、笔记或完整文稿）、PPT 转换（你有 .ppt/.pptx 文件）、增强（你已有 HTML 幻灯片，想改进布局、动画或排版）。

三条路径都要先过内容发现，而它只问三个问题：

如果你已经有内容，它会先让你把文字贴进来，再谈样式。这个顺序是刻意的：风格应该由内容决定，而不是反过来。

路径定了，但真正决定成品质量的，是一套渲染约束。

🧩 5 条硬约束：为什么单页永远不出现滚动条

frontend-slides 的核心不是风格生成，而是视口适配（viewport fit，保证每页幻灯片完整占满屏幕且不产生滚动条）体系，一共五条：

1. 高度锁死：每个 .slide 同时写height: 100vh和height: 100dvh（dvh 是动态视口单位，指移动端浏览器窗口实际占用的高度，能消除工具栏伸缩造成的偏移），再加overflow: hidden，从 CSS 层面禁止内部滚动。
2. 溢出就拆页：内容放不下时拆成两页，绝不靠缩小字号硬塞。
3. 密度上限：标题页 1 个标题 + 1 个副标题，内容页 4–6 条要点或 2 个短段，网格页6 张卡片封顶，代码页8–10 行封顶，引用页 1 条引文 + 出处。
4. 连续缩放：所有字号和间距走 clamp()（一个传入最小值、理想值、最大值的 CSS 函数，让尺寸随视口宽度平滑变化），另设 700/600/500px 三个短屏高度断点，600px 档还会隐藏导航圆点和装饰元素。
5. 分辨率验证：交付前在 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 套风格预设与情绪的对应关系：

每套预设自带字体组合、配色和动画气质，动画也按情绪走：商务场景用克制的 200–300ms 过渡，技术场景用辉光和粒子动效。

骨架和脸面都定了，一份 PPT 进来会经历什么？

一份 PPT 的真实旅程

转换不是逐页翻译，顺序是固定的：

1. 提取：用 python-pptx（能读取 PPTX 文件内部 XML 结构的 Python 库）解析文件，抽走文本、图片和演讲者备注。
2. 保留：维持原幻灯片顺序，演讲备注完整保留，抽出的图片资源放进 assets/ 目录。
3. 分类：判断每页类型（标题、内容、代码、图片），套用上面那套密度上限。
4. 选风格：提取结果进入与新建完全相同的视觉探索流程。

整个过程只依赖 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 的对比和适用边界

边界很清楚：演讲、路演、教学这类"打开就能讲"的内容，单文件架构是优势；需要评论、投票、多人协作这类服务端能力，或者演示要由团队长期维护，传统框架仍是对的工具。

下一步可以试：把一页塞了 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