dsh-design-studio 0.7.0 → 0.8.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.0",
+  "version": "0.8.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

@@ -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,6 +22,7 @@
    | --- | --- | --- | --- |
    | `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` 末尾 |
    | `poster` | 1080×1350（4:5），可改 1080×1920 / 1080×1080 | 卡片 | `references/poster.md` |
    | `slides` | 1280×720（16:9） | 卡片 | `references/slides.md` |
@@ -31,10 +32,10 @@
 
 2. **先写设计变量**：在设计目录建 `tokens.css`（起手模板 `tokens.css` 就在这个技能目录里，复制过去再按品牌改；有默认的品牌设计系统就复制它的 `tokens.css` 和 `components.css`），颜色、字体、字号阶梯、间距、圆角、阴影都从这里取。每屏都 `<link rel="stylesheet" href="tokens.css">`。之后要统一改风格，改这一个文件，所有屏一起变。
 
-3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写「这屏的中文名 · 产品名」（如「首页 · 梅林练」，每屏的产品名写成一样的）：画布上只显示屏名，导出整套展示图时产品名做大标题。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
+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；海报可带尺寸：poster 1080x1920 -->
    ```
 
    **几屏共用的东西只写一份**：样式放 `tokens.css` 和一个公共的 `app.css`；图标、书封这类 SVG 放进一个 `icons.svg`（每个图标一个 `<symbol id="…">`），页面里用 `<svg><use href="icons.svg#cart"></use></svg>` 引用——换风格时改一处所有屏一起变，不会漏改。状态栏、标签栏这种 HTML 结构每屏照抄一份，保持一模一样。
@@ -109,7 +110,11 @@
 
 **形状和层次**：圆角一套（如 8 / 12 / 16 / 999），同类元素圆角一致，嵌套时内圆角 = 外圆角 − 内边距。阴影最多两三档，用低透明度、大模糊、略带主色调的阴影；深色背景用亮一点的表面色区分层级，不靠阴影。
 
-**真实内容**：不要 Lorem ipsum、「标题一」「示例文字」。写像真产品的中文文案、合理的数字和价格、真实感的人名地名。图片位置用 SVG 插画、几何构图或带色块的占位，不引用外网图片（预览离线也要好看）。
+**真实内容**：不要 Lorem ipsum、「标题一」「示例文字」。写像真产品的文案、合理的数字和价格、真实感的人名地名。
+
+**界面语言跟着用户走**：用户用什么语言提需求，界面文案就用什么语言（英文提问做英文界面，中文提问做中文界面）；用户点名了语言或市场（「给日本用户」「做英文版」）就照他说的。货币、日期格式、人名地名也跟着那个市场。跟用户说话仍用他的语言。
+
+**图片**：图片位置用 SVG 插画、几何构图或带色块的占位，不引用外网图片（预览离线也要好看）。
 
 **图标**：用一套线性 SVG 图标（同样的线宽 1.75–2、圆角端点、24 网格），内联写进 HTML。不要用 emoji 当图标。
 
@@ -119,7 +124,7 @@
 
 **可访问性**：语义标签（`header` `nav` `main` `button`），图片有 `alt`，焦点样式看得见（`:focus-visible`），可点的区域至少 44×44。
 
-## 中文排版
+## 中文排版（中文界面）
 
 - 字体栈：`"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif`；数字和英文想更精致可以把 `"Inter"` / `-apple-system` 放在前面。
 - 中文不用斜体；字重用 400 / 500 / 600，标题最多 700。
@@ -127,6 +132,8 @@
 - 中文行高比英文大一点（正文 1.6–1.75）；段落之间用间距分开，不用首行缩进。
 - 标题不要一行只剩一两个字：调整宽度或用 `text-wrap: balance`。
 
+英文界面：字体把 `"Inter"` / `-apple-system` 放最前；标题大小写全套统一一种（句首大写或每词首字母大写）；正文一行 `65ch` 左右；标点用半角。
+
 ## 别有「AI 味」
 
 一眼像 AI 生成的通病，避开：
@@ -145,7 +152,7 @@
 - [ ] 一屏只有一个焦点；主按钮只有一个
 - [ ] 间距都是 4 / 8 的倍数，同类元素间距一致，左边缘对齐
 - [ ] 正文对比度 ≥ 4.5:1，灰字没有太浅
-- [ ] 文案是真实的中文内容，没有占位文字、没有错别字
+- [ ] 文案是真实内容、用的是用户的语言，没有占位文字、没有错别字
 - [ ] 图标同一套风格，没有 emoji 图标
 - [ ] 画幅对：App 留出顶部 54px 状态栏和底部 34px 横条；海报 / 幻灯片内容在安全区内不溢出
 - [ ] 文字没有被截断、没有伸出框、没有叠在一起；页面没有比屏幕宽；滚到底最后的内容没被底栏压住（`check_design` 实测这几项）

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

@@ -0,0 +1,27 @@
+# 微信小程序（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。
+
+## 结构和组件（照微信的规矩）
+
+- **标签栏（tabBar）**：2–5 项，图标 + 文字（10–12px），高 50 + 底部安全区（预览手机 34），当前项用主色。只有一级页面有；二级页面没有标签栏，左上角是返回箭头。
+- **首页的导航栏**可以自己画（自定义导航）：放品牌名或搜索框，搜索框只到胶囊左边。
+- **按钮**：一屏一个主按钮，高 44–48，圆角 8 或全圆；底部固定的操作栏放「客服 / 购物车 + 主按钮」。微信绿 #07C160 只在用户要「微信风格」或支付确认时用，别默认拿它当主色。
+- **弹层**：底部弹出的操作菜单；居中的对话框（标题 + 一两句话 + 「取消 / 确定」两个按钮，确定在右）；toast 居中，带图标。
+- **登录授权**：「微信一键登录」「手机号快捷登录」按钮，旁边给一个「暂不登录」。
+- **分享、更多**：胶囊里已经有「···」，页面里不用再放「更多」菜单。
+- 列表、表单、点击区（至少 44×44）同 App，见 `app.md`。
+
+## 常见的一套
+
+首页（搜索 + 图标宫格 + 推荐列表）→ 分类或列表 → 详情（底部固定操作栏）→ 下单或表单 → 支付结果 → 我的（头像昵称卡片、一排订单入口、设置列表）。几屏共用一套导航栏、标签栏和卡片样式，写进 `app.css`。
+
+## 字体
+
+系统字体：`-apple-system, "PingFang SC", "Helvetica Neue", sans-serif`。正文 15–16px，说明 12–13px，最小 10px。