html-workbench 怎么安装？

在已安装 dsh CLI 引擎的环境中，进入插件页复制安装命令一键执行即可；暂不能直接安装（需源码编译或环境不满足）：缺少 main/exports/bin 入口声明；仓库 package.json 标记 private，未发布到 npm，需从源码安装。

html-workbench 兼容性怎么样？

暂不能直接安装（需源码编译或环境不满足）：缺少 main/exports/bin 入口声明；仓库 package.json 标记 private，未发布到 npm，需从源码安装。

html-workbench 有中文文档吗？

已提供中文翻译 README（由 DeepSeek 最新模型翻译生成），本站可切换中英文对照阅读。

html-workbench 还在维护吗？

GitHub 33 星。最近一次上游提交在 2026/10/6。

HTML 可视化工作台 alienzhou/html-workbench

DeepSeek 客户端

alienzhou28 天前有提交已提供中文文档扫描：含敏感能力兼容 / 相关生态

在 GitHub 查看 ↗

把已有的一份 HTML，变成可以在浏览器里继续编辑、预览和保存回磁盘的本地工作台。

48.1/100

综合分

GitHub 星标

—

npm 周下载

—/5

用户评分

数据截至 2026/10/7 · 周下载取自 npm 全网（含 CI / 镜像），非本站安装数；综合分由星标、活跃度与兼容性检查合成。

相关生态插件（非 dsh 原生，按其对应运行时安装）

git clone https://github.com/alienzhou/html-workbench.git

状态速览

判定依据：实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态

信任档位：仅索引

是什么

生态应用

桌面端 / Web 外壳，不以 dsh plugin add 安装

装得上吗

该类项目不使用 dsh plugin add 安装，静态安装检查不适用

L4 · 真实安装等级说明 →

安全吗

本站尚未对该插件做风险分级

暂未覆盖，不等同于无风险

还在维护吗

活跃：最近一次提交在 28 天前

档位由哪些信号合成

本站实装验证（真实安装 L4 覆盖全站；L5 为运行时冒烟或实机截图，覆盖范围小于 L4） · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。下方各区块是它的证据明细。

验证判据与等级说明 →

社区实装还没有人打卡 · 装过的第一个就是你

安装兼容性检查需源码安装

缺少 main/exports/bin 入口声明；仓库 package.json 标记 private，未发布到 npm，需从源码安装

展开查看检查明细 ↓

以下结论由程序自动检查 npm 包、engines 声明与入口文件得出，未做人工实机验证——能装不等于用着没问题。

✗npm 包html-workbench（未发布到 npm，仅可源码安装）

✓Node 引擎未声明 engines.node

✓dsh CLI 依赖未声明 dsh 版本约束

✗入口文件缺少入口声明

源码安装时若 pnpm 拦截 prepare 脚本，按其提示在 pnpm-workspace.yaml 的 allowBuilds 中放行后重跑。

验证方式：npm registry 存在性 + package.json 静态校验 · 最后检查 2026/10/28 02:48:56

安全扫描自动 · 静态分析源码

v2.7.0

🔵 扫描：含敏感能力尚无人工评估

展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力：执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量（至少其一）。这是能力清单，不是危险判定——具体能力项与证据见下方，安装前请自行判断是否需要。

读写/删除本地文件写入剪贴板(不计风险)发起外部网络请求

查看扫描证据（共 33 处，展示前 32 条）

