dsh-design-studio 0.3.2 → 0.4.0

package/README.en.md

@@ -15,6 +15,12 @@
 
 </div>
 
+> **What it is:** a DeepSeek Harness (DSH) plugin that shows the model's web pages, app screens, posters and slides live on a canvas in the right sidebar, in phone or browser frames. Click an element or drag a region, add a sentence, and the model edits it. Versions are saved every turn; export showcase images or preview on a phone.
+>
+> **Use it for:** "make a landing page", "design an app screen", "make a poster", "make a few slides".
+>
+> **Install:** `dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`, then restart DSH.
+
 A design workbench for DSH (DeepSeek Harness), in the spirit of Google Stitch. When the model builds a web page, an app screen, a poster or a slide deck, the **Design Studio** tab in the right sidebar shows it live. Screens appear one by one on a canvas, each inside a phone or browser frame. When something looks off, click the element or drag over an area. The plugin turns your pick into text in the chat input. Add "make it orange" and send. The model edits the source, and the change flashes in the preview.
 
 ![demo](assets/demo.gif)
@@ -62,6 +68,22 @@ On a narrow sidebar the less-used toolbar buttons move into a "More" menu.
 
 `preview_page` takes `target` (a file path, port or URL), `kind` (web / app / tablet / poster / slides / email), and optionally `size` (such as `1080x1920`) and `screens` (dev-server routes to show side by side).
 
+## Design mode and switches
+
+New sessions get a **Design** mode (shown as 设计模式) in the mode menu: all of Standard mode's tools plus the design skill and sidebar previews, with a design-focused persona. Pick it for design work; Standard, Creator and other modes keep these features too.
+
+The plugin is split into parts, each with its own switch under DSH Plugins → Design Studio. Changes apply right away, no restart:
+
+| Part | What it does | Default |
+| --- | --- | --- |
+| Design Studio | The sidebar and preview servers (turning it off means not using the plugin) | On |
+| Open previews automatically | While designing, a written HTML file or a started dev server opens in the sidebar; off, the sidebar only offers a "Preview …" button | On |
+| Preview tool (other modes) | Standard, Creator and other modes can use `preview_page` | On |
+| Design skill (other modes) | Standard, Creator and other modes can load the `ui-design` skill | On |
+| Design mode | The Design entry in the mode menu | On |
+
+To design only in Design mode and keep other modes clean, turn off the two "(other modes)" switches. Design mode carries its own tool and skill and ignores them.
+
 ## Security
 
 Each preview gets its own random `127.0.0.1` port, which is a different origin from DSH.
@@ -84,6 +106,10 @@ node test/test-history.mjs
 node test/test-phone.mjs
 ```
 
+## Feedback
+
+Found a bug or want a feature? [Open an issue](https://github.com/OrderG-X/dsh-design-studio/issues/new/choose). Including your DSH and plugin versions helps a lot.
+
 ## License
 
 MIT

package/README.md

@@ -15,6 +15,12 @@
 
 </div>
 
+> **一句话**：DeepSeek Harness（DSH）插件，模型做网页、App 界面、海报、幻灯片时，右侧栏画布实时显示每一屏，套上手机 / 浏览器外框；点一下元素或框一块区域，补一句话就改。每轮自动存版本，能导出展示图、手机扫码看。
+>
+> **什么时候用**：「做个落地页」「设计一个 App 界面」「做张海报」「做几页幻灯片」。新会话可以直接选「设计模式」。
+>
+> **安装**：`dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`，重启 DSH。
+
 让 DSH（DeepSeek Harness）做界面设计时像 Google Stitch / Claude Code 桌面端那样：模型做网页、App 界面、海报、幻灯片时，右侧栏「设计工作台」实时显示——一屏一屏生成出来，在画布上并排摆好，套上手机 / 浏览器外框；看到哪里不对，点一下那个元素、或拖出一块区域，它就整理成一段文字放进输入框，补一句「改成橙色」发出去，模型照着源码改，改过的地方在预览里闪一下。
 
 ![demo](assets/demo.gif)
@@ -77,6 +83,22 @@ dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/dow
 
 `preview_page` 工具的参数：`target`（文件路径 / 端口 / 地址）、`kind`（web / app / tablet / poster / slides / email）、`size`（如 `1080x1920`，可选）、`screens`（开发服务器上并排看的几个路由，可选）。
 
+## 设计模式和开关
+
+新会话的模式菜单里多了一个「设计模式」：标准模式的全部工具，加上设计技能和右侧工作台的预览，人设换成做设计的。做界面时选它；标准、创造等模式照常能用这些功能。
+
+插件拆成几个组件，DSH「插件」→「设计工作台」里每个都能单独开关，马上生效，不用重启：
+
+| 组件 | 管什么 | 默认 |
+| --- | --- | --- |
+| 设计工作台 | 右侧栏和预览服务器（关掉就等于不用这个插件） | 开 |
+| 自动打开预览 | 做设计时写了 HTML、起了开发服务器，右侧自动打开；关掉后只在右侧栏给一个「预览刚写的 …」按钮 | 开 |
+| 预览工具（其他模式） | 标准、创造等模式也能用 `preview_page` | 开 |
+| 设计技能（其他模式） | 标准、创造等模式也能加载 `ui-design` 技能 | 开 |
+| 设计模式 | 模式菜单里的「设计模式」 | 开 |
+
+只想在设计模式里做设计、别的模式保持干净：关掉两个「（其他模式）」。设计模式自带工具和技能，不受这两个开关影响。
+
 ## 能预览什么
 
 | 输入 | 怎么预览 |
@@ -111,7 +133,8 @@ dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/dow
 客户端  右侧栏标签页（sidebarRightTabs）+ 标题栏按钮（session.header.utilities）
 ```
 
