前言
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 倉庫
