dsh-design-studio 0.3.2 → 0.3.3

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)
@@ -84,6 +90,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)
@@ -138,6 +144,10 @@ node test/test-phone.mjs   # 手机上看：二维码结构、挑网卡、补 vi
 
 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」 · 把这个距离文字改成绿色…」；先打字再点选时，选中的内容另起一行，不再粘在那句话后面；多尺寸里的小屏不再画灵动岛；提示条和顶上的提示消息不再叠在一起。
 
+## 反馈
+
+遇到问题或想要新功能，[提一个 issue](https://github.com/OrderG-X/dsh-design-studio/issues/new/choose)。报问题时写上 DSH 版本和插件版本，修起来最快。
+
 ## License
 
 MIT

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}`) }

package/lib/index.js

@@ -40,11 +40,11 @@ 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 自带的技能同一档；用户 / 项目里同名的技能优先
 

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "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": {