DeepSeek Harness Plugin: Real-Time Visual Editing for HTML

Author: AlienZHOU Tags: Frontend, DeepSeek, Agent

Beyond generating markdown, having agents deliver visual assets via single-page HTML is becoming increasingly common. A landing page, a report page, an event page — a single file can be opened directly.

With the release of DeepSeek Harness last week, I built a plugin for DSH: HTML Workbench. After generating HTML with a single prompt, you can preview it anytime in the sidebar; not only can you preview it, but you can also casually "fine-tune the page."

The project is hosted at: https://github.com/alienzhou/html-workbench

First, See the Effect

Have the agent generate an introduction page for a project:

What's generated is a regular HTML file that can be previewed directly in the sidebar. But it's more than just a preview — it's also a visual editor.

You can directly click elements on the page to change text, swap images, and adjust styles. Changes are saved back to the source file in your project in real time:

And humans can edit while AI edits at the same time. You tell the Agent "change the button color on the page to purple," it makes its changes, you make yours, and both sides collaborate on the same file:

Changing fonts, adjusting margins, tweaking layouts — things that used to take several rounds of back-and-forth in a chat box can now be done with a couple of mouse clicks. To verify interactions, switch to Preview mode:

It's Not an HTML Generator

This is the first thing I want to emphasize: HTML Workbench does not generate HTML.

You can use any AI, any design tool, or even hand-written code to produce a page, and then hand the file to Workbench. What it does is turn an existing HTML document into a visual editor with preview and real-time AI collaboration capabilities.

Architecture: The Local HTML Source File is the Single Source of Truth

The core of the entire design is one principle: All edits revolve around the local HTML source file.

• Local Editing Desk: A Python local server runs the editing page, which is based on GrapesJS for visual editing, with some inheritance and special-case handling for AI-generated HTML;
• Human & AI Dual Mode: Humans perform click-to-edit and style tweaks; AI directly edits the HTML source file;
• Collaboration Mechanism: Changes from both sides are written back to the same source file. Combined with revision checks, the editor stops when its state is stale, rather than overwriting changes the AI just made.

The benefit of this design is that Workbench introduces no proprietary intermediate format. A file is a file. At any time, you can close the workbench, open the file directly with an editor, or hand it off to the next tool.

The service only listens on 127.0.0.1, so files are not exposed to the local network.

Two Ways to Use It

Usage 1: As a DeepSeek Harness Plugin.

If you are using DeepSeek Harness, it has first-class plugin support. The visual editor is embedded directly in the right sidebar of the web UI. Whenever the Agent creates or modifies an .html file, the panel automatically follows — no need to open a separate browser window:

dsh plugin --profile web add @vibe-x/dsh-html-workbench

Usage 2: Mount as a Skill on Any Agent.

Install with a single command and mount it onto agent clients like Claude Code or Codex:

npx skills add vibe-x/html-workbench

After that, when you ask the Agent to generate HTML, it will automatically guide you to open the page in Workbench.

The project is hosted at: https://github.com/alienzhou/html-workbench