Foreword

DeepSeek Harness (DSH) decomposes agent capabilities into pluggable modules, with the core concept of “everything is a plugin.” The community directory SkillHub Plugin Library hosts numerous third-party DSH plugins, but it is not officially affiliated with DeepSeek / High-Flyer; instead, it functions more like an independently maintained plugin index site.

For UI design tasks, a common pain point is that agents often can only generate a static PNG image—every revision requires re-generating the image, unlike iterating on a real canvas in Figma. The dsh-openpencil (npm package name: @zseven-w/dsh-openpencil) plugin, created by maintainer ZSeven-W, bridges DSH with the open-source design tool OpenPencil, allowing you to directly preview, inspect, and edit real .op documents within the conversation. This plugin has 153 stars and 6 forks on GitHub, is categorized as a client-side plugin in SkillHub, and is licensed under MIT.

What It Is

dsh-openpencil is a client-side plugin for the web version of DSH. It doesn’t create “fake design files” but instead drives OpenPencil’s headless renderer and managed editor, treating .op vector design files as first-class citizens: agents create or modify canvases via tool calls, and you see precise previews and read-only interactive canvases in the sidebar. When needed, you can also open the full editor to continue editing.

In one sentence: preview, inspect, and edit real .op design documents within DSH conversations, rather than relying on screenshot back-and-forth.

The current plugin version is 0.1.0-rc.4, and the README indicates it has been tested on DSH 0.1.1-rc.2.

Core Features and Highlights

1. Precise Multi-Frame Preview

The plugin calls OpenPencil’s headless exporter to render previews based on the actual design file: the first top-level frame on the active page is displayed as a large image, while other frames are shown as a horizontal thumbnail strip, supporting click switching and previous/next frame navigation. PNG previews can be replayed, making it suitable for quickly verifying layouts in the conversation.

2. Interactive Read-Only Canvas

After clicking “Open Interactive Canvas,” the plugin lazily loads the OpenPencil Web SDK (including WASM and CanvasKit), supporting panning, zooming, and window fitting. You can view any page, nested node, or inactive page without leaving the conversation—this complements the PNG preview, while the canvas itself remains read-only.

3. Managed Editor

When the tool call includes editable: true, the OpenPencil managed editor can be opened in the right workspace panel, providing layers, properties, drawing tools, undo/redo, and explicit saving. The editor supports adjusting width and fullscreen mode, allowing editing without separately installing the desktop version of OpenPencil (the managed runtime is bundled with the plugin, covering six platform packages for darwin / linux / win32).

4. Five Agent-Native Design Tools

Tool Function
openpencil_new Creates a new .op file from scratch using QuickJS batch_design scripts; writes atomically only after the entire batch succeeds, and automatically opens an editable sidebar
openpencil_create Executes transactional batch_design on an existing canvas, generating or restructuring nodes
openpencil_edit Modifies specified nodes or edits a single node selected by the user in the canvas
openpencil_render Takes an immutable snapshot of the .op path, rendering all top-level frames of the active page; optional scale and editable parameters
openpencil_selection Reads the currently selected nodes in the editor

Agents write batch_design programs using high-level APIs like I/K instead of hand-coding low-level operations; failed batches do not leave empty files or overwrite existing paths.

5. Capability Gating and Security

Image and document access is granted via capabilities signed and hashed to specific targets. Browser-side metadata does not expose arbitrary host paths, and signed preview/edit capabilities are not included in the model-visible tool result JSON, reducing the risk of path leakage.

6. Consistent with DSH Interface

Tool cards and the managed editor follow DSH’s Chinese/English locales and light/dark theme switching, with editing sessions requiring no reload.

Installation and Enabling

DSH and plugins are installed separately. If DSH is not yet installed, you can first install it globally:

npm install -g @deepseek-ai/dsh@latest

Add the plugin to the Web profile and start the web application:

dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
dsh web

If you don’t want to install DSH globally, you can use pnpm dlx as an equivalent:

