前言¶

在 DeepSeek Harness（DSH）会话中，AI 可能会生成自包含的 HTML 文件。如果这些产物只保存在工作区目录里，预览、另存和导出仍需要手动打开文件、切换窗口或转换格式。

dsh-canvas-preview 是 jiuyuechuwuhao 维护的一个 DSH 画板预览插件。它在 DSH 会话界面里增加「画板」视图，用于实时预览 AI 生成的网页产物，并支持另存为以及 PNG/JPG/SVG 导出。下面介绍它的功能、安装方式和使用边界。

这是什么¶

dsh-canvas-preview 的定位是：DeepSeek Harness 的画板预览插件，面向 AI 生成的网页产物，提供实时预览与导出能力。

它维护者为 jiuyuechuwuhao，许可证为 MIT。插件包内声明 dsh.bundle，可套用 cordis.patch.yml 启用画板；也可以按动态插件方式运行，不写 profile。

核心功能¶

1、画板页签：与聊天并排的独立视图，左侧是文件列表，右侧是沙箱实时预览。

2、自动同步：每 4 秒扫描工作区，AI 保存后无需手动刷新。

3、右上角通知卡：新产物弹出实时渲染缩略图，整卡可拖动、可展开、可调大小。

4、另存为：使用原生 macOS 目录选择器，默认保存到 HTML 同目录，也可改存「下载」或任何位置。

5、PNG/JPG/SVG 导出：位图使用 Chrome 无头 2x 高清 3200×2400，约 2 秒；矢量 SVG 直提，可无限缩放。

6、预览细节：宽度三档（适配/1280/手机竖屏）、深色预览、导出耗时显示。

7、动态插件方式：按 dynamic/ 的 host.js + client.js 定义并运行画板插件，不写 profile。

安装与启用¶

如果使用 npx 安装器，可以运行：

npx dsh-canvas-preview

然后打开：

http://127.0.0.1:3080/

会话顶栏出现「画板」即可。

如果使用 DSH 插件装包命令，可以运行：

dsh plugin --profile web add dsh-canvas-preview

该命令使用 web profile 安装插件。插件包内声明 dsh.bundle，可套用 cordis.patch.yml 启用画板。

本地开发时，可以用 file: 路径安装：

dsh plugin --profile web add "dsh-canvas-preview@file:/绝对路径/dsh-canvas-preview"

然后在下面文件里启用画板：

~/.dsh/profiles/web/cordis.patch.yml

动态插件方式不需要写 profile。步骤是：

1、克隆仓库到任意位置。

2、在 DSH 会话中对 Agent 说：按 dsh-canvas-preview/dynamic/ 的 host.js + client.js 定义并运行画板插件。

3、批准一次插件运行。

典型用法¶

经过上面的步骤后，典型流程是先让 Agent 在当前工作区生成或修改 HTML 文件，再在「画板」页签查看。

插件扫描会话 cwd 下的 .html / .htm 文件，并在沙箱 iframe 中预览。PNG/JPG 导出时会启动无头 Chrome 截图，写回工作区或指定目录。SVG 导出直接提取 SVG，用于需要无损缩放的矢量场景。

如果需要把结果交给后续文档或设计流程，可以先用「另存为」把 HTML 放到目标目录，再按需要导出 PNG/JPG 或 SVG。

适用场景与注意¶

适合在 DSH 会话中产出 HTML 产物的流程：当 Agent 生成或修改当前工作区的 HTML 文件后，可以在会话界面里直接查看、保存和导出。

使用前需要注意：

• 插件以当前 dsh 进程权限运行，安装前应检查源码与许可证。
• 插件会扫描会话 cwd 下的 .html / .htm 文件。
• PNG/JPG 导出会启动本机无头 Chrome。
• 插件不把产物发到第三方；被预览的 HTML 自己请求远程字体或图片时除外。
• 插件不读取 API Key。
• 动态插件方式需要批准一次插件运行。

链接¶

• 社区目录：https://www.skillhub.cn/plugins/jiuyuechuwuhao/dsh-canvas-preview
• GitHub：https://github.com/jiuyuechuwuhao/dsh-canvas-preview