前言¶

在 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