Preface¶

When designing UI solutions, the DSH agent lacks a visual carrier: describing the interface in text makes it difficult to review spacing, hierarchy, and layout; integrating with external design tools disconnects it from the conversation flow. dsh-canvas places a design canvas in the right sidebar of DeepSeek Harness. Once a selection is made, it can be sent directly to the chat composer, allowing the agent to generate or modify designs using the open JSON document format.

It is maintained by GitHub user aiShuiJiaoDeXioShou; the repository address is at the end of the article. The directory site, skillhub.cn, is an independent community directory and has no official affiliation with DeepSeek or Huafang. Below is the verification status of this plugin.

What is it¶

dsh-canvas, called Drafi in the UI, is a client-side plugin for DeepSeek Harness. The README describes it as “an AI-native design canvas inside DeepSeek Harness”: drawing UI drafts in the right sidebar, sending the current selection to the chat composer with one click, and having the agent complete design generation or modification via the open JSON document format.

The package name is @local/dsh-canvas, the version number in package.json is 0.2.0, and private: true. The homepage points to the GitHub README. The public package.json and the GitHub API show the license as MIT, the repository language as TypeScript, and the default branch as main:

github.com/aiShuiJiaoDeXioShou/dsh-canvas   # 0 star, 1 fork (as of 2026-11-07)

The plugin targets injection into the web client. The configuration section declares platform: "web", immediately: true, and injects two client packages, @deepseek-ai/dsh-client-ui-sidebar-right and @deepseek-ai/dsh-client-ui-conversation:

{
  "dsh": {
    "bundle": { "patch": "./cordis.patch.yml" },
    "client": {
      "platform": "web",
      "immediately": true,
      "inject": [
        "@deepseek-ai/dsh-client-ui-sidebar-right",
        "@deepseek-ai/dsh-client-ui-conversation"
      ]
    }
  }
}

According to the README, the entry point is: Sidebar guide card “Drafi” → Drafi tab. The author emphasizes that there is no Drafi button in the composer toolbar; the sidebar is the only entry point. After inserting a selection, a positioning chip appears above the composer.

Canvas and Editing Capabilities¶

The editing capabilities listed in the README are similar to the common Figma set:

1. Infinite canvas, supporting pan, zoom, frame, rectangle, ellipse, line, text, image fill; multi-select, move, scale, rotate, layers, properties, smart snap, align, group, copy/paste, z-axis order, undo/redo.
2. The name of the top-level Frame is displayed above the frame like a Figma tab and is always visible; clicking the tab selects that frame.
3. There is a collapse button at the top of the left icon bar to collapse the layer/component panel (remembering the last opened tab); there is a collapse button at the far right of the toolbar to collapse the inspector. The icon bar button behavior remains unchanged.
4. A context menu pops up when right-clicking the canvas, including copy, cut, paste, duplicate, delete, insert selection into composer, group/ungroup, z-axis order, lock/unlock, show/hide, create component, fit view, select all.
5. The layer tree is collapsed by default. Right-clicking a layer allows renaming, positioning, copying, pasting, deleting, grouping, z-axis order, locking/hiding, and component operations. Inline action icons are enlarged, appearing on hover or selection.
6. Auto-layout frames, supporting horizontal/vertical direction, spacing, padding, alignment, three size modes for child items (fixed/include/fill), nested layout, and automatic text height.
7. Components and Variants: Create component from selection, insert instance, override text/fill/visibility, switch variants or components, edit master component, separate instance.
8. Local Style Library: managing fill, text, and effect styles, supporting real-time propagation and separation.
9. Gradients and image fill, shadows/inner shadows, layer blur, background blur.
10. Support for uploading custom fonts (woff2/woff/ttf/otf), registering them via @font-face, and using/embedding them in exported files via the text tool.
11. Non-destructive image cropping.
12. Single-user thread comments, can be pinned to a node or page position, and the agent can read and reply via canvas_comment.
13. SVG and PNG export, selectable by selection, frame, or whole page, saved in canvas/exports/, optionally inserted into composer.
14. A collapsible “Code” section in the inspector displays the parsed CSS of the selected layer (layout, fill/gradient, border radius, stroke, shadow, typography), supporting one-click copy; this is a CSS delivery mechanism, distinct from local style reuse.

Shortcuts follow the Figma style. The README provides a complete list; here are a few common operations:

V/F/R/O/L/T/H/C/I   — Move/frame/rectangle/ellipse/line/text/hand/comment/image
Space drag           — Pan      Mouse wheel — Zoom
1 / 2                — Fit view / Fit selection
Shift+1/Shift+2/Shift+0 — Fit view / Fit selection / 100%
Cmd/Ctrl+C/X/V/D     — Copy/cut/paste/duplicate
Cmd/Ctrl+G / Shift+Cmd+G — Group/ungroup
Shift+A              — Add auto layout to selected frame/group

There are corresponding shortcuts for arrow key hierarchy adjustment and Alt hover measurement, etc.; see README for details.

Design System and iOS Templates¶

The plugin includes a built-in default design system: general UI uses Material Design 3 tokens, and iOS uses Apple HIG’s measurements and colors. The README states that when the user does not specify a system, the agent follows these default values, with detailed documentation in canvas/DESIGN.md. The same section also provides a set of major system cheat sheets: Material Design 3, Apple HIG, Fluent 2, Carbon, Spectrum, Lightning, Polaris, Primer, Atlassian, Base Web, as well as Ant Design / Arco / Semi / TDesign, which are commonly used in Chinese products.

