前言¶
DeepSeek Harness（DSH）在处理界面修改需求时，需要明确的定位信息，比如 CSS 选择器、XPath、组件名等。非前端同学往往只能用「那个蓝色的按钮」「右边那个卡片」来描述，而 AI 需要的是 button#submit-order.btn.btn-primary 这类精确信息。
dsh-ui-picker 插件通过一次点击完成这层翻译：在页面上选中目标控件，将它的全部技术细节写入 DSH 的输入框，让模型精准定位要修改的界面元素。
是什么¶
dsh-ui-picker 是一个 DeepSeek Harness 插件，由维护者 ztlovelsw 开发。它通过浏览器端脚本采集 UI 控件信息，并通过本地 HTTP 桥接服务将结果推送到 DSH 的输入框中。
插件不依赖任何前端框架，支持 React、Vue 2/3 以及常见组件库（Element、Ant Design、Vant、MUI）的组件名识别。
核心功能¶
一次点击获取全部信息¶
点击页面上的控件后，插件会采集以下信息：
- 标签名、id、class、role
- 文案、placeholder、aria-label
- CSS 选择器（如
button#submit-order.btn.btn-primary） - 绝对 XPath（如
//*[@id="submit-order"]） - 父级链路
- 尺寸与位置
- 关键计算样式（圆角、背景色、字号、字重等）
插件会过滤掉无用的信息（如 display: block、overflow: visible、body ← html），只保留对样式修改有用的内容。
组件识别¶
插件能自动探测框架组件：
- React：通过 Fiber 节点获取组件名
- Vue 2/3：提取组件名
- 常见组件库：Element、Ant Design、Vant、MUI 等的类名
多选与批量发送¶
按住 Shift 点击第一个控件进入多选模式，之后点击其它控件继续加选。底部会出现「已选 N 个」面板：
Enter或面板「发送」：合并成一条消息发出Esc或面板「取消」：丢弃本次多选
可拖动的悬浮按钮¶
页面右下角有一个玻璃拟态的取景框图标按钮，支持：
- 拖动：调整位置，位置按站点记忆（
localStorage），越界自动夹回 - 右键：还原到默认位置
- 单击：进入/退出拾取模式
也可以调用 window.dshUiPicker.resetPosition() 手动复位。
工作方式¶
插件由三部分组成：
- 宿主侧（
index.js）：在127.0.0.1:17857起一个只监听本机的 HTTP 服务，接收控件描述、提供长轮询，同时把picker.js当静态文件发出去。 - 客户端侧（
client.js）：DSH 网页里运行，轮询桥接服务，通过输入框 facade 把文本插到光标处。不渲染任何可见 UI。 - 页面侧（
picker.js）：在你自己的页面里运行，负责悬停高亮、点选、采集信息。
桥接服务只传文本，不执行代码、不读写文件，安全性较高。
安装与启用¶
1. 装进 DeepSeek Harness¶
git clone https://github.com/ztlovelsw/dsh-ui-picker.git
cd dsh-ui-picker
node install.mjs # 自动探测 profile，复制插件并写入配置
脚本会复制插件文件到 ~/.dsh/plugins/dsh-ui-picker，备份 profile 的 package.json，追加依赖与 dsh.profile.bundles，然后执行 pnpm install。
不想用脚本，也可以手动配置：
// ~/.dsh/profiles/<profile>/package.json
{
"dependencies": {
"dsh-ui-picker": "file:../../plugins/dsh-ui-picker"
},
"dsh": {
"profile": {
"bundles": ["@deepseek-ai/dsh-base", "...", "dsh-ui-picker"]
}
}
}
然后 cd ~/.dsh/profiles/<profile> && pnpm install，重启 DSH。
插件是零依赖的；pnpm install 起不来时，直接把包目录链接/复制到 profiles/<profile>/node_modules/dsh-ui-picker 也能跑。
2. 让页面长出拾取按钮¶
在页面的 </body> 前加一行：
<script src="http://127.0.0.1:17857/picker.js"></script>
Vite / Next 项目可以放进入口 HTML。
也可以用油猴脚本，把 dsh-ui-picker.user.js 拖进 Tampermonkey。默认匹配 localhost / 127.0.0.1 / file://，要覆盖其它域名，在脚本头加 // @match https://your-dev-domain/*。
或者在控制台临时粘贴 picker.js 全文。
配置¶
cordis.patch.yml：
- insert:
- id: dsh-ui-picker
name: dsh-ui-picker
config:
enabled: true
port: 17857 # 改端口后，页面里的 script 地址也要跟着改
使用步骤¶
- 页面右下角会出现一个玻璃质感的小按钮（取景框图标），或按
Ctrl + Shift + P开关拾取模式 - 点它 → 鼠标划过控件会显示蓝色描边
- 点一下目标控件 → 文本出现在 DSH 输入框
- 在最后一行「修改需求：」后面补一句话，回车
快捷键¶
| 键 | 作用 |
|---|---|
Ctrl + Shift + P |
开关拾取模式 |
Shift + 点击 |
加选（进入多选） |
Enter |
发送多选结果 |
Esc |
取消拾取 / 丢弃多选 |
适用场景¶
- 需要通过 AI 修改界面样式或布局的开发者
- 不熟悉 CSS 选择器、DOM 结构的前端协作者
- 需要快速定位页面元素的调试场景
注意事项¶
- 插件以当前 DSH 进程权限运行，安装前应检查源码与许可证
- 桥接服务只监听
127.0.0.1，只传文本，不执行代码、不读写文件 - 页面若是
https://且部署在公网域名，浏览器可能拦截到本机端口的请求（Private Network Access），本地localhost开发不受影响 - 多标签页同时打开多个 DSH 会话时，拾取结果写入最后挂载的那个会话输入框
结尾¶
dsh-ui-picker 通过一次点击将页面控件信息转化为 AI 可理解的文本，降低了界面修改的门槛。对于需要频繁与 AI 协作改 UI 的开发者，这个插件能显著提升工作效率。
插件目录页：https://www.skillhub.cn/plugins/ztlovelsw/dsh-ui-picker
GitHub 仓库：https://github.com/ztlovelsw/dsh-ui-picker
