Agent Skills
返回列表
浏览器可编辑 HTML 幻灯片生成器

浏览器可编辑 HTML 幻灯片生成器

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_26736ada/frontend-slides-editable-breakingwall。

技能介绍

它解决什么问题

做 HTML 演示时，单文件零依赖和“生成后还能像幻灯片工具一样编辑”常常互相打架：纯 CSS 模板好看但只能改代码；编辑器又容易把样式做成通用后台风格。frontend-slides-editable 把单文件 HTML 演示文稿和内置编辑运行时放在同一层，让生成结果既能直接打开演示，也能在浏览器里继续调整。

技能如何工作

  • 先生成，再可编辑：输出单文件 HTML/CSS/JS，不依赖 npm、构建工具或 React；对象移动、Ctrl+click 多选、对齐吸附、字体控制、undo/redo、Ctrl+S 保存和 export HTML 都由内建运行时提供。
  • 不跳过需求发现：新演示或从 .pptx / .pdf 提取内容时，技能会要求补齐目的、页数、内容、风格、编辑范围、图片和移动端目标；资料不全时只追问缺失项，不猜 slide count 或 preset。
  • 用预览收敛风格：STYLE_PRESETS 不只是颜色和字体，还包括 layout、signature elements、标题页与内容页差异；生成时要把这些规则落到 HTML/CSS，而不是复用同一套“标题+副标题+圆角卡片”。
  • 模板移植保持边界：移植 preset 使用 data-edit-slot 编辑文本、图片、指标等内容，但 grid、装饰层、纹理和间距通常锁定；用户新增对象进入 .slide-edit-layer，才可拖动、缩放和多选。

适用边界

适合做零依赖、可直接分发的 HTML deck，或需要继续手工微调的演示页。若只要只读演示，资料建议使用原始 frontend-slides，避免编辑器运行时带来的复杂度。注意它不是通用 Web 编辑器：不会承诺每个模板节点都可拖拽，也不适合需要组件化交互、后端服务或构建链的项目。每张幻灯片仍需遵守 100vh / 100dvh 与 overflow: hidden，避免页内滚动。

使用场景

  • 前端工程师把产品发布要点做成单文件 HTML deck，并在浏览器里拖动对象、改字体后导出。
  • 运营同学从 `.pptx` 提取标题与要点后，生成可继续调整的 HTML 演示页，而不是重做 PPT。
  • 设计师比较 `STYLE_PRESETS` 预览，选定 Swiss Modern 后交付单文件 deck。
  • 讲师准备课程讲义，要求每页 `100vh` 不滚动，并用页面侧栏拖拽排序与 `Ctrl+S` 保存草稿。

适合人员

  • 交付单文件 HTML deck 的前端工程师，需要避免 React 构建链并保留浏览器内微调。
  • 把 PPT/PDF 转成网页演示的市场或运营人员，希望内容可编辑但不再依赖 Office 文件。
  • 做课程或内部分享的讲师，需要每页固定视口、拖拽排序和 `Ctrl+S` 保存草稿。
  • 维护 `STYLE_PRESETS` 的设计工程师，需要保持 preset layout 与 signature elements，而不是只换色。