dsh-design-studio 0.7.1 → 0.9.0

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, 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."
+    "description": "A design workbench in the right sidebar: web, app, mini program 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、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
+    "description": "右侧栏的设计工作台：网页、App、小程序、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
   }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.7.1",
+  "version": "0.9.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 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.",
+  "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / mini program / 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",

package/skills/ui-design/SKILL.md

@@ -1,6 +1,6 @@
 # 界面设计（配合右侧「设计工作台」）
 
-做网页、App 界面、平板界面、海报 / 社媒图、幻灯片、邮件、组件这类**看得见的设计**时照这份来。目标：一眼看上去像专业设计师做的，不像模板，也没有「AI 味」。
+做网页、App 界面、微信小程序、平板界面、桌面软件、海报 / 社媒图、幻灯片、邮件、组件这类**看得见的设计**时照这份来。目标：一眼看上去像专业设计师做的，不像模板，也没有「AI 味」。
 
 > 不归这里管：用户只是要把回答做成一页看或用（对比、表格、清单、图表、计算器、学习卡片），而你有 `show_page` 工具——直接调 `show_page`，不用这份流程、不写文件、不开预览。
 
@@ -10,7 +10,7 @@
 
    - **什么时候跳过**：改已有的设计；用户说了「直接做」「不用问」；或者需求已经够具体（做什么、给谁用、什么风格或配色、要哪几屏都说了）。这时不问、也不出三个方向，第一句话说清你按什么理解开工（「按温暖手作风格做首页、详情、购物车三屏」），直接从第 1 步做全套。拿不准算不算够具体，就只问缺的那一两项。
 
-   - **问**：只问最关键的两三个问题，一次问完：给谁用、想要什么感觉（给三个具体选项，从工作台的风格卡里挑最合场景的三个：极简白、温暖手作、杂志编辑、深色高级、活泼年轻、清新自然、专业科技、玻璃质感、柔和立体）、有没有必须有的内容或品牌色。有 `ask_user_question` 工具就用它问（带选项），没有就在回复里问完、停下等回答。用户说「你定」就按场景替他定。
+   - **问**：只问最关键的两三个问题，一次问完：给谁用、想要什么感觉（给三个具体选项，从工作台的风格卡里挑最合场景的三个：极简白、温暖手作、杂志编辑、深色高级、活泼年轻、清新自然、专业科技、玻璃质感、柔和立体、国潮、中式雅致、赛博朋克、可爱卡通、复古、电商促销、日系原木、瑞士网格、粗野主义、奶油风、运动能量）、有没有必须有的内容或品牌色。有 `ask_user_question` 工具就用它问（带选项），没有就在回复里问完、停下等回答。用户说「你定」就按场景替他定。
    - **用户有默认的品牌设计系统**（这份技能末尾「设计系统」一节写着）：感觉已经定了，照那一节做，不问感觉、不推风格卡。
    - **用户点了风格卡**（消息以〔风格〕开头，带着配色、字体、形状和要点）：感觉已经定了，不用再问感觉，只问还缺的（给谁用、必须有的内容）；三个方向都按这套配色和字体来，在版式和信息重点上拉开。
    - **出三个方向**：先只做最能代表这套设计的一屏（通常是首页或封面），做三个明显不同的方向：`home-a.html`、`home-b.html`、`home-c.html`。用户已经挑了感觉（比如「温暖手作」），三个方向就都在这个感觉里拉开：版式、信息重点、字体搭配、配色深浅各不相同（比如「大图海报式 / 卡片列表式 / 一步下单式」），不要再出两个他没选的风格；没挑或说「你定」，三个方向就是三种不同的感觉。不管哪种，都不是同一个版式换颜色。这时还不建 `tokens.css`，每个方向的设计变量写在自己文件的 `<style>` 里（`:root{…}`）。`<title>` 写成「方向 A · 温暖手作」这样，画布上一眼分得清。写完第一个就调 `preview_page`，另外两个会并排出现。
@@ -22,7 +22,9 @@
    | --- | --- | --- | --- |
    | `web` | 1280×800 起，自适应 | 浏览器窗口 | `references/web.md` |
    | `app` | 390×844（iPhone） | 手机 + 灵动岛 | `references/app.md` |
+   | `miniprogram` | 375×812（微信小程序） | 手机 + 右上角胶囊 | `references/miniprogram.md` |
    | `tablet` | 820×1180 | 平板 | `references/app.md` 末尾 |
