AgentHubAgentHub

HTML 演示文稿生成 Skill安装与使用教程

SkillSkillsMP

skillsmp.zarazhangrui-frontend-slides-skill-md

从零创建或转换 PowerPoint 文件，产出美观、动效丰富的 HTML 演示。当用户想做一份演示、把 PPT/PPTX 转成网页，或为演讲与路演制作幻灯片时使用；通过视觉探索而非抽象选项，帮助非设计背景的人找到自己的审美风格。

原文名称：frontend-slides

原文描述：Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

在 SkillsMP 查看 ↗

建议先在本页复制安装配置，再到上游核对文档与权限。

热度数据

仓库星标25.8k

产品介绍

从零创建或转换 PowerPoint 文件，产出美观、动效丰富的 HTML 演示。当用户想做一份演示、把 PPT/PPTX 转成网页，或为演讲与路演制作幻灯片时使用；通过视觉探索而非抽象选项，帮助非设计背景的人找到自己的审美风格。 HTML 演示文稿生成 是一个Agent Skill，收录自 SkillsMP。本页提供产品介绍、配置教程、安装命令与适用场景，支持 Trae、通义灵码、Cursor、Claude Code、VS Code 等。

适用场景

设计与创意

AgentHub Verified 可用性验证技术测试通过

自动化测试流水线已校验安装命令、传输协议与客户端兼容性

最近校验时间2026-07-18
安装配置格式测试有效CLI 与 mcpServers JSON 语法校验通过
协议连接与握手响应正常支持标准 JSON-RPC 2.0 规格规范
上游数据源存活来源 skillsmp，可正常下载依赖
测试可用客户端Claude Code、Claude Desktop、Cursor 等
安全等级： A 级 · 标准受控运行 (A)·该工具经 AgentHub 静态安全特征扫描，无高危越权行为。建议在项目级配置文件中指定工作区范围。
暂无自动生成的安装指引，请查看源仓库 README。

常见报错排查与运行避坑 (Troubleshooting)FAQ

针对 HTML 演示文稿生成 在 Cursor、Claude Code 中的常见连接错误与解决办法

在 Cursor / Claude Code 中配置 frontend-slides 提示 connection closed 或 exit code 1？

通常由本地运行时环境缺失或命令路径未被 IDE 继承引起。排查步骤： 1. 确认已安装 Node.js 18+（支持 npx）或 Python 3.10+（支持 uvx）； 2. 尝试在终端运行 which npx 或 which uvx，把配置文件中的 "command" 字段改为完整绝对路径； 3. 修改 mcp.json 后，必须完全重载或重启客户端窗口。

Fix Snippet
# 终端测试命令是否存在：
which npx
node -v
提示 spawn npx ENOENT 或 command not found？

这是因为编辑器后台进程未加载完整的终端环境变量（PATH）。解决方案：在全局安装该包（如 npm install -g 包名），或在配置文件中将 command 设置为系统的实际路径（如 Windows 下的 C:\Program Files\nodejs\npx.cmd，Mac 下的 /usr/local/bin/npx）。

调用工具时响应超时或网络下载依赖失败？

国内环境下首次执行 npx 或拉取依赖时可能因网络受限而超时。建议将 npm 镜像源切换为国内高速镜像（npm config set registry https://registry.npmmirror.com），或在系统级开启开发代理工具。

在对话中描述任务，Agent 没有自动调用 frontend-slides 规则？

请检查 SKILL.md 是否位于当前项目的 .cursor/skills/frontend-slides/SKILL.md（Cursor）或 ~/.claude/skills/frontend-slides/SKILL.md（Claude Code）。在输入提问时，可以显式提示 AI “请使用 frontend-slides 规范来执行”，以提高智能体的规则匹配权重。

仍连不上？查看 MCP 连接失败排查指南 →

免安装模拟调用 (Playground)

仿真环境

frontend-slides 规则注入与 Agent 行为仿真 · 无需配置本地环境，直接预览调用参数与返回格式

