dsh-design-studio 0.6.0 → 0.6.2

package/README.en.md

@@ -19,7 +19,7 @@
 >
 > **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.
+> **Install:** on the DSH Plugins page, click Add plugin and enter `dsh-design-studio` (an npm package), 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.
 
@@ -35,13 +35,19 @@ The exported showcase, straight from the plugin with no editing:
 
 ## Install
 
-```sh
-dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz
+On the DSH Plugins page, click **Add plugin** and enter the package name:
+
+```
+dsh-design-studio
 ```
 
+It is an npm package. When DSH installs by package name and can't reach the official npm registry, it falls back to the npmmirror mirror in China, so GitHub is never needed. You can also enter the release tarball `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`, which needs GitHub access.
+
 **Restart DSH** after installing, because client code is bundled when DSH starts. The plugin is listed as 设计工作台 / Design Studio on the Plugins page.
 
-For development, link a local checkout with `dsh plugin --profile desktop add link:/path/to/dsh-design-studio`. Client changes still need a restart. `lib/picker.js` is served fresh on every request, so it doesn't.
+**Updating:** uninstall it on the Plugins page and add it again. A new version can be installed by package name about a day after release, because the pnpm that DSH uses skips brand-new versions by default. To get it right away, use the release tarball.
+
+For development, enter the absolute path of a local checkout under **Add plugin**; it installs as a `link:`. Client changes still need a restart. `lib/picker.js` is served fresh on every request, so it doesn't.
 
 ## What it does
 

package/README.md

@@ -19,7 +19,7 @@
 >
 > **什么时候用**：「做个落地页」「设计一个 App 界面」「做张海报」「做几页幻灯片」。新会话可以直接选「设计模式」。
 >
-> **安装**：`dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`，重启 DSH。
+> **安装**：DSH「插件」页 →「添加插件」，填 `dsh-design-studio`（npm 包，连不上 npm 会自动换国内镜像），重启 DSH。
 
 让 DSH（DeepSeek Harness）做界面设计时像 Google Stitch / Claude Code 桌面端那样：模型做网页、App 界面、海报、幻灯片时，右侧栏「设计工作台」实时显示——一屏一屏生成出来，在画布上并排摆好，套上手机 / 浏览器外框；看到哪里不对，点一下那个元素、或拖出一块区域，它就整理成一段文字放进输入框，补一句「改成橙色」发出去，模型照着源码改，改过的地方在预览里闪一下。
 
@@ -35,13 +35,19 @@
 
 ## 安装
 
-```sh
-dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz
+在 DSH「插件」页点「添加插件」，填包名：
+
+```
+dsh-design-studio
 ```
 
+这是 npm 包：按包名装时，DSH 连不上 npm 官方源会自动改用国内镜像（npmmirror），不经过 GitHub。也可以填发布包地址 `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`，那样要能连上 GitHub。
+
 装完**重启 DSH**（客户端代码在 DSH 启动时打包）。DSH「插件」页里显示为「设计工作台」。
 
-开发时可以直接链到本地目录：`dsh plugin --profile desktop add link:/path/to/dsh-design-studio`，改了客户端代码同样要重启（`lib/picker.js` 每次现给，不用重启）。
+**更新**：在「插件」页把它卸载，再按上面添加一次。新版发布后大约一天按包名才装得到（DSH 装插件用的 pnpm 默认不装刚发布的版本），急的话填发布包地址。
+
+开发时可以直接链到本地目录：在「添加插件」里填本仓库的绝对路径，装上的是 `link:`，改了客户端代码同样要重启（`lib/picker.js` 每次现给，不用重启）。
 
 ## 用起来是什么样
 

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Design Studio",
-    "description": "A design workbench in the right sidebar: web, app and poster screens generate on a canvas inside device frames; click an element to have the model change it, tweak design tokens across every screen, compare and roll back versions, export share-ready images, and scan a QR code to view it on your phone."
+    "description": "A design workbench in the right sidebar: web, app and poster screens generate on a canvas inside device frames; click an element to have the model change it, drag sliders to tweak design tokens across every screen, compare and roll back versions, extract a brand's design system from a website, turn a design into React / Vue / HTML code and diff it pixel by pixel, export share-ready images, and scan a QR code to view it on your phone."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "设计工作台",
-    "description": "右侧栏的设计工作台：网页、App、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，改设计变量全屏一起变，版本能对比回退，一键导出好看的展示图，扫码就能在手机上看。"
+    "description": "右侧栏的设计工作台：网页、App、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
   }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.",
+  "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 with sliders, compare versions, extract a brand's design system from a site, turn a design into React / Vue / HTML code checked pixel by pixel, export share-ready images and scan to view on your phone.",
   "license": "MIT",
   "repository": {
     "type": "git",