前言¶
在 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
