frontend-slides：零依赖生成动画HTML幻灯片，还能把PPT变成网页

frontend-slides零依赖生成动画HTML幻灯片还能把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内容已经备好了卡在怎么做一份好看的演示这一步Everything Claude Code 里的 frontend-slides 技能可以接住这类需求一次生成零依赖的 HTML 演示文稿——文件双击就能在浏览器里放映不用装任何库也能把现成的 PPT 文件转成网页版幻灯片。不会设计也不影响使用。从0做HTML演示文稿还是改造旧幻灯片frontend-slides 适用场景这个技能覆盖了做幻灯片最常见的四类麻烦从零起稿演讲、产品推介、培训课件、团队内部分享哪怕你手里只有一个主题方向旧文件翻新手里只有.ppt或.pptx想换成能直接在浏览器放映的网页版已有 HTML 但效果一般布局、动画、字体想再调一版说不清自己要什么风格它不问你喜欢极简还是科技感这种抽象问题而是直接做 3 张单页预览给你看你挑哪张或者要哪张的哪部分在 VS Code 里装好 Claude Code 扩展后就是在这样的对话界面里调用 frontend-slides 完成上面这些操作的。3步拿到第一版HTML幻灯片上手路径很短三步以内给料把已有的文本、笔记贴给它只有主题也直接说内容先于样式说清两个参数用途推介 / 教学 / 会议 / 内部同步篇幅5–10 页、10–20 页、20 页以上定风格知道要哪个预设就直接点名比如 Bold Signal不知道就让它出 3 张预览选一张或混搭其中的配色、字体、动效核心能力PPTX转HTML的完整流程加上按情绪选样式预设PPT转HTML的完整流程工具优先用python3加python-pptx把原文、图片、演讲者备注提取出来环境里缺这个库时它会先问你要不要安装而不是默默跳过转换保持原稿顺序演讲者备注和图片资源一并保留提取完就和全新演示文稿走同一条选风格流程最后交付一个 HTML 文件带图片的片子会配一个assets/文件夹存放素材按情绪选样式预设风格目录里有十几个预设官方按想要观众产生什么感觉给了对照表想要的感觉推荐预设被说服、有分量Bold Signal、Electric Studio、Dark Botanical兴奋、有活力Creative Voltage、Neon Cyber、Split Pastel平静、能看进去Notebook Tabs、Paper Ink、Swiss Modern被打动、有回味Dark Botanical、Vintage Editorial、Pastel Geometry几个热门预设的特征Bold Signal 用 Archivo Black 加 Space Grotesk炭灰底压亮橙卡片冲主题演讲Electric Studio 只靠 Manrope 一种字体黑白加钴蓝偏机构提案Creative Voltage 是 Syne 加 Space Mono电蓝配霓虹黄偏品牌叙事Dark Botanical 用 Cormorant 衬线近黑配象牙、腮红、金色偏高端叙事。交付的 HTML 幻灯片长什么样视口适配与内容密度硬约束视口适配每张幻灯片不许出现内部滚动条这是一条硬门槛不是建议每张.slide固定height: 100vh / 100dvh加overflow: hidden字号和间距一律走clamp()随窗口大小弹性缩放内容装不下就拆成两张幻灯片禁止缩字硬塞、禁止片内出滚动条交付前要过五档分辨率验证1920×1080、1280×720、768×1024、375×667、667×375从大屏到手机都不许溢出内容密度上限每张页的内容量有天花板除非你明确要求加密度且仍然读得下去页面类型上限封面1 个标题 1 个副标题标语可选正文页1 个标题 4–6 个要点或 2 段短文功能网格最多 6 张卡片代码页8–10 行以内引用页1 段引用 出处图片页1 张图尺寸受视口约束视觉和交互同样有底线不用紫色渐变白底 Inter 字体这种一眼模板脸改用渐变、网格、几何块这类抽象元素字体可从 Google Fonts 或 Fontshare 引入交互默认带键盘、触摸滑动、滚轮三种翻页方式外加进度指示和入场动画纯键盘可操作、对比度达标、语义化标签main、section、nav、并尊重系统减少动态效果设置。获取方式clone 仓库后从 skills/frontend-slides 目录开始克隆 Everything Claude Code 仓库即可使用git clone https://gitcode.com/GitHub_Trending/ev/everything-claude-code。技能本体在skills/frontend-slides/目录里SKILL.md 写清了从模式判断到交付的完整流程STYLE_PRESETS.md 收录了预设目录和视口适配规则中文总览文档 里也能翻到这个技能的用法。【免费下载链接】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），仅供参考