frontend-slides用编程 Agent 制作 Web 原生幻灯片的完整指南基于 open-design 仓库【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design如果你希望在终端里用编程 Agent 直接产出幻灯片frontend-slides 是目前最成熟的开源技能之一它把演示文稿生成为真正的 HTML/CSS 网页在浏览器中逐页演示。本文基于 open-design 仓库中的官方博客稿 frontend-slides.md 与仓库内配套的 skills/frontend-slides/SKILL.md、前端运行时源码展开讲清楚它是什么、如何安装与提示、它的长板与诚实的局限、与其他 Claude PPT 技能的对比以及 open-design 作为 Agent-Native Design Workspace 在何处接手。frontend-slides 是什么frontend-slides 是一个技能skill——一套打包好的指令你的编程 AgentClaude Code、Codex、Cursor 等会在任务进行中加载它把一件事做好。在这里这件事就是做演示文稿。它借用 Agent 已具备的前端能力并把它对准幻灯片你用大白话描述这套幻灯片Agent 就写出干净、现代的网页一页一张供你在浏览器里翻看。它的输出天生是 web 原生的因为每一页都是 HTML 和 CSS你能拿到完整的控制力——自定义版式、真正的字体排印、渐变、过渡、内嵌图表凡是浏览器能渲染的都行。它由 Zara Zhang 构建和维护以 MIT 许可证开源open-design 仓库中该技能的 SKILL.md frontmatter 里用upstream字段指向上游仓库zarazhangrui/frontend-slides可作为出处印证。按照官方博客稿的说法它凭借约 25k GitHub star 与 MIT 许可证在 Claude PPT 技能这一品类中位居人气前列见 Claude PPT 技能合集。与同类技能一样它遵循自备模型 keyBYOK模式你提供 API key技能提供手艺。如何使用五步循环整个循环很短而且基本靠对话驱动安装技能——把 frontend-slides 克隆或添加到你编程 Agent 的技能目录里上游仓库附带配置步骤并自备你的模型 key。在 open-design 中skills/目录即技能目录每个技能是一个含SKILL.mdfrontmatter 正文的文件夹可以附带assets/、references/、脚本等旁置文件守护进程的懒加载扫描器会在下一次请求时自动发现新条目本地开发无需重新构建见 skills/AGENTS.md。描述这套幻灯片——给 Agent 提示词说明主题、受众、语气和大致页数。简报越具体它搭出的结构越好。open-design 为每个技能准备了可直接复制的示例提示词例如中文版 content.zh-CN.ts 中 frontend-slides 的examplePrompt即生成动画丰富、带视觉风格预览的 HTML 演示文稿。让它去构建——Agent 把幻灯片生成为网页并在浏览器里打开来演示。迭代——用大白话要求修改把开头收紧、把第 3 页做成两栏对比、配色暖一点然后重新渲染。因为它就是 CSS你也可以直接手改任何地方。演示或导出——从浏览器演示或导出成 PDF 用于分享。如何触发技能frontmatter 与触发词从仓库中的 SKILL.md 可以看到该技能在 open-design 目录里的完整注册信息name: frontend-slides技能名Agent 可以直接按名调用triggers一组自然语言触发词包括html slides、animation slides、interactive deck、web ppt、reveal slides——在提示中出现这些短语即可命中该技能od.mode: deck声明这是一个 deck 模式的技能输出物是幻灯片而非普通文档od.category: slides分类标签用于在 Integrations → Skills 界面中按类别筛选od.craft.requires: typography声明该技能依赖 typography craft 文档open-design 在 craft/typography.md 等文件中沉淀了排版规范保证 Agent 产出时遵循统一的字体排印基线。这种轻量目录条目catalogue stub的做法值得注意open-design 的 skills/AGENTS.md 说明skills/目录同时内置了一份从社区精选的设计/创意技能目录每个条目只保留 frontmatter 短正文并指向上游仓库不直接内置上游的全部资产。要运行完整的上游工作流含其原始脚本与参考文件需要把上游 bundle 复制到你当前 Agent 的技能目录中——stub 正文里也明确写了这一步。它擅长什么以及诚实的局限frontend-slides 最能发挥的场景是Web 原生的幻灯片 对外观的完全掌控。如果你对 HTML 和 CSS 得心应手那么在你和设计之间不会横着任何东西——你可以撬开任何一页手动修改把整套幻灯片用 git 做版本管理还能跨幻灯片复用组件。对开发者而言这正是全部魅力所在幻灯片表现得像一套代码库而不是一个私有格式文件。诚实的局限正是这份长处的另一面输出是网页而不是.pptx——如果你的组织需要一份带原生形状的可编辑 PowerPoint这不是那个工具针对该需求的技能见下文对比表。存在舒适度门槛——你离 HTML 和 CSS 越远完全掌控就越难自证其值。它做的是一套幻灯片——和任何单一技能一样frontend-slides 不会把你的品牌带到不同项目之间也不会让一套设计系统保持同步。它是一把锋利的单一用途工具而且对此毫不掩饰。frontend-slides 与其他 Claude PPT 技能对比frontend-slides 并不是这个类别里唯一的技能选对哪一个取决于你需要的输出以及你能接受的许可证工具输出许可证最适合frontend-slidesHTML 网页幻灯片MITWeb 原生幻灯片、完整 CSS 控制guizang-ppt-skillHTML编辑排版AGPL-3.0精心打磨、有设计感的幻灯片dashiAI可编辑演示文稿AGPL-3.0非开发者也能修改的输出OpenDesign符合品牌的可编辑幻灯片 模板Apache-2.0绑定设计系统、置于工作空间中的幻灯片选型可以这样理解如果想要精致的编辑排版观感guizang-ppt-skill 是可以对比的姊妹技能如果交付物必须让非开发者也能编辑dashiAI 正是为此而生而当你想让这套幻灯片本身就是你完全拥有的网页时frontend-slides 更胜一筹。源码印证workspace 如何驱动这类 Web 幻灯片frontend-slides 这类技能生成的 deck 有一个显著的工程特征页面切换依赖 CSS 类名与显隐控制而不是路由。open-design 的前端运行时对此做了专门适配从源码结构看这是它能运行任意 HTML deck的关键在 srcdoc.ts 的 deck 导航逻辑setActive(i)中可以读到一段明确点名该技能家族的注释Many reveal-animation decks (the frontend-slides family) gate their staggered entrances on a SEPARATE.visibleclass —.slide.visible .reveal { opacity: 1 }— that the decks own show() adds alongside.active.含义是frontend-slides 家族的动画 deck 用一个独立的.visible类来控制.reveal子元素的交错入场而 deck 自带的show()会同时添加.active与.visible。如果导航只翻转.active类幻灯片的框架会显示但所有.reveal子元素会卡在opacity: 0页面看起来一片空白。因此setActive会检测 deck 是否真的使用了visible类若是则让.visible与激活页同步切换list[k].classList.toggle(visible, k target)对其他 deck 则是无副作用的 no-op。同一段代码还展示了它对多种 deck 实现约定的兼容同时探测hidden属性、内联display: none、visibility: hidden以及active/is-active/current等多种激活类名再统一驱动翻页srcdoc.ts。这解释了为什么纯 HTML 文件能在 workspace 中获得类应用的翻页体验——运行时在运行时探测并镜像了 deck 自身的显隐约定而不是要求 deck 遵守某种固定框架。该行为还有对应的测试文件 srcdoc-deck-bridge-visible-reveal.test.ts 覆盖。常见问题FAQfrontend-slides 免费吗免费。它以 MIT 许可证开源可免费使用——你自备模型的 API key。MIT 相当宽松所以它对商用也很友好。我怎么用 frontend-slides把技能安装到你编程 Agent 的技能目录里或在 open-design 中确认 skills/frontend-slides/SKILL.md 已在技能列表中然后描述这套幻灯片主题、受众、篇幅也可以直接使用触发词如 web ppt、reveal slides。Agent 会把幻灯片构建成网页用大白话迭代再从浏览器演示。frontend-slides 能导出成 PowerPoint 吗不能——它产出的是你在浏览器里演示的网页幻灯片HTML/CSS你可以导出成 PDF 用于分享。如果你需要一份带原生形状的可编辑.pptx应去找专为这种输出而造的技能而不是 frontend-slides。frontend-slides 最适合谁想要 Web 原生幻灯片和完整 CSS 控制的开发者——那些在 web 平台上如鱼得水、宁愿用 git 给幻灯片做版本管理也不愿打开演示软件的人。技能还是设计工作空间——我该用哪个像 frontend-slides 这样的技能最适合做一份快速、一次性的幻灯片。而像 OpenDesign 这样的 Agent-Native Design Workspace更适合你需要符合品牌、可编辑、并且与其余设计工作放在一起的幻灯片。结语技能与工作空间的分工frontend-slides 是用编程 Agent 做幻灯片中人气最高的方式之一它也当之无愧Web 原生的幻灯片、完整的 CSS 控制、MIT 许可证全都从你本来就在用的终端里驱动。它的边界同样清晰——技能本质上是一段脚本不会把品牌带到不同项目之间不会让输出在一个真正的工作空间里保持可编辑也不会让这套幻灯片和其余的设计工作协同起来。open-design 提供的正是技能之上的那一层开源Apache-2.0、本地优先、自备 key 的Agent-Native Design Workspace独立于你已在用的编程 Agent 之外。你描述一套幻灯片Agent 就针对一套设计系统生成一份可编辑的幻灯片——于是它始终符合品牌而不是每次都从一张白纸开始。本文引用的技能目录条目、deck 运行时与示例提示词分别位于 skills/frontend-slides/SKILL.md、apps/web/src/runtime/srcdoc.ts 与 apps/web/src/i18n/content.zh-CN.ts可以在 open-design 仓库中直接查证。一句话的选择标准当想从命令行快速得到一份 Web 原生幻灯片时用 frontend-slides当这套幻灯片必须符合品牌、可编辑并且是一整套更大设计工作的一部分时交给一个工作空间。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考