+   | `desktop` | 1280×800（Mac / Windows 软件窗口） | 窗口 + 左上角红绿灯（Windows 是右上角三个按钮） | `references/desktop.md` |
    | `poster` | 1080×1350（4:5），可改 1080×1920 / 1080×1080 | 卡片 | `references/poster.md` |
    | `slides` | 1280×720（16:9） | 卡片 | `references/slides.md` |
    | `email` | 600 宽 | 卡片 | `references/email.md` |
@@ -34,7 +36,7 @@
 3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写「屏名 · 产品名」，用界面的语言（如「首页 · 梅林练」「Home · Pedal」，每屏的产品名写成一样的）：画布上只显示屏名，导出整套展示图时产品名做大标题。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
 
    ```html
-   <meta name="dsh-design" content="app">          <!-- 类型；海报可带尺寸：poster 1080x1920 -->
+   <meta name="dsh-design" content="app">          <!-- 类型；小程序写 miniprogram；Windows 软件写 desktop windows；海报可带尺寸：poster 1080x1920 -->
    ```
 
    **几屏共用的东西只写一份**：样式放 `tokens.css` 和一个公共的 `app.css`；图标、书封这类 SVG 放进一个 `icons.svg`（每个图标一个 `<symbol id="…">`），页面里用 `<svg><use href="icons.svg#cart"></use></svg>` 引用——换风格时改一处所有屏一起变，不会漏改。状态栏、标签栏这种 HTML 结构每屏照抄一份，保持一模一样。

package/skills/ui-design/references/app.md

@@ -4,7 +4,7 @@
 
 - 手机按 390×844（iPhone 15/16）设计，页面宽度跟着视口走（`width: 100%`），不要居中一个小盒子。`<meta name="viewport" content="width=device-width,initial-scale=1">`。别写死 `width: 390px`、也别给 body 加 `max-width` 再居中：工作台已经按 390 宽显示、套好手机外框，多尺寸视图还会拿 375 / 430 宽来看，写死就露馅。也别为了这个另开浏览器截图——要检查就调 `check_design`。
 - 顶部 54px 是状态栏 + 灵动岛：自己画一条状态栏（时间 9:41、信号、电量），中间空着——灵动岛预览的外框会画，页面里别再画一个（不然换尺寸看时会出现两个）。内容从 54px 以下开始。
-- 底部 34px 是横条（home indicator）区：底部的标签栏 / 按钮要把它让出来（标签栏总高约 83px）。
+- 底部 34px 是横条（home indicator）区：底部的标签栏 / 按钮要把它让出来（标签栏总高约 83px = 49 + 34）。设计稿里写死 34px：预览里 `env(safe-area-inset-bottom)` 是 0，靠它让不出来；做成真代码时再换成 `env()`。体检会报「伸进底部横条区」。
 - 左右边距 16–24px；卡片之间 12–16px。
 
 ## 结构和组件

package/skills/ui-design/references/desktop.md

