前言¶

在 DSH 插件体系下，WebUI 插件开发经常需要检查真实界面、修改源码、调整 Harmony Patch，并在构建后确认运行结果。如果直接在稳定 Host 上修改未完成代码，容易把调试状态混入正在使用的环境。

DeepSeek WebUI Studio 是 memorax-ai 维护的可视化工作区，用于构建 DSH WebUI 插件。它的定位是围绕官方 DSH WebUI 做检查、编辑、构建和验证，而不是做一个离线 mock 页面工具。它要求 dsh-harmony@0.8.7 作为最低兼容版本，并将 Harmony 作为传递依赖包含进来。

这是什么¶

• 仓库：memorax-ai/dsh-webui-studio
• 包名：dsh-webui-studio
• 许可证：MIT
• 用途：可视化构建 DSH WebUI 插件
• 运行前提：Node engines ^22.22.3 || >=24.11.1

这个工具把 Draft 工作区从稳定 DSH Host 中隔离出来。每个 Draft 可以拥有自己的 Git worktree、DSH_HOME、profile、依赖和 child Host。你可以在这个隔离环境里检查官方 WebUI、编辑插件源码、生成样式、构建插件，并确认 live Client graph revision。

核心功能¶

下面列出的能力都围绕 Draft 隔离、真实 WebUI 检查和插件产物验证展开。

• 创建最小 DSH Web Client 插件，或导入一个已有本地插件文件夹。
• 为每个 Draft 提供独立的 Git worktree、DSH_HOME、profile、dependencies 和 child Host。
• 预览官方 WebUI，但不会把 Draft code 加载进稳定 Host。
• 可以正常浏览，也可以检查 DOM、React owners、source candidates 和 Patch traces。
• 自动显示 plugin-registered Element controls，并把 defaults 和 subtree-scoped CSS 保存回 Draft source。
• 检查 Component declaration matches，生成 CSS decorators，同时不修改现有 call-site props。
• 通过一次 transactional reload 调整 Harmony providers 和 individual Patches 的顺序与开关。
• 使用 CodeMirror 编辑 Draft source，并把 installed dependency sources 保持为只读。
• 执行 Build、通过 Harmony apply、reload，并确认 live Client graph revision。
• 启动 Draft-scoped Agent，或在现有 DSH session 中继续使用临时 Studio tools、skill 和 context。
• 允许外部 Agent 通过本地只读 Streamable HTTP MCP endpoint 检查运行中的 WebUI。
• 在 Studio 内回答 one-shot tool approvals、structured questions 和 plan reviews。
• 检查 package exports、artifacts、Patch state、ordering、dependencies 和 pack output。
• 同时运行多个 isolated Draft Preview Hosts。
• 将当前 WebUI profile 或另一个 local profile 快照到每个 isolated Draft runtime。
• 通过一次 transactional hot reload 调整 plugins 顺序，并启用或禁用 Harmony Providers。

安装与启用¶

先确认本地 Node 版本满足要求：

^22.22.3 || >=24.11.1

然后安装并启动 DSH Web：

dsh plugin --profile web add dsh-webui-studio
dsh web

启动后，Studio 在本地提供：

http://127.0.0.1:<dsh-port>/studio

第一次访问 /studio 时，需要批准 Install Harmony and restart。这一步会安装 launcher，并在本地 DSH 进程重启后返回 Studio。

Studio 的托管数据保存在：

$DSH_HOME/studio/

在编辑过程中，未保存的 Source 修改必须先用 Ctrl+S 或 Command+S 保存，然后再切换或关闭 tabs。

典型用法¶

下面按常见开发顺序说明。

1、创建或导入插件¶

可以新建一个最小 DSH Web Client 插件，也可以导入一个已有本地插件文件夹。

新建插件默认保存在 Studio 内部。如果需要指定目标文件夹，可以记录一个 absolute destination，但 Studio 不会在创建时创建或修改该文件夹。只有后续使用 Save plugin to folder 时，才会同步 Studio-owned project snapshot，并且不会修改目标文件夹中类似 node_modules 这类 destination-only files。

