前言¶
在 DSH 里让模型改前端页面，常见做法是截屏、口述选择器，或贴一大段 HTML。沟通成本高，也容易把「只改这一处」说成整页重写。DeepSeek Harness 的插件生态按「一切皆插件」扩展能力；社区目录在独立站点维护，与 DeepSeek、幻方无官方从属关系。
下面介绍的 dsh-element-ref（维护者 kanxue0201）走另一条路：在 DSH 右栏自带浏览器里打开开发页，像 Codex 那样点选 DOM，为每处元素写批注、可选实时调样式，再把结构化上下文一次性送进普通对话。插件本身不调用模型、不改仓库代码。
这是什么¶
dsh-element-ref 是分类为「联网工具」的 DSH 插件（当前 GitHub 星标为 0）。定位可以概括为：把「这一个元素」变成一段带选择器、文本、样式调整等字段的批注，由你惯用的 agent 按项目规矩去改。
版本 0.7.35（见 package.json），许可证 MIT。兼容声明为 engines.dsh >= 0.2.0-rc.2；README 写明实测环境为桌面版 0.2.2-rc.1。
核心功能¶
点选与批注¶
- 在右栏浏览器打开页面后，点地址行里、网址输入框右侧的「光标」按钮（28px 固定宽，与后退/刷新同一排）开启点选；再点一次关闭点选。
- 在页面中点击目标元素：
Shift+点击选父级；Esc先收起当前批注，再按一次退出点选。 - 元素左上角出现编号气泡，旁侧为评论胶囊；可连标多处，编号按顺序递增。页面内没有发送按钮，发送只在对话框完成。
- 胶囊左侧「调节」打开约 300px 宽样式面板，支持文本、颜色、背景、透明度、字体、圆角、边框、宽高、内外边距等 14 项基础样式，改完页面实时预览；
保存保留，取消丢弃该条草稿并还原样式。
右栏与输入框同步¶
- 右栏 元素引用 页按编号列出选择器、文本、源码线索与面板中的样式。
- 输入框光标行上方实时出现「
<标签>编号」注释条（约 0.3 秒内同步）；可展开卡片列表，与页面胶囊双向同步批注。 - 插入引用 可把整段请求放进输入框，你再补一句说明。
- 发送只有一个出口：输入框为空时，右下角发送键（及回车）仍可把全部批注打包发出；你另行输入的文字作为「补充要求」追加在末尾。
宿主侧能力（装了什么）¶
README 归纳的安装形态包括：
- 对话框里的注释条（chip）与消息里的块级卡片；
- 地址行光标按钮（主入口；会话头部同类按钮已去掉）；
- 页面拾取脚本
GET /element-ref/picker.js，由 host 按当前 GUI 地址生成，注入右栏 webview； - 本机 HTTP 路由：
POST /element-ref/collect、draft、update、delete、clear，GET /element-ref/items、commands等，用于页面与右栏同步。
插件另注册 DSH 能力包括 webServer、tools（如 element_ref_details）、slots / sidebarRight、uiConversation 等；详见 README「权限与数据边界」表。
外部浏览器（可选）¶
不用右栏浏览器时，可在页面末尾加载 GUI 同源的 picker.js，例如：
<!-- 任意页面，放 body 末尾；地址换成你自己的 GUI 端口 -->
<script src="http://127.0.0.1:59276/element-ref/picker.js"></script>
HTTPS 页面加载 HTTP 脚本会被混合内容策略拦截；README 建议用书签、控制台方式，或用 http://localhost 访问开发页。右栏「怎么用」里还有现成命令与书签脚本说明。
安装与启用¶
已抓取资料未给出 dsh plugin add github:... 一类 CLI 安装句；README 描述的是装进 desktop profile 的方式：
- 在 profile 的
package.json里把本包加入dependencies（文档示例为指向本目录的 link）； - 在
dsh.profile.bundles末尾加入dsh-element-ref； - 重启 DSH 后，host 半路由在启动时加载；可请求
http://127.0.0.1:<GUI 端口>/element-ref/items，应返回带rev/version的空列表。
改 lib/index.js 路由逻辑需重启应用；改 lib/picker.js 可重新点光标按钮或刷新右栏浏览器页；改界面半刷新 DSH 页面即可。
卸载：从 dsh.profile.bundles 移除并删掉 dependencies 中的 link 项，重启 DSH；临时目录 %TEMP%\dsh-element-ref-shots\ 可手动删除。
典型用法¶
按 README「用起来」顺序操作即可复现：
- 右栏展开浏览器，输入开发地址（如
http://127.0.0.1:3210/）并打开。 - 点地址行光标按钮，在页面点选要改的元素，在胶囊或样式面板写清需求。
- 继续点选其他元素；在右栏或输入框注释条核对每处批注。
- 在输入框补充整体要求（可选），用发送键把各批注打包进对话。
作废本轮：批注面板右上角 ×、或关闭点选且尚未发送时，会清空 chip、撤掉页面上标号并还原预览样式；已发送的消息不受影响。
拾取列表最多保留 50 条；刷新右栏浏览器页后点选会自动重新注入拾取器。
数据上报与风险¶
页面上报内容包括：选择器、标签名、id、class、截断文本与 outerHTML、关键计算样式、React/Vue 等同源源码线索、批注 order / requirement、样式面板字段 adjustments 等；不向公网发请求。选中 <img> / <svg> / <canvas> 时，可能写入 %TEMP%\dsh-element-ref-shots\*.png。
使用前请知悉 README「已知风险」：
/element-ref/*本机路由无鉴权，勿映射到公网；- 点选会临时改页面 DOM，刷新或取消可还原；
- 依赖 DSH 内部 DOM 与插槽，大版本升级后可能要跟调插件。
插件以当前 DSH 进程权限运行；安装前请阅读 源码 与 MIT 许可证。
结尾¶
dsh-element-ref 把「点哪改哪」变成对话里的结构化批注，适合本地前端联调、视觉微调后再让 agent 改代码的场景。目录页：skillhub.cn/plugins/kanxue0201/dsh-element-ref；仓库：github.com/kanxue0201/dsh-element-ref。
