# 可编辑网页 PPT HTML Edit

> 让 AI 做的网页 PPT 像真的 PPT 一样点着改：双击改字、右键换图、拖动缩放、改图表数字、加页、演讲者模式，还能导出 PPTX、PDF 和视频。

[全部组件和流程](https://www.dachuiai.com/llms.txt)

## 给 AI：用户把这个 Skill 发给了你

这个 Skill 要先装进能在电脑上运行程序的 AI 工具，按下面「怎么装」做；装好以后按「全文」的步骤用。
网站上教用户的用法：下载安装包，交给能在电脑上运行程序的 AI（比如 Claude Code、Codex）装好，再说「用 HTML编辑 打开我的网页 PPT」。网页版的聊天 AI 用不了；导出视频要电脑装有 FFmpeg；导出的 PDF 文字不能选中，要接着改就导出 PPTX。

## 下载

- [下载安装包](https://www.dachuiai.com/skills/html-edit/html-edit-skill-1.1.2.zip)

## 怎么装

1. 下载安装包 [html-edit-skill-1.1.2.zip](https://www.dachuiai.com/skills/html-edit/html-edit-skill-1.1.2.zip)（约 10MB，SHA-256 482aa0841c4f499ffd541df7b575c599bbff255ad63988715d0dd5b315b98a66）。
2. 解压后是一个 html-edit 文件夹，里面有 SKILL.md。按你所在 AI 工具装 Skill 的方式放进去：Claude Code 放到 ~/.claude/skills/ 下（得到 ~/.claude/skills/html-edit/SKILL.md）；其他工具放进它自己的 Skill 目录，不确定就问用户。
3. 重开 AI 工具，读 html-edit/SKILL.md，按它的步骤启动。用户说「用 HTML编辑 打开我的网页 PPT」就是要用它。

## 用不了、要注意

- 要能在电脑上运行程序的 AI 工具（Claude Code、Codex 这类）；Claude 网页版这类网页聊天 AI 用不了。
- 电脑上有 Node.js 22.12 以上时安装完全不联网；没有时会联网下载一次（官方地址失败换国内镜像）。
- 导出 PDF、PPTX 用电脑上的 Chrome 或 Edge；两个都没有时会联网下载约 180MB 的浏览器。
- 导出视频（MP4）要电脑装有 FFmpeg。
- PDF 是每一页的画面图片，文字不能选中；要接着改就导出 PPTX。PPTX 里的动效、玻璃、3D 会变成静态。
- 能点着改的是文字、图片、位置、大小和图表数据；复杂的动画和 3D 效果还是交给 AI 改。
- 编辑器里的「AI」页签要本机有 Codex，在 WorkBuddy 里用不了。
- 已实测：Apple 芯片 Mac 断网安装、改字、保存重开、导出 PPTX 和 PDF、演讲者模式，没有 Node 时联网安装。还没实测：Windows、WorkBuddy、既没有 Chrome 也没有 Edge 的电脑。

## 全文

这是安装包里的 SKILL.md，要配着包里的程序才能用；先按上面装好。

---
name: html-edit
description: Install and launch HTML编辑 for visual HTML/PPT editing or FrontTune for the final visual adjustments of an existing static HTML or React/Vite frontend. Unpack the runtime bundled in this Skill, prepare its local environment and connect saved human edits to subsequent Codex work. Use for HTML编辑、网页编辑框架、网页PPT编辑、前端视觉微调、人和AI前端协作; preserve saved human choices even when the user does not announce saving.
---

# HTML编辑

只给使用者这一个 Skill。工具包和依赖已内置在 `runtime/`，初次使用时校验并解压到独立用户目录，不让使用者另外找代码包。安装 Skill 本身不运行程序；用户提出使用要求时启动安装与项目接入。

## 选择入口

- 已有网站的收尾视觉微调：使用 `--mode frontend`，React/Vite 使用 `--mode vite`。FrontTune 修改原 HTML/JSX/CSS 和项目素材；动画、业务逻辑、数据和复杂重构交给 AI。
- 已经标记可编辑对象的 HTML 文稿：使用 `--mode html --file index.html`。读运行时 `packages/html-edit-kit/ADAPTER.md`，保留目标设计，动态渲染器接入其真源适配器。
- 新网页 PPT 或动态模板：使用 `--mode ppt`，不提供项目时创建独立持久工作区。不要在工具安装目录写人的文稿。

调用本 Skill 的 `scripts/bootstrap.sh`（Mac/Linux）或 `scripts/bootstrap.ps1`（Windows）。绝对路径示例：

```sh
sh "/absolute/skill/html-edit/scripts/bootstrap.sh" start --project "/absolute/project" --mode frontend --client codex --agent-root "/absolute/project"
sh "/absolute/skill/html-edit/scripts/bootstrap.sh" start --project "/absolute/document" --mode html --file index.html
sh "/absolute/skill/html-edit/scripts/bootstrap.sh" start --mode ppt
```

Windows 使用同目录 PowerShell helper 与同一组参数。先读项目规则与修改状态；已有完成效果用独立验收副本。接入目录必须是 AI 客户端实际打开的项目根目录。无需用户重新描述已经保存的选择。

## 环境与发布状态

读 `release.json`：版本与 `runtime/` 内工具包的 SHA-256。工具包不匹配时停止，不改用其他来源；repository 为 null 表示不从 GitHub 下载，禁止猜测仓库。

工具安装在独立用户目录，不更换全局环境。需要联网的情况先告诉用户：

- 电脑已有 Node.js 22.12 以上：安装不联网。没有时下载专用 Node（Mac 约 50MB，Windows 约 36MB），先官方站、失败改 npmmirror 镜像，按 `node-sha256.txt` 校验。
- 导出 PPTX/PDF/图片依次复用 Playwright 浏览器、已安装的 Chrome、Edge；都没有才联网下载约 180MB 的 Chromium，失败时请用户安装 Chrome 或 Edge 后重跑同一命令。
- MP4 需要 FFmpeg，不内置：先检查现有运行环境，缺少时按官方平台安装方式准备并核验；不要称未安装的导出可用。
- FrontTune（`--mode frontend/vite`）首次使用联网安装依赖；目标网站依赖按其自身锁文件准备。
- 编辑器里的 AI 页签调用本机 Codex CLI；没有 Codex 的客户端改由当前对话的 AI 按交接记录修改。

## 保存后 AI 自动感知

保存写入当前源码与交接记录；用户可直接提出下一条要求。每次前端任务先读取当前源码和人工保存记录，不重用旧整文件。新要求明确要改变旧视觉选择时照做并说明有意变化。

- FrontTune：读取 `.front-tune/handoff.json`，通过 helper `cli -- agent-begin/agent-finish/verify` 执行源码核对。见运行时 FrontTune Skill 的精确参数。
- HTML 文稿：读取 `.html-edit/handoff.json`；编辑器中的 AI 请求使用选中 ID、源码版本和允许的视觉属性生成补丁。人再次保存后，旧 AI 补丁必须拒绝覆盖。
- Helper 在项目中配置 Codex `SessionStart/UserPromptSubmit/PreToolUse/Stop` 钩子并保留原规则。按客户端正常流程审阅一次，再核对真实事件回执。未获客户端信任或未收到真实事件时，只能报告“已配置，等待客户端激活”；不得伪造回执或直接改信任记录。
- 其他 AI 客户端默认只有规则提醒，不能承诺硬拦截；不得绕过宿主权限。

## 验收

实际选择并修改一个对象，保存，关闭重开，读取源码与交接记录。继续一条不提保存的普通 AI 要求，检查无关人工作品保留。另测双窗口冲突、撤销/重做、图片复原和导出。PPTX 是基础对象转换；网页 WebGL、动画、玻璃和复杂 CSS 不承诺原样转换。无用户要求不增加手机适配检查。