DeepSeek Harness 插件 dsh-fuse：自然語言到像素級 UI 的渲染閉環

DSH（DeepSeek Harness）的核心理念是“一切皆插件”。在智能體開發中，模型生成的 UI 代碼往往存在佈局不一致、偏離設計規範或像素級偏差的問題。dsh-fuse 插件旨在解決這個問題，它將審美規範數值化爲設計令牌，通過結構化規格圍欄直接渲染頁面，並提供像素級走查與閉環修正能力。

是什麼¶

dsh-fuse 是一個頁面級 UI 渲染插件，由 KLRSL 維護。它將自然語言描述轉化爲結構化規格圍欄，並在瀏覽器端渲染爲真實頁面 UI。插件內置了像素級走查閉環和環形緩衝機制，支持通過主題切換快速調整視覺風格。

核心功能¶

• 頁面級 UI 渲染：將自然語言轉化爲結構化規格圍欄，並在瀏覽器端渲染爲真實頁面 UI。
• 像素級走查與閉環修正：點擊預覽元素可觸發走查，採集 getComputedStyle 樣式數據，通過 expected → observed → diff → fix 流程修正圍欄。
• 環形緩衝：保留最近 10 次快照，支持撤銷回退。
• 設計令牌：內置 default、apple、dark 三套主題，通過 CSS 變量映射。
• 代碼規範：集成 code-style.json，確保生成的代碼符合規範。
• DOM 渲染通道：使用 MutationObserver 掃描對話流中的圍欄代碼塊進行渲染。
• 深色模式：支持雙通道探測（body[data-ds-dark-theme] 和 prefers-color-scheme）。
• 白名單校驗：限制節點預算爲 60 個（含嵌套）和 8 層深度，未知組件類型將整體拒絕渲染。

安裝與啓用¶

使用以下命令安裝插件（需確保已安裝 git）：

dsh plugin --profile web add github:KLRSL/dsh-fuse

安裝完成後重啓 DSH。啓動日誌應顯示 [dsh-fuse] 啓動完成，且 GET http://localhost:<端口>/api/fuse/config 能返回配置信息（包含 themes 和 codeStyle）。

典型用法¶

模型在回答中輸出 dsh-fuse 圍欄 JSON 代碼塊。

{
  "type": "login_form",
  "title": "歡迎回來",
  "theme": "default",
  "components": [
    { "type": "input", "label": "用戶名", "placeholder": "請輸入用戶名" },
    { "type": "input", "label": "密碼", "placeholder": "請輸入密碼", "inputType": "password" },
    { "type": "button", "text": "登 錄", "style": "primary", "action": "login" }
  ]
}

渲染器會根據 theme 字段（如 default、apple、dark）從 /api/fuse/config 拉取對應的設計令牌進行渲染。點擊帶 action 的按鈕會回傳 [fuse-action] 事件。

生態與注意¶

• 版本要求：DSH ≥ 0.1.1-rc.2（已適配 0.2.0-rc.2），Node.js ^22.19.0 || >=24.0.0。
• 安全與性能：插件通過白名單校驗組件類型，節點預算限制爲 60 節點（含嵌套）與 8 層深度。對於不可信文本（如 title、label），插件使用 textContent 構造 DOM 節點，不使用 innerHTML 以防注入風險。
• 資源：該插件由社區開發者維護，可在 GitHub 查看源碼。