一键生成零依赖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 是 ECC 项目中的一个 HTML 演示文稿生成技能。它能从你的草稿、笔记或 PPT 出发产出单文件、零依赖、打开即用的 HTML 幻灯片内置 3 种风格预览和 12 套视觉预设。为什么需要一个零依赖 HTML 演示文稿如果你用 Reveal.js、Slidev 这类框架做过网页演示大概遇到过几件事装依赖、管版本、跑构建最后导出的文件一挪就坏换个屏幕尺寸内容就溢出一页 PPT 里出现一条滚动条现场很尴尬。frontend-slides 的做法反过来交付物只有一个 HTML 文件CSS 和 JS 全部内联不用安装任何东西双击就能放映。它对每一页还有一条硬约束——内容必须装进一个屏幕100dvh装不下就拆页绝不出滚动条。三种上手方式新建、PPT 转 HTML、增强现有稿从零新建告诉它主题或直接把文案贴给它并说明用途路演、教学、内部分享和长度5-10 页 / 10-20 页 / 20 页。它不会问你喜欢什么颜色而是先生成3 张单页 HTML 预览让你直接看效果。挑中一个或指定混搭得到presentation.html单文件成品。PPT 一键转换用 python-pptx 解析.pptx抽出文字、图片和演讲者备注。保留原始页序和素材图片压缩后放进assets/目录。进入和新建一样的选风格流程输出零依赖的 HTML 版本。增强现有演示指定要改的地方版式、动效还是字体排印。按密度上限重排内容代码页最多 8-10 行、功能卡片最多 6 张等。在 5 种分辨率从 1920x1080 到 375x667下复检无溢出后交付。更多规则细节可查 skills/frontend-slides/SKILL.md。视口适配是怎么做到的三个核心模块先看结论每个模块的输入输出如下。模块输入输出 视觉探索引擎一个情绪词印象深刻 / 活力 / 专注 / 启发3 个自包含的单页预览 HTML样式预设库情绪或预设名12 套预设之一字体、配色、动画全套视口约束引擎每页内容恰好占满一屏、无滚动的幻灯片技术上靠两件事密度上限和自适应缩放。密度上限标题页只放 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 多文件维度传统框架Reveal.js / Slidev 等frontend-slides文件结构多文件工程需要构建工具单文件CSS/JS 内联依赖npm 安装、版本管理零依赖响应式手写断点和媒体查询clamp() 自动缩放 3 个矮屏断点交付构建、部署后分享发一个文件浏览器直接打开多端验证逐设备手动测固定 5 档分辨率复检可接浏览器自动化动效层面也做了取舍动画优先走 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创作声明：本文部分内容由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 是 ECC 项目中的一个 HTML 演示文稿生成技能。它能从你的草稿、笔记或 PPT 出发产出单文件、零依赖、打开即用的 HTML 幻灯片内置 3 种风格预览和 12 套视觉预设。为什么需要一个零依赖 HTML 演示文稿如果你用 Reveal.js、Slidev 这类框架做过网页演示大概遇到过几件事装依赖、管版本、跑构建最后导出的文件一挪就坏换个屏幕尺寸内容就溢出一页 PPT 里出现一条滚动条现场很尴尬。frontend-slides 的做法反过来交付物只有一个 HTML 文件CSS 和 JS 全部内联不用安装任何东西双击就能放映。它对每一页还有一条硬约束——内容必须装进一个屏幕100dvh装不下就拆页绝不出滚动条。三种上手方式新建、PPT 转 HTML、增强现有稿从零新建告诉它主题或直接把文案贴给它并说明用途路演、教学、内部分享和长度5-10 页 / 10-20 页 / 20 页。它不会问你喜欢什么颜色而是先生成3 张单页 HTML 预览让你直接看效果。挑中一个或指定混搭得到presentation.html单文件成品。PPT 一键转换用 python-pptx 解析.pptx抽出文字、图片和演讲者备注。保留原始页序和素材图片压缩后放进assets/目录。进入和新建一样的选风格流程输出零依赖的 HTML 版本。增强现有演示指定要改的地方版式、动效还是字体排印。按密度上限重排内容代码页最多 8-10 行、功能卡片最多 6 张等。在 5 种分辨率从 1920x1080 到 375x667下复检无溢出后交付。更多规则细节可查 skills/frontend-slides/SKILL.md。视口适配是怎么做到的三个核心模块先看结论每个模块的输入输出如下。模块输入输出 视觉探索引擎一个情绪词印象深刻 / 活力 / 专注 / 启发3 个自包含的单页预览 HTML样式预设库情绪或预设名12 套预设之一字体、配色、动画全套视口约束引擎每页内容恰好占满一屏、无滚动的幻灯片技术上靠两件事密度上限和自适应缩放。密度上限标题页只放 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 多文件维度传统框架Reveal.js / Slidev 等frontend-slides文件结构多文件工程需要构建工具单文件CSS/JS 内联依赖npm 安装、版本管理零依赖响应式手写断点和媒体查询clamp() 自动缩放 3 个矮屏断点交付构建、部署后分享发一个文件浏览器直接打开多端验证逐设备手动测固定 5 档分辨率复检可接浏览器自动化动效层面也做了取舍动画优先走 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考