夜雨聆风上周那篇《DeepSeek Harness 来了》发出去后，后台收到最多的问题不是"V4 Pro怎么用"，而是——
"DSH 那么多插件，到底先装哪个？"
我当时没敢贸然答。因为整个生态还在剧烈变化，每天都冒出新插件，单一个 dsh-market 插件市场里，已经有 1283 个公开发布的插件了。
但有一款插件，我自己用了快一周，已经离不开了。
它叫 dsh-genui——GitHub 组织 omdsh-dev 维护，npm 包名 @omdsh-dev/dsh-genui，MIT 开源，TypeScript 写的，挂在 dsh-plugin 标签下。
今天这篇，我打算从"实际使用体验"出发，把这款插件完整拆给你看。往后我会做成一个系列，每期深挖一个值得装的 DSH 插件。
一、先说痛点：为什么我装它之前觉得 DSH "差点意思"
DSH 上线第二天我就开始用了。一开始觉得太爽了——文件能改、命令能跑、模型能选，简直是 Code Agent 的瑞士军刀。
但用了一周以后，一个问题越来越明显：
模型的回答，还是纯文本。
我让它"看下我这个月订单怎么样"，它给我的是一段话："本月收入 ¥128,430，环比 +12.4%，建议关注转化率……"——文字、关键数字全有。
但我想看趋势图、点个按钮刷新数据、切换个时间范围——对不起，没有。
想再看一眼？再打一段字。再来一遍。
▲ 这就是装了 dsh-genui 之后的样子：模型在回答里直接画出一个完整的欧美跨境电商分析看板
这是装上 dsh-genui 之后同一个问题的输出。统计卡、趋势图、环形图、实例列表、刷新按钮、自动刷新开关——全部出现在回答里，不是单独一张工具卡，不是另开一个面板，不是一个单独的Artifact，就嵌在对话流的正中间！
第一次看到这个效果的时候，我盯着屏幕愣了三秒。
😤 驴哥吐槽
说实话，这玩意儿第一次用的时候，我有种被"骗"了的感觉——之前那么多回答，我都以为"AI 只能给文字和代码"，原来不是 AI 不行，是没人给它"画"的工具。装了 genui 之后回不去了，就像用了 iPhone 之后回不去诺基亚。这插件早出一年，我去年能少写多少前端原型啊。
二、dsh-genui 到底是什么？
简单说，dsh-genui 是一款面向 DSH Web 界面的界面增强插件。它让模型的回答从"纯文字 + Markdown 表格"升级成"可以点的真实界面"。
工作原理分三步：
步骤 1📝 模型写围栏
模型在回答中输出一个 dsh-ui 围栏（fence），里面是一段 JSON，描述想画什么组件。模型不需要会写 HTML，只要会写这个 JSON 规格就行——这规格是白名单，模型塞不进脚本，塞不进 HTML，安全可控。
步骤 2🎨 浏览器渲染
浏览器端渲染器（src/client）认领这个语言标签，把 JSON 画成真实的 React 组件，嵌在围栏所在的位置。流式输出时，模型写到哪，组件就出现到哪，不用等整段回复写完。
步骤 3🎯 本地优先交互
用户点按钮、拖滑块、选选项——能本地判卷、本地排序、本地折叠的，一律本地搞定，零模型往返。只有必须模型参与的事（生成新内容、执行工具、给下一步建议），才通过 action 回传给模型。
整个渲染包有多大？核心 28 KB gzip，mermaid 和 three.js 按需加载——用的时候才下载，不用就不占空间。
它和 Claude Artifacts、Codex 有什么不一样？
你可能会问：Claude 不是也有 Artifacts 吗？不一样在哪？
| 嵌在回答流里 | |||
| 本地优先 + 事件循环 | |||
| 30+ 白名单组件 | |||
| 白名单 + 无 eval | |||
| 开源 MIT 自由 fork |
简单说：Artifacts 是"画布"，genui 是"在文字里夹带可点的东西"——后者更符合普通聊天的节奏感，不用跳出对话上下文。
三、30+ 组件，到底能画什么？
dsh-genui 给我最爽的一点是：它不是只能画图表，而是覆盖了绝大多数"结构化表达"的场景。我按照 SKILL.md 里的分类重新梳理了一下：
🧱布局类（搭骨架用）
text 六种字号 h1-h3/body/muted/caption · row/col 横向纵向排列 · grid 网格布局 · card 卡片容器 · divider/spacer 分隔线
📊展示类（最常用）
stat 大数字+delta（+/-自动红绿）· badge 4 种 tone · progress 进度条 · table 表头本地排序 · list · keyvalue · timeline · file-tree 可折叠 · diff 绿增红删 · callout 强调框 · steps 步骤条 · code/json
📈图表类（重头戏）
chart 柱状/折线/环形/多序列 · plot 数学函数图+参数滑块实时重绘 · mermaid 流程图/时序/甘特/类图
🖱️交互类（让用户能"动"）
button 4 种色调 · input/textarea · select/radio/checkbox · switch/slider · tabs/accordion · submit 交卷本地判分
🚀高级类（炫技向）
scene3d WebGL 3D 场景可拖拽旋转 · quiz 点选判题+解析+重试 · mermaid 错误自动修复
看着多，其实组合起来就那几个套路。下面我举三个我自己最常用、效果最炸的场景。
四、场景一：让 AI 在回答里直接出"看板"
这是我最常用的场景。每次看数据，genui 都能直接出可交互的看板，而不是给我一段话让我自己脑补。
看这个真实截图——这是模型输出的一个订单概览：
三种状态的卡片，并排放在 grid 里，每个卡片有头像、姓名、状态徽章、进度条——视觉上比 Markdown 表格强太多。
模型实际写的 JSON 长这样（这是它发给浏览器的，对话上下文里看不见）：
{ "type": "grid", "cols": 3, "items": [ { "type": "card", "title": "成员卡", "items": [ { "type": "avatar", "name": "林晚晴" }, { "type": "badge", "label": "在职", "tone": "success" }, { "type": "keyvalue", "pairs": [{"key": "产品设计师", "value": "3 年"}] } ] }, { "type": "card", "title": "项目卡", "items": [ ... ] }, { "type": "card", "title": "日程卡", "items": [ ... ] } ] }
你不需要手写这些 JSON，只要告诉模型"用 dsh-ui 画个看板"就行。它自己会出。
💡 驴哥心得
我自己用得最多的是"业务看板"场景。比如让 AI 帮我"看看这个月销售情况"，genui 直接给我出 QPS、转化率、客单价、复购率四张 stat 卡片，加一个趋势图和一个异常项列表。这种结构化的视觉信息，文字版本要读 30 秒，看板版本 5 秒扫完。这就是信息密度的差距。
五、场景二：让 AI 画"可拖动的数学函数图"
这个场景我本来没抱期待，结果试了一下直接震撼到我了。
▲ plot 组件：y = a·sin(bx)，拖动滑块实时重绘，可自动播放动画
这是模型回答"画一下 y = a·sin(bx) 在不同参数下的曲线"时出来的效果。蓝色是 a=1, b=1，绿色是 a=2, b=1，下面两个滑块实时调节参数，拖到哪曲线就重绘到哪，零模型往返。
而且底下还有一个"▶ 播放动画"按钮——点了之后 a 从 1 自动滑到 3，整个曲线动态演变给你看。
这意味着什么？AI 不再只是"告诉你 y = sin(x) 是这样"，而是直接给你一个可玩的小应用。
教学场景、算法可视化、数学概念讲解——任何需要"参数变化 → 结果变化"的场景，都能用 plot 组件搞定。
😤 驴哥吐槽
说实话，以前上课老师讲"傅里叶变换"，要切到 Desmos 或者 GeoGebra 演示。现在直接在 DSH 里说一句"画一下 sin(x)、sin(2x)、sin(3x) 叠加怎么逼近方波"，genui 直接出 plot，拖滑块给学生看。学生问"那如果再加一项呢？"，直接说"再加一项"，模型再补一条 series。这种教学体验，比任何 PPT 都强。AI 终于从"知识容器"变成了"演示工具"。
六、场景三：让 AI 给你"出考题"并自动判分
这个场景对教育和自测场景特别有用。
我说"出 4道关于 DSH 的选择题，每题带解析"，genui 直接画出一张可交互的试卷：
试卷结构
📋 一道带解析的多选题
每题一个 radio 组件，带 group（题号）、answer（正确答案下标）、explanation（解析）。
本地判卷
✅ 交卷按钮 + 即时判分
用户答完点 submit 按钮，分数、每题对错、解析全部在 UI 里当场出现，不需要等模型响应。
题目锁定
🔒 提交后自动锁定
题目答完锁定，"重新作答"按钮本地重置，可选 resetAction 通知模型。
状态持久化
💾 刷新/重开自动恢复
答案和交卷状态按"会话+内容指纹"保存，刷新页面或重开会话原样恢复。
这意味着什么？AI 给你出题，AI 给你判分，但中间过程完全本地化，不消耗 token。
💡 驴哥心得
我把这个功能用在了产品培训上。每次给新同事讲 DSH，我让 AI 出一份"DSH 入门 10 题"的试卷，他们答完点交卷，当场就知道哪几道错了。错题点开有 explanation，相当于自带答疑。以前我得做 PPT + 课后批作业，现在一句话就搞定了。
七、一些我亲测的"高级玩法"
除了上面三个主场景，还有一些组合用法，深度使用 DSH 的人应该会喜欢：
1. 流程图：mermaid 嵌入回答
说"画一下我们订单处理的流程图"，genui 直接出 mermaid，错误自动修复（比如中文标签自动加引号）。可以画流程图、时序图、甘特图、ER 图、状态机，主题自动跟随 DSH 暗色/浅色。
2. 文件树：直接展示项目结构
让 AI "展示一下当前项目的目录结构"，genui 出 file-tree 组件，点击目录行可以本地折叠展开，不用再问模型"再展开看看 src 里面"。
3. Diff 视图：代码修改对比
让 AI "把这段代码改写成异步版本，并显示 diff"，genui 出 diff 组件，绿增红删，比 Markdown 代码块清晰 10 倍。
4. 仪表盘持久化：会话面板
用 /panel 客户端命令可以打开一个常驻 dock 面板，render_ui 工具或 panel: true 的围栏会在原地更新同一块界面。意思是：你可以让 AI 维护一个"我的项目总览"面板，每次问新问题，面板就追加新信息，长期累计成一个工作 dashboard。下面是一个我用/panel指令做的一个查询本地天气的widget组件，直接就挂在产品上了，还挺方便，使用/panel clear就可以清除啦
八、安装与上手：5 分钟跑起来
铺垫了这么多，该上手了。dsh-genui 的安装是所有 DSH 插件里最简单的一档：
前置条件
已安装 dsh（任何开源构建都行） pnpm在 PATH 上（没有就corepack enable或 npm i -g pnpm）Node.js ^22.19.0 || >=24.0.0
方法一：一键脚本（推荐）
git clone https://github.com/omdsh-dev/dsh-genui.git cd dsh-genui ./scripts/install.sh
方法二：git URL 安装
dsh plugin --profile web add git+https://github.com/omdsh-dev/dsh-genui.git
方法三：dsh-market 插件市场
如果装了 dsh-market 插件，可以直接在 Web UI 里搜索 "dsh-genui" 一键安装：
▲ dsh-market 插件市场：搜索"genui"即可找到 dsh-genui，一键安装
安装后必做
重启 dsh web浏览器硬刷新（macOS Cmd+Shift+R，WindowsCtrl+F5）开新会话，说一句"用 dsh-ui 画个统计看板"验证 如果模型仍只回文字，明确说"请用 dsh-ui 围栏输出"
⚠️ 避坑提示：不要对刚 clone 下来、还没 pnpm install 的目录使用 link: 方式——这样不会装 mermaid/three/react 依赖，渲染器会坏。生产用 git URL，开发用 link 模式，但 link 前必须先 pnpm install。
九、冷思考：dsh-genui 的边界在哪？
用了快一周，我也不藏着掖着，说几个真实遇到的问题：
]]}]} 写成 ]}]}]}），需要 validate_dsh_ui 工具先验后发 | |
🔥 驴哥锐评
🧠 第一，模型不主动用是最大的坑。DeepSeek 这种"老黄牛"风格的模型，默认偏向输出文字和代码块。要让它主动出 UI，必须在 SKILL.md 里灌好，或者在系统提示里加一句"凡是涉及数据展示、流程说明、参数调节的场景，主动用 dsh-ui 围栏输出"。这不怪插件，是模型本身需要引导。
🎯 第二，不要为了炫技硬塞组件。SKILL.md 写得清楚："一句话能说清的事、纯闲聊、用户明确说不要 UI"——别上 genui。我见过一个案例，AI 把一个两行字能说清的"明天有雨"硬塞进 stat + chart + callout，浪费了 100 多 token，结果用户还得多看一眼。这种"AI 形式主义"必须避免。
✅ 第三，安全设计是真功夫。它明确规定 GenUI 不得索取密码、API Key、访问令牌——即便界面上出现了密码框也保持打码，不持久化、不进表单收集。函数表达式走独立解析器，不用 eval。组件是白名单，模型塞不进 HTML 或脚本。这套设计在企业场景下能让人放心用。
十、写在最后：这个插件指向的"方向"
dsh-genui 不是一个完美的产品——它还在 0.8.x 版本，规格上限 200 节点，模型不主动用，JSON 容易写错。
但它指明了一个重要的方向：
AI 的回答不应该只是文本流，而是应该按需"展开"成结构化、可交互的界面。
之前我们做对话产品，思路都是"AI 说完人去看"。dsh-genui 提出的思路是"AI 边说边画，说完可以点"。这个范式转变一旦扩散开，整个对话式 AI 的产品形态都会变。
你可以想象：以后做客服系统，不是"AI 答完你点链接跳走"，而是"AI 答完直接在对话里给你一个订单修改面板"；做学习产品，不是"AI 讲完你去看文档"，而是"AI 讲完直接在对话里给你一个交互演示"；做编程助手，不是"AI 给你一段代码你复制走"，而是"AI 给你一个可拖动的可视化组件让你现场试"。
这就是 GenUI 这个词背后真正在发生的事。
dsh-genui 是这个方向上最早跑通的开源实现之一。MIT 协议，开源免费，184 颗星，还在快速迭代。它可能不完美，但它在路上。
下一期，我会拆解另一个DSH插件，敬请期待，我会做成一个持续系列。如果你也在用某个 DSH 插件想让我深挖，欢迎在评论区提名。
你在 DSH 里装了什么插件？
评论区聊聊你用过最爽的那一个。如果觉得这篇有用，转发给那个刚开始折腾 DSH 的朋友 👇
— END —
AI届搬砖的驴 · 持续关注AI前沿，搬运有价值的内容
DSH 插件深挖系列 · 第一期 · dsh-genui