前言¶
用 DeepSeek Harness（DSH）改前端时，常见问题是用文字描述 UI：「中间那块按钮看着不对」——Agent 得猜是哪个节点、要改成什么样。纯截图能定位区域，却难带上可执行的 selector、你在页面上试过的样式差分，以及裁剪后的上下文图。
dsh-redline 是面向 web profile 的客户端插件：在 Harness 内置浏览器打开的页面上，点选元素、写评论或现场调样式，确认后把标注收进输入框上方的卡片；发送下一条消息时，这些内容会以结构化快照附在对话里，供 Agent 直接据此改代码。
这是什么¶
- 名称：
dsh-redline（npm 包名与仓库名一致） - 维护者：klaus-2
- 分类：客户端（注入 Harness 浏览器页面）
- 许可证：MIT（见仓库与 npm 元数据）
- 定位：在 Harness 浏览器内做可视化评审——选中元素、评论、实时样式预览，并把 selector、无障碍信息、裁剪截图、样式 before→after、文本修改等一并交给 Agent。
插件以 DSH 的「一切皆插件」方式安装；社区目录在 SkillHub 插件页，与 DeepSeek / 幻方无官方应用商店从属关系，使用前请自行核对源码与许可证。
核心功能¶
以下能力均来自项目 README 与 package.json 说明。
元素标注与两种 Pin 模式¶
- 在 Harness 浏览器渲染的任意页面上，悬停高亮，点选目标元素。
- 评论模式（
C）：选中后写「希望怎么改」；Popover 锚定在元素上。 - 调整模式（
V）：打开实时样式检查器，改文字、颜色、排版、尺寸、间距、边框与效果等，页面即时预览；可逐行重置、回滚。 - 确认：Pin 汇总到输入区上方的卡片；可就地编辑、resolve/reopen/delete。发送消息时附带；从卡片移除 Pin 时，页面对应 overlay 也会同步去掉（reconciliation）。
自由标注画布（D）¶
全页画布：笔刷、线、箭头、矩形、椭圆、 numbered step 标记、文字等。可将整页截图与绘制内容合成后送入对话。
Agent 收到的结构化块¶
每个 Pin 在单次快照里占一块，典型字段包括：
Target：标签、role、无障碍标签Target selector：回到该元素的 CSS 路径Target text/Component：内容与框架提示Screenshot (cropped around the target)：围绕标记区域的 JPEG，非整屏Comment：你的说明Requested visual changes：现场调整记录为prop: before -> afterRequested text change：若在检查器里改过元素文本
快照作为 producer-owned 的 context 挂在你的下一条消息上，聊天里以原生可折叠卡片展示。
国际化与运行范围¶
Overlay UI 支持 English、Português (Brasil)、简体中文，随浏览器 locale 选择。
当前范围：单 Harness 实例、内置浏览器渲染的页面、基于视口的裁剪截图。远程浏览器与整页捕获 README 标明暂不在范围内。
本地服务（默认无需配置）¶
插件启动 loopback 服务，默认 127.0.0.1:47477，占用则依次尝试后续 20 个端口；提供 overlay、截图附件与标注 intake。实例密钥存放在 ~/.dsh/profiles/<profile>/dsh-redline/instance.secret（模式 0600），不注入页面。
安装与启用¶
官方安装命令（须使用 web profile）：
dsh plugin --profile web add dsh-redline
dsh web
私有或未发布构建可从 git 或本地路径安装：
dsh plugin --profile web add git+https://github.com/klaus-2/dsh-redline.git
dsh plugin --profile web add ./dsh-redline
package.json 要求 Node >=20。npm 上包版本以发布为准（仓库内开发版本见 tag/release，安装时以 dsh plugin 拉取的包为准）。
典型用法¶
在 dsh web 打开的目标页中，用快捷键进入模式并完成标注后发送。
| 按键 | 作用 |
|---|---|
C |
评论模式：点元素并描述应如何修改 |
V |
调整模式：点元素并打开实时样式检查器 |
D |
自由标注画布 |
Esc |
取消当前模式、Popover 或预览 |
Enter |
在 Popover 中保存标注 |
推荐流程：
- 启动 web 会话并在 Harness 浏览器中打开待改页面。
- 按
C或V点选问题元素；写评论或在检查器里试样式，确认后 Pin 进入卡片。 - 需要流程说明或跨区块示意时，按
D在整页上绘制再发送。 - 在输入框附带卡片中的快照，发送下一条消息，由 Agent 根据结构化上下文改仓库代码。
未发送前，绘制内容仅在内存中，刷新不保留；Pin 与标签页作用域相关。
适用场景与注意¶
适合：在 DSH web 工作流里做 UI 评审、把「指哪打哪」的反馈交给编码 Agent，而不是反复用文字猜 selector。
安全与信任（摘自 README Security notes，摘要）：
- Loopback 仅绑定
127.0.0.1，校验 Host；私有路由需实例密钥，页面通过受限 message bridge 通信，overlay 不持有密钥。 - 经 Redline 提交的评论视作用户输入；代理不转发 cookie。
- 插件按当前 DSH 进程权限运行，安装前请阅读 GitHub 仓库 源码与
THIRD-PARTY-NOTICES.md（含 tencil、html2canvas 等归属说明）。
第三方与启发：overlay 样式体系部分源自 tencil；交付环路受 dsh-web-review、dsh-annotate 等社区项目启发（见 README Credits）。
结尾¶
dsh-redline 把「点元素、试样式、留评论」收成 Agent 可消费的一条结构化上下文，减少 UI 反馈中的歧义。若要安装或查看版本信息，可从社区目录进入，也可直接查阅 GitHub：
- 目录页：https://www.skillhub.cn/plugins/klaus-2/dsh-redline
- 仓库：https://github.com/klaus-2/dsh-redline
