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 查看源码。