如何用 Everything Claude Code 的 frontend-slides 生成 HTML 演示文稿和 PPTX 转换完整指南

如何用 Everything Claude Code 的 frontend-slides 生成 HTML 演示文稿和 PPTX 转换完整指南【免费下载链接】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今晚你要给产品做一次推介需要一套能直接在浏览器里放映的幻灯片。不用打开 PowerPoint也不用学前端框架。开源项目 Everything Claude Code 里的frontend-slides技能能把几页笔记、一份现成的 PPTX直接变成带动画的 HTML 演示文稿成品默认只是一个单文件发给谁都能打开。三种入口从零新建、PPT 转网页、改旧文件frontend-slides会先判断你处在哪种状态再走对应流程。手里只有主题、零散笔记或完整草稿的走新建拿着.ppt或.pptx文件的走转换已经有一版 HTML 幻灯片、想优化排版和动效的走增强。三种情况最后汇入同一条风格选择流程产物规格一致。先问三件事再给你三张样页挑新建时技能只问三个最小必要问题用途是什么推介、教学、会议演讲还是内部汇报、篇幅多长短 5–10 页、中 10–20 页、长 20 页以上、内容到了什么程度成稿、粗笔记、还是只有主题。风格上它不让你从抽象选项里猜而是先生成 3 个自包含的单页预览每页都带出排版、配色和动效效果你挑一张留用也可以指定混搭各页的元素。已经知道要哪个预设的话跳过预览直接指定即可。想要什么气质就选哪个预设它内置了一批预设先想清楚这场演示要传递什么感觉再对号入座想显得自信、有冲击力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 IBM Plex Sans近黑、暖象牙、金与赤土色其中 Bold Signal 靠超大号章节数字制造冲击力做发布会很压场Dark Botanical 则克制得多用模糊光斑和细线条营造安静的高级感。它也会主动避开紫渐变、白底 Inter 这类一眼模板的样式。如何把 PPTX 变成网页幻灯片转换走 Python 路线优先用python3配合python-pptx提取文本、图片和演讲者备注。依赖缺失时它会先问你装不装不装就回退到手动或导出方案。原片的页面顺序、备注和素材都会保留提取完成后接着走上面那套风格选择产物和新建的演示文稿一样。为什么在什么屏幕上看着都不挤每张幻灯片必须完整装进一个视口内部不允许出现滚动条字号和间距随屏幕尺寸缩放内容放不下时宁可拆页也不缩字到看不清。背景偏好渐变、网格、几何这类抽象图形而不是插画字体来自 Google Fonts 或 Fontshare。放映端自带一套标准能力键盘、触摸滑动、鼠标滚轮都能翻页有进度指示元素进场有动画页面用语义化标签组织对比度可读也尊重系统的prefers-reduced-motion设置。 一张幻灯片最多放多少字除非你明确要求更密它按这套上限控制标题页1 个标题 1 个子标题可加一句标语内容页1 个标题 4–6 条要点或 2 个短段落功能卡片页最多 6 张卡片代码页最多 8–10 行引用页1 段引用 署名图片页1 张受视口约束的图片️ 在 VS Code 里生成 HTML 演示文稿如果配 VS Code 的 Claude Code 扩展来用体验会顺一些接受编辑前可以先看计划还能自动接受改动。 开始使用git clone https://gitcode.com/GitHub_Trending/ev/everything-claude-code克隆后按安装文档把frontend-slides技能加入你的技能清单然后对 Claude 说一句帮我做一份 HTML 演示文稿或把这个 PPTX 转成网页幻灯片即可。完整说明见 skills/frontend-slides/SKILL.md项目总览见 docs/zh-CN/README.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），仅供参考