前言¶
在 DSH Desktop 里改前端原型时，常见做法是截图、画圈，或在对话里描述「左边第三个按钮」。模型缺少 DOM 上下文，容易改错位置或反复确认。DeepSeek Harness 社区插件 dsh-prototype-annotator（维护者 shiyoungwoo）把交互做成类似 Codex 的页面批注：在侧栏浏览器里直接点选元素、写修改说明，多条批注合并成紧凑标签再随消息发送，并附带选择器、样式、视口等定位信息。插件本身不改动项目源文件，只把批注写入会话输入框，由你决定何时发送。
这是什么¶
DSH 原型批注 · Prototype Annotator 是面向 DSH Desktop 的客户端插件（分类：客户端）。它在侧栏 Browser 或可访问 DOM 的预览页面上启用元素点选与批注，将修改要求与元素上下文一并交给当前会话中的 Agent。包名在 profile 中为 @local/dsh-proto-annotate-spike（与公开仓库名 dsh-prototype-annotator 并存，便于从本地试用版迁移）；当前版本 0.0.3，许可证 MIT。尚未发布到 npm，需通过 GitHub 或 DSH 插件管理器安装。
核心功能¶
下面介绍 README 中已说明、且与实现一致的能力。
- 点选定位：鼠标悬浮高亮元素，显示尺寸、颜色和字体；点击后输入修改说明；
Esc取消点选。 - 批注入口：会话标题栏固定「批注」按钮，侧栏工具栏保留快捷入口；快捷键
Option+A（Windows/Linux 文档写为Alt+A，未验证）。 - 紧凑标签：多条批注合并为「N 条注释」标签；发送前可打开详情、删除单条；发送后只读查看。输入框与已发送消息均以该标签展示，元素选择器与样式等定位信息仍会进入模型上下文。
- 带上元素信息：DOM 选择器、标签名、短文本、尺寸、样式、页面 URL 和视口大小随修改要求发送；开放 Shadow DOM 路径使用
>>>分隔。 - 适配现有工作流：仅把批注加入会话输入框，不自动改仓库文件；无额外服务、无
prepare/postinstall构建脚本。 - 侧栏本地前端：支持 Vite、React、Vue 等开发服务器页面，无需整站导出为静态 HTML。
插件依赖 Desktop 提供的 sidebar-right 与 sidebar-browser 宿主能力，并注入 @deepseek-ai/dsh-client-ui-sidebar-right、@deepseek-ai/dsh-client-ui-sidebar-browser（见 package.json 中 dsh.client.inject）。
兼容范围¶
| 项目 | 状态 |
|---|---|
DSH Desktop 0.2.1-rc.3，macOS |
用户已在实际界面确认点选、标签与紧凑消息可用 |
DSH Desktop 0.2.1-rc.5，macOS |
入口与点选回归测试通过；实际界面未验证 |
| 侧栏 Browser 中的本地前端 | 支持（Electron webview 读 DOM） |
| 可访问 DOM 的 HTML 预览 iframe | 支持；跨域与沙箱会影响读取 |
| Windows / Linux Desktop | 未验证 |
| 纯 Web、TUI、Headless | 非本版本目标 |
| 其他 DSH 版本 | 未验证；包声明 dsh: >=0.2.1-rc.3 <0.3.0 不表示全范围均已验证 |
宿主升级后需重新验证；请勿同时安装多个副本。
安装与启用¶
先做安装，再重新加载或重启 DSH Desktop；若未见「批注」按钮，退出并重新打开应用。
在 DSH 对话中安装¶
让 Agent 使用内置插件管理器，不要手改 profile：
请安装 DSH 插件 github:shiyoungwoo/dsh-prototype-annotator。
请使用插件管理器 install_bundle，不要手动修改 profile 配置。
命令行安装¶
已配置 dsh 时：
dsh plugin --profile desktop add github:shiyoungwoo/dsh-prototype-annotator
macOS 应用内置 CLI（无需把 dsh 加入 PATH）：
"/Applications/DeepSeek Harness.app/Contents/Resources/runtime/cli/bin/dsh" plugin --profile desktop add github:shiyoungwoo/dsh-prototype-annotator
自定义 profile 时将 desktop 替换为你的 profile 名。若曾安装本地试用版，请先在插件管理器移除旧本地链接，再安装 GitHub 版本。
更新与卸载¶
更新：重新执行同一安装命令后重启 Desktop。卸载示例：
dsh plugin --profile desktop remove @local/dsh-proto-annotate-spike
典型用法¶
经过上面的步骤启用插件后，可按 README 示例操作：
- 在 DSH Desktop 侧栏浏览器打开前端地址，例如
http://localhost:5173，或打开可访问 DOM 的 HTML 预览。 - 点击会话标题栏「批注」（或侧栏入口 /
Option+A）。 - 悬浮查看高亮，点击选中元素；输入修改说明，「完成」或
Enter写入输入框（Shift+Enter换行；中文输入法确认不会误提交）。 - 输入框出现「1 条注释」等标签；可继续点选增加条数，或点击标签查看、删除单条。
- 按需补充普通文字后发送。已发送消息同样以紧凑标签显示，详情只读且无截图。
文档中的完整示例：打开本地前端 → 点「批注」→ 选中图标 → 输入「这个图标太卡通，改成适合金融平台的线性图标」→ 输入框出现「1 条注释」→ 发送。
从标题栏进入时默认绑定当前会话输入框；多输入框并存时需面板选择目标会话。提交中的输入框不能写入。
数据与隐私¶
标签保存修改要求与元素上下文。元素截图缩小为最大 480×320 的 JPEG，仅用于发送前详情预览，不随批注文本发给模型；发送后详情无截图。模型收到修改要求、选择器、短文本、尺寸、样式、URL 与视口；在含敏感信息的页面上使用前请自行检查。插件 README 说明无额外网络请求或遥测；消息仍经 DSH 所选模型提供方发送。批注正文以 <prototype-annotations> 块保存在会话中；停用插件后仍保留可读原始文本。
适用场景与注意¶
适合：在 DSH Desktop 侧栏调试本地或原型页面、希望 Agent 按具体 DOM 改 UI 的前端与全栈开发者。
限制与排查（摘自 README）：
- 跨域 iframe、封闭 Shadow DOM、canvas 绘制、嵌套 iframe 不在本版本支持范围；优先侧栏 Browser 打开本地页。
- 页面结构变化后选择器可能失效，需重新点选。
- 按钮未出现：确认 Desktop、侧栏已开页，重载或重启；可试
Option+A。 - 部分提示与标签为中文；元数据与主要操作有中英文资源。
安全与信任：插件以当前 DSH 进程权限运行，安装前请阅读 GitHub 源码 与 MIT 许可证；勿在不可信页面上放宽 iframe 沙箱，建议用于自有原型与本地开发页。DeepSeek Harness 生态强调「一切皆插件」；社区目录 skillhub.cn 为独立站点，与 DeepSeek / 幻方无官方从属关系。
结尾¶
dsh-prototype-annotator 把「点选 + 说明 + DOM 上下文」收进一条可编辑的消息流，减少截图与口头定位的误差，又保留你控制发送时机的习惯。目录页：https://www.skillhub.cn/plugins/shiyoungwoo/dsh-prototype-annotator；仓库与 Issue：https://github.com/shiyoungwoo/dsh-prototype-annotator。
