ECC Frontend Slides零依赖 HTML 演示文稿生成的完整实践指南【免费下载链接】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/ECCECC Frontend Slides 是 ECC 智能体技能库中的一个演示文稿生成模块你给它主题、笔记或一份 PPTX它会产出一个零依赖的单文件 HTML 演示任何现代浏览器双击即开。它面向需要做技术分享、产品推介和内部培训的开发者与技术团队也适合不懂设计但想把幻灯片做“像样”的人。一、项目概览它是什么、为什么存在Frontend Slides 是 ECC 开源仓库中skills/frontend-slides/下的一个技能模块解决的问题很具体传统演示工具逼你在固定高度的文本框、字体搭配和导出格式之间反复拉扯改到一半想换风格基本等于重做。Frontend Slides 的思路是反过来——用一次对话确定内容和视觉方向直接输出自包含的 HTMLCSS 与 JS 全部内联不引用任何外部库。ECC 本身是一个面向 Claude Code、Codex、Opencode、Cursor 等智能体环境的技能与规则集合包含 300 多个技能模块Frontend Slides 就是其中负责“做幻灯片”的那一个。产物是presentation.html单文件含图片时附一个assets/目录可以进 Git 版本库、离线打开、直接投屏这是它和 PowerPoint 类工具最本质的区别演示文稿从二进制文件变成了纯文本代码。二、快速上手3 分钟从 0 到跑通第一次 Frontend Slides最短体验路径只需要“装上 ECC 一段自然语言”不需要额外安装任何运行时。获取项目git clone https://gitcode.com/GitHub_Trending/ev/ECC加载技能在 Claude Code 中执行/plugin install eccecc或把skills/目录挂到你的智能体配置里。发起请求例如“做一个 10 页的 Frontend Slides HTML 演示介绍一个开源项目风格用 Terminal Green。”模型会先生成 3 份单页风格预览到.ecc-design/slide-previews/挑一个回复“用这个风格生成完整演示”。双击生成的presentation.html方向键翻页——第一次跑通完成。三、核心功能矩阵功能一句话说明适用场景上手难度从零生成 HTML 演示基于主题或笔记输出零依赖单文件演示技术演讲、内部分享低PPTX 转换用 python-pptx 提取文字、图片与演讲者备注再重做为 HTML老材料翻新中视觉探索选风格先出 3 张预览页再拍板替代“凭想象选模板”非设计背景用户低12 种风格预设字体、配色、版式成组搭配并按情绪映射控制演示调性低视口强制适配每页锁定一屏字号与间距用 clamp() 弹性缩放多设备投屏低PDF 导出Playwright 按 1080p 逐页截图拼成横版 PDF存档、邮件分发中前四项解决“做得快、做得好看”后两项解决“输出稳定、便于分发”。下面挑四个核心功能讲清楚它们的运作方式。四、Frontend Slides 功能深挖每个核心功能到底怎么运作4.1 视口适配如何保证任何设备都不溢出① 功能定位解决“同一份演示在投影仪上正常、在手机上被截断”的老问题。② 实现原理每页.slide锁定100vh/100dvh并设overflow: hidden所有字号与间距走clamp()随视口缩放内容装不下时拆页而不是缩小文字。③ 关键基础样式出自 viewport-base.css.slide { width: 100vw; height: 100vh; height: 100dvh; /* 移动端动态视口 */ overflow: hidden; scroll-snap-align: start; } :root { --title-size: clamp(1.5rem, 5vw, 4rem); --slide-padding: clamp(1rem, 4vw, 4rem); }④ 实操提示生成后在 1920x1080、1280x720、768x1024、375x667、667x375 五个尺寸下过一遍横向手机这类高度低于 500px 的短屏最容易爆。4.2 视觉探索式选风格与 12 种预设① 功能定位让说不清“我想要什么风格”的人也能定下视觉方向。② 实现原理不让你在一堆形容词里猜而是先生成 3 份各自自包含的预览页每页控制在约 100 行内看完实物再决定保留哪个、混搭哪些元素。③ 预设按“情绪 → 风格”映射impressed 对 Bold Signal、Electric Studioenergetic 对 Neon Cyber、Creative Voltagefocused 对 Swiss Modern、Notebook Tabs。已知口味时直接报预设名即可比如 API/CLI 主题选 Terminal Green等宽字体 暗色终端绿AI 基建主题选 Neon Cyber青/品红辉光。④ 实操提示12 个预设的字体组合与标志性元素都列在 STYLE_PRESETS.md照着其中任意一条的描述写需求比凭感觉描述更省来回。4.3 PPTX 转换先提取再重做① 功能定位存量 PPT 材料不用重打直接升级成 HTML 演示。② 实现原理用 python-pptx 按顺序遍历每页幻灯片抽取标题、正文、图片落盘到assets/和演讲者备注输出结构化 JSON之后走与新建演示完全相同的选风格、生成流程页序与备注原样保留。③ 用法pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py old.pptx ./extracted④ 实操提示提取脚本见 extract-pptx.py如果环境装不上 python-pptx退路是逐页粘贴文本——效果取决于内容完整性图片则需手动导出放到assets/。4.4 PDF 导出给动画页打一份静态快照① 功能定位解决“HTML 演示没法塞进邮件附件”的问题。② 实现原理export-pdf.sh 先起一个本地静态服务器让字体和相对资源能加载再用 Playwright 无头浏览器对每个.slide在 1920x1080 下截图最后拼成横版分页 PDF。③ 用法bash skills/frontend-slides/scripts/export-pdf.sh presentation.html bash skills/frontend-slides/scripts/export-pdf.sh presentation.html --compact④ 实操提示PDF 保留颜色、字体和排版但不保留动画这是设计如此——PDF 负责存档和分发现场演示仍用 HTML--compact降到 1280x720文件体积能小约三成。五、场景实战不同人怎么用5.1 个人开发者一次技术大会分享场景描述你要在社区大会上做 15 分钟的开源项目演讲设备只有会场提供的一台投屏主机。推荐配置预设选 Neon Cyber 或 Terminal Green动画方向 Techy/Futuristic代码页每页不超过 10 行结尾页放一个可点击的演示链接。效果说明产物是单个 HTML 文件可以随项目仓库一起提交现场断网也能用方向键翻页即可开讲。5.2 团队产品推介材料现代化场景描述团队有一份传了多年的 PPTX 推介稿风格陈旧二进制文件没法做细粒度评审。推荐配置先用 extract-pptx.py 转换原始文件风格选 Bold Signal 或 Electric Studio演讲者备注保留作为口播脚本把产物提交进仓库做 PR 评审。效果说明材料变成 Git 友好的单文件 HTML改配色只动:root里的 CSS 变量评审走 diff不再为“谁动了模板”吵架。5.3 新手不懂设计的第一个演示场景描述有主题和一堆散乱笔记但对“选什么模板”毫无头绪。推荐配置不要指定风格走默认的视觉探索流程——先看 3 份预览用“保留这个配色、换那个字体”这类具体反馈收敛情绪描述从 impressed / energized / focused / inspired 里选一个。效果说明两三轮预览反馈后就能拿到方向明确的成品字号、间距、留白都由规范约束好不需要手工微调。六、进阶技巧与选型建议6.1 性能与体验优化要点动画只用 opacity 和 transform两者走 GPU 合成不触发重排。入场动画由 IntersectionObserver 触发.visible类切换而不是 JS 逐帧改样式。演示用图先缩到最长边 1200px 再引用用文件路径而非 base64避免 HTML 体积膨胀。保留prefers-reduced-motion降级分支基础样式已内置删掉它是不必要的。交付前可用浏览器自动化在目标分辨率下验证无溢出、键盘导航可用可结合 ECC 的 e2e-testing 技能做。6.2 什么情况不适合用它强品牌管控场景12 个预设有自己的视觉语言严格贴合 VI指定 logo、色值、字体授权的能力有限。逐帧级动画时间线需要精确到秒的多轨道动画控制时专业动效工具更合适。无现代浏览器的环境产物依赖 dvh、scroll-snap 等现代 CSS 特性只能打开旧版 WebView 的接收方会明显降级。6.3 版本选择与生态扩展技能目录随 ECC 主仓库一起更新没有独立版本号动手前以 skills/frontend-slides/SKILL.md 的流程为准周边技能frontend-patterns、liquid-glass-design、e2e-testing的入口可在 README.md 与 the-longform-guide.md 中查到。七、常见问题FAQ7.1 生成后运行需要联网吗不需要。CSS 和 JS 全部内联在文件里离线双击即可播放只有预设引用的 Google Fonts / Fontshare 网页字体在联网时生效断网时回退到系统字体版式不受影响。7.2 内容太多一页放不下怎么办规则是拆页而不是缩小。密度上限写死在技能规范里内容页最多 1 个标题加 4-6 条要点或 2 段短文功能网格最多 6 张卡代码最多 8-10 行。超了就拆成两页把字号压到不可读是明确禁止的反模式。7.3 PDF 导出会不会有损它是截图式导出颜色、字体和布局都保留但动画和交互不会进 PDF。这属于设计意图PDF 承担存档与邮件分发现场演示仍然用 HTML 文件。7.4 生成的文件能手动改吗可以。主题色、字体、字号都是:root下的 CSS 自定义属性改顶部几个值就换整体观感代码要求带注释交付模板参考见 html-template.md里面还包含可选的页内编辑与导出实现。八、小结与资源Frontend Slides 把“内容、风格、排版”压缩成一次对话产出可版本控制、可离线分发的单文件 HTML 演示代价是把精细控制交给模型和规范约束但对技术分享、推介和内部培训这类高频场景这个交换是划算的。核心技能规范skills/frontend-slides/SKILL.md风格预设与视口基础样式STYLE_PRESETS.mdHTML 模板与控制器实现html-template.md动画模式参考animation-patterns.mdPPTX 提取与 PDF 导出脚本scripts/项目主文档README.md找一份你一直压在收藏夹里的材料丢进对话里生成你的第一个 HTML 演示。【免费下载链接】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），仅供参考 ECC Frontend Slides：零依赖 HTML 演示文稿生成的完整实践指南
ECC Frontend Slides零依赖 HTML 演示文稿生成的完整实践指南【免费下载链接】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/ECCECC Frontend Slides 是 ECC 智能体技能库中的一个演示文稿生成模块你给它主题、笔记或一份 PPTX它会产出一个零依赖的单文件 HTML 演示任何现代浏览器双击即开。它面向需要做技术分享、产品推介和内部培训的开发者与技术团队也适合不懂设计但想把幻灯片做“像样”的人。一、项目概览它是什么、为什么存在Frontend Slides 是 ECC 开源仓库中skills/frontend-slides/下的一个技能模块解决的问题很具体传统演示工具逼你在固定高度的文本框、字体搭配和导出格式之间反复拉扯改到一半想换风格基本等于重做。Frontend Slides 的思路是反过来——用一次对话确定内容和视觉方向直接输出自包含的 HTMLCSS 与 JS 全部内联不引用任何外部库。ECC 本身是一个面向 Claude Code、Codex、Opencode、Cursor 等智能体环境的技能与规则集合包含 300 多个技能模块Frontend Slides 就是其中负责“做幻灯片”的那一个。产物是presentation.html单文件含图片时附一个assets/目录可以进 Git 版本库、离线打开、直接投屏这是它和 PowerPoint 类工具最本质的区别演示文稿从二进制文件变成了纯文本代码。二、快速上手3 分钟从 0 到跑通第一次 Frontend Slides最短体验路径只需要“装上 ECC 一段自然语言”不需要额外安装任何运行时。获取项目git clone https://gitcode.com/GitHub_Trending/ev/ECC加载技能在 Claude Code 中执行/plugin install eccecc或把skills/目录挂到你的智能体配置里。发起请求例如“做一个 10 页的 Frontend Slides HTML 演示介绍一个开源项目风格用 Terminal Green。”模型会先生成 3 份单页风格预览到.ecc-design/slide-previews/挑一个回复“用这个风格生成完整演示”。双击生成的presentation.html方向键翻页——第一次跑通完成。三、核心功能矩阵功能一句话说明适用场景上手难度从零生成 HTML 演示基于主题或笔记输出零依赖单文件演示技术演讲、内部分享低PPTX 转换用 python-pptx 提取文字、图片与演讲者备注再重做为 HTML老材料翻新中视觉探索选风格先出 3 张预览页再拍板替代“凭想象选模板”非设计背景用户低12 种风格预设字体、配色、版式成组搭配并按情绪映射控制演示调性低视口强制适配每页锁定一屏字号与间距用 clamp() 弹性缩放多设备投屏低PDF 导出Playwright 按 1080p 逐页截图拼成横版 PDF存档、邮件分发中前四项解决“做得快、做得好看”后两项解决“输出稳定、便于分发”。下面挑四个核心功能讲清楚它们的运作方式。四、Frontend Slides 功能深挖每个核心功能到底怎么运作4.1 视口适配如何保证任何设备都不溢出① 功能定位解决“同一份演示在投影仪上正常、在手机上被截断”的老问题。② 实现原理每页.slide锁定100vh/100dvh并设overflow: hidden所有字号与间距走clamp()随视口缩放内容装不下时拆页而不是缩小文字。③ 关键基础样式出自 viewport-base.css.slide { width: 100vw; height: 100vh; height: 100dvh; /* 移动端动态视口 */ overflow: hidden; scroll-snap-align: start; } :root { --title-size: clamp(1.5rem, 5vw, 4rem); --slide-padding: clamp(1rem, 4vw, 4rem); }④ 实操提示生成后在 1920x1080、1280x720、768x1024、375x667、667x375 五个尺寸下过一遍横向手机这类高度低于 500px 的短屏最容易爆。4.2 视觉探索式选风格与 12 种预设① 功能定位让说不清“我想要什么风格”的人也能定下视觉方向。② 实现原理不让你在一堆形容词里猜而是先生成 3 份各自自包含的预览页每页控制在约 100 行内看完实物再决定保留哪个、混搭哪些元素。③ 预设按“情绪 → 风格”映射impressed 对 Bold Signal、Electric Studioenergetic 对 Neon Cyber、Creative Voltagefocused 对 Swiss Modern、Notebook Tabs。已知口味时直接报预设名即可比如 API/CLI 主题选 Terminal Green等宽字体 暗色终端绿AI 基建主题选 Neon Cyber青/品红辉光。④ 实操提示12 个预设的字体组合与标志性元素都列在 STYLE_PRESETS.md照着其中任意一条的描述写需求比凭感觉描述更省来回。4.3 PPTX 转换先提取再重做① 功能定位存量 PPT 材料不用重打直接升级成 HTML 演示。② 实现原理用 python-pptx 按顺序遍历每页幻灯片抽取标题、正文、图片落盘到assets/和演讲者备注输出结构化 JSON之后走与新建演示完全相同的选风格、生成流程页序与备注原样保留。③ 用法pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py old.pptx ./extracted④ 实操提示提取脚本见 extract-pptx.py如果环境装不上 python-pptx退路是逐页粘贴文本——效果取决于内容完整性图片则需手动导出放到assets/。4.4 PDF 导出给动画页打一份静态快照① 功能定位解决“HTML 演示没法塞进邮件附件”的问题。② 实现原理export-pdf.sh 先起一个本地静态服务器让字体和相对资源能加载再用 Playwright 无头浏览器对每个.slide在 1920x1080 下截图最后拼成横版分页 PDF。③ 用法bash skills/frontend-slides/scripts/export-pdf.sh presentation.html bash skills/frontend-slides/scripts/export-pdf.sh presentation.html --compact④ 实操提示PDF 保留颜色、字体和排版但不保留动画这是设计如此——PDF 负责存档和分发现场演示仍用 HTML--compact降到 1280x720文件体积能小约三成。五、场景实战不同人怎么用5.1 个人开发者一次技术大会分享场景描述你要在社区大会上做 15 分钟的开源项目演讲设备只有会场提供的一台投屏主机。推荐配置预设选 Neon Cyber 或 Terminal Green动画方向 Techy/Futuristic代码页每页不超过 10 行结尾页放一个可点击的演示链接。效果说明产物是单个 HTML 文件可以随项目仓库一起提交现场断网也能用方向键翻页即可开讲。5.2 团队产品推介材料现代化场景描述团队有一份传了多年的 PPTX 推介稿风格陈旧二进制文件没法做细粒度评审。推荐配置先用 extract-pptx.py 转换原始文件风格选 Bold Signal 或 Electric Studio演讲者备注保留作为口播脚本把产物提交进仓库做 PR 评审。效果说明材料变成 Git 友好的单文件 HTML改配色只动:root里的 CSS 变量评审走 diff不再为“谁动了模板”吵架。5.3 新手不懂设计的第一个演示场景描述有主题和一堆散乱笔记但对“选什么模板”毫无头绪。推荐配置不要指定风格走默认的视觉探索流程——先看 3 份预览用“保留这个配色、换那个字体”这类具体反馈收敛情绪描述从 impressed / energized / focused / inspired 里选一个。效果说明两三轮预览反馈后就能拿到方向明确的成品字号、间距、留白都由规范约束好不需要手工微调。六、进阶技巧与选型建议6.1 性能与体验优化要点动画只用 opacity 和 transform两者走 GPU 合成不触发重排。入场动画由 IntersectionObserver 触发.visible类切换而不是 JS 逐帧改样式。演示用图先缩到最长边 1200px 再引用用文件路径而非 base64避免 HTML 体积膨胀。保留prefers-reduced-motion降级分支基础样式已内置删掉它是不必要的。交付前可用浏览器自动化在目标分辨率下验证无溢出、键盘导航可用可结合 ECC 的 e2e-testing 技能做。6.2 什么情况不适合用它强品牌管控场景12 个预设有自己的视觉语言严格贴合 VI指定 logo、色值、字体授权的能力有限。逐帧级动画时间线需要精确到秒的多轨道动画控制时专业动效工具更合适。无现代浏览器的环境产物依赖 dvh、scroll-snap 等现代 CSS 特性只能打开旧版 WebView 的接收方会明显降级。6.3 版本选择与生态扩展技能目录随 ECC 主仓库一起更新没有独立版本号动手前以 skills/frontend-slides/SKILL.md 的流程为准周边技能frontend-patterns、liquid-glass-design、e2e-testing的入口可在 README.md 与 the-longform-guide.md 中查到。七、常见问题FAQ7.1 生成后运行需要联网吗不需要。CSS 和 JS 全部内联在文件里离线双击即可播放只有预设引用的 Google Fonts / Fontshare 网页字体在联网时生效断网时回退到系统字体版式不受影响。7.2 内容太多一页放不下怎么办规则是拆页而不是缩小。密度上限写死在技能规范里内容页最多 1 个标题加 4-6 条要点或 2 段短文功能网格最多 6 张卡代码最多 8-10 行。超了就拆成两页把字号压到不可读是明确禁止的反模式。7.3 PDF 导出会不会有损它是截图式导出颜色、字体和布局都保留但动画和交互不会进 PDF。这属于设计意图PDF 承担存档与邮件分发现场演示仍然用 HTML 文件。7.4 生成的文件能手动改吗可以。主题色、字体、字号都是:root下的 CSS 自定义属性改顶部几个值就换整体观感代码要求带注释交付模板参考见 html-template.md里面还包含可选的页内编辑与导出实现。八、小结与资源Frontend Slides 把“内容、风格、排版”压缩成一次对话产出可版本控制、可离线分发的单文件 HTML 演示代价是把精细控制交给模型和规范约束但对技术分享、推介和内部培训这类高频场景这个交换是划算的。核心技能规范skills/frontend-slides/SKILL.md风格预设与视口基础样式STYLE_PRESETS.mdHTML 模板与控制器实现html-template.md动画模式参考animation-patterns.mdPPTX 提取与 PDF 导出脚本scripts/项目主文档README.md找一份你一直压在收藏夹里的材料丢进对话里生成你的第一个 HTML 演示。【免费下载链接】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），仅供参考