企业官网建设流程全解析

一键生成零依赖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/ECC

frontend-slides 是 ECC 项目中的一个 HTML 演示文稿生成技能。它能从你的草稿、笔记或 PPT 出发，产出单文件、零依赖、打开即用的 HTML 幻灯片，内置 3 种风格预览和 12 套视觉预设。

为什么需要一个零依赖 HTML 演示文稿

如果你用 Reveal.js、Slidev 这类框架做过网页演示，大概遇到过几件事：装依赖、管版本、跑构建，最后导出的文件一挪就坏；换个屏幕尺寸，内容就溢出，一页 PPT 里出现一条滚动条，现场很尴尬。

frontend-slides 的做法反过来：交付物只有一个 HTML 文件，CSS 和 JS 全部内联，不用安装任何东西，双击就能放映。它对每一页还有一条硬约束——内容必须装进一个屏幕（100dvh），装不下就拆页，绝不出滚动条。

三种上手方式：新建、PPT 转 HTML、增强现有稿

从零新建

1. 告诉它主题或直接把文案贴给它，并说明用途（路演、教学、内部分享）和长度（5-10 页 / 10-20 页 / 20+ 页）。
2. 它不会问你"喜欢什么颜色"，而是先生成3 张单页 HTML 预览，让你直接看效果。
3. 挑中一个（或指定混搭），得到presentation.html单文件成品。

PPT 一键转换

1. 用 python-pptx 解析.pptx，抽出文字、图片和演讲者备注。
2. 保留原始页序和素材，图片压缩后放进assets/目录。
3. 进入和新建一样的选风格流程，输出零依赖的 HTML 版本。

增强现有演示

1. 指定要改的地方：版式、动效还是字体排印。
2. 按密度上限重排内容（代码页最多 8-10 行、功能卡片最多 6 张等）。
3. 在 5 种分辨率（从 1920x1080 到 375x667）下复检无溢出后交付。

更多规则细节可查 skills/frontend-slides/SKILL.md。

视口适配是怎么做到的：三个核心模块

先看结论：每个模块的输入输出如下。

技术上靠两件事：密度上限和自适应缩放。

• 密度上限：标题页只放 1 个主标题 + 1 个副标题，内容页 1 个标题 + 4-6 条要点，图片页图片高度不超过 60vh。超了就拆页，不缩字。
• 自适应缩放：所有字号和间距用clamp()函数（CSS 里给一个"最小值、期望值、最大值"区间的写法）定义，屏幕从小变大时平滑过渡，不用手写一堆媒体查询。只针对矮屏幕保留 700px、600px、500px 三个断点做微调。

核心就这一段必装 CSS，每份生成的演示都会带上：

.slide { width: 100vw; height: 100vh; height: 100dvh; /* 动态视口，兼容手机地址栏 */ overflow: hidden; /* 禁止页内滚动 */ scroll-snap-align: start; }

12 套预设按情绪分组：自信型（Bold Signal、Electric Studio 等）适合发布演讲，专注型（Swiss Modern、Paper & Ink）适合技术报告，完整目录见 STYLE_PRESETS.md。

与传统框架对比：单文件 vs 多文件

动效层面也做了取舍：动画优先走 CSS transform 和 opacity（不触发重排），复杂效果只在进入视口时触发，并通过prefers-reduced-motion尊重系统的"减少动态"设置。

生态联动：和其他技能怎么配合

ECC 里的技能是组合着用的：

• 🔗liquid-glass-design：给演示稿叠加苹果风格的玻璃拟态质感
• e2e-testing：用自动化浏览器对成品做跨分辨率回归验证
• frontend-patterns：补充幻灯片周边组件和交互模式

预设本身也是可扩展的：情绪到风格的映射表只有 4 类 12 条，团队完全可以按自己产品的调性追加新预设，动效写法参考 animation-patterns.md。

写在最后

一句话：frontend-slides 把"选风格、控密度、适配屏幕"这三件最容易翻车的事固化成了规则，你只管内容和情绪词。它适合三类人——要临时做路演或分享但不想装构建工具的人、手里有 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