跪拜 Guibai
← All articles
Frontend · DeepSeek · Agent

HTML Workbench Turns AI-Generated Pages Into a Visual Editor With Real-Time Human-AI Co-Editing

By AlienZHOU ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI-generated HTML pages are increasingly used for landing pages, reports, and event sites, but iterating on them through chat alone is slow. A visual editor that shares the raw source file with an agent cuts the back-and-forth and keeps the output as a plain file any tool can consume.

Summary

HTML Workbench takes an existing HTML document and turns it into a live visual editor with a preview sidebar. It does not generate HTML itself; any AI, design tool, or hand-written code can produce the page, and Workbench handles the rest. Click any element to change text, swap images, or adjust styles, and every edit writes directly back to the local source file.

Human and AI edits happen concurrently on the same file. Tell an agent to change a button color while you manually tweak a layout, and both changes land in the source without overwriting each other. A revision check pauses the editor when its state is stale, so the AI's latest changes are never lost.

The tool runs as a local Python service bound to 127.0.0.1, keeping files off the network. It ships as a first-class plugin for DeepSeek Harness, embedding the editor in the web UI sidebar, and as a skill mountable onto any agent client like Claude Code or Codex via a single npx command.

Takeaways
HTML Workbench does not generate HTML; it wraps an existing HTML file in a visual editor with live preview.
Click-to-edit on any element — text, images, styles — and changes save directly to the local source file.
Human and AI edits run concurrently on the same file; a revision check prevents the editor from overwriting the agent's latest changes.
The service listens only on 127.0.0.1, so files are never exposed to the local network.
As a DeepSeek Harness plugin, the editor embeds in the web UI sidebar and auto-follows .html file changes.
As a skill, it mounts onto any agent client (Claude Code, Codex) with `npx skills add vibe-x/html-workbench` and auto-guides the user to open generated pages.
Conclusions

Treating the raw HTML file as the single source of truth avoids proprietary intermediate formats and keeps the output portable across any toolchain.

Concurrent human-AI editing on the same file, with a stale-state guard, is a practical alternative to the chat-only iteration loop that dominates most AI coding workflows today.

Packaging the tool as both a DeepSeek Harness plugin and a generic agent skill suggests a deliberate strategy to reach two distinct audiences: the DSH ecosystem and the broader agent-client user base.

Concepts & terms
DeepSeek Harness (DSH)
An open-source agent framework by DeepSeek that provides a web UI and first-class plugin support for AI coding workflows.
GrapesJS
An open-source, block-based web builder framework used here as the foundation for the visual HTML editor component.
Skill (agent skill)
A portable capability that can be mounted onto agent clients like Claude Code or Codex, typically installed via a package manager command, to extend what the agent can do.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