pnpm dlx --package=@deepseek-ai/dsh@latest dsh plugin --profile web add @zseven-w/dsh-openpencil@latest
pnpm dlx --package=@deepseek-ai/dsh@latest dsh web

For local plugin development, you can build within the repository with pnpm run build, then link it into the profile using an absolute path (after modification, a full restart of DSH is required; the Web profile does not hot-reload host bundles by default):

pnpm run build
dsh plugin --profile web add link:/absolute/path/to/dsh-openpencil
dsh web

The plugin is a public npm package and does not require an npm token; if the DSH pre-release version itself requires registry authentication, please place credentials in user-level configuration and do not commit them to the repository.

Typical Usage Examples

Creating a Design File from Scratch

When a user describes a new interface in natural language and no .op file exists yet, the agent should call openpencil_new: passing in a workspace-relative path and a complete batch_design script. The tool executes the script in a privately hosted OpenPencil daemon process, publishes the authoritative document only after the entire batch succeeds, and returns an editable display in the same tool call. DSH automatically opens the editor sidebar—no need to separately call openpencil_render or wait for a PNG.

Rendering an Existing Document

For existing .op files, you can use openpencil_render:

Path: workspace/design.op
Scale: 1 (optional, 0 < scale <= 8)
Editable: false (default; set to true to authorize opening the editor)

Precise PNG rendering sequentially searches for the OpenPencil desktop binary: environment variables DSH_OPENPENCIL_BINARY / DSH_OPENPENCIL_DESKTOP, the macOS default installation path, and openpencil-desktop in PATH. If the precise renderer is unavailable, it may fall back to a Jian fallback renderer marked with runtime-preview; it will not silently degrade if precise rendering fails, times out, or the PNG is invalid.

Continuing Edits on an Opened Canvas

openpencil_create and openpencil_edit only apply to live canvases where the managed editor is already open; changes remain in the editor’s memory until the user clicks Save to write them back to the .op file.

Applicable Scenarios and Considerations

Who It’s For:

  • Product, design, and frontend teams who need to iterate on UI / slide / vector drafts within DSH conversations;
  • Design automation scenarios where agents operate on real .op canvases rather than repeatedly generating bitmaps;
  • Developers already using or planning to use the OpenPencil ecosystem (same maintainer also offers openpencil-skill, Zode, etc.).

Important Notes:

  1. Permission Boundaries: The plugin runs with the current DSH process permissions. Before installation, please read the GitHub source code and MIT license to ensure tool behavior aligns with your security policies.
  2. Separation of Editing and Preview: The Web SDK interactive canvas is read-only; full editing is done via the managed editor. On DSH 0.1.1-rc.2, the editor opens by default in a resizable right workspace panel.
  3. Save Semantics: Follow-up edits to an existing canvas require the editor to be open and user-initiated saving; if the source file is modified externally, the plugin uses optimistic hashing to detect conflicts rather than overwriting forcefully.
  4. Rendering Dependencies: Managed editing does not rely on desktop OpenPencil; precise PNG preview may still depend on openpencil-desktop or the aforementioned environment variables. When viewer resources (SDK / WASM / CanvasKit) are missing, PNG previews remain available, but the “Open Canvas” button will not be displayed.
  5. Versions and Platforms: Building requires Node >= 24.11.0 and pnpm; Linux platform packages target glibc.
  6. Community Directory: Installation commands are based on the GitHub README and npm package @zseven-w/dsh-openpencil; the SkillHub page facilitates plugin discovery but does not replace official documentation.

Conclusion

If you’re tired of the cycle of “describing requirements → generating an image → describing again → generating again,” dsh-openpencil brings OpenPencil’s real canvas into DSH conversations: preview, interactive inspection, and agent-driven editing can all be completed in a single workflow.

Before installation, it is recommended to read the “Current Limits” and “Managed Editor” sections in the README thoroughly to decide whether to include it in your DSH web workflow.