Introduction

When building web interface interactions, DSH agent developers often need to design UI layouts intuitively. Manually writing HTML/CSS or directly calling APIs is time-consuming and hard to maintain. This plugin integrates the ui-sketch-to-ai (React + Konva) canvas editor directly into the DSH web interface, providing out-of-the-box drawing capabilities through a sidebar toggle and a fullscreen overlay.

Plugin Overview

  • Name: dsh-uisketch
  • Repository: https://github.com/chouyulanxia114514/dsh-uisketch
  • Description: Embeds the ui-sketch-to-ai canvas editor into the DSH web interface.
  • License: MIT
  • Maintainer: chouyulanxia114514

Core Features

  • Canvas Editing: Component panel drag-and-drop, Konva canvas, properties panel, project name, canvas size, and background image upload.
  • Data Export: Exports JSON to the clipboard. Includes layout structure and annotations; the background image only retains an existence marker (no Base64 data).
  • Interface Interaction: Displayed as a fullscreen overlay, with a persistent toggle at the bottom of the sidebar (automatically switches to icon mode on narrow rails).

Installation and Enablement

After installation, restart dsh web for the changes to take effect.

Method A: Install after publishing to npm

dsh plugin --profile web add dsh-uisketch

Method B: Local development installation
Run the following command in the repository root directory:

dsh plugin --profile web add link:<本仓库绝对路径>

Usage Steps

  1. Click the “UI Canvas” button at the bottom of the sidebar (displayed as 📐 on narrow rails) to open the fullscreen editor.
  2. Drag components from the left-side component panel to the canvas, and use the right-side properties panel to adjust parameters.
  3. Click “Export JSON → Clipboard” to get the layout description, which can be directly fed to an AI.
  4. Click “✕ Close” in the top-right corner of the overlay to exit the editor.

Configuration Notes

The environment variable DSH_UISKETCH_DIST is used to point to a locally rebuilt dist/ directory.

If you need to immediately use locally built artifacts, set:

DSH_UISKETCH_DIST=/path/to/ui-sketch-to-ai/dist

By default, the built-in artifacts bundled in the package are used.

Considerations

  • The plugin runs with the permissions of the current DSH process. Please review the source code and license before use.
  • In the exported JSON, the background image only includes an existence marker and does not contain the actual image data.

Summary

This plugin provides a lightweight UI design solution for the DSH ecosystem, making it suitable for scenarios that require quickly generating a layout description in a web interface and passing it to an AI.