前言¶

技术分享、路演和内部汇报，最后往往要落到「能放映、能转发」的幻灯片上。常见路径是 PowerPoint 或 Keynote，再导出 PDF；若希望在浏览器里全屏演示、带过渡动画，又要自己写 HTML/CSS，对非前端同学成本很高。让 Agent 直接生成页面，又容易掉进千篇一律的配色和字体里，改起来也费劲。

下面介绍 SkillHub 上的社区技能 zara-frontend-slides（坐标 @user_f613bbf3/zara-frontend-slides）。它把「内容整理、风格试探、单文件 HTML 输出、PPT 转换」写进一套 SKILL.md 工作流，适合在 Cursor、Claude Code 等支持 Skills 的环境里，用对话完成演示稿。

这是什么¶

zara-frontend-slides 是 SkillHub 分类 office-efficiency 下的社区技能（来源：community），当前版本 1.0.0，发布者为 user_f613bbf3，标签 requires_api_key=false，无需额外 API Key。

官方简介与包内 SKILL.md 一致：从零创建或把 PowerPoint 转成带动画、零外部构建依赖的 HTML 演示；在用户要做演讲/路演幻灯片、或要把 PPT/PPTX 转成网页时使用。设计思路是「先看见再选择」——通过生成可视化风格预览，而不是让用户用抽象形容词描述审美。

SkillHub 页面：https://www.skillhub.cn/skills/user_f613bbf3/zara-frontend-slides
技能 API 地址：https://api.skillhub.cn/user_f613bbf3/zara-frontend-slides

（平台统计截至资料抓取：评分 100000，下载 1861，安装 2。）

核心功能¶

以下能力均来自已安装的 SKILL.md 与配套文件说明。

单文件 HTML 演示¶

• 输出为单个 HTML，CSS/JS 内联，不依赖 npm 或构建工具。
• 每张幻灯片强制 100vh 视口内展示，overflow: hidden，字号与间距用 clamp()，并需内联 viewport-base.css 全文。
• 支持键盘/触控导航；可选浏览器内联编辑（localStorage 保存、导出）。

三种工作模式¶

Agent 会先判断场景（Phase 0）：

1. Mode A：新建 — 从内容发现 → 风格发现 → 生成完整稿。
2. Mode B：PPT 转换 — 用 scripts/extract-pptx.py 抽取 .pptx 后再走风格与生成。
3. Mode C：增强 — 在已有 HTML 上演示稿上修改，并遵守内容密度与视口规则，必要时拆页。

风格发现（Show, don’t tell）¶

新建或转换时，可走「生成 3 个单页 HTML 预览」让用户挑选（预览目录 .claude-design/slide-previews/），预设样式见包内 STYLE_PRESETS.md（如 Bold Signal、Notebook Tabs、Neon Cyber 等）。

PPT 转换¶

python scripts/extract-pptx.py <input.pptx> <output_dir>

需 Python 环境；若缺少依赖，按技能说明安装 python-pptx：

pip install python-pptx

抽取后由 Agent 汇总页标题、内容与图片数量供确认，再选风格并生成 HTML，保留文本、图片资源与备注（备注可写入 HTML 注释）。

分享与导出（可选）¶

• 部署：bash scripts/deploy.sh <path-to-presentation>，面向 Vercel 等托管（技能内 Phase 6 含登录与路径注意事项）。
• PDF：bash scripts/export-pdf.sh <path-to-html> [output.pdf]，通过无头浏览器按 .slide 分页截图；可选 --compact 降低体积。

安装与启用¶

通过 SkillHub CLI（推荐）¶

先确认本机已安装 skillhub（未安装时可按 SkillHub 安装说明 执行官方安装脚本）。安装技能时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能无法被识别。

command -v skillhub && skillhub --version

skillhub install @user_f613bbf3/zara-frontend-slides --dir <你的 Agent skills 目录>

常用目录示例（来自 SkillHub 安装文档）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

也可在 SkillHub 技能页，将官方提示词发给 AI：「请根据 https://skillhub.cn/install/skillhub.md，安装 @user_f613bbf3/zara-frontend-slides。」

上游 Claude Code 插件（可选）¶

包内 README.md 还说明：若在 Claude Code 中使用上游仓库，可通过插件市场安装 frontend-slides，并在对话中使用 /frontend-slides。这与 SkillHub 坐标安装是不同分发路径；在 Cursor 等环境以 SkillHub 安装为准即可。

典型用法¶

安装并启用后，在对话中描述意图即可触发技能描述中的场景。工作流概要如下。

新建路演稿（Mode A）¶

1. Agent 一次性询问用途（路演/教学/大会/内部分享）、页数规模、是否已有文稿、是否需要浏览器内编辑。
2. 若提供图片文件夹，Agent 会扫描并评估可用性，再共同确认大纲。
3. 风格阶段：选「给我看选项」时，按情绪生成 3 个预览 HTML；用户选定或混搭后进入生成。
4. Agent 读取 html-template.md、viewport-base.css、animation-patterns.md，输出单文件 HTML，并用系统命令在浏览器打开（如 open [filename].html，以当前环境为准）。

示例对话意图（与包内 README 一致）：

我想为 AI 创业项目做一份 pitch deck

转换 PowerPoint（Mode B）¶

把我的 presentation.pptx 转成网页幻灯片

Agent 应执行抽取脚本、展示抽取摘要、再走 Phase 2 风格选择与 HTML 生成。

增强已有 HTML（Mode C）¶

说明要在哪份 HTML 上增删内容；技能要求增图、增 bullet 时检查密度上限，必要时自动拆成多页并告知用户。

适用场景与注意¶

适合谁

• 需要快速得到可放映、可分享的网页幻灯片，又不想维护前端工程的同学。
• 有 .pptx 存量，希望保留图片与结构并换成更现代的网页演示的团队。
• 不擅长描述设计风格，但能对 3 个预览做「选 A / 选 B」的决策者。

限制与注意

• PPT 转换依赖 Python 与 python-pptx；部署、PDF 导出分别依赖技能脚本所要求的 Node/Vercel、Playwright 等环境，首次运行可能较慢。
• 视口与内容密度规则较严：单页 bullet 约 4–6 条、代码约 8–10 行等，超出应拆页，不要指望页内滚动。
• 技能强调避免「AI 俗套」审美，但仍需人工过一遍内容与品牌合规；部署后应在真实 URL 上检查图片是否全部加载。
• SkillHub 为社区重分发；功能细节以安装包内 SKILL.md 为准，版本 1.0.0。

结尾¶

zara-frontend-slides 把 HTML 幻灯片从「手写页面」收成可复现的 Agent 流程：单文件交付、预览选风格、可选 PPT 抽取与 Vercel/PDF 分享。若你已在用 Cursor 或 Claude Code 的 Skills，可按上文命令装入 skills 目录后直接对话使用。

官方入口：https://www.skillhub.cn/skills/user_f613bbf3/zara-frontend-slides