-- `lib/index.js` —— 服务端：工具、接口、自动发现接线
+- `lib/index.js` —— 服务端：工具和技能的定义、接口、自动发现接线
+- `lib/tool.js`、`lib/skill.js`、`lib/auto.js`、`lib/preset.js` —— 能单独开关的几个组件：挂工具、挂技能、自动打开预览、设计模式（`cordis.patch.yml` 里列着；设计模式照抄 DSH 标准模式的插件，再挂上工具和技能）
 - `lib/core.js` —— 地址解析、自动发现、会话状态和存盘、每轮前后存版本、改字写回（只在看得到的文字里找，认 HTML 实体）
 - `lib/history.js` —— 设计版本：按内容存（没改的文件只存一份），最多 40 版，回到某一版
 - `lib/serve.js` —— 预览服务器：静态文件 / 代理 / 改动推送 / 注入
@@ -129,14 +152,18 @@ dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/dow
 node test/test-serve.mjs   # 静态文件、跳不出目录、Host 把门、改动推送、代理、WebSocket、只听 ::1 的开发服务器、连不上的提示页
 node test/test-core.mjs    # 地址解析、自动发现（只在做设计时，后台跑的开发服务器也认）、模型 / 用户指定的不被顶掉、重放不动手、存盘恢复（恢复中先不显示空状态）、类型 / 几屏 / 换屏、改字写回
 node test/test-client.mjs  # 右侧栏标签页 / 标题栏按钮注册、只给当前会话自动弹出、选中内容整理成的文字、页面 meta、画布排版、设计变量分组、原型箭头（隔屏的绕开别的屏）、多尺寸排版、矮屏手机没有灵动岛、参考图取色
