前言¶
在 DeepSeek Harness（DSH）的开发流程里，想让 AI 修改界面时，最常见的问题是说不清“改哪儿”。截图加一句“右边那个灰色的卡片”，AI 只能猜，猜错了就要多一轮对话。dsh-annotate 解决这个问题：在 DSH 的实时预览里直接点选元素、写批注，将结构化数据直接发进对话，不需要截图，也不需要 AI 猜测。
插件介绍¶
dsh-annotate 是 DeepSeek Harness（DSH）的侧边栏插件。由 TheYoungChen 维护，属于“联网工具”类。当前 2 星，MIT 协议。它的核心价值是：在实时预览里点选元素、写批注，直接发进对话。
核心功能¶
- 两下点击完成标注：悬停高亮并显示选择器，点击即完成。
- 标注 / 批注两种粒度：只点元素是“标注”，点元素后写字是“批注”。
- 选择器经得起推敲：优先语义化 class，避免位置链，确保唯一性。
- 一次带上多条：按页面从上到下排序，编号与页面里的标记针对应。
- 换页不丢标注：单页应用（SPA）里切换路由，已标好的内容保留。
- 地址栏显示真实地址：显示当前页面的完整地址（含路径、query、hash），而非代理端口。
- 不弄脏消息：标注作为独立上下文投递，不混进用户输入框。
- 技术栈识别：自动探测本地端口并识别框架（Vite / Next / React / Vue 等）。
- 本地代理：与宿主同 site，利用同源策略处理登录态和存储。
安装与启用¶
宿主与要求：
* 宿主：DeepSeek Harness（DSH），Profile 必须是 web。
* Node 版本：>= 20。
* 平台：Windows / macOS / Linux。
* 依赖：无额外运行时依赖（@deepseek-ai/cordis 由 DSH 提供）。
安装步骤：
1. 克隆插件到 DSH 的插件目录：
git clone https://github.com/TheYoungChen/dsh-annotate
- 把
dsh-annotate加进 Web profile 的dsh.profile.bundles。 - 重启 DSH 的 Web 端。
典型用法¶
- 打开侧边栏的「标注」页签（快捷键
⌘⇧B）。 - 上方选择一个本地服务（自动探测端口与技术栈）或直接填地址；工作区里的
.html也能直接打开。 - 点击「标记」，在预览里悬停，高亮框显示选择器。
- 点击元素，卡片弹在元素下方。
- 想写就写批注，不想写直接保存。
- 标注列表按页面从上到下排序，编号与页面里的标记针对应。
- 填写输入框发送消息，标注会作为独立上下文附在消息上。
适用场景与注意¶
对口场景：网页 UI 修改、前端改稿、让 AI 精确定位 DOM 元素、在本地服务上圈选元素。
已知限制：
* 脱离 DSH 独立运行（必须装进 DSH 的 Web profile）。
* 跨域 iframe 内部元素（浏览器同源策略限制）。
* 自动改代码（只负责“改哪儿”，不改代码）。
* 网络访问：默认只预览回环地址（127.0.0.1）与工作区文件；需配置 allowRemote 才能预览任意 http(s) 站点。
* 换页面后需手动切回标注页签才能看到列表。
结尾¶
dsh-annotate 通过结构化数据替代模糊描述，将 UI 反馈直接注入对话流。如果你在 DSH 里频繁修改界面，这个插件能省去反复解释“改哪儿”的时间。相关目录与源码：dsh-annotate。
