frontend-slides-editable

Frontend Slides - Editable

把 AI 生成的演示文稿，变成可以继续编辑的单文件 HTML。 Create stunning single-file HTML decks that stay editable after generation.

一个适用于 Claude Code / Codex 的技能，用来生成惊艳、带动画、单文件的 HTML 演示文稿，并内置浏览器编辑器：可拖拽对象、调整大小、编辑文本、重排页面、本地保存，并导出干净的独立 HTML。

A Claude Code / Codex skill for creating stunning, animation-rich, single-file HTML presentations with a built-in browser editor: drag objects, resize blocks, edit text, reorder slides, save locally, and export a clean standalone HTML.

如果这个 skill 帮你把 deck 从“一次性生成”变成“可继续打磨”，欢迎点一个 Star 支持。If this helps your decks stay editable instead of disposable, a Star helps more people find it.

目录 · Table of contents

• v2.0 更新摘要 · Release 2.0 highlights
• 这个 Skill 是做什么的 · What this does
• 安装 · Installation
• 用法 · Usage
• 样式预览图库 · Style preview gallery
• 文档结构 · Documentation map
• 依赖要求 · Requirements
• 试用参考 · Try the reference
• Star History

v2.0 更新摘要 · Release 2.0 Highlights

本轮将可编辑运行时与交付体验整体推进到 2.0：更强媒体工作流、更顺手的排版工具栏，以及更明确的缩放与导出行为。 This release bumps the editable runtime and authoring workflow to 2.0: stronger media workflows, a smoother formatting toolbar, and clearer resize + export behavior.

• Add element（添加对象）：编辑模式下可从当前页插入文本 / 图片 / 视频占位，并与撤销栈联动。 Add element: insert text / image / video placeholders on the current slide from edit mode, wired into undo/redo.

• 图片与视频（Images & video）：支持本地文件选择、FileReader 写入 data URL（单文件自包含）；图片支持剪贴板 Ctrl+V / ⌘V 粘贴（非富文本焦点时）；双击已有图/视频可重新选择文件。 Images & video: pick local files and embed as data URLs (single-file friendly); paste images with Ctrl/Cmd+V when not typing in rich text; double-click existing media to replace.

• 缩放与媒体框（Resize & media box）：选中对象后除右下角外，增加右侧 / 底边手柄，便于沿单边调整；幻灯片内图片/视频取消不当的 max-height 限制，缩放框体时画面会随对象尺寸填满（object-fit: contain）。 Resize & media box: corner handle plus right and bottom edge handles; in-slide images/videos no longer clamp to a global max-height, so resizing the frame actually scales the visible media (object-fit: contain).

• 富文本工具栏（RTE）：字体 / 字号档位收纳为抽屉；自定义像素字号改为内联数字输入 + Apply（避免嵌入环境 prompt 不可用）；在工具栏上改字体/字号时会尽量保留文本选区。 RTE toolbar: font / size controls live in drawers; custom px size uses an inline numeric field + Apply (no prompt); selection is preserved when applying font/size from the toolbar where possible.

• 对象与页面（Objects & pages）：每个对象带删除控件；Pages 删页等有更稳妥的确认与文案；导出 HTML 时会剥离仅编辑器用的上传按钮与 file 输入。 Objects & pages: per-object delete control; safer slide-delete confirmation copy; export strips editor-only upload UI and file inputs.

• 演示工具（Presentation tools）：左上角热区新增 Laser 与 Fullscreen；Laser 提供一个纯激光点（轨迹效果已按设计移除），激光点跟随指针移动，进入编辑模式或按 Esc 会自动关闭，Fullscreen 使用浏览器 Fullscreen API。 Presentation tools: the top-left hover cluster now includes Laser and Fullscreen; Laser is a dot only (the trailing-stroke effect was removed by design) — the dot follows the pointer, it exits on edit mode or Esc, and no trail nodes are ever created. Fullscreen uses the browser Fullscreen API.

• 预设与构建（Presets & build）：examples/generated/presets/ 现在分两层维护：12 套 legacy preset 仍由 scripts/build-preset-decks.py 生成，用于 runtime smoke + 风格预览；34 套 ported preset 由 scripts/build-template-port-decks.py 从真实上游模板移植，保留原始 CSS、字体、slide classes、装饰语言，并统一注入 Swiss/reference 编辑器 + locked slot adapter。重名输出由 ported 层覆盖，以保持 46 个最终 preset 文件。 Presets & build: examples/generated/presets/ now has two build layers: 12 legacy presets still come from scripts/build-preset-decks.py for runtime smoke + visual preview, while 34 ported presets are generated by scripts/build-template-port-decks.py from real upstream templates, preserving original CSS, fonts, slide classes, decorative vocabulary, and using the shared Swiss/reference editor plus a locked slot adapter. Overlapping output names are intentionally replaced by the ported layer, keeping 46 final preset files.

• 真实模板移植（Template ports）：当前 ported 覆盖本地 beautiful-html-templates 索引中的 34 套模板。输出 slug 默认沿用上游 slug，早期 7 套保留兼容别名（如 signal-gold.html、studio-volt.html、monochrome-ledger.html）。这些文件复制并改造本地 beautiful-html-templates/templates/{source_slug}/template.html；data-edit-slot 内容槽位使用 Swiss 的 RTE/Undo/Redo/Save/Export 体验，网格、纹理、hairlines、glitch、纸张质感等设计骨架锁定，用户新增对象仍可自由拖拽缩放。 Template ports: ported coverage now includes all 34 templates in the local beautiful-html-templates index. Output slugs default to upstream slugs, while the original seven keep compatibility aliases such as signal-gold.html, studio-volt.html, and monochrome-ledger.html. These files adapt local beautiful-html-templates/templates/{source_slug}/template.html; data-edit-slot content uses the Swiss RTE/Undo/Redo/Save/Export experience, while grids, textures, hairlines, glitch treatments, and paper systems remain locked. User-added objects remain freely draggable/resizable.

