前言
DeepSeek Harness (DSH) 的核心能力在于让 Agent 修改代码并即时反馈结果。传统的视觉反馈往往依赖截图或纯文本描述，缺乏上下文关联。dsh-visual-edit 插件直接集成在 DSH 的预览界面中，解决了这个问题。它允许开发者直接在预览的网页上标注元素、区域或绘制箭头，将反馈插入聊天流，并在 Agent 生成新代码后自动对比变更。
核心功能
该插件提供了一套完整的可视化标注与对比工作流：
- 三种标注模式：支持 Element（点击元素）、Arrow（拖拽箭头）和 Rectangle（矩形框选）三种方式。
- 自动对比：发送草稿后，当 Agent 更新页面且预览刷新时，会自动生成“变更前”和“变更后”的快照，并在预览中叠加显示。
- 本地存储与备份：使用 IndexedDB 存储笔记，单会话最多支持 50 条记录。支持 JSON 备份和恢复，限制为 70MB。
- 批量处理：支持“保存草稿”、“保存并选择下一个”以及批量选择功能。
- 开发集成：支持 Vite 和 React 开发环境的源码位置记录，方便调试。
安装与启用
安装前请确保你的 DSH 版本为 0.2.0-rc.2。该插件包含其所需的依赖。
对于桌面端应用，请先完全退出应用，然后运行以下命令：
dsh plugin --profile desktop add https://github.com/Han-1413141/dsh-visual-edit/releases/download/v0.5.2/dsh-visual-edit-0.5.2.tgz
安装完成后重启 DSH，入口会出现在预览工具栏中。
典型用法
- 在右侧侧边栏打开 HTML 文件，或在桌面 Browser 中加载网站。
- 点击预览工具栏中的 Visual Edit，选择 Element、Arrow 或 Rectangle。
- 在页面上进行标注，输入描述变更的文字，点击 Add to chat & compare。请求会被插入到当前的编辑器中。
- 在 DSH 中发送草稿。当 Agent 修改页面并触发预览更新时，自动对比快照会出现在预览区。
- 查看快照，确认结果无误后点击 Confirm result。
适用场景与注意
- 版本依赖：目前仅支持 DSH 0.2.0-rc.2。
- 性能与兼容性：图片为 DOM 渲染的 PNG，最大尺寸为 1600×1600。对于跨域子 iframe、Shadow DOM、canvas/WebGL 以及外部字体，图像重建不可靠，仅保留元数据说明。
- 隐私与过滤：表单控件以及带有
data-private或data-visual-edit-private属性的元素会被排除在截图和文本捕获之外。 - 触发机制：只有被选中的区域发生变化才会触发重捕获。与选定元素无关的 DOM 变更不会触发对比。关闭反馈遮罩层会保持监控活跃，切换标签页会暂停监控。
总结
dsh-visual-edit 通过原生集成的方式，将视觉反馈流程标准化，减少了截图和文字描述的误差。它不仅支持基础的对比，还通过本地存储和批量功能提升了长周期的开发效率。
相关链接
- SkillHub 插件目录
- GitHub 仓库