-node test/test-skill.mjs   # 内置技能：名字 / 来源合规、内容读得到、引用的细则文件都在
+node test/test-skill.mjs   # 内置技能：名字 / 来源合规、内容读得到、引用的细则文件都在；拆开的几个组件、设计模式带齐标准模式的工具
 node test/test-history.mjs # 版本：存一版 / 没变不存 / 只存设计文件 / 回到某一版 / 上限、每轮前后存、版本名（点选 / 变量 / 参考图换成短名字）、旧版本文件、导出的图不算改动
 node test/test-phone.mjs   # 手机上看：二维码结构、挑网卡、补 viewport、口令换 Cookie、没口令 / Host 不对 403、转发、跟随跳屏、WebSocket、停止、闲置自动关
 ```
 
 ## 已验证
 
-DeepSeek Harness 桌面端实测：让模型「设计一个咖啡外带 App 的三屏界面」，它先自己加载 `ui-design` 技能、建 `tokens.css`、一屏一个文件，右侧画布套手机外框一屏屏长出来（末尾带「生成中…」），写完按自查表找出文字重叠和对比度问题自己改掉；在「设计规范」面板点主色进输入框，模型问清方向后只改 `tokens.css` 一个变量，三屏一起变色、改动处高亮。之后又实测了第三期：每轮对话前后自动存版本（名字就是那句话）、版本面板、看第 1 版、左右拖动对比、导出整套展示图（3144×2541）；点「再出两版」后模型没动原版和 tokens.css，写了 login-b / login-c 两个方向，画布上紧跟在登录屏后面。更早还测了：模型写好 HTML 后右侧栏自动弹出预览；地址栏手动打开；选择模式下点选元素后文字进输入框；改文件后预览自动刷新；DSH 重启后每个会话接着预览原来的页面。浏览器里另测了悬停框、点选、拖选区域、改 CSS 后自动刷新。测试台（插件真代码 + 仿 DSH 外壳）里测了：生成占位、一屏屏生成的动画、四屏 App 画布、画布里点选、改一屏只刷一屏、改共用 CSS 全部刷新、双击单看、类型切换、窄侧栏排版、设计规范面板（分组、点一个进输入框、没有变量时的提示）、导出（单屏带外框、深色页面、三屏合成展示图）、版本列表 / 看旧版 / 左右对比拖把手 / 回到这一版、深色模式切换、再出两版的提示和排序；手机上看：面板里的二维码用系统识别读得出链接，模拟 iPhone（390 宽）扫码打开，地址栏不留口令，「手机已打开」亮起，电脑上选别的屏手机跟着跳，改设计文件手机自动刷新，点停止后链接立刻失效。还测了第五期：原型箭头和演示里点按钮跳屏、多尺寸三档并排、点字改字写回文件并存版本（单页，和画布上的另一屏）、拖入 / 粘贴参考图后取色进输入框、窄侧栏的「更多」菜单。第五期又在 DSH 桌面端实测：非设计任务（命令里 curl 本机端口）不弹出；模型调 `preview_page` 后画布上带跳转箭头，侧栏窄时次要按钮进「更多」；演示里点「获取验证码」滑到首页；多尺寸三档并排；改字回车后写回源文件，版本里多一条「改字「…」」；手机二维码能识别出局域网链接、能打开，点停止后端口关掉；在右侧栏粘贴参考图后，图存进设计目录的 `refs/`，主要颜色和点缀色（如 `#C8763E 1%（点缀）`）进了输入框；发出去后模型先写 `tokens.css`，四屏一起换成参考图的深色加焦糖色；选图按钮能弹出系统选文件框。从访达拖图进来这一步模拟不出系统拖拽，只在测试台验过。之后在 DSH 里从零跑了一遍：模型自己加载技能、调 `preview_page`，三屏宠物领养 App 一屏屏长出来，页面之间自己连好了跳转；点选进输入框、模型改完高亮、版本 / 对比 / 回到第 1 版（文件确实回去了）、导出展示图、窗口在前台时导出也复制进剪贴板、设计规范面板、单页改字写回、多尺寸都正常。这一轮在 DSH 里找出并修了四个只在真 DSH 出现的问题：画布 iframe 刚载完时视口是 0×0，跳转箭头和演示认不出按钮（现在尺寸到了会补报）；模型用后台任务（`run_in_background` + `job_output`）起的开发服务器认不出；新版 Vite 在 Mac 上只听 `::1`，代理只连 127.0.0.1，全是「连不上」；DSH 重启时右侧栏先闪一下空状态。修完后实测开发服务器：五个路由并排、改源文件热更新、开发服务器页面上改字变成一句请求、模型改完自动刷新、手机扫码打开（没口令 403）、停止后端口关掉。再下一轮修了几个小毛病，也在 DSH 里验过：新屏播生成动画时底部按钮是透明的，跳转箭头漏了它（现在播动画的按钮也算，播完再补报一次位置）；隔着一屏的箭头改成绕到标题上面走；点选后的版本名从「〔选中元素〕em…」变成「「3.2 km」 · 把这个距离文字改成绿色…」；先打字再点选时，选中的内容另起一行，不再粘在那句话后面；多尺寸里的小屏不再画灵动岛；提示条和顶上的提示消息不再叠在一起。
+DeepSeek Harness 桌面端实测：让模型「设计一个咖啡外带 App 的三屏界面」，它先自己加载 `ui-design` 技能、建 `tokens.css`、一屏一个文件，右侧画布套手机外框一屏屏长出来（末尾带「生成中…」），写完按自查表找出文字重叠和对比度问题自己改掉；在「设计规范」面板点主色进输入框，模型问清方向后只改 `tokens.css` 一个变量，三屏一起变色、改动处高亮。之后又实测了第三期：每轮对话前后自动存版本（名字就是那句话）、版本面板、看第 1 版、左右拖动对比、导出整套展示图（3144×2541）；点「再出两版」后模型没动原版和 tokens.css，写了 login-b / login-c 两个方向，画布上紧跟在登录屏后面。更早还测了：模型写好 HTML 后右侧栏自动弹出预览；地址栏手动打开；选择模式下点选元素后文字进输入框；改文件后预览自动刷新；DSH 重启后每个会话接着预览原来的页面。浏览器里另测了悬停框、点选、拖选区域、改 CSS 后自动刷新。测试台（插件真代码 + 仿 DSH 外壳）里测了：生成占位、一屏屏生成的动画、四屏 App 画布、画布里点选、改一屏只刷一屏、改共用 CSS 全部刷新、双击单看、类型切换、窄侧栏排版、设计规范面板（分组、点一个进输入框、没有变量时的提示）、导出（单屏带外框、深色页面、三屏合成展示图）、版本列表 / 看旧版 / 左右对比拖把手 / 回到这一版、深色模式切换、再出两版的提示和排序；手机上看：面板里的二维码用系统识别读得出链接，模拟 iPhone（390 宽）扫码打开，地址栏不留口令，「手机已打开」亮起，电脑上选别的屏手机跟着跳，改设计文件手机自动刷新，点停止后链接立刻失效。还测了第五期：原型箭头和演示里点按钮跳屏、多尺寸三档并排、点字改字写回文件并存版本（单页，和画布上的另一屏）、拖入 / 粘贴参考图后取色进输入框、窄侧栏的「更多」菜单。第五期又在 DSH 桌面端实测：非设计任务（命令里 curl 本机端口）不弹出；模型调 `preview_page` 后画布上带跳转箭头，侧栏窄时次要按钮进「更多」；演示里点「获取验证码」滑到首页；多尺寸三档并排；改字回车后写回源文件，版本里多一条「改字「…」」；手机二维码能识别出局域网链接、能打开，点停止后端口关掉；在右侧栏粘贴参考图后，图存进设计目录的 `refs/`，主要颜色和点缀色（如 `#C8763E 1%（点缀）`）进了输入框；发出去后模型先写 `tokens.css`，四屏一起换成参考图的深色加焦糖色；选图按钮能弹出系统选文件框。从访达拖图进来这一步模拟不出系统拖拽，只在测试台验过。之后在 DSH 里从零跑了一遍：模型自己加载技能、调 `preview_page`，三屏宠物领养 App 一屏屏长出来，页面之间自己连好了跳转；点选进输入框、模型改完高亮、版本 / 对比 / 回到第 1 版（文件确实回去了）、导出展示图、窗口在前台时导出也复制进剪贴板、设计规范面板、单页改字写回、多尺寸都正常。这一轮在 DSH 里找出并修了四个只在真 DSH 出现的问题：画布 iframe 刚载完时视口是 0×0，跳转箭头和演示认不出按钮（现在尺寸到了会补报）；模型用后台任务（`run_in_background` + `job_output`）起的开发服务器认不出；新版 Vite 在 Mac 上只听 `::1`，代理只连 127.0.0.1，全是「连不上」；DSH 重启时右侧栏先闪一下空状态。修完后实测开发服务器：五个路由并排、改源文件热更新、开发服务器页面上改字变成一句请求、模型改完自动刷新、手机扫码打开（没口令 403）、停止后端口关掉。0.4.0 的设计模式和开关在一个全新的 DSH（0.2.1-rc.2）里实测：模式菜单里有「设计模式」，选它发消息，模型拿到 `preview_page`、`ui-design` 和做设计的人设，调 `preview_page` 后右侧工作台套手机外框打开页面；标准模式默认也有这两样；插件页关掉两个「（其他模式）」后，新开的标准模式会话里没有了，设计模式里照样有；关掉「设计模式」，模式菜单里就没有它，再打开又回来。再早一轮修了几个小毛病，也在 DSH 里验过：新屏播生成动画时底部按钮是透明的，跳转箭头漏了它（现在播动画的按钮也算，播完再补报一次位置）；隔着一屏的箭头改成绕到标题上面走；点选后的版本名从「〔选中元素〕em…」变成「「3.2 km」 · 把这个距离文字改成绿色…」；先打字再点选时，选中的内容另起一行，不再粘在那句话后面；多尺寸里的小屏不再画灵动岛；提示条和顶上的提示消息不再叠在一起。
+
+## 反馈
+
+遇到问题或想要新功能，[提一个 issue](https://github.com/OrderG-X/dsh-design-studio/issues/new/choose)。报问题时写上 DSH 版本和插件版本，修起来最快。
 
 ## License
 

package/cordis.patch.yml

@@ -1,4 +1,148 @@
 # Bundle patch for dsh-design-studio
+# 每一行在 DSH「插件」页里都有自己的开关
 - insert:
+    # 设计工作台本体：右侧栏、接口、预览服务器
     - id: dsh-design-studio
       name: dsh-design-studio
+    # 自动打开预览（模型写了设计用的 HTML、开发服务器起来时）
+    - id: dsh-design-studio-auto
+      name: dsh-design-studio/auto
+    # 其他模式（标准、创造 …）也能用预览工具、设计技能；设计模式里自带一份，不受这两行影响
+    - id: dsh-design-studio-tool
+      name: dsh-design-studio/tool
+    - id: dsh-design-studio-skill
+      name: dsh-design-studio/skill
+    # 设计模式：照抄 DSH 0.2.1 标准模式（web-app 的 presets/standard.patch.yml）的全套插件，
+    # 人设换成做设计的，再挂上预览工具和设计技能。DSH 标准模式有变动时跟着改
+    - id: preset-design
+      name: dsh-design-studio/preset
+      config:
+        id: design
+        name: 设计模式
+        description: 做网页、App 界面、海报、幻灯片：标准模式的全部工具，加上设计技能和右侧「设计工作台」实时预览。
+        order: 1.5
+        plugins:
+          - id: persona
+            name: '@deepseek-ai/dsh-persona'
+            config:
+              prefix: |-
+                You are a design agent powered by the {{model}} model. You design user interfaces and visuals — web pages, app and tablet screens, posters and social images, slides, emails, components — and build them as real HTML/CSS, or inside the user's front-end project.
+                Before designing, load the ui-design skill and follow its process and self-check list. Once the first HTML file is written, or a dev server is up, call preview_page so the user can watch the design live in the Design Studio sidebar; later edits refresh on their own. When a message starts with an element or region the user selected in the preview, change exactly that part in the source.
+          - id: agent-instructions
+            name: '@deepseek-ai/dsh-agent-instructions'
+            config:
+              maxBytes: 65536
+          - id: time-context
+            name: '@deepseek-ai/dsh-time-context'
+          - id: tool-bash
+            name: '@deepseek-ai/dsh-tool-bash'
+            disabled: !!js process.platform === 'win32'
+          - id: tool-pwsh
+            name: '@deepseek-ai/dsh-tool-pwsh'
+            disabled: !!js process.platform !== 'win32'
+          - id: tool-fs
+            name: '@deepseek-ai/dsh-tool-fs'
+          - id: tool-fs-search
+            name: '@deepseek-ai/dsh-tool-fs-search'
+            config:
+              sampleOverCapGlobResults: false
+          - id: tool-jobs
+            name: '@deepseek-ai/dsh-tool-jobs'
+          - id: tool-schedule
+            name: '@deepseek-ai/dsh-tool-schedule'
+          - id: skill-filesystem
+            name: '@deepseek-ai/dsh-skill-filesystem'
+          - id: tool-skill
+            name: '@deepseek-ai/dsh-tool-skill'
+          - id: command-goal
+            name: '@deepseek-ai/dsh-command-goal'
+          - id: tool-goal
+            name: '@deepseek-ai/dsh-tool-goal'
+          - id: planning
+            name: cordis:group
+            group: true
+            isolate:
+              planMode: true
+            config:
+              - id: plan-mode
+                name: '@deepseek-ai/dsh-plan-mode'
+                config:
+                  section: |
+                    You are in plan mode. Stay in plan mode until the user approves your plan through exit_plan_mode or switches the session mode. Imperative language to implement changes means plan the implementation, not execute it. A user's conversational agreement — including an answer confirming something you asked — approves nothing and does not end plan mode; fold the confirmed decision into the plan and submit it through exit_plan_mode.
+
+                    Explore first. Use non-mutating reads, searches, static analysis, and checks to ground the plan in the actual repository. Do not edit or write files, change configuration, run formatters or code generation that rewrites tracked files, commit, or otherwise carry out the plan. Prefer existing functions and patterns over new machinery.
+
+                    The tool catalog stays the same across modes for request-cache stability. These plan-mode rules override any later tool description or guidance that suggests using mutation tools; those tools remain listed to keep the tool catalog unchanged. Do not use todo_write to track this planning phase: it tracks implementation after an approved plan, while the plan itself belongs in exit_plan_mode.
+
+                    Resolve discoverable facts by inspection. Use ask_user_question only for user-owned choices or material ambiguity that inspection cannot answer. Do not ask the user where code lives or how current behavior works when you can find out.
+
+                    Make the plan decision-complete: state the goal and success criteria; group implementation changes by subsystem; identify public API, schema, and data-flow changes; cover edge cases, failure modes, tests, acceptance criteria, and explicit assumptions. Keep it concise enough to review but detailed enough that another engineer can implement it without making design decisions.
+
+                    When ready, call exit_plan_mode with the complete plan markdown, starting with a # title. Make exit_plan_mode the only and final tool call in that assistant response: it presents the plan for approval, and implementation begins only in a later step after approval. Do not paste the final plan as a plain reply or ask "should I proceed?" through prose or ask_user_question. If review rejects it, incorporate the feedback and present again. If the review channel is unavailable or aborted, stay in plan mode and ask the user to switch modes manually; do not proceed with implementation.
+          - id: compaction
+            name: cordis:group
+            group: true
+            isolate:
+              compaction: true
+              toolResultPruner: true
+            config:
+              - id: compaction-basic
+                name: '@deepseek-ai/dsh-compaction-basic'
+              - id: command-compact
+                name: '@deepseek-ai/dsh-command-compact'
+              - id: tool-result-pruner
+                name: '@deepseek-ai/dsh-compaction-tool-result-pruner'
+                config:
+                  thresholdChars: 8192
+                  headChars: 4096
+                  tailChars: 1024
+          - id: delegation
+            name: cordis:group
+            group: true
+            isolate:
+              workflowEngine: true
+            config:
+              - id: tool-subagent-control
+                name: '@deepseek-ai/dsh-tool-subagent-control'
+              - id: tool-subagent-list-agents
+                name: '@deepseek-ai/dsh-tool-subagent-control/list-agents'
+              - id: tool-subagent
+                name: '@deepseek-ai/dsh-tool-subagent'
+                config:
+                  provider: spawn
+                  toolName: subagent
+                  modelSelectionSettings: true
+              - id: tool-subagent-fork
+                name: '@deepseek-ai/dsh-tool-subagent'
+                config:
+                  provider: fork
+                  toolName: subagent_fork
+              - id: workflow-ptc
+                name: '@deepseek-ai/dsh-workflow-ptc'
+                config:
+                  provider: spawn
+              - id: tool-workflow
+                name: '@deepseek-ai/dsh-tool-workflow'
+          - id: tool-ask-user
+            name: '@deepseek-ai/dsh-tool-ask-user'
+          - id: tool-todo
+            name: '@deepseek-ai/dsh-tool-todo'
+            config:
+              allowParallelInProgress: true
+          - id: tool-web
+            name: '@deepseek-ai/dsh-tool-web'
+            config:
+              fetch: true
+              searchTimeoutMs: 60000
+          - id: present
+            name: '@deepseek-ai/dsh-tool-present'
+          - id: tool-plugin-manager
+            name: '@deepseek-ai/dsh-plugin-manager/tools'
+            disabled: true
+          - id: tool-plugin-market
+            name: '@deepseek-ai/dsh-plugin-market/tools'
+            disabled: true
+          - id: design-tool
+            name: dsh-design-studio/tool
+          - id: design-skill
+            name: dsh-design-studio/skill

package/lib/auto.js

@@ -0,0 +1,14 @@
+/**
+ * dsh-design-studio/auto：自动打开预览。
+ * 开着时，模型写了设计用的 HTML、或开发服务器起来了，右侧栏自动预览；关掉后只在右侧栏给个「预览刚写的 …」按钮
+ */
+import { studio } from './index.js'
+
+export const name = 'dsh-design-studio-auto'
+
+export function apply(ctx) {
+  ctx.effect(() => {
+    studio.autoOpen++
+    return () => { studio.autoOpen-- }
+  }, 'dsh-design-studio: auto open')
+}

package/lib/core.js

@@ -9,6 +9,7 @@
 import fs from 'node:fs'
 import os from 'node:os'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 const HTML_EXT = /\.html?$/i
 const LOCAL_URL = /^(?:https?:\/\/)?(localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):(\d{2,5})(\/[^\s]*)?$/i
@@ -91,6 +92,13 @@ function normRoutes(list) {
   return out.length ? out : null
 }
 
+/** Windows 上 DSH 用 Git Bash 跑命令，模型给的路径常是 /c/Users/… 这种写法：换成 C:\\Users\\…；别的系统原样 */
+export function fromBashPath(p, platform = process.platform) {
+  if (platform !== 'win32') return p
+  const m = /^\/([a-zA-Z])(?:\/(.*))?$/.exec(p)
+  return m ? `${m[1].toUpperCase()}:\\${(m[2] || '').replace(/\//g, '\\')}` : p
+}
+
 /**
  * @returns {{ kind: 'file', file, root } | { kind: 'proxy', port, path }}
  * @throws Error 带中文说明
@@ -102,11 +110,17 @@ export function parseTarget(input, cwd = os.homedir()) {
   const m = LOCAL_URL.exec(s)
   if (m) return proxyTarget(Number(m[2]), m[3] || '/')
   if (/^https?:\/\//i.test(s)) throw new Error('只能预览本机的页面：本地 HTML 文件，或 localhost 上的开发服务器')
-  let p = s.replace(/^file:\/\//i, '')
-  if (p.includes('%')) {
-    try { p = decodeURIComponent(p) } catch { /* 原样用 */ }
+  let p = null
+  // 标准的 file:// 地址交给 Node 转（Windows 上是 file:///C:/…，直接去掉前缀会变成 /C:/…）
+  if (/^file:\/\//i.test(s)) try { p = fileURLToPath(s) } catch { /* file://~/… 之类的写法，按下面的老办法 */ }
+  if (p === null) {
+    p = s.replace(/^file:\/\//i, '')
+    if (p.includes('%')) {
+      try { p = decodeURIComponent(p) } catch { /* 原样用 */ }
+    }
   }
-  if (p === '~' || p.startsWith('~/')) p = path.join(os.homedir(), p.slice(1))
+  p = fromBashPath(p)
+  if (p === '~' || p.startsWith('~/') || p.startsWith('~\\')) p = path.join(os.homedir(), p.slice(1))
   p = path.resolve(cwd, p)
   let st
   try { st = fs.statSync(p) } catch { throw new Error(`找不到：${p}`) }
@@ -321,7 +335,7 @@ export function askOf(data) {
 /**
  * @param opts.alive (origin) → 这个预览服务器还开着吗（开的太多时旧的会被关掉；发现没了就重开）
  */
-export function createTracker({ open, skipPorts = () => new Set(), now = Date.now, log = () => {}, store = null, history = null, alive = () => true }) {
+export function createTracker({ open, skipPorts = () => new Set(), now = Date.now, log = () => {}, store = null, history = null, alive = () => true, autoOpen = () => true }) {
   const states = new Map() // sessionId → state
   const cwds = new Map() // sessionId → 最近一次工具的工作目录
   let saved = {}
@@ -563,9 +577,11 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
         if (callId) st.calls.delete(callId)
         if (pending && fs.existsSync(pending) && (!st.target || st.source === 'auto') && !(st.target && st.target.file === pending)) {
           // 只有在做设计（加载了设计技能、或页面写了设计类型标记）才自动打开；别的任务写的网页只记下来，不弹
+          // 用户关了「自动打开预览」：也只记下来，右侧栏给个按钮
           if (st.design || isDesignHtml(pending)) {
             st.design = true
-            auto(sessionId, { kind: 'file', file: pending, root: path.dirname(pending) })
+            if (autoOpen()) auto(sessionId, { kind: 'file', file: pending, root: path.dirname(pending) })
+            else st.hint = pending
           } else st.hint = pending
         }
         if (st.target && st.source !== 'auto') break
@@ -590,7 +606,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
           const found = devServerIn(command, text, skipPorts())
           if (found) {
             const t = { kind: 'proxy', port: found.port, path: '/' }
-            if (!sameTarget(st.target, t)) auto(sessionId, t)
+            if (!sameTarget(st.target, t) && autoOpen()) auto(sessionId, t)
             break
           }
         }

package/lib/index.js

@@ -4,6 +4,14 @@
  *   preview_page 工具   模型做界面时调一次，右侧栏「设计工作台」打开这个页面（可以带类型：网页 / App / 海报 …）
  *   自动发现           模型写了 HTML、或命令输出里出现 localhost:端口（开发服务器起来了），自动预览
  *   ui-design 技能     设计流程、设计原则、中文排版、各类型要点、避免 AI 味、自查清单（skills/ui-design/，DSH 有技能服务时才挂上）
+ *
+ * 拆成几行，每行在 DSH「插件」页里有自己的开关（见 cordis.patch.yml）：
+ *   dsh-design-studio        工作台本体：右侧栏、接口、预览服务器、跟踪会话（这个文件的 apply）
+ *   dsh-design-studio/auto   自动打开预览（auto.js）
+ *   dsh-design-studio/tool   preview_page 工具（tool.js）
+ *   dsh-design-studio/skill  ui-design 技能（skill.js）
+ *   preset-design            设计模式：标准模式的全套工具 + 上面两行，人设换成做设计的
+ * 工具和技能在顶层挂一份（所有模式都能用），设计模式里再挂一份（只关顶层那份，设计模式照样有）。
  *   接口（DSH 自己的地址，要登录态）：
  *     GET  /dsh-design-studio/api/state?session=  右侧栏轮询：预览什么、有哪几屏、要不要弹出来、模型在不在干活
  *     POST /dsh-design-studio/api/open             地址栏输入新地址 { session, target }
@@ -33,21 +41,24 @@ import { createPhone } from './phone.js'
 import { qrMatrix } from './qr.js'
 
 export const name = 'dsh-design-studio'
-export const inject = ['tools', 'webServer']
+export const inject = ['webServer']
 
 const API = '/dsh-design-studio/api/'
 const LOOPBACK = new Set(['127.0.0.1', '::1', '::ffff:127.0.0.1'])
 const LOOPBACK_HOST = /^(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/i
 const MAX_BODY = 64 * 1024
 const MAX_EXPORT = 48 * 1024 * 1024 // 导出图片的请求体（base64）
-const HISTORY_DIR = path.join(process.env.HOME || '.', '.dsh', 'cache', 'dsh-design-studio', 'history')
+const HISTORY_DIR = path.join(os.homedir(), '.dsh', 'cache', 'dsh-design-studio', 'history')
 // 每个会话预览的是什么，存这里（DSH 重启后接着显示）
 // 参考图：没有本地设计目录（开发服务器 / 还没开始）时存这里
-const REFS_DIR = path.join(process.env.HOME || '.', '.dsh', 'cache', 'dsh-design-studio', 'refs')
-const STORE_FILE = path.join(process.env.HOME || '.', '.dsh', 'cache', 'dsh-design-studio.json')
+const REFS_DIR = path.join(os.homedir(), '.dsh', 'cache', 'dsh-design-studio', 'refs')
+const STORE_FILE = path.join(os.homedir(), '.dsh', 'cache', 'dsh-design-studio.json')
 const SKILL_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'skills', 'ui-design')
 const SKILL_RANK = 600 // 和 DSH 自带的技能同一档；用户 / 项目里同名的技能优先
 
+/** 几行之间靠这个互通（同一个包里的模块 Node 只加载一次）：工作台起来后放 tracker；「自动打开预览」那行开着时 autoOpen > 0 */
+export const studio = { tracker: null, autoOpen: 0 }
+
 /** 设计技能：模型做界面设计时加载（DSH 的 skill 工具），也能让用户手动调 */
 export const designSkill = {
   name: 'ui-design',
@@ -72,6 +83,62 @@ export const skillProvider = {
   },
 }
 
+/** preview_page 工具（tool.js 挂到 DSH；不在这个文件的 apply 里挂，好让它单独开关、也能挂进设计模式） */
+export const previewTool = {
+  name: 'preview_page',
+  description:
+    '在右侧栏「设计工作台」里实时打开一个页面，用户能边看边点选要改的地方。' +
+    '做网页、App 界面、海报、幻灯片、邮件这类界面设计时用：写好第一个 HTML 文件、或启动开发服务器后调一次就行，之后改文件会自动刷新，不用再调。' +
+    '本地 HTML 写文件路径；开发服务器写地址或端口（如 http://localhost:5173）。只能预览本机页面。' +
+    'kind 说明是哪类设计，右侧按它的画幅显示（App 套手机外框、幻灯片 16:9 …）。' +
+    '动手设计前先加载 ui-design 技能（设计流程、规范和自查清单）。' +
+    '要做好几屏（App 的几个界面、网站的几个页面）时，每屏一个 HTML 文件放在同一个目录，右侧画布会按生成顺序并排显示，一屏一屏写就行。' +
+    '用户在预览里点选的内容会以「〔选中元素〕」或「〔选中区域〕」开头出现在消息里，带 CSS 路径、HTML、关键样式，' +
+    '拿得到时还有组件和源码位置：照它找到源码里对应的地方再改。',
+  parameters: specToJsonSchema({
+    target: { type: 'string', required: true, description: '本地 HTML 文件的绝对路径，或开发服务器地址 / 端口，例如 /Users/me/site/index.html、http://localhost:5173、5173' },
+    kind: {
+      type: 'string',
+      enum: KINDS,
+      description: '设计类型：web 网页（默认）、app 手机 App 界面（390×844）、tablet 平板、poster 海报 / 社媒图（1080×1350）、slides 幻灯片（16:9）、email 邮件',
+    },
+    size: { type: 'string', description: '画幅尺寸，可选，如 1080x1920；不填按类型的默认尺寸' },
+    screens: {
+      type: 'array',
+      items: { type: 'string' },
+      description: '开发服务器上要并排显示的几个路由，可选，如 ["/", "/login", "/settings"]。本地 HTML 不用填：同目录的 HTML 文件自动并排',
+    },
+  }),
+  output: {
+    schema: {
+      type: 'object',
+      additionalProperties: false,
+      properties: { text: { type: 'string' }, url: { type: 'string' } },
+      required: ['text'],
+    },
+    render: (_args, value) => [{ type: 'text', text: value.text }],
+  },
+  async execute(args, exec) {
+    const session = exec && exec.agent && exec.agent.session
+    const id = session && session.id
+    if (!id) throw new Error('拿不到当前会话，没法打开预览')
+    const tracker = studio.tracker
+    if (!tracker) throw new Error('「设计工作台」在 DSH 的插件页里关着，打开后再预览')
+    const target = parseTarget(args.target, tracker.cwdOf(id))
+    const opts = { source: 'tool' }
+    if (args.kind !== undefined) opts.kind = args.kind
+    if (args.size !== undefined) opts.size = args.size
+    if (args.screens !== undefined) opts.routes = args.screens
+    const st = await tracker.setTarget(id, target, opts)
+    const what = target.kind === 'file' ? target.file : `localhost:${target.port}${target.path}`
+    const many = target.kind === 'file' ? '同目录再写别的 HTML 文件，会作为新的一屏并排出现。' : ''
+    return {
+      text: `已在右侧「设计工作台」打开 ${what}。${target.kind === 'file' ? '这个目录里的文件一改就自动刷新。' + many : '开发服务器的热更新照常生效。'}`,
+      url: st.url,
+    }
+  },
+}
+
 const fileStore = {
   load: () => JSON.parse(fs.readFileSync(STORE_FILE, 'utf8')),
   save: (data) => {
@@ -169,6 +236,7 @@ export function apply(ctx) {
     history,
     store: fileStore,
     alive: (origin) => hub.alive(origin),
+    autoOpen: () => studio.autoOpen > 0,
     skipPorts: () => {
       const s = new Set(previewPorts)
       const own = ownHost(ctx).split(':')[1]
@@ -177,18 +245,13 @@ export function apply(ctx) {
     },
   })
   ctx.effect(() => () => hub.closeAll(), 'dsh-design-studio: preview servers')
+  ctx.effect(() => {
+    studio.tracker = tracker
+    return () => { if (studio.tracker === tracker) studio.tracker = null }
+  }, 'dsh-design-studio: tracker')
   const phone = createPhone({ upstream: (session) => tracker.snapshot(session).origin || '', log })
   ctx.effect(() => () => phone.stopAll(), 'dsh-design-studio: phone links')
 
-  // 设计技能：等 DSH 的技能服务就绪再挂（老版本没有就算了），插件卸载时一起摘掉
-  if (typeof ctx.inject === 'function') {
-    try {
-      ctx.inject(['skills'], (sub) => { sub.skills.registerProvider(() => skillProvider) })
-    } catch (e) {
-      log(e)
-    }
-  }
-
   // ── 接口 ──────────────────────────────────────────────────────────────────
 
   function admit(req, res) {
@@ -401,61 +464,6 @@ export function apply(ctx) {
     }), `dsh-design-studio: ${key} route`)
   }
 
-  // ── 工具 ──────────────────────────────────────────────────────────────────
-
-  ctx.tools.register({
-    name: 'preview_page',
-    description:
-      '在右侧栏「设计工作台」里实时打开一个页面，用户能边看边点选要改的地方。' +
-      '做网页、App 界面、海报、幻灯片、邮件这类界面设计时用：写好第一个 HTML 文件、或启动开发服务器后调一次就行，之后改文件会自动刷新，不用再调。' +
-      '本地 HTML 写文件路径；开发服务器写地址或端口（如 http://localhost:5173）。只能预览本机页面。' +
-      'kind 说明是哪类设计，右侧按它的画幅显示（App 套手机外框、幻灯片 16:9 …）。' +
-      '动手设计前先加载 ui-design 技能（设计流程、规范和自查清单）。' +
-      '要做好几屏（App 的几个界面、网站的几个页面）时，每屏一个 HTML 文件放在同一个目录，右侧画布会按生成顺序并排显示，一屏一屏写就行。' +
-      '用户在预览里点选的内容会以「〔选中元素〕」或「〔选中区域〕」开头出现在消息里，带 CSS 路径、HTML、关键样式，' +
-      '拿得到时还有组件和源码位置：照它找到源码里对应的地方再改。',
-    parameters: specToJsonSchema({
-      target: { type: 'string', required: true, description: '本地 HTML 文件的绝对路径，或开发服务器地址 / 端口，例如 /Users/me/site/index.html、http://localhost:5173、5173' },
-      kind: {
-        type: 'string',
-        enum: KINDS,
-        description: '设计类型：web 网页（默认）、app 手机 App 界面（390×844）、tablet 平板、poster 海报 / 社媒图（1080×1350）、slides 幻灯片（16:9）、email 邮件',
-      },
-      size: { type: 'string', description: '画幅尺寸，可选，如 1080x1920；不填按类型的默认尺寸' },
-      screens: {
-        type: 'array',
-        items: { type: 'string' },
-        description: '开发服务器上要并排显示的几个路由，可选，如 ["/", "/login", "/settings"]。本地 HTML 不用填：同目录的 HTML 文件自动并排',
-      },
-    }),
-    output: {
-      schema: {
-        type: 'object',
-        additionalProperties: false,
-        properties: { text: { type: 'string' }, url: { type: 'string' } },
-        required: ['text'],
-      },
-      render: (_args, value) => [{ type: 'text', text: value.text }],
-    },
-    async execute(args, exec) {
-      const session = exec && exec.agent && exec.agent.session
-      const id = session && session.id
-      if (!id) throw new Error('拿不到当前会话，没法打开预览')
-      const target = parseTarget(args.target, tracker.cwdOf(id))
-      const opts = { source: 'tool' }
-      if (args.kind !== undefined) opts.kind = args.kind
-      if (args.size !== undefined) opts.size = args.size
-      if (args.screens !== undefined) opts.routes = args.screens
-      const st = await tracker.setTarget(id, target, opts)
-      const what = target.kind === 'file' ? target.file : `localhost:${target.port}${target.path}`
-      const many = target.kind === 'file' ? '同目录再写别的 HTML 文件，会作为新的一屏并排出现。' : ''
-      return {
-        text: `已在右侧「设计工作台」打开 ${what}。${target.kind === 'file' ? '这个目录里的文件一改就自动刷新。' + many : '开发服务器的热更新照常生效。'}`,
-        url: st.url,
-      }
-    },
-  })
-
   // ── 自动发现 ──────────────────────────────────────────────────────────────
 
   if (typeof ctx.on === 'function') {

package/lib/preset.js

@@ -0,0 +1,5 @@
+/**
+ * dsh-design-studio/preset：设计模式那一行。就是 DSH 自带的 Agent 预设，
+ * 换个入口好让 DSH「插件」页里显示成设计模式（名字和说明见 locale/preset/），而不是通用的「Agent 预设定义」
+ */
+export { default } from '@deepseek-ai/dsh-agent-preset'

package/lib/skill.js

@@ -0,0 +1,17 @@
+/**
+ * dsh-design-studio/skill：把 ui-design 技能挂到 DSH 的技能服务（老版本没有就算了）。
+ * 放在 bundle 顶层 → 所有模式都能用；放进设计模式 → 只挂在那个模式里。技能本身见 index.js 的 designSkill
+ */
+import { skillProvider } from './index.js'
+
+export const name = 'dsh-design-studio-skill'
+
+export function apply(ctx) {
+  if (typeof ctx.inject !== 'function') return
+  try {
+    // 等技能服务就绪再挂，这一行关掉时一起摘掉
+    ctx.inject(['skills'], (sub) => { sub.skills.registerProvider(() => skillProvider) })
+  } catch (e) {
+    try { ctx.logger.warn(`dsh-design-studio: ${e && e.message ? e.message : e}`) } catch { /* 没 logger 就算了 */ }
+  }
+}

package/lib/tool.js

@@ -0,0 +1,12 @@
+/**
+ * dsh-design-studio/tool：把 preview_page 工具挂给模型。
+ * 放在 bundle 顶层 → 所有模式都能用；放进设计模式 → 只挂在那个模式里。工具本身见 index.js 的 previewTool
+ */
+import { previewTool } from './index.js'
+
+export const name = 'dsh-design-studio-tool'
+export const inject = ['tools']
+
+export function apply(ctx) {
+  ctx.tools.register({ ...previewTool })
+}

package/locale/auto/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Open previews automatically",
+    "description": "When the model writes a design HTML file or starts a dev server, the Design Studio sidebar opens the preview on its own. Turned off, the sidebar only offers a \"Preview …\" button."
+  }
+}

package/locale/auto/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "自动打开预览",
+    "description": "模型写了设计用的 HTML、或开发服务器起来时，右侧「设计工作台」自动打开预览。关掉后只给一个「预览刚写的 …」按钮，点了才开。"
+  }
+}

package/locale/preset/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Design mode",
+    "description": "Adds a Design mode for new sessions: all of Standard mode's tools plus the design skill and live previews in the Design Studio sidebar, with a design-focused persona. Turned off, the mode leaves the list."
+  }
+}

