Preface

When using coding agents to modify frontend code, the bottleneck often isn’t “whether you can write CSS”, but rather that the description fails to match the exact pixels. If you write in a conversation like “the title and button are too close” or “the border radius of this card is wrong”, the model can only guess the target through selectors and source code. After refreshing the changes, you often find that it modified the adjacent element of the same type. In the next round, you add “not that one, the one in the top-right corner”, and the context grows longer and longer, while the few lines of code you actually want to modify still can’t be aligned correctly.

DeepSeek Harness (hereinafter referred to as DSH) treats models, tools, sessions, sandboxes, and UIs all as plugins, as stated on its official page: “Everything is a plugin”. Capabilities are assembled through configuration without modifying the Harness source code. As a result, a number of plugins that add workbenches to web interfaces have emerged in the community. dsh-web-review does a more specific thing: it lets you select page elements and write modification comments in the DSH built-in preview, test colors and spacing on the page if necessary, then hand these visual feedbacks to the Agent to modify the frontend source code in the current workspace.

This article is organized after cross-checking the plugin directory page, GitHub repository README/CONTRIBUTING, and npm package page: what it is, which installation command to use, how to click on the page, and what scenarios it is suitable for. The directory site deepseek-harness-plugin.com is a community index and has no official affiliation with DeepSeek / HyperMind. Do not treat it as an official app store.

What it is

dsh-web-review is a UI enhancement plugin maintained by CanglongCl, with its source code hosted on the GitHub repository CanglongCl/dsh-web-review. It is categorized under “UI Enhancement” on the directory page, and its main language is TypeScript. The npm package name is @canglongcl/dsh-web-review, with the current version 0.3.0 (released on 2026-08-17). The runtime platform declared in the plugin manifest is web, which requires using DSH’s web interface instead of the terminal TUI.

As of 2026-08-17, GitHub shows 15 stars; the directory page still showed 14 at that time, so refer to the repository page for accurate numbers. The GitHub license field is empty, and there is no common LICENSE file in the repository. The directory page states that it is a community open-source project, and you can view the source code and install it for free, but this does not mean that an SPDX license has been declared. You should read the source code and terms of service yourself before installing.

The problem it solves can be summed up in one sentence: turning “seeing what’s wrong on the page” into annotations that the Agent can locate in the source code, instead of relying solely on natural language descriptions. The repository’s own README also references a familiar pattern: if you have used the built-in browser of coding agent applications like v0 or Codex, you will find the operations relatively intuitive.

Core Features

The following items are all from the repository README and CONTRIBUTING, without additional elaboration.

Web Preview

The plugin provides preview capabilities in the DSH web interface, allowing you to open links returned by the Agent. You can also switch to the “Web Preview” tab and enter the absolute HTTP(S) URL of the page. The review target is the running frontend page, not a static screenshot.

The CONTRIBUTING document supplements the preview isolation method, which has direct implications for users: the host only provides session control and will not directly return the target page content under the host Origin; each top-level target uses a short-lived *.localhost Preview Origin; the proxy does not forward browser Cookies or Authorization headers. For internal web pages that require login status or carry authentication headers, do not assume that “logging in the preview equals logging in the source site”.

Element Annotation

After entering annotation mode, you can hover to highlight elements and click to select page elements, adding comments to multiple targets at once. The plugin will automatically attach selectors, text, accessible names, and source code clues to help the Agent find the corresponding implementation. These fields are evidence serialized from the page DOM, not absolute coordinates that guarantee to always point to the correct file; if the source code anchor is missing, the Agent may still need to infer through selectors and copy. The repository’s test suite specifically covers two scenarios: “anchor available” and “anchor missing”.

Real-time Visual Adjustment

You can expand the “Adjust” section in the annotation editor to temporarily modify these attributes and see the results immediately in the preview:
- Text, color, font, font size, line height, size, opacity
- Spacing, layout, borders, border radius, effects

There is a clear boundary here, as explicitly stated in the README: Temporary adjustments on the page will not be written directly to the project. It is just for you to test values in the preview; the actual modification of repository files is done by the Agent receiving the annotation and using the existing files and Shell tools in the session to modify the source code. If you think the color is wrong after testing, resetting or canceling will restore the preview to its original state.

How Annotations Enter the Conversation

There are two ways to send annotations:
1. Click the send button in the annotation toolbar. After sending, the interface will automatically switch back to the “Conversation” tab.
2. Write another prompt in the DSH input box and click DSH’s own send button; the annotations will be sent along with your prompt.

Annotations will be injected as independent context instead of rewriting the text in your input box. The conversation uses DSH’s native folded lines: when collapsed, it displays the page and number of annotations; when expanded, it only shows the target, modification intent, before/after values, and available source code clues. The CONTRIBUTING document also writes implementation constraints: the browser sends a structured { sessionId, page, comments[] }, which is verified by the Node side before generating the # Browser comments context; the plugin does not register new model tools.

Built-in UI Optimization Skills

The plugin includes Jakub Krehel’s design Skills, with the following names:
- better-ui
- better-typography
- better-layout
- better-writing
- better-accessibility
- better-colors
- better-interface
- interface-review

You can call them with slash commands in the conversation, or check them in the annotation editor, so that the Agent refers to the corresponding rules during this round of modifications. These Skills provide design constraints, not automatically “beautifying” the page into a fixed set of styles.

Real-world Process-oriented Evaluation

