DeepSeek Harness (DSH) 的核心優勢在於流式輸出與實時交互。在開發智能體或調試 UI 生成時，模型輸出的是文本指令，而最終產物是 HTML 文檔。如何在模型生成過程中看到渲染結果，是一個常見需求。dsh-visualizer 插件通過在沙盒內聯框架中實時渲染 HTML，填補了這一空白。
這是什麼¶
DeepSeek Harness 插件，提供實時 HTML 文檔流式傳輸與預覽功能。
該插件由維護者 abiddotdev 開發，遵循 MIT 許可證。它將自包含的 HTML 文檔流式傳輸到聊天中，並在沙盒內聯框架中進行實時預覽。這允許使用 Chart.js 等外部庫，且無需觸碰工作區。生成的文檔可下載爲 .html 或 .svg 文件，且在回合關閉前，Settled 卡片會保持活躍。
核心功能¶
- 流式傳輸與預覽：將自包含的 HTML 文檔流式傳輸到聊天中，並在沙盒內聯框架中進行實時預覽。
- 外部庫支持：支持 Chart.js 等外部庫，無需觸碰工作區。
- 下載功能：生成的文檔可下載爲
.html或.svg文件。 - 註釋模式：支持註釋模式，可點擊元素獲取選擇器和標記，方便模型精準編輯。
- Settled 卡片行爲：在回合關閉前保持活躍，通過
turn-tail擴展點重新發布卡片。
安裝與啓用¶
安裝前需確認環境滿足要求：
* Node.js 版本需爲 ^22.19 或 >=24。
* DeepSeek Harness 版本需爲 0.1.2-rc.1 或更新版本。
安裝到默認 profile 的命令如下：
dsh plugin --profile web add 'git+https://github.com/abiddotdev/dsh-visualizer.git'
若需安裝到自定義 profile，請替換 <your-profile>：
dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git'
首次運行注意：
首次運行可能會遇到 pnpm 的供應鏈安全提示，提示需要配置 allowBuilds。請按照提示將對應的 Key 添加到 ~/.dsh/profiles/<your-profile>/pnpm-workspace.yaml 文件中的 allowBuilds 下，然後重新運行命令。
典型用法¶
- 版本控制：使用 ref 片段安裝特定版本，例如：
dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git#v0.2.0'
- 舊版兼容：若 Harness 版本低於
0.1.2-rc.1，需使用兼容分支：
dsh plugin --profile <your-profile> add 'git+https://github.com/abiddotdev/dsh-visualizer.git#pre-harness-0.1.2-alpha3-compat'
- 使用插件：啓動 profile 並要求模型 “visualize …”，模型生成的 HTML 將在卡片中實時渲染。
適用場景與注意¶
該插件適合需要實時生成和預覽 UI 界面、圖表或交互式文檔的場景。
配置注意事項：
插件的 bundle layer 會自動插入 loader row，因此配置覆蓋需要直接在 profile 的 patch layer 中進行，而不是嵌套在 insert 下。配置項（如 maxArtifactBytes、guideTypes 等）需直接寫在 profile 的 cordis.patch.yml 中。
生態背景：
DeepSeek Harness 理念是「一切皆插件」。社區目錄（如 SkillHub）是獨立站點，與 DeepSeek / 幻方無官方從屬關係。
總結¶
dsh-visualizer 提供了一種無服務器端往返的流式 UI 生成方案。通過直接在客戶端沙盒中渲染和交互，它降低了開發調試的門檻，使得模型生成 UI 的過程更加直觀可控。
