前言¶
在 DSH 里让智能体改界面时，常见做法是口头描述「把左边那个卡片标题调大」「这块挪到右边一点」。模型看不到你指的位置，容易改到相邻组件，或者 CSS 选择器不唯一。开发者工具能给出 DOM 信息，但把路径、坐标和意图拼成一条可执行的请求仍然费时。
dsh-ui-annotate 是运行在 DSH 客户端上的纯前端插件：在界面上拖框圈选区域，用自然语言写想改成什么样，插件自动整理成带唯一 CSS 路径、视口坐标和框内子元素列表的「界面调整请求」，插入输入框草稿，由你确认后再发送。
这是什么¶
- 定位：客户端 UI 圈选与标注插件，把「改哪里、改成什么」结构化后写入会话输入框。
- 维护者：loiter1EM（npm 包作者字段为 loiter）。
- 当前版本：0.1.2（MIT 许可证，Node >= 20）。
- 宿主侧：
lib/index.js为空，不访问文件系统、不截图、不上传数据，也不新增端口或进程。
插件通过 Cordis 补丁挂到输入框工具行左侧插槽 conversation.input.left，依赖 @deepseek-ai/dsh-client-ui-slots，平台为 web。
核心功能¶
圈选与元素解析¶
- 输入框左侧会出现裁剪图标按钮，悬停提示「圈选改这里」。
- 点击后全屏变暗，拖动矩形框选；实时显示宽 × 高，
Esc取消。 - 松手后以框中心做命中测试，必要时向上收拢到能覆盖整个框的容器（仅在覆盖率确实提升时上移）。
- 提取并写入消息的内容包括：
- 向上拼接到全页唯一命中为止的 CSS 路径（有id也会校验唯一性）；
- 祖先链、元素在视口中的实际位置、框选区域占该元素的百分比；
- 框内更小元素（按覆盖面积排序）、class、role/aria-label、文本、data-*、当前样式。
消息中会区分「元素实际位置」与「请落在这个坐标范围内」，减少改动落到相邻元素的情况。
描述改动与可选「标记目标位置」¶
圈选结束后弹出面板，标题为「我想把它改成……」，并展示实际位置与覆盖比例；回车换行，用「发送」确认。
若需要移动位置但说不清目标在哪，可点面板里的「标记目标位置」再拖一次框。最终消息会附带目标框坐标、相对元素中心点的位移（dx/dy，正数向右/向下）以及尺寸差异；支持「重画」「清除」，不标记则与未使用该功能时行为一致。
点「发送」后，整理好的内容只插入输入框草稿，不会自动提交，你还可以继续编辑。
0.1.2 起支持上述「标记目标位置」，并修复了框选位置与实际改动位置不一致的问题。
安装与启用¶
在终端执行官方安装命令（web profile）：
dsh plugin --profile web add dsh-ui-annotate
安装后完全退出并重新打开 DSH NEXT。客户端插件的 bundle 仅在启动时重新扫描并重算 rev，热重载不足以加载新插件。
成功后，输入框工具行左侧会多出一个裁剪图标按钮。插件不依赖宿主侧能力，也不申请额外权限。安装前可按习惯查看 GitHub 仓库 源码与 MIT 许可证；插件以当前 DSH 进程权限运行，行为以仓库说明为准。
典型用法¶
下面步骤对应 README 中的可复现流程。
- 打开需要调整的 DSH 页面，点击输入框左侧的圈选按钮。
- 在目标 UI 上拖出矩形框，松手后在面板里用自然语言写期望效果（例如字号、颜色、文案）。
- 若涉及位移，在面板中「标记目标位置」再框一次目标区域。
- 点「发送」，检查输入框里生成的草稿，必要时增补说明，再自行提交给智能体。
生成消息的大致结构如下（节选，与仓库示例一致）：
【界面调整请求】我想修改 DSH 界面上的这个位置。
- 目标元素(CSS 路径): `section#settings-card`(该路径在全页唯一命中此元素)
- 元素: <section>
- 祖先链: body > div#app > main
- 元素实际位置(视口坐标): x=560 y=180 w=320 h=96 / 视口 1440×900 @2x
- 框选区域(视口坐标): x=572 y=192 w=290 h=72 —— 占该元素的 88%
...
我想改成: 标题再大一点,说明文字换成浅灰
智能体收到的是带选择器与坐标的约束说明，而不是模糊的「上面那块」。
适用场景与注意¶
适合谁
- 经常在 DSH 对话里请求改界面样式或布局的开发者。
- 希望把 DOM 上下文一次性交给模型、减少来回澄清的场景。
- 需要在 web 客户端使用、且接受「只改草稿、不自动发送」工作流的用户。
注意
- 仅面向 web 客户端（
dsh.client.platform: web），安装命令需带--profile web。 - 坐标与覆盖率依赖当前视口与页面状态；窗口尺寸或缩放变化后，应重新圈选。
- 社区目录 SkillHub 条目 与 GitHub 为独立来源，与 DeepSeek / 幻方无官方从属关系；版本与功能以仓库 README 与
package.json为准。
结尾¶
dsh-ui-annotate 把「指哪改哪」落成可核对的选择器、坐标和改动描述，留在你的手心里完成发送。若要安装或查看最新说明，可访问 SkillHub 插件页 或 GitHub：loiter1EM/dsh-ui-annotate。