Regarding templates, the “Templates” panel in the left bar provides built-in iOS mobile page templates: Settings, Form, List, and Detail pages, plus a standard status bar (dark/light icons), navigation bar, and tab bar. The default device size is iPhone 16, 393×852; iPhone 15, 390×844 is optional. Templates can be inserted via the panel or the canvas_template tool:

canvas_template action="foundation"
# Returns device (iPhone 16 default / iPhone 15 legacy),
# Neutral/Minimal/Soft/Compact presets and parsed tokens

canvas_template { action: "list" | "insert", template: "ios-screen" }

canvas_template { action: "styles", system: "material3" | "ios" }
# Loads the system as a local style library, fill/text/effect styles appear in the Styles panel,
# applicable to layers; loading does not automatically rewrite existing layers

The iOS templates use Apple HIG blue, while the editor interface uses DeepSeek blue #4D6BFE as the accent color.

Agent Tools for Collaboration with Agents¶

This is the core concept of the plugin: the canvas is an editor for the user, but a set of deterministic tools for the agent. The README lists a total of seven Agent tools:

1. canvas_read — Reads the canvas; the user’s current selection is part of the output.
2. canvas_write / canvas_edit — Write or modify documents.
3. canvas_comment — Read/write comments.
4. canvas_template — Insert templates, return tokens, load style system.
5. canvas_audit — Deterministic design audit, checking screenshot boundaries, contrast, touch targets, clipping, missing references, empty frames, and explicitly listing skipped checks.
6. canvas_image — Entry point for image capabilities; the three actions probe/generate/import correspond to three levels of the generation pipeline: GPT model calls native image generation; otherwise, it calls the local Codex CLI with image_generation; otherwise, the user must import the image.

The mechanism for sending selection to the composer is also designed around this concept. After insertion, the composer contains a markdown link:

[Canvas Selection: Title](dsh-canvas://main?node=title)

After sending this to the agent, the chat replaces this text with a clickable canvas chip. Clicking it opens or focuses the canvas tab, loads that document, selects that node, and zooms to that position. A compact positioning bar, such as “Locate in canvas: Title”, will also appear above the chip. The README emphasizes that node details are no longer copied into the draft; the agent uses canvas_read to fetch them itself. The document format identifier is retained as dsh.canvas@1.

The runtime also includes a canvas-ui-design skill. The README notes it is adapted from the author’s BD Flutter Dev UI design skill suite (source and adaptation notes are in skills/canvas-ui-design/SOURCE.md within the repository), used to drive direct page/component generation, reference reconstruction, refactoring, design review, and delivery.

Technically, the source code is organized as src/{shared,host,client}, and the build artifacts are client/client.js and dist/host/main.js. Agent writes appear in the open canvas within one second via SSE, with polling as a fallback. There is also a path vector node that supports SVG path d, viewBox, fill/stroke, solid/gradient fill, and SVG export. The toolbar can import basic SVG paths; it does not support pen and anchor point editing. Version 1 is a single-page document, with a page list reserved in the format to maintain forward compatibility, but page management and page background are hidden in the UI.

Installation and Enabling¶

In accordance with the requirement that “installation commands must come from the original source text”: the end of the README (Installation/Installation Paths section) is truncated when scraped from GitHub, jsDelivr, mirrors, etc., and the skillhub.cn directory page does not return the body. Therefore, this article does not provide any concatenated commands. The README only explicitly mentions that installation paths preserve technical identifiers, and the package name is @local/dsh-canvas.

The recommended approach is to first read the repository source code and the full README to confirm the installation method and compatibility with the current dsh version before installing. The only entry method given by the README is:

Sidebar guide card "Drafi"  →  Drafi tab

Use Cases and Notes¶

Suitable for these types of people: UI prototyping in DSH, agent developers who need visual review instead of just text; people who use built-in iOS templates to quickly produce mobile low-fidelity drafts; people who want to keep design deliverables (SVG/PNG/CSS) in the conversation flow as intermediate artifacts.

Notes:

1. The plugin runs with the permissions of the current dsh process. You should read the source code before installing.
2. The repository was just created (2026-11-05), currently 0 stars, 1 fork, ecosystem verification is limited, and functionality is based on the claims in the README.
3. Image generation depends on the host environment: GPT models use native image generation; other cases require the local Codex CLI with image_generation enabled; otherwise, only importing images is possible.
4. Vector capabilities are limited: there are no pen and anchor point editing, and vectors only support basic SVG paths.
5. Semantic annotation accuracy depends on the agent’s effectiveness in reading via canvas_read; canvas_audit can only perform rule-based deterministic checks.

Conclusion¶

dsh-canvas pushes “canvas + AI UI design + deterministic audit + image generation” into DSH’s right sidebar. The selection-to-composer linkage is designed cleanly and is suitable for teams that need to retain visual artifacts within the conversation. Directory page: https://www.skillhub.cn/plugins/aiShuiJiaoDeXioShou/dsh-canvas ; Source code: https://github.com/aiShuiJiaoDeXioShou/dsh-canvas .