The repository includes a test suite to check whether the Agent can locate the source code and complete frontend modifications after receiving the page annotations generated by the plugin. The coverage includes: copy / style / layout / responsiveness, multi-element associated modifications, React / Vue / static pages, presence or absence of source code anchors, semantics and accessibility, multi-round annotations and modification scope, as well as token count, number of steps, and time consumption. The design and running method can be found in the repository’s eval/README.md. This article does not reference specific scores, and the test results shall prevail based on the reports you run locally.

Installation and Activation

The installation command given on the directory page is as follows, run it in the DeepSeek Harness terminal:

dsh plugin add github:CanglongCl/dsh-web-review

This is the original text from the directory page, do not spell the repository name as another source yourself. For reproducible installations, replace #commit with the real commit hash. The corresponding commit for the 0.3.0 release on npm is 7809b6697c347cc11a6c0d4ba641b80926de3ef6:

dsh plugin add github:CanglongCl/dsh-web-review#7809b6697c347cc11a6c0d4ba641b80926de3ef6

The maintainer’s README mentions using the Web profile + npm package name, start the web interface after installation:

dsh plugin --profile web add @canglongcl/dsh-web-review
dsh web

The two paths point to the same repository. Use the GitHub source method from the directory page for daily use; if you are already using the web profile and want to install the npm package directly, use the command from the README. The dsh.client.platform in the package manifest is web, so installing it on a non-web profile will have no corresponding interface to attach to.

The directory page has a security notice applicable when installing any DSH plugin: Plugins run with the permissions of the current dsh process, and may execute code during installation. Check the source code repository and license before installing; for reproducible deployments, pin the commit hash, do not long-term pin to the floating default branch.

Usage

The operation sequence given in the repository README is as follows:
1. Ask the Agent to launch the frontend page to be reviewed, then click the address it returned. You can also switch to DSH’s “Web Preview” tab and enter the absolute HTTP(S) URL of the page.
2. Click the annotation button, then click the target elements on the page. You can select multiple targets consecutively.
3. Fill in the modification comments. If you want to preview the visual effect first, expand the “Adjust” section to modify the attributes, and the preview will update in real time.
4. Click the send button in the annotation toolbar, or supplement the prompt in the DSH input box and send it via DSH. The annotation will enter the current conversation as an independent context.
5. After the Agent modifies the workspace source code, refresh the preview to verify. If you are not satisfied, start another round; do not expect temporary adjustments to remain in the project.

A reproducible minimal workflow is: start the frontend development server locally or via the Agent → fill http://127.0.0.1:<port> into the web preview → click buttons or titles → clearly write “what to change” instead of just “it looks bad” → send → refresh to check if the source code has been modified for the corresponding component.

When you need design specifications, select a built-in Skill in the annotation editor, for example, select better-typography when modifying font size and line height, and select better-accessibility when modifying contrast and accessibility. Refer to the list in the README for the Skill names.

Applicable Scenarios and Notes

It is more suitable for the following situations:
- You are already using the DSH web interface for frontend development and want to select elements on the real page instead of just describing pixels in the conversation
- Modifying copy, styles, layouts, and responsiveness for React, Vue, or static pages, and the workspace is the corresponding source code
- You want to test colors, spacing, and border radii in the preview first, confirm the appearance before asking the Agent to finalize the changes
- You need to pass selectors, accessible names, and source code clues to the model together to reduce the chance of “modifying the wrong same-type elements”

Please note the following points, all based on the repository or directory page:
1. Only covers the Web GUI. The package declares platform: web, and the startup command in the README is also dsh web. For terminal TUI scenarios, look for other interface plugins, do not expect to be able to select DOM elements in a pure terminal after installing this plugin.
2. Temporary adjustments do not equal commits. The colors and spacing modified in the preview will return to their original state after refreshing or resetting; only the workspace files modified by the Agent will be retained. The acceptance shall be based on the refreshed page and git diff.
3. Preview has isolation boundaries. The proxy does not forward Cookies or Authorization headers. For pages that require login status, do not assume that the preview session will carry the login information from your browser.
4. The plugin does not add new model tools. The Agent still uses the existing file and Shell capabilities in the current session to modify code. The quality of annotations (whether the target is selected correctly, whether the intent is clearly written, whether there are source code clues) is more critical than installing another set of tools.
5. Permissions and licenses. The plugin has the same permissions as the current dsh process. As of 2026-08-17, GitHub has not declared an SPDX license, so you should read the source code before installing; if you have open source compliance requirements for production or corporate environments, confirm the license first before installing.
6. The directory page is not an official store. deepseek-harness-plugin.com is a community index. The installation command shall be based on the original text on the page and the repository README, do not copy rewritten source strings from third-party retellings.

Summary

dsh-web-review adds built-in preview and element annotation functions to the DSH web interface: select elements, write comments, test visual attributes if necessary, then hand the annotations with selectors and source code clues to the Agent to modify the frontend workspace. It does not replace you in making design decisions, nor does it directly write temporary styles from the preview into the repository. For people who modify pages in DSH Web, it mainly shortens the gap between “describing pixels” and “aligning with the source code”.

Reference addresses:
- Plugin directory page: https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-web-review/
- GitHub repository: https://github.com/CanglongCl/dsh-web-review
- npm package: https://www.npmjs.com/package/@canglongcl/dsh-web-review
- DeepSeek Harness official description: https://deepseek.com/harness/
- DeepSeek Harness source code: https://github.com/deepseek-ai/deepseek-harness