除了生成 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…
