Introduction¶

The usage of DSH is “to get things done within a session.” Today, with product design requirements, the common practice is still pasting Figma links, screenshots, and Miro whiteboards back and forth. AI generates text descriptions, but to get them onto the canvas, one has to manually build them again. This plugin puts an interactive product canvas directly into the session tab, creating a closed loop for requirement descriptions, AI modifications, and canvas results in one place. Below introduces kycoming/dsh-product-design, maintained by KYCOMING, categorized as client, directory page 2026-11-07 data shows 0 stars, belonging to a newer project.

What is this¶

One-sentence positioning: A “simplified Figma” product design canvas in the session tab. It is not an independent design tool, but a DSH plugin that mounts session views, full-screen canvases, and empty session entry points via window.__ModuleLoader__. The browser half is built into a single-file module via src/client, while the Host half is responsible for document reading/writing, SSE change pushing, and agent tool registration.

The problem it solves is: keeping “product requirement communication” within the session. Build prototypes directly on the canvas with interactive components; loading/empty/error state variants can be generated by AI and switched in preview, rather than described in text.

Current version package.json declares 1.5.0, MIT license. Regarding compatibility, DSH 0.2.2-rc.1 is the tested version, 0.2.0-rc.1 to 0.2.x are within the engines.dsh allowed range but not individually tested, < 0.2.0 and >= 0.3.0 are not declared as supported.

Core Capabilities¶

This section introduces in the order: Canvas → Edit → Preview → Output → Data.

Multi-Canvas Canvas¶

• All pages are arranged horizontally on a pannable, zoomable canvas. Each page has an independent size: Mobile 390×844, Tablet 768×1024, Desktop 1280×800.
• Zoom with Ctrl/⌘ + Scroll, scroll with a normal wheel, small grid squares change with zoom.
• Component library with 13 categories: Container, Button, Input, Card, Navbar, Tab, Switch, Checkbox, Avatar, Text, Image, Badge, Dropdown. Click to add to the current page.

Editing and Layout¶

• Containers can nest arbitrary components and clip overflow content; dragging in/out containers automatically changes layer order. Shift + Click for multi-select, drag a box on the empty canvas to select.
• Snap alignment: When dragging or resizing, snap to canvas edges, center lines, and other element edges/centers, displaying magenta guide lines. The top “Snap” switch can be turned off.
• Constraints: Each element can have horizontal/vertical constraints, such as left/right fixed, left/right stretch, center, or proportional; page-wide behavior can be switched between “By Constraint,” “Scale Overall,” and “Keep Unchanged.”
• Auto Layout: Containers and groups can enable stack layouts (horizontal/vertical, spacing, four-way padding, cross-axis alignment, main-axis distribution). Once enabled, child element coordinates are taken over by the layout, and dragging changes the order.
• Layer tree supports drag-sorting, show/hide, lock, rename, and search by name; supports undo/redo (including AI changes), copy/paste (cross-page), grouping, alignment, and distribution.

Component States and Preview¶

• Each component carries an independent state set, e.g., Button Default / Hover / Pressed / Disabled, Input Default / Focused / Filled / Error / Disabled. Switch preview in the right-side property panel.
• Preview mode hides the toolbar and left/right sidebars, showing only the current canvas. Components react realistically to hover, press, and click. Switches, checkboxes, tabs, and dropdowns are interactive. Esc or the “Exit Preview” button in the top-right returns to the editor.
• Prototype interaction: Configure “Click → Jump to page / Return / Open as Modal” for any element. In preview, you can navigate flows with a return stack. Esc exits layer by layer.

Export¶

The toolbar’s “Export” provides three outputs, all generated in the browser, without uploading data:

The export uses an independent “clean” renderer src/client/export/render.js. Editor guides, layer labels, and selection boxes do not appear in the output.

Design Draft Library and Save State¶

• One session corresponds to multiple design drafts (1:N). The left “Drafts” only lists the drafts for the current session; supports new, rename, copy, delete, export JSON. Switching sessions doesn’t lose drafts, and you don’t see other sessions’ drafts.
• Toolbar displays “Saved / Saving… / Local Only / Sync Failed / Has Conflict” in real-time. When encountering a 409, it no longer silently overwrites; a conflict bar appears at the top, offering “Keep My Changes” or “Use Remote Version.”

Installation and Enable¶

Currently distributed only via GitHub, not published on npm; package.json retains private: true by design, dist/ is not in the repo, generated during installation by scripts/build.mjs.

# Desktop
dsh plugin --profile desktop add github:KYCOMING/dsh-product-design

# Web
dsh plugin --profile web add github:KYCOMING/dsh-product-design

If there is no dsh command, open “Plugins → Add Plugin” and enter github:KYCOMING/dsh-product-design. The top-level install field in the root package.json declares the same installation command in a machine-readable format for the plugin market to parse during the L3 “Install Specification” check.

After enabling, confirm that dsh-product-design is active, then restart DSH — the Host half does not hot reload. After restarting, open an existing message session; a “Product Design” tab will appear at the top. Click to enter editing; you can also click “Fullscreen” in the canvas to enter the independent canvas.

Uninstall:

dsh plugin --profile desktop remove dsh-product-design

Typical Usage¶

After installation, actual usage revolves around three paths.

1. Directly raise requirements. /design <requirement> hands the requirement to the AI as a normal user message, and the AI calls the canvas tool to generate or modify the design. Its implementation is that the Host half registers the command via ctx.commands.register, the handler wraps rawInput into a normal user message and submits it via agent.followup(), so the AI goes through the full tool chain rather than the command itself directly modifying the document. The /design line in the slash menu will display the localized title “设计” (Design), keeping the design alias.

2. View the result after AI modification. After the AI calls product_design_apply, a product thumbnail card of the current page will appear at the end of the chat turn. You can “Open Canvas” with one click without manually switching to the canvas first.

3. Walk through the real interaction before delivery. In preview mode, click buttons to jump pages, return, or open modals to confirm the flow works. When delivery is needed, export PNG for review, export a single-file HTML prototype for non-technical colleagues, or export React + Tailwind components for the frontend.

Permissions, Data, and Notes¶

After installation, the plugin runs within the permissions of the current DSH process; check the source code and license before installing. It declares the following behaviors.

• Registers a same-origin HTTP route /dsh-product-design/api in the Host process, providing document read/write and SSE change pushing.
• Design drafts are written to <DSH_HOME>/storages/dsh-product-design/docs/<docId>.json, and the session records the currently open draft (sessions/<sessionId>/active.json); the browser side also uses localStorage (doc:v3:<sessionId>) for caching and offline fallback.
• Registers two agent tools product_design_get_document, product_design_apply, plus a system prompt and /design command.
• Does not initiate external network requests and does not collect telemetry.

Points to note: First, it only declares support for >= 0.2.0-rc.1 <0.3.0-0; check the version before upgrading DSH. Second, if modifying source code, change src/ then run pnpm run build. The headers of dist/client.js and dist/index.js carry the AUTO-GENERATED banner, do not edit manually. Third, with 0 stars and only one maintainer, KYCOMING, it is recommended to read through src/ and LICENSE before deep usage.

Conclusion¶

The value of this plugin lies not in replacing Figma, but in converging requirement communication, AI generation, and canvas iteration into the same session: expressing requirements, viewing thumbnail cards, entering the canvas for confirmation, and exporting outputs. Directory page: https://www.skillhub.cn/plugins/KYCOMING/dsh-product-design ; Source code and full README: https://github.com/KYCOMING/dsh-product-design .