前言¶

在 DeepSeek Harness（DSH）里，模型往往用一大段 Markdown 回答对比、清单或带数字的问题，读者要自己脑补布局。若希望选项并排、对象可点开、滑块改参数后数字立刻变，就需要在客户端用受约束的声明式 UI，而不是让模型吐 HTML 或脚本。下面介绍社区插件 DSH Rich UI（维护者 kyoukisu，npm 包 @kyoukisu/dsh-rich-ui）：它在 Harness Web 端用 React 按严格 schema 渲染富界面，与「纯 Markdown 墙」是互补关系。

这是什么¶

DSH Rich UI 的定位是：在 DeepSeek Harness 内提供 ChatGPT 风格的富回答——实体集合与详情面板、KPI 卡片、多序列图表、可排序表格、流程与分层架构图、以及拖动即重算的本地控件等。

渲染器是真实的 React 树，背后有严格 schema：不生成任意 HTML、不用 eval、不开放 shell，也不注入模型提供的页面级 JavaScript。本地控件在浏览器里重算；只有读者显式发起时才会再次调用模型。插件以 bundle 形式注册，代码围栏语言为 rich-ui。

核心功能¶

资料中列出的能力可按用途分组理解（节点类型以 README 为准）：

布局与文本：stack、row、grid、card、divider、meta；带内联 code、粗体、链接和 [[entityId]] 芯片的 text；可选标题的 callout；带语法高亮、语言标签、行号与复制按钮的 code。

对象与列表：entity-ref、entity-list（紧凑或 layout:"feature" 行，多种预览比例）；详情可在 Harness 原生右栏 Tab 打开，否则回退为页内抽屉；支持双图画廊或带说明的单张截图，以及 cast 等信息。

数据展示：KPI 用的 stat；progress、status；可排序、可筛选、带状态与进度列的 table；chart（bar / line / area / donut / scatter，1–6 个序列，单位与 tooltip）；computed。

流程与架构：有序步骤与分支的 diagram；嵌套盒子的 layers（含成员 chips）。

媒体与交互：image、image-group（可选 presentation:"gallery"）、video、audio、lightbox、popover、tooltip；表单类 input、select、slider、switch、checkbox、radio、segmented、tabs；表达式与 conditional、本地 action、send-message。

约 150 个 Lucide 图标可按名称解析；语义色调（如 success、warning）与宿主浅/深主题、字体一致。移动端示例（如 390px 宽）在 README 截图中有说明。

合约文档见仓库 prompt-rich-ui/prompt.md；与 Harness 右栏等行为见 docs/DSH-INTEGRATION.md；设计对照见 docs/PARITY.md。

安装与启用¶

环境要求（来自 README 与 package.json）：DeepSeek Harness 0.2.x（engines 中为 ^0.2.0-rc.1 || ^0.2.1-rc.1），Node ≥ 22.19.0。无需改 NixOS、无需打补丁版 Harness。

官方 npm 安装步骤如下。安装后需按你的部署方式重启 Harness 进程。

dsh plugin --profile web add @kyoukisu/dsh-rich-ui
systemctl --user restart deepseek-harness   # or restart however your Harness runs

若要从 GitHub 跟踪未发布提交，资料给出的命令为：

dsh plugin --profile web add github:kyoukisu/dsh-rich-ui

（作者本地开发循环使用 checkout 与 link:$PWD，涉及 git clone 与 npm run build:plugin；一般用户以上述 add 命令即可。）

当前 npm 版本在资料中为 0.6.2，许可证 MIT。

典型用法¶

在线试效果（无需安装）：打开 rich-ui.beako.best，可体验 dashboard、films、listing、calculator、configurator、technical breakdown 等场景；加 &theme=dark 切换暗色。演示数据仅为示意。

在新会话里向模型提结构化需求，例如 README 中的入门示例：

Compare three electric kettles by price, volume and features. Make it clickable.

回复会以界面形式呈现：摘要条、带图行项、最便宜项高亮等；点开一行可看事实、来源与相关项，而不必离开对话。

还可尝试：「build a budget calculator with three sliders」、「show this quarter as a chart and a table」、「make a configurator with tabs and conditional warnings」。

模型输出需符合 rich-ui 围栏 JSON 合约。最小示例（摘自 README「The contract in ten lines」）：

```rich-ui
{"version":1,"title":"Budget","initialState":{"spend":1200},
 "nodes":[
  {"type":"slider","stateKey":"spend","label":"Monthly spend, €","min":100,"max":5000,"step":100},
  {"type":"computed","label":"Per year, €","expr":{"op":"mul","args":[{"state":"spend"},12]}},
  {"type":"callout","tone":"info","content":"Recomputed locally — no model call."}
 ]}
```

适用场景与注意¶

适合谁：已在用 DSH Web profile、希望模型在「结构即答案」的场景（对比选购、软件短名单、季度指标看板、架构分层说明、本地预算滑块等）里输出可交互界面，而不是长 Markdown 的开发者或团队。

安全与权限：插件随当前 DSH 进程权限运行；安装前请阅读 GitHub 仓库 源码、LICENSE 与 README 中的 Safety 小节，确认符合你的策略。

生态说明：DSH 社区插件目录托管在独立站点（如 SkillHub 上的条目），与 DeepSeek / 幻方无官方从属关系；本文事实以仓库 README 与 package 元数据为准。

结尾¶

DSH Rich UI 用声明式 rich-ui JSON 把对比、实体、图表、表格、分层图和本地控件收进 Harness 对话流，减轻读者排版负担，并在 schema 约束下避免模型直接写 HTML/脚本。需要目录信息与 issue 入口时，可访问 SkillHub 插件页与 GitHub 仓库：

• 目录页：https://www.skillhub.cn/plugins/kyoukisu/dsh-rich-ui
• GitHub：https://github.com/kyoukisu/dsh-rich-ui