如何一句话让 AI 生成单文件 HTML 演示文稿：frontend-slides 新手完全指南

如何一句话让 AI 生成单文件 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如果你经常要把 PPT 变成能直接投屏的网页frontend-slides 值得你花十分钟认识一下。它是 ECCeverything-claude-code开源项目里的一个技能作用就是让 AI 智能体替你生成零依赖的 HTML 演示文稿一个 HTML 文件双击就能在浏览器里放映不用装任何框架也不用写一行代码。下面用新手视角带你走完「认识它 → 跑起来 → 看懂它好在哪」。30 秒认识 frontend-slides 一句话结论它不是要安装的新软件而是一份「教 AI 怎么做 PPT」的技能说明书。ECC 这个项目做的大事是把 Claude Code、Codex、Cursor 这类 AI 编程助手调教成能干活的工具人里面带了 200 多个「技能」。frontend-slides 就是其中一个专门管做演示文稿这件事。它接三种活从零新建一份演示文稿你给主题和讲稿把现成的 PPT / PPTX 文件转成网页版把你已有的 HTML 幻灯片在排版、动效、字体上翻新反过来也说说它不接的活需要在线多人协作编辑、要做成完整网页应用、或者你习惯 PowerPoint 里的所见即所得操作——它都不太适合。它的产出始终是静态 HTML 文件放映就是浏览器全屏。快速开始三步拿到第一份演示只要你的电脑上已有 Claude Code 或任一兼容 ECC 的 AI 智能体三步就够。拿到 ECC 仓库执行git clone https://gitcode.com/GitHub_Trending/ev/ECC也可以在 Claude Code 里直接安装 ecc 插件效果一样告诉智能体你的需求例如「帮我做一份 10 页的产品介绍演示科技感的风格」它先产出 3 张单页风格预览你挑一个顺眼的或说「把 A 的配色和 B 的字体混一下」它再产出完整的 presentation.html交付时它会一并告诉你文件在哪、用了哪个风格预设、一共有几页、想换主题色该改哪几个变量。你双击打开那个 HTML 文件演示就能放映箭头键、滚轮、手机滑动翻页都支持。为什么成品看起来「不像 AI 做的」三个核心亮点 按「情绪」选风格而不是做选择题场景做 PPT 最磨人的环节是风格。你心里有画面嘴上却只会说「高级一点、科技一点」甚至自己都说不清要什么。做法这个技能不问「你要什么字体」它问「观众看完应该是什么感受——被震撼、被打动、专注冷静还是受到启发」。然后按情绪匹配它内置的 12 个风格预设比如 Neon Cyber 霓虹赛博风、Notebook Tabs 手账标签风、Paper Ink 纸墨文艺风并且直接生成 3 张真实的单页 HTML 预览给你看。收益你是「看图」挑风格不是「脑补」猜风格。零设计基础的人两分钟就能拍板。强制「一屏放完绝不滚动」场景线上演示最常见的翻车现场是后排观众看不清字或者横屏时页面露出滚动条。做法它把「每页必须占满一屏、禁止内部滚动」当成硬规则写死所有字号和间距都用 CSS 的clamp()函数让浏览器在最小值和最大值之间按屏幕宽度自动取数计算。内容多到装不下时规则要求拆页而不是把字缩到蚂蚁大小。.slide { width: 100vw; height: 100vh; height: 100dvh; /* 精确占满一屏高度 */ overflow: hidden; /* 禁止页内滚动 */ scroll-snap-align: start; }这段就是它给每一页幻灯片套上的「底座」页面宽高锁死为视口大小多出来的内容一律不许显示。收益手机竖着看、平板横着看、1080p 投影仪页面都只会完整呈现不会破版。旧 PPT 一键「换皮重生」场景手里有一份攒了两年、图文和演讲者备注都很全的 .pptx 老文件但完全没动力重做。做法技能自带一个 Python 提取脚本用 python-pptx 库把每页的文字、图片、备注原样抽出来再走一遍和新建相同的「选风格」流程。python3 skills/frontend-slides/scripts/extract-pptx.py your.pptx这条命令跑完PPT 里的所有素材就会变成结构化的文本和图片文件供 AI 重排。收益内容一个字都不用重打老 PPT 只负责出料风格负责好看。和 Reveal.js、Slidev 这类常见方案的 4 点区别frontend-slides 不是演示框架而是「替你把框架那份活干完」的技能对比着看最直观维度frontend-slidesReveal.jsSlidev你得到的东西一个 AI 生成的单 HTML 文件一套要自己写 JS 的库要自己写 Markdown/Vue 再构建起步方式一句自然语言写配置和 API 调用装构建工具 写主题风格来源12 个精选预设 AI 按情绪定制默认观感靠配置改全靠自己搭跨设备适配内置硬规则强制不滚动完全取决于你的代码完全取决于你的代码依赖零依赖双击即放映需要引入库需要 Node 构建链适合谁用下一步看哪里 如果你的日常工作里有「向上汇报、对外路演、课堂分享」这类环节又不太敢碰设计工具这个技能基本是为你准备的。产品经理做 pitch、工程师做技术分享、学生做毕业答辩都是它的典型主场。想再深一层的话建议按这个顺序看读 SKILL.md里面是完整工作流和各类型页面的内容密度上限比如代码页最多 10 行翻一遍 STYLE_PRESETS.md12 个预设的情绪定位和字体配色都写在里面可以先给自己常做的内容类型选个「默认风格」下个工作日汇报前你完全可以让它先出预览、你挑风格然后只负责讲。【免费下载链接】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），仅供参考