zarazhangrui/frontend-slides

Frontend Slides 是一个给编码 Agent 用的技能，用来产出 HTML 演示文稿：既可以按文字简介从零写，也可以转换已有的 PowerPoint 文件。它面向不想自己写 CSS/JavaScript、又已经有具备文件系统和 shell 权限的 Agent 的用户。

工作流程上有什么变化

它不要求你用语言描述审美偏好，而是先生成三套视觉预览，由你挑选，再按所选风格生成完整文稿并在浏览器中打开。输入 PowerPoint 时，它先用 python-pptx 抽取文字、图片和备注，把提取内容给你确认，然后带上原始素材生成新文稿。

产物本身刻意保持简单：单个 HTML 文件，CSS/JS 内联，没有 npm、构建步骤或框架。作者的理由是这样一个文稿多年后仍能打开。版面固定为 16:9，技能自带一份强制的基础样式表，以及生成阶段才读取的 HTML 结构和动画参考。

技能文件如何分层

主文件 SKILL.md 是流程地图，配套文件只在对应阶段加载。STYLE_PRESETS.md 中的 12 套精选预设用于选风格；可选的 bold 模板包含 34 套设计系统，按需渐进加载：先读紧凑索引，再读入围候选的短预览卡，只有你选中某套后才加载完整设计规范。若 bold 模板包不可用，仍会回退到安全预设。

各路径的前置条件

所有路径都需要一个本地编码 Agent，且它能访问文件系统并执行 shell 命令。Claude Code 有一条特定的安装流程：把仓库以 HTTPS 添加为插件市场源，再安装插件，之后可用带命名空间的 /frontend-slides:frontend-slides 命令；手动复制到 skills 目录则得到不带命名空间的 /frontend-slides 命令。Codex、Kimi Code、OpenCode、Gemini CLI 等其他 Agent 则直接以 SKILL.md 为入口自行读取引用文件，不会获得插件命令 安装说明。

可选功能各有额外要求：PPT 转换需要带 python-pptx 的 Python；部署到在线 URL 需要 Node.js 和免费的 Vercel 账号；导出 PDF 需要 Node.js，并会自动安装 Playwright。PDF 导出按 1920×1080 逐页截图合并，动画不会被保留，只是静态快照。

定制与许可

生成的代码被设计为可自行修改，并带有注释和可访问性说明。34 套 bold 模板来自另一个模板仓库，通过画廊预览 模板库 查看。项目使用 MIT 许可，允许使用、修改和分享 仓库。