@@ -0,0 +1,24 @@
+# 桌面软件（kind: desktop）
+
+## 画幅
+
+- 按 1280×800 设计（窗口里面那块），宽高都跟着视口走（`width: 100%`、整页 `height: 100vh`）：多尺寸视图还会拿 1024×680、1440×900 来看。每屏 `<head>` 写 `<meta name="dsh-design" content="desktop">`；做 Windows 软件写 `content="desktop windows"`（不写是 Mac）。
+- **窗口按钮是外框画的**，盖在页面上面，页面里别再画：
+  - Mac：左上角红绿灯，三个 12px 圆点在 x 20–72、y 20–32。顶部 52px 是工具栏（标题栏和工具栏合一），红绿灯在它左边；有侧栏时红绿灯压在侧栏顶上，侧栏顶部空出 52。标题、搜索、按钮放工具栏里、x 80 以后。
+  - Windows：右上角最小化 / 最大化 / 关闭，共 138×32。顶部 32–48px 标题栏：左边应用图标 + 名字，右边空出 138。
+  - 这两块别放字和按钮，体检会报「被窗口按钮挡住」。顶栏是深色时，Windows 的按钮自动画白的（判断不准就在 `<head>` 加 `<meta name="dsh-capsule" content="white">` 或 `black`）。
+- Mac 的菜单栏在屏幕最上面、不在窗口里，别画；Windows 传统软件可以在标题栏下画一行菜单（文件 编辑 视图…）。
+
+## 结构和组件
+
+- **布局**：左侧栏（220–260，导航、文件夹、账户）+ 主区；要看列表和内容就三栏：侧栏 + 列表（280–360）+ 详情。栏之间 1px 分隔线，侧栏底色比主区略深或半透明。
+- **整个窗口不滚**：侧栏、列表、详情各自滚（`overflow: auto`），工具栏和底部状态栏（可选，24px）一直在。
+- **比手机密**：正文 13px（Mac）/ 14px（Windows），说明 11–12px；列表行高 28–36，按钮、输入框高 28–32，工具栏图标按钮 28×28；鼠标用，不用 44 的点击区。
+- **桌面的规矩**：悬停有反馈（行变浅色底）；选中行用主色底或主色左边条；常用操作在菜单项右边写快捷键（Mac `⌘N`，Windows `Ctrl+N`）；右键菜单、多选、拖拽排序这类可以画出来。
+- **弹窗**：Mac 的 sheet 从工具栏下面滑出，按钮在右下「取消 / 好」（默认按钮主色）；Windows 对话框按钮在右下「确定 / 取消」。设置页用侧边分组 + 右边表单，不用一屏一个。
+- **空状态、首次打开**：一张简单插画 + 一句说明 + 一个主按钮（「新建文档」）。
+
+## 平台风格
+
+- Mac（默认）：`-apple-system, "SF Pro Text", "PingFang SC", sans-serif`；圆角 6–10，控件浅灰底，强调色只给选中和主按钮；侧栏可以半透明（`backdrop-filter`）。
+- Windows 11：`"Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif`；窗口底浅灰（云母）、卡片白底、圆角 4–8，主按钮实色，图标线条风格。

package/skills/ui-design/references/miniprogram.md

