dsh-opendesigner：本地優先的 React/Tailwind 視覺設計器

前言¶

DeepSeek Harness (DSH) 的核心理念是「一切皆插件」。在開發基於 React 和 Tailwind 的 Web 應用時，開發者通常需要在代碼編輯器、設計工具和終端之間頻繁切換。dsh-opendesigner 插件提供了一個本地優先的視覺化編輯器，通過受限的工具表面，讓 Agent 或開發者能夠直接在 DSH 環境中操作設計稿。

插件介紹¶

這是一個由 aa2246740 維護的插件，解決的是在 DSH 環境中缺乏可視化設計手段的問題。它允許在本地直接編輯 React 和 Tailwind 組件，並將設計稿保存到項目目錄中。

核心功能¶

本地可視化編輯：支持本地編輯 React + Tailwind 組件。
路徑 jail：所有文件操作限制在項目根目錄內，防止路徑逃逸。
破壞性寫入審批：破壞性寫入需要受信任的 host/UI 審批通道。模型返回的 approve: true 不算，autoApprove 也不會放寬路徑 jail 限制。
保存機制：保存設計稿會寫入 .designer/canvas.json。
應用到工程：只在 Agent batch 有文件 diff 時可用。
Mock 模式：沒有 API key 時走 mock。

安裝與啓用¶

確保環境滿足以下要求：
* PATH 上要有官方 dsh（沒有可用 npx @deepseek-ai/dsh）和 pnpm。
* Node 版本需爲 22.14 或更新。

運行安裝命令：

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

安裝命令會在 $DSH_HOME/profiles/web 目錄下執行 pnpm，並寫入 profile 配置。安裝後必須重啓 Host，再刷新頁面。在 Host 的 Settings → Plugins 中找到該插件並啓用。

典型用法¶

通過 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

預覽設計稿：

    npm install
    npm run build
    npm test
    OPENDESIGNER_PROJECT_ROOT=/absolute/path/to/your-react-app npm run preview

默認項目爲 `examples/programmer-page`，訪問 `http://127.0.0.1:4173/`。

移除插件：

    dsh plugin --profile web remove dsh-opendesigner

注意事項與適用場景¶

安裝時機：dsh plugin add 只寫 profile，不會熱掛正在跑的進程。
配置陷阱：dsh.bundle 是開機捕獲的。不要在 profile 的 cordis.patch.yml 手寫同一條 insert，否則會重複掛載。
功能限制：當前沒有 dsh.client web-shell 功能。
安全：不要將 API key 放進倉庫。

該插件通過路徑 jail 和審批通道，在本地提供了安全的設計能力。更多詳情可參考插件目錄：https://www.skillhub.cn/plugins/aa2246740/dsh-opendesigner 或 GitHub 倉庫：https://github.com/aa2246740/dsh-opendesigner