Introduction¶

In DeepSeek Harness (DSH), a common workflow for letting agents modify the frontend is: handing the HTML to the agent, having it make changes, and then you reviewing the rendering results; if unsatisfied, you describe in the chat “the button is too far left, the spacing is incorrect, let’s change this section.” The more vague the description, the more rework there is, and after the changes, you still have to manually open the page to verify.

Visual Sandbox (@local/dsh-visual-sandbox, GitHub repository Surenkh/dsh-visual-sandbox, maintainer Surenkh) flips this workflow. It renders the interface to the right panel of DSH. You use the mouse to select elements and write a note, and the plugin organizes these annotations along with the element’s selector, dimensions, and styles into a structured list of targets, handing them over to the agent to modify only the specific blocks you clicked. Below is an introduction to its capabilities, installation method, and typical usage.

Overview¶

Visual Sandbox is a DSH client-side plugin. Its positioning is “annotatable UI preview”: it opens a workspace on the right side of DSH, renders HTML or local URLs from the workspace, provides four preview frame modes, supports annotations at the element level, and packages annotations into precise targets for the agent to perform surgical modifications.

It solves the problem of “pointing and shooting” during UI reviews, rather than describing what is wrong using text. It should be noted that this plugin runs with the permissions of the current DSH process. After installation, it loads into the DSH client; therefore, you should check the plugin’s source code and license (stated as MIT in the README) before installing to ensure it fits your usage environment.

Core Features¶

Four Preview Frameworks. Responsive fills the screen fluidly; Mobile is 390×844; Tablet is 768×1024; Desktop is 1024×720. Fixed-size frames adapt to the available width and scroll vertically when necessary, allowing the Mobile frame to display at a size close to the actual device rather than being compressed to fit the panel height. Frames remain centered until they actually overflow the canvas.

Preview Scaling. Supports Fit, 50%, 75%, 100%, 110%, 120%, 125%, 150%, and 200%. Fixed frames can be panned and scrolled when they exceed the canvas, allowing mobile prototypes to be reviewed at actual size or larger; Responsive always maintains full bleed.

Element-level Edit UI. Select “Element” or “Region” in the Select menu. When hovering over an element, a highlighted outline and a real-time selector tag appear; click to pin it. Write notes in the popup; press Enter to send and Shift+Enter for a new line.

Surgical Annotation. Each annotation comes with a number, note, the target framework and viewport (e.g., mobile 390x844), a unique CSS path, truncated outerHTML and visible text, pixel rectangles and normalized percentages, as well as computed styles (layout, color, font, border, flex/grid, shadow, etc.). The rule injected into the agent for the session is: modify only these targets.

Version Snapshots. Workspace files record the actual rendering history—first load, every agent refresh, and every re-read from disk—with the latest version first, selected by default. Documents with identical content are folded into the previous entry rather than stacking. Selecting an old version immediately switches the preview without modifying the files on disk. Snapshots are stored in the host memory with a session limit of 8 versions / 8 MB. Documents larger than 2 MB can still be previewed but are not recorded in history. For URL previews or files without a history, the Version field is disabled and shows “Latest”.

Source Auto-Detection. The plugin scans the workspace (skipping node_modules, .git, .next, .nuxt, and cache directories), listing HTML files from newest to oldest, and automatically loads the latest when there is no active source. Workspace previews inline local stylesheets, scripts, images, media, fonts, and CSS url(...) resources into a self-contained document, while removing CSP and base tags. Module imports requiring the original server will still fail; for such cases, use a real-time URL.

Expand Narrow Containers. Removes the hardcoded max-width wrapper used for mobile demos, allowing mobile-first pages to fill the screen on wider frames. This only applies to workspace previews.

Cross-origin URL frames cannot be inspected; in such cases, rectangle selection is used, and the numbering and note workflow remains consistent.

Installation and Activation¶

The prerequisites are that DeepSeek Harness (desktop app or dsh web) is installed and a profile is available. The plugin is distributed as a bundle; according to the official README, it must be installed by cloning rather than via npm.

First, clone the repository:

git clone https://github.com/Surenkh/dsh-visual-sandbox.git

Then, register it in ~/.dsh/profiles/<profile>/package.json:

{
  "dependencies": {
    "@local/dsh-visual-sandbox": "link:../../path/to/dsh-visual-sandbox"
  },
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "@local/dsh-visual-sandbox"
      ]
    }
  }
}

If you don’t want to keep a local clone, you can also use a git dependency:

"@local/dsh-visual-sandbox": "github:Surenkh/dsh-visual-sandbox"

Finally, install the dependencies:

cd ~/.dsh/profiles/<profile>
pnpm install

Restart Harness and refresh the application page once to load the client-side components. The plugin will then appear in the guide on the right sidebar, named Visual Sandbox.

The upgrade process is the same as installation: git pull, pnpm install, restart, and refresh.

Typical Usage¶

1. Load Source. Enter a workspace path like index.html in Source, or select from the list, or paste http://localhost:3000, and press Enter to load.
2. Select Framework. Choose Responsive, Mobile, Tablet, or Desktop in Device & Type; for fixed frames, use Preview scale to enlarge to 110%, 120% or more; the canvas will scroll if the prototype is larger than the panel.
3. Switch to Edit UI. Select Element or Region in Select. Hover over a block; it displays an outline and provides a selector; click to pin it.
4. Write Notes One by One. Enter a description in the popup and press Enter to submit. Repeat this step for multiple error blocks.
5. Send All. Supplement the context in the chat to let the agent make precise modifications based on the annotations.

The panel can also be toggled via the sparkle icon in the top right corner or triggered by the agent using open_visual_sandbox. Each opening restores the latest preview for that session; the workspace will not fall into an empty state.

Collaboration with Agents¶

The plugin provides the following tools:

Each session comes with a system prompt containing two mandatory preview rules: do not fabricate phone frames, Dynamic Islands, or status bars within the preview page; and when there are changes to previewable files, automatically reopen or refresh the sandbox.

When there are annotations in the queue, this prompt also injects each target in the form of ### Annotation #N, including the selector, styles, and text, along with surgical modification rules: modify only these targets, then call refresh_visual_sandbox.

Use Cases and Notes¶

It is suitable for scenarios that require frontend reviews, prototype walkthroughs, or verification of iteration outputs within DSH: local URLs such as .html files, dev servers, Expo web, Flutter web, Tauri, or Electron render targets can all be previewed.

A few notes:

• Cross-origin URLs cannot inspect elements; only rectangle selection is available.
• Module imports requiring the original server will fail in workspace previews; use a real-time URL instead.
• Documents larger than 2 MB can be previewed but are not recorded in version history; the snapshot limit is 8 versions / 8 MB per session.
• The plugin runs with the permissions of the current DSH process; check the source code and license before installing. This plugin is licensed under MIT, with LICENSE and CHANGELOG provided in the repository.
• The Community Directory is a separate site with no official affiliation to DeepSeek/Quantum; the plugin is not an npm package.

Conclusion¶

The value of Visual Sandbox lies in replacing “describing interface problems with text” with “selecting problems on the interface and handing them over to the agent.” The four frameworks, element-level annotations, and version snapshots cover review needs from mobile to desktop, while surgical modification rules reduce the risk of errors.

Directory: https://www.skillhub.cn/plugins/Surenkh/dsh-visual-sandbox

GitHub: https://github.com/Surenkh/dsh-visual-sandbox