前言¶
用 AI 生成演示页时,常见结果是「能看不能改」:版式要动一下就得回到对话里重新生成,或者手工改一大段 HTML。若还需要把 PPT、PDF 转成网页演示,又希望转完后仍能拖拽、调顺序、本地保存,通用前端生成流程往往接不上这类需求。
下面介绍 SkillHub 上的 frontend-slides-editable(坐标 @user_26736ada/frontend-slides-editable-breakingwall,当前版本 2.2.0)。它面向 Agent:在用户要单文件 HTML 演示、且生成后仍要在浏览器里编辑时,由 Skill 约束产出形态与能力边界。
这是什么¶
frontend-slides-editable 是社区来源(community)、分类为 dev-programming 的 Agent Skill,发布者为 user_26736ada。官方简介说明其适用时机为:
- 需要单文件 HTML 演示,生成后在浏览器中仍可编辑;
- 需要对象级版式编辑、幻灯片重排;
- 需要本地保存 / 导出;
- 需要将 PPT / PDF 转为网页演示,且转换后继续可编辑。
Skill 标注 requires_api_key=false,不依赖额外 API Key。维护与详细说明以 SkillHub 页面为准。
核心功能¶
以下能力均来自官方简介,未在资料中出现的细节不展开:
| 方向 | 说明 |
|---|---|
| 交付形态 | 单文件 HTML 演示 |
| 生成后编辑 | 在浏览器内保持可编辑,而非只读展示 |
| 布局与结构 | 对象级布局编辑、幻灯片顺序调整 |
| 持久化 | 本地保存与导出 |
| 迁移 | PPT / PDF 转 Web,转换结果仍支持编辑 |
Skill 基于通用 SKILL.md 格式,由 Agent 在匹配用户意图时加载并遵循其中的工作流与约束。
安装与启用¶
1. 安装 SkillHub CLI(若尚未安装)¶
先检查是否已安装:
command -v skillhub && skillhub --version
未安装时,可按 SkillHub 官方安装文档执行完整安装(CLI + 默认 Skill):
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI 时:
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
说明与限制见:SkillHub 安装与优先源配置。
2. 安装本 Skill¶
安装时必须用 --dir 指向当前 Agent 实际使用的 skills 目录;默认装到 ./skills/ 时,部分客户端不会自动识别。
skillhub install user_26736ada/frontend-slides-editable-breakingwall --dir <你的 skills 目录>
也可将下面提示词发给已接入 SkillHub 安装流程的 AI,让其按官方文档完成安装:
请根据 https://skillhub.cn/install/skillhub.md,安装 `@user_26736ada/frontend-slides-editable-breakingwall`。
3. 各客户端 skills 目录(节选)¶
路径来自 SkillHub 安装文档,装好后按客户端要求重启或刷新技能列表:
- Cursor:
~/.cursor/skills/ - Claude Code:
~/.claude/skills/ - Codex:
~/.codex/skills/或项目下的.agents/skills/
Codex CLI、Claude Code、Cursor 的差异主要体现在 skills 目录位置;安装命令本身均为 skillhub install … --dir <目录>。资料中未单独列出某一客户端的额外配置项,此处不臆造。
典型用法¶
本 Skill 没有单独的「命令行子工具」用法,而是在对话中由 Agent 加载后生成或转换演示稿。可与官方简介对齐的诉求示例如下(表述可按项目习惯调整,核心是命中 Skill 的触发条件):
-
从零生成可编辑单页演示
说明主题、页数或大纲,并明确要求「单文件 HTML」「生成后要在浏览器里改文字、挪元素、调幻灯片顺序」「支持本地保存或导出」。 -
在已有 HTML 演示上改结构
提供现有单文件或说明当前文件,要求对象级改版式、重排 slide,且保持单文件、浏览器内可继续编辑。 -
PPT / PDF 转 Web 且可继续改
提供源文件或路径(在 Agent 能访问的前提下),要求转为网页演示形态,并保留后续在浏览器中的编辑能力,而非静态截图页。
具体实现步骤、内嵌编辑器形态、导出格式等以 Skill 包内 SKILL.md 为准;本文不复述未在公开页面抓取到的实现细节。
适用场景与注意¶
适合谁
- 需要把演示交付成 一个 HTML 文件,方便邮件、内网静态托管或离线打开;
- 希望 非开发者 在浏览器里改内容、调顺序,而不是每次找开发改代码;
- 有 PPT / PDF 上 Web 的需求,且不接受「转完即死」的只读页。
限制与注意
- 社区 Skill,行为与版本以 SkillHub 为准;当前公开版本为 2.2.0。
- 安装后若 Agent 未加载到技能,优先检查
--dir是否指向正确目录,并参考客户端文档刷新技能。 - PPT / PDF 转换的版式还原度、字体与资源依赖,取决于 Skill 内约定与源文件复杂度;资料未承诺具体还原指标,使用时应在生成结果上自行验收。
- 无需 API Key,但不等于无需本地或 Agent 运行环境;大文件转换仍受客户端与浏览器能力限制。
结尾¶
frontend-slides-editable 把「单文件 HTML 演示」和「生成后仍在浏览器里改」绑在一起,并覆盖重排、本地保存导出以及 PPT / PDF 转 Web 后继续编辑等场景,适合交给 Agent 统一产出形态。
- SkillHub 页面:https://www.skillhub.cn/skills/user_26736ada/frontend-slides-editable-breakingwall
- 安装说明:https://skillhub.cn/install/skillhub.md
- 坐标:
@user_26736ada/frontend-slides-editable-breakingwall(v2.2.0)