Introduction

The core capability of DeepSeek Harness (DSH) is enabling the Agent to modify code and receive immediate feedback on results. Conventional visual feedback often relies on screenshots or plain text descriptions, which lack contextual association. The dsh-visual-edit plugin is directly integrated into DSH’s preview interface, solving this problem. It allows developers to annotate elements, regions, or draw arrows directly on the preview web page, insert the feedback into the chat flow, and automatically compare changes after the Agent generates new code.

Core Features

This plugin provides a complete visual annotation and comparison workflow:

  1. Three annotation modes: Supports Element (click an element), Arrow (drag an arrow), and Rectangle (select a rectangular area).
  2. Automatic comparison: After sending a draft, when the Agent updates the page and the preview refreshes, “before” and “after” snapshots are automatically generated and overlaid in the preview.
  3. Local storage and backup: Uses IndexedDB to store notes, supporting up to 50 records per session. Supports JSON backup and restoration, limited to 70 MB.
  4. Batch processing: Supports “Save draft”, “Save and select next”, and bulk selection.
  5. Development integration: Supports recording source code locations in Vite and React development environments, facilitating debugging.

Installation and Enablement

Before installation, ensure your DSH version is 0.2.0-rc.2. The plugin includes its required dependencies.

For the desktop application, fully quit the application first, then run the following command:

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

After installation, restart DSH. The entry will appear in the preview toolbar.

Typical Usage

  1. Open an HTML file in the right sidebar, or load a website in the desktop Browser.
  2. Click Visual Edit in the preview toolbar and choose Element, Arrow, or Rectangle.
  3. Annotate the page, enter text describing the change, and click Add to chat & compare. The request is inserted into the current editor.
  4. Send the draft in DSH. When the Agent modifies the page and triggers a preview update, the automatic comparison snapshot appears in the preview area.
  5. Review the snapshot, and after confirming the result is correct, click Confirm result.

Use Cases and Cautions

  • Version dependency: Currently supports only DSH 0.2.0-rc.2.
  • Performance and compatibility: Images are DOM-rendered PNGs with a maximum size of 1600×1600. For cross-origin child iframes, Shadow DOM, canvas/WebGL, and external fonts, image reconstruction may be unreliable, and only metadata notes are retained.
  • Privacy and filtering: Form controls and elements with data-private or data-visual-edit-private attributes are excluded from screenshots and text capture.
  • Trigger mechanism: Re-capture is triggered only when the selected area changes. DOM changes unrelated to the selected elements do not trigger a comparison. Closing the feedback overlay keeps monitoring active, while switching tabs pauses monitoring.

Summary

dsh-visual-edit standardizes the visual feedback workflow through native integration, reducing the inaccuracies caused by screenshots and text descriptions. It not only supports basic comparison but also improves long-cycle development efficiency through local storage and batch features.

Related Links
- SkillHub Plugin Directory
- GitHub Repository