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