面向HTML 演示文稿的 Agent Skills
HTML 演示技能帮助 AI agent 产出可在浏览器中运行的演示文稿。它们涵盖整个交付物：任何标记之前的故事和论点，即使由 DIV 构建也作为独立视图的幻灯片，在投影仪上站得住脚的字体和布局，供演讲者使用的实时交互，导出和分享以便别人之后能打开文件或 URL，以及跨浏览器、PDF 和屏幕阅读器的可访问性。使用排名列表时，先从匹配你当前瓶颈的子主题入手——故事、幻灯片、视觉、交互、导出或可访问性——然后选择描述针对该步骤的技能。HTML 演示文稿仍然是演示文稿，所以在浏览器技巧之前先权衡故事和幻灯片。
8 个先看31 个推荐选项
从这些开始。
An HTML deck is still a presentation: story, slides, visuals — with extra constraints of the browser, not PowerPoint.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
slides
使用 Chart.js、设计令牌、响应式布局、文案公式和情境化幻灯片策略创建战略性 HTML 演示文稿。
32,022 · 受欢迎程度 - 排名 02查看 Agent Skill直接匹配
lark-slides
精选飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 lark-doc）、云文档里的独立画板对象（走 lark-whiteboard）、上传或下载普通文件（走 lark-drive）。
748,180 · 受欢迎程度 - 排名 03查看 Agent Skill直接匹配
slideshow
创作 HyperFrames 幻灯片——演示文稿、路演 deck 和交互式 deck，具有离散幻灯片、片段揭示、分支、热点导航和演讲者模式。
299,839 · 受欢迎程度 - 排名 04查看 Agent Skill直接匹配
slide-dsl
精选完整的幻灯片 DSL 手册——画布及其背景、十种元素类型逐字段的说明（含单位、默认值和合法值）、每种类型在哪里保存其文字、当两个字段冲突时渲染器实际绘制哪个字段、放入 `content` 的 HTML 究竟会发生什么，以及现在写入检查唯一依据的结构 schema。没有任何东西会过滤你的标记，也没有任何东西会规范化你的值，因此本手册就是让页面正确渲染的全部依据。在修补你之前未修补过的字段之前、当补丁被拒绝时、当……时加载它。
- 排名 05查看 Agent Skill直接匹配
slide-craft
精选幻灯片页面的设计法则——画布几何、文字高度表、字号层级、对比色对、间距节奏，以及哪种元素类型承载哪类内容。在逐个修补幻灯片元素时、修复涉及颜色或对比度时、文字需要在框内放大或缩小时、页面显得拥挤或空旷时，或替换内容需要真正的富文本结构时加载它。它是 `page-clone` 和 `pro-editing` 编辑所依据的标准，而非独立流程——那两者决定改哪些页面及顺序，这一个决定好页面应该是什么样
- 排名 06查看 Agent Skill直接匹配
theme-factory
官方用主题为制品设置样式的工具包。这些制品可以是幻灯片、文档、报告、HTML 落地页等。有 10 个预设主题（含颜色/字体），可应用于任何已创建的制品，也可即时生成新主题。
- 排名 07查看 Agent Skill直接匹配
answer-me-with-html
精选将答案转化为单页可视化 HTML 讲解：模型撰写简短的 Markdown 草稿，捆绑的 CLI 构建单页。请主动且广泛地使用它，无需被要求，只要页面比纯文本更能帮助读者，即使纯文本也能用：任何关于某事物如何运作或各部分如何关联的讲解（流程、请求路径、架构、代码或文件夹结构、状态机、生命周期、历史）；任何带优缺点的比较、权衡或决策；任何诊断、审查或调查，尤其是需要排序的多个原因或发现；任何带表格、编号或排序列表、步骤、分支或多个部分的答案；或当用户说“I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图”时。拿不准时就用它：页面制作快速且成本低。也用于讲解视频（“make a video”、“做个视频”）以及更改其设置。仅在闲聊、简单的一行回答或用户要求纯文本时跳过。
- 排名 08查看 Agent Skill直接匹配
archify
创建精美、经过验证的架构图、工作流图、时序图和数据流图，以可探索的独立 HTML 形式呈现，支持内联 SVG、主题和导出。
140,157 · 受欢迎程度
展开另外 23 个 Agent Skills
- 排名 09查看 Agent Skill直接匹配
gws-slides
Google Slides CLI 技能，通过 gws 读写演示文稿，涵盖 create、get、batchUpdate 和页面操作。
40,203 · 受欢迎程度 - 排名 10查看 Agent Skill直接匹配
recipe-create-presentation
创建新的 Google Slides 演示文稿并添加初始幻灯片的配方，然后通过 gws CLI 与团队共享。
31,379 · 受欢迎程度 - 排名 11查看 Agent Skill可能匹配
lark-apps
精选妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · 受欢迎程度 - 排名 12查看 Agent Skill可能匹配
pptx
官方只要涉及 .pptx 或 .potx 文件（作为输入、输出或两者兼有），就使用此技能。包括：创建幻灯片、路演演示文稿或演示文稿；读取、解析或从任何 .pptx 或 .potx 文件中提取文本（即使提取的内容将用于其他地方，如电子邮件或摘要）；编辑、修改或更新现有演示文稿；合并或拆分幻灯片文件；处理模板（.potx）、布局、演讲者备注或批注。只要用户提到 \"deck\"、\"slides\"、\"presentation\"，或引用 .pptx 或 .potx 文件名，无论之后打算如何处理内容，都应触发。如果需要打开、创建或触及 .pptx 或 .potx 文件，请使用此技能。
- 排名 13查看 Agent Skill可能匹配
frontend-design
官方在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。
765,703 · 受欢迎程度 - 排名 14查看 Agent Skill可能匹配
design
全面的设计技能，涵盖品牌识别、设计 token、UI 样式、logo 生成、CIP 样机、使用 Chart.js 的 HTML 演示、横幅和图标。
33,989 · 受欢迎程度 - 排名 15查看 Agent Skill可能匹配
imagegen
官方当任务需要 AI 生成的位图视觉素材（如照片、插图、纹理、精灵图、样机或透明背景抠图）时，生成或编辑栅格图像。适用于 Codex 应创建全新图像、转换现有图像或从参考图衍生视觉变体，且输出应为位图资产而非仓库原生代码或矢量的情况。当任务更适合通过编辑现有 SVG/矢量/代码原生资产、扩展现有图标或标志系统，或直接用 HTML/CSS/canvas 构建视觉时，请勿使用。
- 排名 16查看 Agent Skill可能匹配
canvas-design
官方运用设计理念在 .png 和 .pdf 文档中创作精美的视觉艺术。当用户要求制作海报、艺术作品、设计或其他静态作品时，应使用此技能。创作原创视觉设计，绝不复制现有艺术家的作品，以避免版权侵权。
- 排名 17查看 Agent Skill可能匹配
brand-guidelines
官方将 Anthropic 官方品牌配色和字体应用于任何可能受益于 Anthropic 外观风格的产物。当适用品牌配色或风格指南、视觉格式或公司设计标准时使用。
- 排名 18查看 Agent Skill可能匹配
playwright-interactive
官方通过 `js_repl` 实现持久化浏览器和 Electron 交互，用于快速迭代 UI 调试。
- 排名 19查看 Agent Skill可能匹配
hyperframes-registry
搜索、安装并将注册表区块和组件（图表、特效、转场）接入 HyperFrames HTML 作品。
751,896 · 受欢迎程度 - 排名 20查看 Agent Skill可能匹配
hyperframes-creative
面向 HyperFrames 视频的非动画创意指导，涵盖设计规范、配色、排版、旁白、节拍规划和构图模式。
682,929 · 受欢迎程度 - 排名 21查看 Agent Skill可能匹配
media-use
通过单一 resolve 动词为 HyperFrames 项目解析、生成和操作媒体（BGM、SFX、图像、图标、logo、语音、调色）。
746,494 · 受欢迎程度 - 排名 22查看 Agent Skill可能匹配
ai-image-generation
通过 inference.sh CLI 使用 50+ 模型（GPT-Image-2、FLUX、Gemini、Seedream）生成 AI 图像，用于艺术、样机和营销视觉。
696,871 · 受欢迎程度 - 排名 23查看 Agent Skill可能匹配
high-end-visual-design
教授高端机构风格的网页设计，包括具体字体、间距、阴影、卡片结构和动画，阻止通用的 AI 默认样式。
420,662 · 受欢迎程度 - 排名 24查看 Agent Skill可能匹配
image-to-code
图像优先的网站设计到代码技能，生成设计图像、分析图像，然后为落地页和营销网站实现匹配的前端。
350,805 · 受欢迎程度 - 排名 25查看 Agent Skill可能匹配
impeccable
前端界面设计技能，涵盖重新设计、评审、打磨、排版、布局、色彩、动效，以及 Web UI 的设计系统。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 26查看 Agent Skill可能匹配
brandkit
生成高端品牌套件图像，包括品牌指南看板、logo 系统、品牌识别演示文稿和视觉世界展示。
353,383 · 受欢迎程度 - 排名 27查看 Agent Skill可能匹配
copywriting
为页面、标题、CTA 和价值主张撰写并改进营销文案，聚焦清晰度、收益和转化。
218,410 · 受欢迎程度 - 排名 28查看 Agent Skill可能匹配
prototype
在可视化选择器背后构建所描述 UI 组件的多个真正不同的版本，用于实时比较和推广获胜者。
133,671 · 受欢迎程度 - 排名 29查看 Agent Skill可能匹配
copy-editing
通过七轮聚焦扫描编辑和改进现有营销文案，涵盖清晰度、语气、利益点和证明。
138,021 · 受欢迎程度 - 排名 30查看 Agent Skill可能匹配
vercel-cli-with-tokens
官方使用基于 token 的认证在 Vercel 上部署和管理项目。适用于使用访问令牌而非交互式登录来操作 Vercel CLI 的场景——例如“deploy to vercel”“set up vercel”“add environment variables to vercel”。
- 排名 31查看 Agent Skill可能匹配
ui-taste
用于构建、打磨和审查 Web 与 iOS 界面的 UI 设计手册，包含反低质工作流和可选的真实产品参考。
452,376 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Story
- The argument, before markup.
- Slides
- Each view is a slide, even if it is a DIV.
- Visuals
- Type and layout that survive a projector.
- Interaction
- How the speaker moves through the deck live.
- Export & share
- A file or URL someone else can open later.
- Access
- Readable in a browser, a PDF, and a screen reader.
常见问题
- HTML Presentation 下列出了哪些类型的技能？
- 帮助 AI agent 构建基于浏览器的演示文稿的技能。它们涵盖故事、幻灯片、视觉、交互、导出与分享，以及访问权限。
- 这个列表是如何排序的？
- 列表按观察到的搜索需求排序，直接匹配的排在最前，并对任何单一发布者设有上限。
- 这些技能会取代 PowerPoint 吗？
- 不会。HTML 演示文稿仍然是包含故事、幻灯片和视觉的演示，但它增加了浏览器的限制。
- 挑选之前我应该检查什么？
- 将 Skill 与你当前步骤匹配：故事、幻灯片、视觉、交互、导出和分享，或访问。子主题直接对应这些阶段。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 slides 的 SKILL.md 复制到 ~/.claude/skills/slides/（个人使用），或 .claude/skills/slides/（随项目共享）。
- 从 registry 安装——运行 npx skills add nextlevelbuilder/ui-ux-pro-max-skill@slides。
- 或者从 slides 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。