导入已有插件时，Studio 会复制一个 isolated snapshot，不包含 .git 或 node_modules。符号链接会被拒绝，原文件夹不会被修改。

2、检查真实 WebUI¶

在 Studio 中打开 Draft Preview 后，可以先正常浏览界面，再进入检查模式。可检查内容包括：

DOM
React owners
source candidates
Patch traces

这一步用于确认当前界面、组件归属、相关源码候选以及 Patch 痕迹，后续修改可以基于真实运行结果进行。

3、修改源码和样式¶

Studio 使用 CodeMirror 编辑 Draft source。已安装的依赖源码会被保护为只读，避免直接修改依赖来源。

对于样式工作，可以做两类操作：

1、保存 plugin-registered Element controls 的 defaults。
2、保存 subtree-scoped CSS 回 Draft source。

也可以检查 Component declaration matches，并生成 CSS decorators。这个过程不改变现有 call-site props，适合需要控制调用点不变的场景。

4、构建、应用和验证¶

完成修改后，执行构建和验证流程：

1、Build Draft 插件。
2、通过 Harmony apply。
3、Reload 预览环境。
4、确认 live Client graph revision。

只有 Preview 确认新的 live Client graph revision 后，构建结果才进入可用状态。

5、使用 Agent 或外部 MCP 检查¶

Studio 支持在 Draft 范围内启动 Agent，也可以继续现有 DSH session，并临时加入 Studio tools、skill 和 context。你可以在 Studio 内处理 one-shot tool approvals、structured questions 和 plan reviews。

外部 Agent 也可以通过本地只读 Streamable HTTP MCP endpoint 检查运行中的 WebUI：

http://127.0.0.1:<dsh-port>/studio/mcp

这个 MCP endpoint 遵循 Studio 的 loopback-only boundary，包括通过 SSH loopback tunnel 访问的情况。MCP tools 只检查当前 Host；外部 Agent 仍然负责编辑和构建自己的 WebUI project。

6、运行多个 Draft 和 profile 快照¶

可以同时运行多个 isolated Draft Preview Hosts。每个 Draft runtime 可以从当前 WebUI profile 或另一个 local profile 做快照。这样可以在不同 Draft 中比较不同插件组合、不同 Patch 顺序或不同 profile 配置，而不互相影响。

适用场景与注意¶

适合这类工具的场景通常是：

• 开发 DSH WebUI 插件，需要基于官方 WebUI 检查界面和组件。
• 需要隔离 Draft、独立 DSH_HOME、独立 profile 和独立 Preview Host。
• 需要调整 Harmony Providers、Patches、插件顺序，并做 transactional reload。
• 需要检查 Patch traces、source candidates、package exports、artifacts 和 pack output。
• 需要让外部 Agent 通过本地 MCP endpoint 只读检查运行状态。

使用前注意以下几点：

1、插件以当前 dsh 进程权限运行，安装前应检查源码、依赖和许可证。
2、dsh-harmony@0.8.7 是最低兼容版本。
3、首次访问 /studio 会安装 Harmony launcher 并重启本地 DSH 进程。
4、Studio 数据在 $DSH_HOME/studio/，切换或关闭 tabs 前要先保存 Source。
5、MCP endpoint 只用于本地 loopback 检查，不替代外部 Agent 的编辑和构建职责。
6、导入本地插件时会拒绝符号链接，并且不会修改原文件夹。
7、新建插件默认留在 Studio 内部，Save plugin to folder 之前不会创建或修改可选目标文件夹。

小结¶

DeepSeek WebUI Studio 的价值在于把 DSH WebUI 插件开发放进一个可检查、可隔离、可验证的工作区：先基于官方 WebUI 做检查，再编辑 Draft source，然后通过 Harmony 构建、reload 和确认 live Client graph revision。对于需要稳定处理真实插件图、Patch、样式和外部 Agent 检查的开发流程，它是一个偏工程化的选择。

GitHub 地址：

https://github.com/memorax-ai/dsh-webui-studio