前言¶
在 DSH 项目会话里做 UI 还原,常见做法是手工对照设计工具截图、在聊天里反复描述节点,再用项目自有框架写代码。设计稿里的变体、交互和切图信息容易散落在多处,组件该映射到现有实现还是知识库里的规范,也缺少按会话沉淀的证据链。
dsh-studio-design 是独立安装的 DSH Studio,把 MasterGo Vibe MCP、Reborn 组件知识库、项目文件与当前 DSH 会话连在一起,在工作台容器里完成读稿、映射、记录与可预览场景下的验收,且不替代项目 UI 框架、不默改业务文件。
这是什么¶
- 名称与仓库:
dsh-studio-design(GitHub:1997liuyh-boop/dsh-studio-design) - 维护者:1997liuyh-boop
- 分类:工作流(社区目录归类)
- 定位:MasterGo 与 Reborn UI 设计协作工作室——读取设计节点、映射真实组件、在项目可预览时在会话内做实现核对。
宿主与上游集成见仓库说明:DSH 侧来自 1997liuyh-boop/deepseek-harness,组件知识来源为 1997liuyh-boop/Reborn-UI,MasterGo 侧遵循 Vibe MCP 文档;集成代码为 MIT 许可。
核心功能¶
下列能力均来自仓库 README 的功能列表与限制说明。
- 读 MasterGo 节点:经 MCP 读取指定节点或当前选中,包含布局、变体、交互及原始位图/SVG。
- 内置提示词:展示并复制实现、只读检视、设计规则、节点优化等提示,便于在同一工作流里复用。
- 组件映射:将设计实例映射到项目已有组件或 Reborn 组件,保留变体与来源引用。
- 会话内设计证据:按项目会话记录导出的图标/图片、组件决策、设计规则与实现依据。
- 分阶段验收:在项目提供可访问预览时,可运行 plan、check、compare、interact、verify 等阶段,并产出几何、像素与交互类报告。
- 会话隔离:各项目会话的 MasterGo 连接、映射与预览证据彼此独立。
- 快捷入口:通过
@设计工作室或@studio:design下发快捷任务,无需另开一轮对话。
工作台(dsh-worktable)提供 Studio 容器;Studio 把设计相关写入当前 DSH Studio 目录下的映射与证据,不静默修改业务源码,不跨项目读会话,也不在无明确任务时改动 MasterGo 画布。
安装与启用¶
在 DSH Desktop 插件管理器中安装。README 要求先加控制包,再按下列带标签源添加(勿自行拼接未在文档出现的安装命令):
github:1997liuyh-boop/dsh-studio-library#v0.1.3
github:1997liuyh-boop/dsh-studio-design#v0.4.2
确认插件列表中 dsh-studio-design 为 0.4.2 后,打开 Design studio。控制包需满足与 dsh-worktable ^0.6.0、dsh-studio-projects ^0.5.0 的配套关系。MasterGo MCP 与可选 Playwright 为对等集成,使用对应功能时须在环境中可用。
本地开发(非终端用户必做步骤)需 Node.js 22.19 及以上与 npm:
npm ci
npm run build
npm run check
npm test
npm run pack
典型用法¶
- 接 MasterGo:打开 MasterGo Desktop 并启用 Vibe MCP,配置其本地服务地址(仓库「Requirements and limitations」一节)。
- 知识库:Reborn 知识库可使用仓库内快照,或用户自选的本地/GitHub 源;远程数据按只读数据处理,不执行其脚本。
- 在项目里打开 Studio:安装并确认版本后,从插件管理进入 Design studio,在当前 DSH 项目会话内操作。
- 读节点与映射:经 MCP 拉取节点信息后,将实例映射到项目或 Reborn 组件,并在会话中保留决策记录。
- 预览与验收:使用项目自有脚本与 DSH Shell 权限启动预览;在预览可达时运行各验收阶段查看报告。预览不能单独证明视觉正确;缺少 MCP、Playwright 或外部服务时,Studio 会报告缺失而非伪造结果。
- 聊天 shortcut:在会话中
@设计工作室或@studio:design触发设计向任务。
实现落地时需遵循项目自身的 Tailwind、组件与注释约定。
适用场景与注意¶
适合:已在 DSH 中使用工作台与项目 Studio、设计稿在 MasterGo、需要把节点信息、组件映射和验收报告留在同一会话里的前端或全栈协作场景。
环境与限制:
- 必须按文档配置 MasterGo Vibe MCP;Playwright 仅在使用依赖它的能力时需要。
- 插件在当前 DSH 进程权限下运行,预览与 Shell 行为与项目脚本一致;安装前宜阅读仓库源码、
LICENSE与UPSTREAM.json等快照文件,确认许可与上游归属。 - 社区目录站点(SkillHub)为独立生态索引,与 DeepSeek / 幻方无官方从属关系;安装源以 README 给出的 GitHub 标签为准。
结尾¶
dsh-studio-design 把读稿、素材与映射、组件还原和可预览时的交互验收收拢到同一 DSH Studio 会话,适合需要 MasterGo 与 Reborn UI 对齐、又要在工程仓库内留证据的设计实现流程。
- 目录页:https://www.skillhub.cn/plugins/1997liuyh-boop/dsh-studio-design
- 仓库:https://github.com/1997liuyh-boop/dsh-studio-design