@@ -0,0 +1,63 @@
+# 微信小程序（kind: miniprogram）
+
+## 画幅
+
+- 按 375×812 设计（微信的 750rpx 就是 375px 宽），每屏 `<head>` 写 `<meta name="dsh-design" content="miniprogram">`。页面宽度跟着视口走（`width: 100%`），viewport 和 App 一样；别写死 375：多尺寸视图还会拿 375×667、414×896 来看。
+- 下面的数字都是**这台预览手机（375×812，带灵动岛）**的：设计稿照它画就行；真机上状态栏高、胶囊位置、底部安全区每台都不一样，写交付代码时按 `wx.getWindowInfo()`（状态栏高、安全区）、`wx.getMenuButtonBoundingClientRect()`（胶囊）和 `env(safe-area-inset-bottom)` 算，别写死。
+- 顶部 88px = 状态栏 44 + 导航栏 44。状态栏自己画（时间 9:41、信号、电量），中间空着——灵动岛外框会画。导航栏：17px 标题居中，二级页面左边加返回箭头；底色用白色或品牌色。
+- **右上角的胶囊**（「···」和关闭圈，87×32，离顶 48、离右 7）是微信画在页面上面的，每个页面都有、盖不住。工作台外框会画它，页面里别画。导航栏右边空出 101px，搜索框、按钮、头像都放到左边或导航栏下面；体检会报「被小程序胶囊挡住」。顶栏是深色时，外框自动画白色胶囊；顶栏是图片或渐变、判断不准时，在 `<head>` 加 `<meta name="dsh-capsule" content="white">`（或 `black`）指定，和微信页面配置里的 `navigationBarTextStyle` 一样。
+- 底部 34px 是这台预览手机的安全区（横条）：设计稿里标签栏、底部操作栏让出 34px（预览里 `env(safe-area-inset-bottom)` 是 0，不能靠它）。做成真小程序时换成 `env(safe-area-inset-bottom)`，没横条的手机是 0。
+
+## 骨架（先抄进 `app.css`，再按品牌改颜色）
+
+顶部 88、标签栏 84 这些数字照这台预览手机来，几屏共用，别每屏各写一套：
+
+```css
+.mp-top{position:sticky;top:0;z-index:10;background:var(--nav-bg,#fff)}            /* 状态栏 + 导航栏，共 88 */
+.mp-status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 32px;font:600 15px/1 -apple-system,"PingFang SC",sans-serif}
+.mp-nav{position:relative;height:44px;display:flex;align-items:center;justify-content:center;padding:0 101px} /* 右边 101 让给胶囊，左边也空 101，标题才在正中 */
+.mp-nav h1{margin:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mp-nav.custom{justify-content:flex-start;padding-left:16px}                      /* 首页自定义导航：品牌 / 搜索靠左，右边照样让 101 */
+.mp-back{position:absolute;left:4px;top:0;width:44px;height:44px;display:grid;place-items:center}
+.mp-tabbar{position:fixed;left:0;right:0;bottom:0;height:84px;padding-bottom:34px;box-sizing:border-box;display:flex;background:#fff;border-top:.5px solid rgba(0,0,0,.12)}
+.mp-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:#6E7277;text-decoration:none}
+.mp-tabbar a.on{color:var(--color-primary)}
+.mp-tabbar svg{width:24px;height:24px}
+.mp-page{padding:0 16px 100px}                                                      /* 有标签栏的页：底部让出 84 + 16 */
+.mp-actionbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:12px;padding:8px 16px 42px;background:#fff;box-shadow:0 -.5px 0 rgba(0,0,0,.12)}
+```
+
+```html
+<header class="mp-top">
+  <div class="mp-status"><span>9:41</span><span>信号 · 电量图标</span></div>
+  <div class="mp-nav"><a class="mp-back" href="list.html">返回图标</a><h1>商品详情</h1></div>
+</header>
+<main class="mp-page">…</main>
+<nav class="mp-tabbar"><a class="on" href="index.html">图标<span>首页</span></a>…</nav>
+```
+
+- **一级页**（标签栏里的那几页）：有标签栏、没有返回；首页可以用 `.mp-nav.custom` 放品牌或搜索。**二级页**：标题居中、左边返回、没有标签栏，底部要操作就用 `.mp-actionbar`。从分享卡片直接打开的二级页，返回换成「回首页」小房子。
+- 默认导航栏只能是**纯色底 + 黑或白的标题**（微信的 `navigationBarBackgroundColor` / `navigationBarTextStyle`），胶囊跟着标题一个颜色；渐变、图片顶栏要用自定义导航（`navigationStyle: custom`），内容和胶囊竖直居中对齐（中线 y 64）。
+- 体检会报：被胶囊挡住、被灵动岛挡住、底栏伸进横条区、标签栏超过 5 项、这屏没有导航栏。
+
+## 结构和组件（照微信的规矩）
+
+- **标签栏（tabBar）**：2–5 项，图标 + 文字（10–12px），高 50 + 底部安全区（预览手机 34），当前项用主色。只有一级页面有；二级页面没有标签栏，左上角是返回箭头。
+- **首页的导航栏**可以自己画（自定义导航）：放品牌名或搜索框，搜索框只到胶囊左边。
+- **按钮**：一屏一个主按钮，高 44–48，圆角 8 或全圆；底部固定的操作栏放「客服 / 购物车 + 主按钮」。微信绿 #07C160 只在用户要「微信风格」或支付确认时用，别默认拿它当主色。
+- **弹层**：底部弹出的操作菜单；居中的对话框（标题 + 一两句话 + 「取消 / 确定」两个按钮，确定在右）；toast 居中，带图标。
+- **登录授权**：「微信一键登录」「手机号快捷登录」按钮，旁边给一个「暂不登录」。
+- **分享、更多**：胶囊里已经有「···」，页面里不用再放「更多」菜单。
+- 列表、表单、点击区（至少 44×44）同 App，见 `app.md`。
+
+## 微信原生风格（用户要「像微信」「原生」「WeUI」时）
+
+底 #EDEDED、卡片和列表白底；字 rgba(0,0,0,.9)，说明 rgba(0,0,0,.55)；主色 #07C160，危险 #FA5151，链接 #576B95。列表行（cell）最少 56 高、左右 16、分隔线 0.5px 从左边 16 起；分组之间空 8。主按钮 17px、高 48、圆角 8、宽 184 居中（底部操作区可以通栏）。对话框：标题 17 粗、正文 15 灰，「取消」灰、「确定」绿在右。
+
+## 常见的一套
+
+首页（搜索 + 图标宫格 + 推荐列表）→ 分类或列表 → 详情（底部固定操作栏）→ 下单或表单 → 支付结果 → 我的（头像昵称卡片、一排订单入口、设置列表）。几屏共用一套导航栏、标签栏和卡片样式，写进 `app.css`。
+
+## 字体
+
+系统字体：`-apple-system, "PingFang SC", "Helvetica Neue", sans-serif`。正文 15–16px，说明 12–13px，最小 10px。