dsh-with-pencil

dsh-with-pencil

English · 简体中文

English

Use the official pen.dev Pencil editing capabilities inside DeepSeek Harness. DeepSeek remains the design agent; this community DSH plugin makes its model tools, the active conversation, and the Pencil canvas work together.

This is not a Pencil rewrite or a standalone design product. It integrates the official @pen.dev/cli headless engine and a compatible official browser editor with DSH. It is independent and is not endorsed by pen.dev or DeepSeek.

What it provides

• An on-demand Pencil canvas that does not open when Harness starts.
• Conversation-bound workspaces: the canvas hides when you switch conversations

and returns with its original editor session when you switch back.

• Live Agent edits through the visible editor IPC, with immediate rendering and

acknowledged, atomic disk saves.

• A serialized official headless fallback when the browser canvas is closed.
• Selection context injection for the next Agent turn, plus real image

attachments from Pencil screenshots.

• Workspace-safe file opening, creation, Save As, live PNG/PDF export, imports,

generated images, design libraries, external-change reloads, and conflict resolution.

• A native DSH right-Sidebar tab with the built-in split, resize, float, and

session layout restoration controls.

The plugin registers nine core model tools:

• pencil_mcp_open
• pencil_mcp_get_app_state
• pencil_mcp_batch_get
• pencil_mcp_get_guidelines
• pencil_mcp_execute
• pencil_mcp_get_screenshot
• pencil_mcp_export_html
• pencil_mcp_export_nodes
• pencil_mcp_insert_image

Create a Pencil Agent preset

Send this prompt once in a normal Harness conversation:

Create and validate a Harness Agent Preset named Pencil Designer; do not

merely explain the steps. Base it on the standard coding preset and retain the

fixed official tools.

Assign these Pencil design tools to the preset, and no other design tools:

pencil_mcp_open, pencil_mcp_get_app_state, pencil_mcp_batch_get,

pencil_mcp_get_guidelines, pencil_mcp_execute,

pencil_mcp_get_screenshot, pencil_mcp_export_html,

pencil_mcp_export_nodes, and pencil_mcp_insert_image. Bind Harness

read_image if available for local image files. With DeepSeek-V4.1-Flash,

the model can inspect screenshot attachments directly.

The persona must tell the Agent to complete .pen design tasks directly using

only the tools assigned to this preset. Before calling a

tool, read its own description and parameter definitions in the Agent's

available-tools list; those descriptions are the complete usage reference —

do not search for, probe, or verify usage anywhere else.

The persona must require the Agent, when starting a new design, to first use

pencil_mcp_open to create a .pen file inside the workspace, then edit, take

screenshots, and visually verify it until it is saved. Verify visually with

pencil_mcp_get_screenshot (a visual-fidelity spot check: colors, font

rendering, alignment/spacing, layout positions). Verify text and property content with

pencil_mcp_batch_get (node reads). Use

pencil_mcp_export_nodes only for deliverable files. Do not use unspecified

design tools or inspect any source code or repository to find tools or study

their usage. Prefer the assigned design tools for .pen edits; do not treat

direct JSON editing as the default.

When finished, report the preset name/path and how to

select the preset. Do not modify any other preset.

Five legacy one-shot CLI helpers are hidden by default to avoid duplicated capabilities and irrelevant model context. Set DSH_PEN_LEGACY_TOOLS=1 only when compatibility requires status, login, workspaces, design, and export.

Model tools

• pencil_mcp_open — open/switch the conversation's .pen file; call FIRST

for any design work.

• pencil_mcp_get_app_state — current document state; include_schema: true

returns the .pen schema.

• pencil_mcp_batch_get — read node data (text content, properties) by ID or

pattern — the authoritative way to verify text and attribute values.

• pencil_mcp_get_guidelines — design guides and styles.
• pencil_mcp_execute — edit the document with a JS snippet

(Update/Insert/Copy/Delete/Move/Set/Replace).

• pencil_mcp_get_screenshot — visual-fidelity spot check (colors, fonts,

alignment). The default native-vision path uses Pencil's native screenshot; the vision-translation mode uses high-resolution export for large nodes and whole documents when the canvas is open.

• pencil_mcp_export_html — export nodes to HTML.
• pencil_mcp_export_nodes — export nodes to image files (deliverables).
• pencil_mcp_insert_image — place an image onto the canvas using pen.dev's

official image-fill: writes the image into images/ next to the .pen and inserts a frame whose fill is {type:"image", url, mode}. Accepts a chat image as latest, recent:N (recent:1 = latest), an exact attachment id, or a local image file path; optional parentId / width / height / x / y / mode (fit|fill|stretch). Width/height default to 400×300 when omitted (the engine cannot auto-size an image-fill node).

Harness's native read_image and this tool have separate jobs: read_image loads pixels into an image-capable model's context, while pencil_mcp_insert_image copies the original attachment into the .pen workspace and places it on the canvas. This plugin does not replace or register read_image.

Configuration

visionMode (Plugins → dsh-with-pencil → Configure, default multimodal):

• multimodal — native screenshots for an image-capable model. The default

Harness deepseek-flash entry is DeepSeek-V4.1-Flash and declares image input. No separate image-transcription plugin is needed for this route.

• text — high-resolution screenshots and a visual-fidelity instruction for

an image-capable *vision-translation wrapper* (for example, dsh-vision-proxy or a dsh-vision-router wrapper). This plugin does not translate images itself. A direct text-only Harness route cannot consume screenshot attachments, even with this setting.

The plugin checks the active session route's declared image input before each screenshot. The setting takes effect immediately after saving. If a profile already has an explicit text override, use Reset to default to select native vision. The default deepseek-v4-pro entry is text-only, so it cannot consume screenshots. Custom model catalog entries must declare image input themselves.

Install

Version 0.7.0 targets Harness 0.2.0-rc.2 only. Existing 0.6.0 visionMode settings continue to work. When migrating from 0.5.x or older, configure visionMode again in the Plugins page.

Install the npm bundle into a DeepSeek Harness 0.2.0-rc.2 Web profile:

npx @deepseek-ai/dsh@0.2.0-rc.2 plugin --profile web add dsh-with-pencil@0.7.0

Restart DSH Web after installation (Ctrl-C the running process first):

npx @deepseek-ai/dsh@0.2.0-rc.2 web

That is the complete normal installation. The npm bundle installs the pinned official @pen.dev/cli. The first time you open a canvas, the plugin downloads editor 0.1.94 directly from the official pen.dev release source, verifies its pinned SHA-256 checksum, and atomically caches it under ~/.dsh/dsh-with-pencil/editor/0.1.94/. Harness startup does not download or open anything, and subsequent canvas opens use the verified cache.

The browser editor is not copied into or redistributed through this npm package. For offline use, download and extract the same official bundle ahead of time and point DSH_PEN_EDITOR_DIR to its out directory.

For local development from this checkout:

npm run dev:install -- --profile web
npx @deepseek-ai/dsh@0.2.0-rc.2 web

dev:install runs the complete test suite, packs the exact publishable files into .dev-builds/ with a content hash in the tarball name, installs that unique snapshot, and verifies the installed files. This avoids pnpm reusing an old same-version file: snapshot and avoids the duplicate native libraries a source link: can load. Stop the running DSH process before installation and restart it afterward. Use npm run dev:pack only when an install is not needed.