沙盒就绪 (Virtual Mock)
fn: agent_skill_runtimeAgent 在上下文中匹配并应用 frontend-slides 的 System Prompt 规范与工作流约束
请求入参 (Arguments)JSON Schema
{
  "skill": "frontend-slides",
  "rulePath": ".cursor/skills/frontend-slides/SKILL.md",
  "userGoal": "请使用 frontend-slides 的方法与标准帮我完成当前任务",
  "client": "Cursor / Claude Code"
}
💡Agent 在规划任务时会自动生成并传递上述入参
Agent Tool Output

点击上方「模拟运行」按钮

查看该工具在 Agent 内部的返回数据格式

测试环境：AgentHub Virtual SandboxJSON-RPC 2.0

选型与决策建议（为什么选它？）

帮助你快速判断该资源是否契合当前项目，避免盲目折腾

适合什么任务？
  • 设计稿评审
  • 素材批量导出
  • 品牌规范检查
什么时候不建议用？
  • 未授权商用字体/素材的自动下载
推荐工作流搭配：查看完整场景 →

frontend-slides + 对应场景 Prompt → 组成标准 Agent 自动化任务

Skill 实战教程：从安装到看见效果

按完整实例走一遍（含期望效果与对比验收）。装完本页资源后，用教程里的提示词核对是否真正生效。

打开教程 →

Agent Skill 是带 SKILL.md 的指令包。安装后，AI 会根据 description 在匹配任务时自动加载，无需每次手动粘贴提示词。

相关资源

中文公文写作

v2.0.25

SkillClawHub9.1k

io.clawhub.gongyu0918-debug/chinese-official-writing

用于中文公文、事务性材料和新闻稿件的起草、改写、压缩、润色、审校、文种核对、去口语化、降 AI 味及 Word 格式处理，适用于机关、企事业单位、学校和新闻机构。涵盖申请、请示、报告、通知、通告、意见、决定、决议、议案、公报、命令、函、复函、批复、说明、方案、纪要、公告、公示、通报、制度、规定、办法、细则、操作规程、工作要点、总结、调研、讲话、致辞、主持词、述职、可研、审查材料、技术需求、新闻消息、编者按、新闻评论，以及采购、整改、反馈和 AI 算力等场景。

source
在 ClawHub 查看

常搭配使用

继续逛 AgentHub

大多数人安装前还会对比同类工具或看场景方案——下面这些能帮你少走弯路。

浏览更多同类搜索相似资源按场景选型场景提示词Skill 实战教程评测与对比

收录徽章：把 AgentHub 挂到你的官网

复制下面任意一段代码到项目主页、官网或 GitHub README。徽章是 SVG 热链，无需上传文件，链接指向本页，访客可由此直接找到安装方式。

预览AgentHub 已收录：HTML 演示文稿生成
HTML
<a href="https://myagenthub.cn/p/skillsmp.zarazhangrui-frontend-slides-skill-md" title="AgentHub 已收录：HTML 演示文稿生成" target="_blank" rel="noopener">
  <img src="https://myagenthub.cn/badge/skillsmp.zarazhangrui-frontend-slides-skill-md" alt="AgentHub 已收录：HTML 演示文稿生成" height="20" style="border:0"/>
</a>
Markdown（GitHub README）
[![AgentHub 已收录：HTML 演示文稿生成](https://myagenthub.cn/badge/skillsmp.zarazhangrui-frontend-slides-skill-md)](https://myagenthub.cn/p/skillsmp.zarazhangrui-frontend-slides-skill-md)

徽章由 /badge/<资源ID> 动态生成，名称与收录状态变化后自动更新；请保留链接指向，它是收录来源的判定依据。

统一 Manifest

{
  "id": "skillsmp.zarazhangrui-frontend-slides-skill-md",
  "type": "skill",
  "version": "main",
  "displayName": "frontend-slides",
  "description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.",
  "author": {
    "name": "zarazhangrui"
  },
  "homepage": "https://skillsmp.com/creators/zarazhangrui/frontend-slides/skill",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "zarazhangrui-frontend-slides-skill-md",
        "version": "main",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "repo_stars:25815"
  ],
  "provenance": {
    "origin": "skillsmp",
    "originalId": "zarazhangrui-frontend-slides-skill-md",
    "originalUrl": "https://skillsmp.com/creators/zarazhangrui/frontend-slides/skill",
    "isOfficial": false,
    "status": "active"
  }
}