DeepSeek Harness 插件 HTML Workbench：实时预览与可视化编辑 HTML
英文标题：DeepSeek Harness 插件：HTML 实时可视化编辑
HTML Workbench 是一款面向 DeepSeek Harness（DSH）及通用 Agent 的本地 HTML 可视化编辑工具，可在生成页面后直接在侧边栏预览和微调。它以本地 HTML 源文件作为唯一事实源，人工操作与 AI 对源文件的修改可协同进行，并通过 revision 检查避免覆盖彼此改动。该工具基于 GrapesJS 构建，不引入私有中间格式，服务仅监听 127.0.0.1。开发者既可将其作为 DSH 插件使用，也可通过 Skill 接入 Claude Code、Codex 等 Agent 客户端。
3.2 KB
589 B
59.1 KB
65.7 KB
95.1 KB
110.6 KB
90.6 KB
136.6 KB
97.5 KB
96.8 KB
86.2 KB
8.3 KB
中文
除了生成 Markdown 之外，让 Agent 通过单页 HTML 交付可视化素材的应用也越来越多。例如，落地页、报告页、活动页等，都可以用一个文件直接打开。
随着 DeepSeek Harness 在上周发布，我也为 DSH 制作了一个插件：HTML Workbench。一句话生成 HTML 后，可以随时在侧边栏预览；它不仅支持预览，还可以随手「微调页面」。
项目托管在：github.com/alienzhou/h…
先看效果
让 Agent 为项目生成一个介绍页：
生成结果是一个普通 HTML 文件，可直接在侧边栏中预览。但它不只是预览器——还是一个可视化编辑器。
你可以直接在页面上点选元素，修改文案、更换图片、调整样式；改动会实时保存回项目中的源文件：
不仅人可以改，AI 也可以同时修改。比如，你对 Agent 说「把页面的按钮颜色改成紫色」，它改它的，你改你的，双方会在同一个文件上协同工作：
更换字体、调整边距、修改布局等过去需要在聊天框中反复沟通多轮的事情，现在用鼠标点击几下即可完成。若要验证交互效果，可切换至 Preview 模式：
它不是 HTML 生成器
这是首先需要强调的一点：HTML Workbench 不生成 HTML。
你可以使用任何 AI、任何设计工具，甚至手写代码来产出页面，然后将文件交给 Workbench。它的作用是将一个现有 HTML 文档转变为具备预览能力、并可与 AI 实时协同的可视化编辑器。
架构：本地 HTML 源文件是唯一事实源
整个设计的核心只有一条：所有编辑都围绕本地 HTML 源文件进行。
- 本地编辑台：通过 Python 启动本地服务；编辑页面基于 GrapesJS 实现可视化编辑，并针对 AI 生成的 HTML 处理了一些继承关系和特殊情况；
- 人与 AI 双模式：人工负责点选编辑和样式微调；AI 直接编辑 HTML 源文件；
- 协作机制：双方的修改都会写回同一个源文件。配合 revision 检查，当编辑器状态过期时，它会暂停操作，而非覆盖 AI 刚刚完成的修改。
这一设计的好处在于：Workbench 不会引入任何私有中间格式。文件就是文件，任何时候都可以关闭工作台，直接用编辑器打开，或将文件交给下一个工具继续处理。
服务仅监听 127.0.0.1，文件不会暴露至局域网。
两种用法
用法一：作为 DeepSeek Harness 插件。
如果你正在使用 DeepSeek Harness，它提供一等公民级别的插件支持。可视化编辑器可直接嵌入 Web UI 右侧栏：当 Agent 创建或修改 .html 文件时，面板会自动同步，无需单独打开浏览器窗口：
dsh plugin --profile web add @vibe-x/dsh-html-workbench
用法二：作为 Skill 挂载到任意 Agent。
通过一条命令安装后，将其挂载到 Claude Code、Codex 等 Agent 客户端即可使用：
npx skills add vibe-x/html-workbench
之后让 Agent 生成 HTML 时，它会自动引导你在 Workbench 中打开页面。
项目托管在：github.com/alienzhou/h…
English / 原文
除了生成 markdown 之外，让 Agent 通过单页 HTML 交付可视化素材也应用的越来越多。例如一个落地页、报告页、活动页，一个文件就能直接打开。
加上上周 DeepSeek Harness 发布，我就给 DSH 做了一个插件：HTML Workbench 。一句话生成 HTML 之后，可以在侧边栏随时预览；不仅能随时预览，还可以随手「微调页面」。
项目托管在：github.com/alienzhou/h…
先看效果
让 Agent 给项目生成一个介绍页：
生成出来就是一个普通的 HTML 文件，可以在侧边栏直接预览。但不光是预览——它还是一个可视化编辑器 。
你直接在页面上点选元素改文案、换图、调样式，改动实时保存回项目里的源文件：
而且人可以改，AI 也可以同时改。你对 Agent 说一句「把页面的按钮颜色改成紫色」，它改它的，你改你的，两边在同一个文件上协同：
换字体、调边界、改布局，这些过去要在聊天框里来回好几轮的事，现在鼠标点两下就完成了。想验证交互，切到 Preview 模式：
它不是 HTML 生成器
这是我想强调的第一件事：HTML Workbench 不生成 HTML。
你可以用任何 AI、任何设计工具、甚至手写代码去产出页面，然后把文件交给 Workbench。它做的事是把一个已有的 HTML 文档，变成一个带预览、能和 AI 实时协同的可视化编辑器。
架构：本地 HTML 源文件是唯一事实源
整个设计的核心就一条：所有编辑都围绕本地 HTML 源文件进行 。
- 本地编辑台 ：Python 起一个本地服务，编辑页基于 GrapesJS 做可视化编辑，针对 AI 生成的 HTML 做了一些继承和特殊情况的处理；
- 人与 AI 双模式 ：人做点选编辑、样式微调；AI 直接编辑 HTML 源文件；
- 协作机制 ：双方的修改都落回同一个源文件，配合 revision 检查，编辑器状态过期时会停下来，而不是把 AI 刚做的改动覆盖掉。
这个设计的好处是：Workbench 不引入任何私有的中间格式。文件就是文件，任何时候你都可以关掉工作台，直接用编辑器打开，或者把文件丢给下一个工具。
服务只监听 127.0.0.1，文件不会暴露到局域网。
两种用法
用法一：作为 DeepSeek Harness 插件。
如果你在用 DeepSeek Harness，它有一等公民的插件支持，可视化编辑器直接嵌在 web UI 的右侧栏，Agent 一创建或修改 .html 文件，面板自动跟上，不用单独开浏览器窗口：
dsh plugin --profile web add @vibe-x/dsh-html-workbench
用法二：作为 Skill 挂载到任意 Agent。
一条命令安装，挂到 Claude Code、Codex 这类 agent 客户端上就能用：
npx skills add vibe-x/html-workbench
之后你让 Agent 生成 HTML，它会自动引导你把页面在 Workbench 里打开。
项目托管在：github.com/alienzhou/h…