前言¶
在 DeepSeek Harness 的使用場景中，模型生成 SVG 或 HTML 源碼後，往往難以在對話流中直接預覽和交互。dsh-visualizer-widget 插件解決了這個問題，它將渲染過程從模型上下文中剝離，直接在會話流中生成可交互的卡片。插件通過 iframe 沙箱實現安全隔離，確保源碼只展示在卡片內，不影響模型上下文。
核心功能¶
插件註冊了兩個工具和一個會話命令：
- render_visual：把 SVG/HTML 源碼渲染成會話流內聯卡片。支持的功能包括預覽/源碼切換、高度檔位調節、深淺色底切換、彈出全屏查看、重跑渲染、下載源碼、保存爲圖片以及複製源碼。
- get_visualizer_spec：返回統一渲染規範全文。內容包括 viewBox 基準 680、字號和字重約束、9×7 色板、明暗配色方案、圖類型路由規則以及導出陷阱說明。在生成可視化內容前調用此工具，有助於保持視覺統一。
- 安全隔離：卡片使用 iframe 沙箱渲染，僅允許
scripts、popups和forms權限，不帶allow-same-origin。這意味着卡片內的腳本無法訪問主頁面 DOM 或 storage，防止安全風險。 - 提示詞注入控制：插件默認不往系統提示詞注入內容。如果想強制模型每輪都優先使用內聯渲染，需在插件設置頁手動開啓。
安裝與啓用¶
安裝前請確認環境滿足依賴要求：需要 @deepseek-ai/cordis、dsh-llm 和 dsh-tools，版本需爲 0.2.0-rc.1 或 0.1.7-alpha.1。
使用官方安裝命令：
dsh plugin --profile web add github:lovezi0/dsh-visualizer-widget
典型用法¶
- 按次觸發：在輸入框輸入
/visual並跟上需求描述，例如/visual 畫一個三欄架構圖。模型會立即調用render_visual進行渲染。 - 每輪優先渲染：在插件設置頁（路徑：設置 → 插件 → dsh-visualizer-widget）打開「啓用提示詞注入」。開啓後，模型會優先使用內聯卡片渲染，而不是直接輸出代碼或寫文件。
注意事項¶
- 源碼與上下文解耦：
render_visual的輸出只回傳一行摘要（格式、字符數、高度）給模型上下文，完整源碼僅保留在工具結果與卡片裏，不會進入模型上下文。 - 安全隔離機制：由於 iframe 不帶
allow-same-origin，卡片內的腳本無法操作主頁面 DOM 或讀取 storage。 - 源碼獲取：完整源碼只存在於工具結果與卡片中，不通過其他途徑輸出。
總結¶
dsh-visualizer-widget 將會話流的可視化能力標準化，通過工具調用和命令觸發的方式，讓模型生成的內容即畫即看。配合 get_visualizer_spec，開發者可以控制生成內容的視覺風格。
- GitHub：https://github.com/lovezi0/dsh-visualizer-widget
- 目錄頁：https://www.skillhub.cn/plugins/lovezi0/dsh-visualizer-widget
