用HTML做出漂亮的PPT,高审美 + 可拖拽编辑,浏览器里就能排版

最近用 HTML 做全屏演示慢慢变得很火，因为HTML 在动效与表现力上限更高，排版与视觉更自由。

但常用的如frontend-slides这种skill写出来的HTML通常不能再浏览器直接编辑，这对很多小白简直是劝退级的弊端。

今天介绍的Skill是frontend-slides-editable，可以理解它是可编辑版 Frontend Slides，它可以生成在浏览器中可以直接编辑的HTML全屏演示。

一、与frontend-slides的区别

用一句话概括：frontend-slides-editable = 单文件 HTML 演示 + 内置可视化编辑运行时。

若你只需要「打开即播、文件尽量小」，父版更合适；若你预期 布局、文案、配图还会变，可编辑版更省心。

二、如何上手

2.1、安装 Skill

以 Cursor 为例（claude code和codex通用），直接输入让其安装，安装完成后按照使用方式进行使用即可：

2.2、在对话中使用

发送例如（可以在提示词中指定页数、大纲、风格.....）：

使用frontend-slides-editable将以下内容做单文件可编辑 HTML 演示【参照内容】大模型时代核心名词全景解析PPT 大纲（共 15 页）第 1 页：封面标题：大模型时代核心名词全景解析副标题：从基础概念到智能应用的完整图谱演讲人 / 日期背景图：抽象的神经网络连接图或 AI 大脑概念图第 2 页：目录为什么大模型催生了这么多新名词？基础层：大模型本身交互层：Prompt 与 Context增强层：Memory 与 RAG智能层：Agent、Skill 与 MCP概念关系全景图总结与未来展望第 3 页：为什么大模型催生了这么多新名词？技术演进速度：从 "能回答问题" 到 "能完成任务" 的快速跨越......

2.3、在浏览器中编辑

用系统默认浏览器打开生成的 .html：

• 翻页：方向键、空格、滚轮（编辑模式下滚轮翻页会关闭）；

• 编辑：E 或左上角 Edit；

• 页面：Pages；

• 保存：Save 或 Ctrl+S。

2.4、定稿导出

满意后于 Pages 侧栏使用Export HTML，将干净版本发给同事或嵌入内网静态页。需要母版继续改时，保留带 localStorage 的源文件即可。

三、核心能力拆

3.1、浏览器里直接改

进入编辑模式（按 E，或将鼠标移到页面左上角唤出 Edit）后，你可以：

• 拖拽移动对象（⠿ 手柄），带对齐吸附（幻灯片中心与其他对象边缘）。

• Ctrl + 点击 多选（macOS 为 Control 键）。

• 缩放文本框与图片/视频（角点 + 边线手柄），文字随宽度自动重排。

• 富文本：粗体/斜体、字体族、视口安全的 Scale 档位、固定 px 字号（支持自定义数字输入，避免嵌入环境 prompt 不可用）。

• Undo / Redo（Ctrl+Z / Ctrl+Y）。

• 删除对象：悬停 × 或 Delete 键。

3.2、Pages 侧栏

Pages 提供缩略图胶片条，支持：

• 拖拽重排页面顺序；

• 复制、删除页面（带确认）；

• +New Page 插入空白页（风格与当前 deck 一致）。

3.3、样式：46 套预设 + 34 套「真实模板」移植

风格不是随便换配色，而是按预设的 Layout + Signature Elements 实现（Skill 明确要求：可编辑不能把多套风格压成同一种首屏模板）。

2.0 在 examples/generated/presets/ 维护两层：

• 19 套 legacy 预设：由 build-preset-decks.py 生成，用于运行时自检与风格预览；

• 34 套 ported 预设：从本地 beautiful-html-templates 索引移植，保留上游模板的字体、CSS 变量、装饰语言，并统一注入 Swiss/reference 编辑器；内容槽位用 data-edit-slot锁定版式、可改文案。

早期 7 套保留兼容别名（如 signal-gold、studio-volt 等）。若你已在用张咋啦老师侧的「美丽 HTML 模板」体系，2.0 的意义在于：模板审美保留，编辑体验统一。

3.4、从 PPT / PDF 到「可继续改的网页」

除从零生成外，Skill 支持 Mode B：转换：

• .pptx：scripts/extract-pptx.py 抽取文本、备注与资源；

• .pdf：scripts/extract-pdf.py 抽取页面与资源（版式为启发式，非像素级还原）。

二者输出统一的 extracted-slides.json + assets/，再经 Phase 1–2 确认内容与风格，生成可编辑单文件 HTML。适合「公司只有 PDF/PPT，但希望在浏览器里改一版再分享」的场景。

最后：

如果你觉得文章对你有帮助，欢迎点赞、收藏并分享给你的朋友。

往期文章：