package/locale/preset/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "设计模式",
+    "description": "新会话可以选「设计模式」：标准模式的全部工具，加上设计技能和右侧「设计工作台」实时预览，人设换成做设计的。关掉后模式列表里就没有它了。"
+  }
+}

package/locale/skill/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Design skill (other modes)",
+    "description": "Lets Standard, Creator and other modes load the ui-design skill (process, guidelines, self-check list). The Design mode has its own copy and ignores this switch."
+  }
+}

package/locale/skill/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "设计技能（其他模式）",
+    "description": "让标准、创造等其他模式也能加载 ui-design 设计技能（设计流程、规范、自查清单）。设计模式里自带，不受这个开关影响。"
+  }
+}

package/locale/tool/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Preview tool (other modes)",
+    "description": "Lets Standard, Creator and other modes use preview_page to open pages in the Design Studio sidebar. The Design mode has its own copy and ignores this switch."
+  }
+}

package/locale/tool/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "预览工具（其他模式）",
+    "description": "让标准、创造等其他模式也能用 preview_page，把页面打开到右侧「设计工作台」。设计模式里自带，不受这个开关影响。"
+  }
+}

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
+  "scripts": {
+    "test": "node --test --test-concurrency=1 test/*.mjs"
+  },
   "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / poster screens generate on a canvas with device frames, click an element to send it to the chat, tweak design tokens, compare versions, export share-ready images and scan to view on your phone.",
   "license": "MIT",
   "repository": {
@@ -19,6 +22,18 @@
   "exports": {
     ".": "./lib/index.js",
     "./client": "./lib/client.js",
+    "./auto": "./lib/auto.js",
+    "./auto/locale/*.json": "./locale/auto/*.json",
+    "./auto/icon": "./icon.svg",
+    "./tool": "./lib/tool.js",
+    "./tool/locale/*.json": "./locale/tool/*.json",
+    "./tool/icon": "./icon.svg",
+    "./skill": "./lib/skill.js",
+    "./skill/locale/*.json": "./locale/skill/*.json",
+    "./skill/icon": "./icon.svg",
+    "./preset": "./lib/preset.js",
+    "./preset/locale/*.json": "./locale/preset/*.json",
+    "./preset/icon": "./icon.svg",
     "./package.json": "./package.json",
     "./cordis.patch.yml": "./cordis.patch.yml",
     "./icon.svg": "./icon.svg",