Introduction

The core philosophy of DeepSeek Harness (DSH) is “everything is a plugin.” When developing web applications based on React and Tailwind, developers often need to switch frequently between code editors, design tools, and the terminal. The dsh-opendesigner plugin provides a local-first visual editor with a constrained tool surface, allowing an Agent or developer to work directly on designs inside the DSH environment.

Plugin Overview

This plugin is maintained by aa2246740 and addresses the lack of visual design capabilities in the DSH environment. It allows direct local editing of React and Tailwind components, and saves designs into the project directory.

Core Features

  • Local visual editing: Supports local editing of React + Tailwind components.
  • Path jail: All file operations are restricted to the project root directory to prevent path escapes.
  • Destructive write approval: Destructive writes require approval through a trusted host/UI channel. A model-returned approve: true does not count as approval, and autoApprove does not relax the path jail restrictions.
  • Save mechanism: Saving a design writes to .designer/canvas.json.
  • Apply to project: Available only when an Agent batch has file diffs.
  • Mock mode: Falls back to mock behavior when no API key is present.

Installation and Enabling

Ensure the environment meets the following requirements:

  • The official dsh must be available on PATH (if not, you can use npx @deepseek-ai/dsh) and pnpm must be installed.
  • Node.js version must be 22.14 or newer.

Run the installation command:

dsh plugin --profile web add github:aa2246740/dsh-opendesigner

The installation command runs pnpm under $DSH_HOME/profiles/web and writes the profile configuration. After installation, you must restart the Host and then refresh the page. Find the plugin in Host Settings → Plugins and enable it.

Typical Usage

  • Debug source code via overlay:
    # overlay.yml
    - insert:
        - id: dsh-opendesigner
          name: /absolute/path/to/dsh-opendesigner/dist/plugin.js

    pnpm dsh web --patch /absolute/path/to/overlay.yml
  • Preview a design:
    npm install
    npm run build
    npm test
    OPENDESIGNER_PROJECT_ROOT=/absolute/path/to/your-react-app npm run preview

The default project is `examples/programmer-page`; visit `http://127.0.0.1:4173/`.
  • Remove the plugin:
    dsh plugin --profile web remove dsh-opendesigner

Notes and Use Cases

  • Installation timing: dsh plugin add only writes to the profile; it does not hot-attach the currently running process.
  • Configuration pitfall: dsh.bundle is captured at startup. Do not manually write the same insert entry in the profile’s cordis.patch.yml, otherwise it may be mounted twice.
  • Feature limitation: The dsh.client web-shell feature is currently unavailable.
  • Security: Do not put API keys into the repository.

This plugin provides secure local design capabilities through path jail and approval channels. For more details, refer to the plugin directory: https://www.skillhub.cn/plugins/aa2246740/dsh-opendesigner or the GitHub repository: https://github.com/aa2246740/dsh-opendesigner