企业官网建设流程全解析

三步生成 HTML 幻灯片，还能把 PPT 变成网页演示：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

Everything Claude Code（下称 ECC）是面向 Claude Code 等 AI 编码代理的技能配置系统。它 400 多个技能里最省事的之一是frontend-slides：给它一个主题、几段笔记或一份 PPT 文件，就能产出一份 HTML 幻灯片——单个文件内联全部样式与脚本，浏览器打开即讲，页面间带进场动画，不需要额外装任何东西。它解决的核心问题就一个：内容已经准备好了，但做一份拿得出手的演示文稿太麻烦。

🎯 它最用得上你的三种处境

• 只有文字，没有片子：手上是主题大纲、演讲逐字稿或会议笔记，需要一个能直接投屏的版本，又不想从零排版。
• 旧 PPT 要换个环境再讲：.ppt/.pptx里的内容和讲者备注还想保留，但希望在浏览器里翻页、带一点动效。
• 已有的 HTML 演示想翻新：布局、字体或动画不满意，希望不动内容、只换"皮"。

三种处境走的是同一条流程，只是入口不同——技能会先判断你属于哪一种，再决定从"发现内容"还是"解包 PPT"开始。

🚶 跟我走一遍：从零做一份新的幻灯片

第 1 步：只回答三个问题

它不会连环追问，只确认三件事：

如果你手里已经有内容，建议先整段贴进去再谈风格——先定内容、再定视觉，返工最少。

第 2 步：不知道选什么风格？让三张样片替你选

它默认不做"你喜欢紫色还是蓝色"这种抽象问卷，而是先生成三个单页样片，放在.ecc-design/slide-previews/目录下。每个样片都是自包含文件，字体、配色、动效一眼可见。看完之后你可以：

• 整页保留某一张；
• 或者混搭——比如 A 的字体 + B 的配色；
• 如果你已经知道想要哪个预设名，直接说名字，跳过样片环节。

第 3 步：成片长什么样

产出一个presentation.html（或按主题命名），CSS 和 JS 全部内联；只有片子带图片时才会多一个assets/目录。交互能力是内置的：

• 键盘方向键、鼠标滚轮、触屏滑动都能翻页
• 有进度指示器或页码
• 每页入场时有内容浮现动画
• 系统开启了"减少动态效果"时，动画自动收敛

📂 PPT 转网页演示的最快路径

有现成的 PPT 时，流程是"解包 → 重排"：

1. 优先用python3配python-pptx库提取文本、图片和讲者备注；
2. 缺库时它会先问你是否安装，否则退回手动导出路线；
3. 解包结果进入与新建完全相同的风格选择流程。

🎨 不是设计师，怎么挑预设

内置 12 套预设，最省事的挑法是按"想让听众产生什么感觉"对号入座：

几套值得留意的：

• Bold Signal：炭黑底 + 亮橙色焦点卡片，Archivo Black 大标题，主舞台发布会既视感
• Electric Studio：只用 Manrope 一款字体，黑白 + 钴蓝，提案汇报的干净利落
• Dark Botanical：近黑 + 暖象牙 + 金与赤陶色，高端品牌的质感
• Neon Cyber：午夜蓝 + 青色 + 品红辉光，AI 和开发者主题一眼相认

动画节奏也有一套映射：戏剧感走慢淡入与视差，科技感走辉光与网格，活泼感走弹性缓动，商务感则压到 200–300ms 的克制过渡——选预设时可以顺手指定。

✅ 一份合格的片子，标准是什么

铁律只有一条：一页 = 一个视口。每页锁死一屏高度，页内绝不出现滚动条；内容塞不下时，正确动作是拆页，而不是把字缩到看不清。

单页容量上限（你明确要求更密且仍可读时可以放宽）：

• 封面：1 主标题 + 1 副标题，加一行可选标语
• 正文页：1 标题 + 4–6 条要点，或两段短文
• 卡片网格：不超过 6 张
• 代码页：8–10 行封顶
• 引用页：1 句引用 + 出处

交付前的硬性检查：字号与间距全部随屏幕缩放（clamp()）、语义化标签齐全、纯键盘可翻页、文字对比度可读，并在 1920×1080 一路到 375×667 的多个分辨率下逐屏验证不溢出。

💻 在你的编辑器里用起来

克隆仓库后，ECC 以插件形式被识别。在终端输入/plugin切到已安装列表，能看到各插件的连接状态：

更省心的方式是装 VS Code 里的 Claude Code 扩展，直接在 IDE 里对话生成幻灯片：动手生成前能看到并修改它的规划，改完的 diff 可以逐段确认，还能用 @ 提及指定文件行范围。

🏁 下一步：现在就能做的一件事

把仓库克隆下来，挑一个今晚就要讲的主题，让它生成一份 5 页的片子：

git clone https://gitcode.com/GitHub_Trending/ev/everything-claude-code

打开这三个文件即可上手：

• 技能主流程：skills/frontend-slides/SKILL.md
• 12 套预设与视口基础样式：skills/frontend-slides/STYLE_PRESETS.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