当前位置：首页>PPT>用HTML做出漂亮的PPT,高审美 + 可拖拽编辑,浏览器里就能排版

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

2026-11-03 00:22:11

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

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

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

一、与frontend-slides的区别

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

维度	frontend-slides（父版）	frontend-slides-editable
定位	更轻量的只读 HTML 演示	生成后仍可编辑的 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锁定版式、可改文案。