• 槽位与对象的区别（Slots vs objects）：真实模板的原生标题、正文、指标、图片等通过 data-edit-slot 原地编辑，保持原模板布局不被拖散；只有通过 Add element 新增到 .slide-edit-layer 的内容会成为带手柄的 data-slide-object，可拖拽、缩放、删除和多选。 Slots vs objects: native template titles, body copy, metrics, and images are edited in place through data-edit-slot while the original layout stays locked. Only content added through Add element into .slide-edit-layer becomes a handled data-slide-object that can be dragged, resized, deleted, and multi-selected.

• 解锁布局（Unlock layout）：ported decks 默认使用 data-template-edit-mode="slots"。如果需要自由移动原生模板内容，可在编辑模式点击 Unlock layout，当前页的可编辑槽位会移动/包装成可拖拽/缩放的 data-slide-object，保留原始 tag、class 与计算后的字体样式，并支持 Undo 恢复到原布局位置；背景、网格、轴线、纹理、glitch、SVG 细节和纯布局容器仍保持锁定。 Unlock layout: ported decks default to data-template-edit-mode="slots". When users need free placement, click Unlock layout in edit mode; editable slots on the current slide are moved/wrapped into draggable/resizable data-slide-object components while preserving the original tag, classes, and computed typography, with Undo restoring the original layout position. Backgrounds, grids, axes, textures, glitch layers, SVG internals, and pure layout wrappers remain locked.

参考实现仍以单文件 examples/editable-deck-reference.html 为契约；生成新 deck 时请继续遵循本仓库 SKILL.md 与 editor-runtime.md。 The reference contract remains the single file examples/editable-deck-reference.html; follow SKILL.md and editor-runtime.md when generating new decks.

这个 Skill 是做什么的 / What This Does

Frontend Slides - Editable 是 frontend-slides 的可编辑分支。它保留了原始 skill 的风格探索流程、视口适配规则和 PPT / PDF 转换能力，并在此基础上加入完整的浏览器内编辑运行时。交付用的幻灯片仍应按 STYLE_PRESETS.md 实现各预设的布局与签名元素；可编辑只是增加运行时，不是把多套风格压成同一套版式原型。examples/generated/presets/ 是运行时自检 + 风格预览样例。

Frontend Slides - Editable is the editable fork of frontend-slides. It preserves style discovery, viewport discipline, and PPT / PDF conversion from the original skill, then adds a full in-browser editing runtime. Real decks should still implement each preset’s layout and signature elements from STYLE_PRESETS.md — edit mode is an add-on, not permission to reuse one generic slide prototype for every aesthetic. examples/generated/presets/ is for runtime smoke tests and visual previews.

操作演示（1.0 录屏） · Demo screencast (1.0 era)

中文：以下为 1.0 时期在浏览器中的操作录屏，便于快速感受可编辑运行时；2.0 的变更请见上文「v2.0 更新摘要」与下文「样式预览图库」中的静态截图。若 GitHub 页面未内嵌播放视频，请直接打开下方链接在浏览器中观看。 English: This is a 1.0-era walkthrough (not a full 2.0 feature tour). See Release 2.0 highlights above and the Style preview gallery screenshots below for 2.0 deltas. If the embedded player does not load, open the URL directly.

https://github.com/user-attachments/assets/dc1db494-5e8c-4bbc-9c4a-d02be74c8e89

它适合“生成后还要继续改”的场景，例如：

It is designed for workflows where the generated output must remain editable:

• 直接在幻灯片上移动对象

• 使用 Ctrl+点击 多选

• 调整文本框大小并让文字自动重排

• 对文本进行 粗体 / 斜体 / 字体 / 字号 编辑（工具栏抽屉 + 自定义 px；改格式时尽量保留选区）

• 使用 Undo / Redo

• 在 Pages 侧栏重排或删除页面

• 用 Laser 临时指示内容，或点击 Fullscreen 进入浏览器全屏

• 添加 文本 / 图片 / 视频对象；图片可本地文件或 粘贴；视频可本地文件

• 将完整 deck 结构保存为浏览器草稿，并在支持时写入/覆盖用户选择的 HTML 文件

• 导出清理过临时编辑状态、内含当前 deck 状态与媒体素材的独立 .html

• move objects directly on slides

• use Ctrl+click multi-select

• resize text blocks with automatic reflow; edge + corner handles for media objects

• edit text inline with bold / italic / font / size (drawer toolbar + custom px; selection preserved when possible)

• use Undo / Redo

• reorder and delete slides from the Pages sidebar

• use Laser for temporary pointing, or Fullscreen for browser fullscreen presenting

• add text / image / video objects; images via local file or paste; video via local file

• persist full deck structure as a browser draft and, when supported, write/overwrite the chosen HTML file

• export a sanitized standalone .html that embeds the current deck state and media assets

如果只需要更轻量的只读输出，请使用父 skill frontend-slides（仓库见链接）。

If you only need the smallest read-only output, use the parent frontend-slides skill (repository link).

Skill 对照表 / Skill Comparison