读取本地文件
build/package-skill.mjs:17
readFile(path.join(frontendRoot, 'index.html'), 'utf8'),
读取本地文件
build/package-skill.mjs:18
readFile(path.join(frontendRoot, 'workbench.css'), 'utf8'),
读取本地文件
build/package-skill.mjs:19
readFile(path.join(frontendRoot, 'workbench.js'), 'utf8'),
删除本地文件递归
build/package-skill.mjs:34
await rm(outputScripts, { recursive: true, force: true })
删除本地文件递归
build/package-skill.mjs:35
await rm(outputAssets, { recursive: true, force: true })
写入本地文件
build/package-skill.mjs:36
await mkdir(outputScripts, { recursive: true })
写入本地文件
build/package-skill.mjs:37
await mkdir(outputAssets, { recursive: true })
写入本地文件
build/package-skill.mjs:40
await chmod(path.join(outputScripts, 'workbench.py'), 0o755)
写入本地文件
build/package-skill.mjs:41
await chmod(path.join(outputScripts, 'validate_html.py'), 0o755)
写入本地文件
build/package-skill.mjs:42
await writeFile(path.join(outputAssets, 'workbench.html'), html, 'utf8')
读取本地文件
dsh-plugin/build.mjs:21
const body = readFileSync(resolve(here, 'src/client.js'), 'utf8')
写入本地文件
dsh-plugin/build.mjs:101
mkdirSync(resolve(here, 'lib'), { recursive: true })
写入本地文件
dsh-plugin/build.mjs:102
writeFileSync(resolve(here, 'lib/client.js'), bundle)
写入本地文件
dsh-plugin/build.mjs:105
mkdirSync(resolve(here, 'scripts'), { recursive: true })
写入本地文件
dsh-plugin/build.mjs:106
copyFileSync(resolve(projectRoot, 'service/server/workbench.py'), resolve(here, 'scripts/workbench.py'))
写入本地文件
dsh-plugin/build.mjs:107
chmodSync(resolve(here, 'scripts/workbench.py'), 0o755)
读取本地文件
dsh-plugin/build.mjs:112
readFile(join(frontendRoot, 'index.html'), 'utf8'),
读取本地文件
dsh-plugin/build.mjs:113
readFile(join(frontendRoot, 'workbench.css'), 'utf8'),
读取本地文件
dsh-plugin/build.mjs:114
readFile(join(frontendRoot, 'workbench.js'), 'utf8'),
写入本地文件
dsh-plugin/build.mjs:127
mkdirSync(resolve(here, 'assets'), { recursive: true })
写入剪贴板
dsh-plugin/src/client.js:806
navigator.clipboard.writeText(text).then(done, () => panelStore.set({ error: '复制失败，请手动访问 /html-workbench/diagnostics 获取原始信息。' }))
读取本地文件
dsh-plugin/src/index.js:20
const version = JSON.parse(readFileSync(resolve(here, '..', 'package.json'), 'utf8')).version
写入本地文件
dsh-plugin/src/index.js:44
mkdirSync(dir, { recursive: true })
写入本地文件
dsh-plugin/src/index.js:46
writeFileSync(probe, '')
删除本地文件
dsh-plugin/src/index.js:47
rmSync(probe, { force: true })
读取本地文件
dsh-plugin/src/index.js:48
if (!existsSync(join(dir, '.gitignore'))) {
写入本地文件
dsh-plugin/src/index.js:49
writeFileSync(join(dir, '.gitignore'), '# Created by html-workbench: disposable logs and cache.\n*\n')
读取本地文件
dsh-plugin/src/index.js:84
const makePlugin = new Function(readFileSync(new URL('./host.js', import.meta.url), 'utf8'))
发起网络请求
service/public/workbench.js:496
const response = await fetch(api('/api/context'), {
写入剪贴板
service/public/workbench.js:535
navigator.clipboard?.writeText(packet.markdown).catch(() => {})
发起网络请求
service/public/workbench.js:654
const response = await fetch(api('/api/document'), {
发起网络请求
service/public/workbench.js:716
const response = await fetch(api('/api/document'))

扫描于 2026/11/2（1 天前） · 范围全包扫描 · 来源 GitHub 仓库

静态扫描只反映源码中出现的调用，不构成安全背书；人工评估与自动扫描相互独立、互不覆盖。

依赖的 DSH / Cordis 模块

@deepseek-ai/cordis@deepseek-ai/cordis-plugin-timer

给这个插件打分还没有人投票↓

用户评分

还没有人投票，来当第一个

广告精选好物

飞利浦 TAH6519 主动降噪耳机 ¥299

头戴式无线 anc 主动降噪，蓝牙连接，久戴舒适向。

·anc 主动降噪 · 头戴式无线
·价格与库存以商品页实时为准

去淘宝看看→

广告MCP 兼容手册

装完插件，给 AI 接上 MCP

Cursor、Claude Code、VS Code 逐个核对：能不能装、配置怎么写、装不上是什么原因。

·按客户端逐格核对
·结论标注依据与风险等级

查 MCP 兼容性→

界面预览

1 张 · 点击查看大图

功能亮点

本地编辑已有HTML
交互式预览
保存回磁盘

本地可视化编辑现有 HTML，带交互预览和 AI 协作，可作为 DeepSeek Harness 插件和智能体技能使用。

README

由 DeepSeek 最新模型翻译生成

English · 中文 HTML Workbench 把已有的一份 HTML，变成可以在浏览器里继续编辑、预览和保存回磁盘的本地工作台。它适合这样的工作方式：先用你喜欢的工具产出页面，再由人直接调整文案、图片、布局和样式；需要验证按钮、链接或业务交互时，切换到预览模式即可。修改仍然写回同一个 HTML 文件，AI 与人始终围绕同一份源文件协作。 HTML Workbench 不是 HTML 生成器。你可以用任何喜欢的方式生成 HTML：让任意 AI、设计工具、模板或手写代码产出文件；HTML Workbench 负责把这份现成的 HTML 转换为支持可视化编辑、预览，以及与 AI 实时协同修改的文档。 DeepSeek Harness 插件 HTML Workbench 同时也是 DeepSeek Harness（这款工具所依托的 Agent 运行框架）的一等插件，以 @vibe-x/dsh-html-workbench 发布。DeepSeek Harness 内置插件系统，本插件把可视化编辑器直接嵌进它的 Web 界面右侧栏：无需另开浏览器窗口，也无需手动执行 open 命令。当 Agent 通过 write / edit 工具创建或修改 .html 文件时，面板会自动追踪这些文件。

展开完整文档（README 剩余 1 节）

English · 中文

HTML Workbench

把已有的一份 HTML，变成可以在浏览器里继续编辑、预览和保存回磁盘的本地工作台。

它适合这样的工作方式：先用你喜欢的工具产出页面，再由人直接调整文案、图片、布局和样式；需要验证按钮、链接或业务交互时，切换到预览模式即可。修改仍然写回同一个 HTML 文件，AI 与人始终围绕同一份源文件协作。

HTML Workbench 不是 HTML 生成器。 你可以用任何喜欢的方式生成 HTML：让任意 AI、设计工具、模板或手写代码产出文件；HTML Workbench 负责把这份现成的 HTML 转换为支持可视化编辑、预览，以及与 AI 实时协同修改的文档。

DeepSeek Harness 插件

HTML Workbench 同时也是 DeepSeek Harness（这款工具所依托的 Agent 运行框架）的一等插件，以 @vibe-x/dsh-html-workbench 发布。DeepSeek Harness 内置插件系统，本插件把可视化编辑器直接嵌进它的 Web 界面右侧栏：无需另开浏览器窗口，也无需手动执行 open 命令。

当 Agent 通过 write / edit 工具创建或修改 .html 文件时，面板会自动追踪这些文件。点开其中一个，即可在内嵌的 GrapesJS 编辑器里改文案、图片、布局和样式；切到预览验证交互，再点保存把结果写回同一个源文件。

安装

前置：已装好 DeepSeek Harness 且 dsh web 能正常运行，Node.js ≥ 20，Python 3.9+。

dsh plugin --profile web add @vibe-x/dsh-html-workbench

装完重启 dsh web 并硬刷新浏览器（Cmd/Ctrl+Shift+R），Web 界面右上角会出现触发按钮。

使用

1. 让 Agent 在工作区创建或修改一个 .html 文件，插件会自动捕获它。
2. 点击右上角触发按钮打开面板，选择文件后即在内嵌编辑器中载入。
3. 在编辑模式下调整，在预览模式验证交互，最后保存写回原文件。

插件会复用本机已运行的 HTML Workbench 服务，没有则自动后台拉起一个；插件卸载时再停掉它自己启动的那个进程。全程只跑在 127.0.0.1。

开发： 插件源码在 dsh-plugin/。用 node dsh-plugin/build.mjs（或 cd dsh-plugin && npm run build）构建可分发的产物（client bundle、打包后的 Python 服务与前端）。

它解决什么问题

- 不再在聊天窗口里反复描述“标题往下 20 像素”。
- 不需要为一份落地页临时搭建完整前端项目。
- 编辑时可视化操作，预览时保留真实页面交互。
- 服务只运行在本机 127.0.0.1，不会把文件暴露到局域网。
- 通过 revision 检查避免旧页面覆盖刚被 AI 或其他工具修改的文件。

推荐使用方式

先用你选择的工具生成一份单页、自闭环 HTML，再交给 Workbench 打开和编辑。推荐让 HTML、CSS、JS 和必要视觉资源都在同一个 .html 文件里，不依赖 CDN 或额外项目目录；这样复制、打开、编辑和分享都更稳定。

页面中的交互也要按 Workbench 兼容规范生成：用稳定的语义标记定位元素，避免让 JS 依赖 nth-child、父子层级或节点顺序。Skill 会在打开页面前自动校验这些常见风险。

生成单个 HTML ↓ 兼容性校验 ↓ HTML Workbench 打开并编辑 ↓ 切换预览验证交互 ↓ 保存回原 HTML 文件

快速开始

最终用户只需要 Python 3.9 或更高版本，不需要 Node.js、npm 或 pip 包。

先检查新生成的单文件页面：

python3 skill/html-workbench/scripts/validate_html.py \
--require-self-contained \
/absolute/path/page.html

然后直接打开页面：

python3 skill/html-workbench/scripts/workbench.py open /absolute/path/page.html

open 是日常唯一需要使用的服务命令：如果服务已在本机运行，它会直接复用；否则会后台启动服务。命令输出 JSON，其中的 url 就是编辑地址。复制到任意浏览器打开即可；支持浏览器控制的 Agent 也可以自动打开它。

需要手动常驻运行服务时，才使用：

python3 skill/html-workbench/scripts/workbench.py serve

编辑与预览

- 编辑模式：选择元素、修改文字、替换图片、调整样式或拖动内容。
- 预览模式：使用当前未保存的编辑结果重新生成页面，让链接、按钮和页面脚本按普通网页方式运行。
- 保存：把编辑结果安全写回原文件；若磁盘文件已被外部更新，会停止覆盖并提示冲突。

HTML Workbench Skill

可直接分发和安装的 Skill 位于 skill/html-workbench。当 Agent 同时被要求生成或修改 HTML 时，它会引导以下交接流程：

1. 生成完整、单文件 HTML；
2. 按兼容规范组织交互；
3. 运行校验器并修复错误；
4. 用 open 复用或启动服务；
5. 返回可点击的编辑地址，并说明服务是否已复用。

详细规则见 生成规范 与 校验规则。

开发与打包

源码保留在 service/、build/ 和 tests/；可分发 Skill 始终维护在 skill/html-workbench/，DeepSeek Harness 插件在 dsh-plugin/。

npm install
npm run build
npm test

构建会把前端工作台打包为一个 workbench.html，并复制无第三方依赖的 Python 服务和校验器到 Skill。GrapesJS 在服务首次启动时下载固定版本、校验 SHA-256 后写入本机缓存；下载顺序优先使用 npmmirror，再回退到其他公共源，后续启动可离线复用。