DSH | 设计工作台 dsh-design-studio | 模型画的界面摆上画布，点一下就改

[OrderG-X]

让模型做网页、App、海报、幻灯片，一屏一屏摆在画布上，套好手机 / 浏览器外框；看到哪里不对，点一下那个元素（或拖出一块区域），补一句「改成橙色」发出去就行。

• 每轮自动存一版，能左右拖动对比，随时回到某一版
• 一键导出展示图（单屏、长图、几屏合成一张），直接能发
• 手机扫码看真机效果（和电脑连同一个 Wi-Fi）

dsh-design-studio

装法：DSH 侧栏 → 插件 → 添加插件 → 填上面的包名，装完重启 DSH。按包名装时连不上 npm 会自动换国内镜像。

源码：https://github.com/OrderG-X/dsh-design-studio · MIT

[OrderG-X]

0.5.0 更新：模型画完界面，自己体检、自己看图

• check_design：在本机一个看不见的 Chrome / Edge 里按真实尺寸量每一屏，一次能量几种尺寸、也能量深色。新查底栏 / 顶栏压住内容、脚本报错、资源没载到、死链。
• 附局部截图：严重的问题自动截那一块，红框圈出元素、标出差多少；文字叠在一起时给出可能的原因。
• 写明规则和行号：对比度、字号、叠字的问题写明由哪条样式决定、在哪个文件第几行。
• look_design：模型要看真实效果时直接截图，不用自己起服务器、写截图脚本。
• 还有：导出 PDF / PPT（跳转照样能点）、调样式面板、九套风格卡、从手机远程打开也能看。

Version 0.5.0: check_design now measures every screen at real sizes in a hidden local Chrome / Edge, attaches cropped screenshots of serious problems, and points to the CSS rule and line. New look_design gives the model real screenshots. Also PDF / PPTX export, a style panel and nine style presets.

更新：DSH 侧栏 → 插件，把它卸载后再「添加插件」填 dsh-design-studio，重启 DSH。

[OrderG-X]

0.6.0 更新：照品牌做设计、调节滑块、一键转成代码

• 提取品牌设计系统：新工具 extract_design_system，给官网地址、项目文件夹或 HTML 文件，提出按角色的配色、字体、字号阶梯、圆角、阴影，和按钮 / 输入框 / 卡片的样子，附一张样张。设成默认后，以后做新设计都照它来。
• 专属调节滑块：模型给每套设计写一份 tweaks.json（留白、圆角、主色、版式几选一），右侧栏拖动时所有屏一起变，满意了一键写回样式文件，自动存一版。
• 一键转成真代码：handoff_design 写交接包（每屏截图、路由、设计变量、该抽的组件），模型照着用 React / Vue / Next.js / 纯 HTML 做；compare_design 把做出来的本机页面和设计稿逐像素比，标出差在哪、是哪个元素，差异降到 3% 以下再做下一屏。

Version 0.6.0: extract_design_system builds a brand design system from your website or project and makes it the default for new designs. Tweak sliders let you adjust spacing, radius, brand color and layout variants live, then write them back to the stylesheet. handoff_design and compare_design turn the design into React / Vue / Next.js / HTML code and diff each built screen against the design pixel by pixel.

更新：DSH 侧栏 → 插件，把它卸载后再「添加插件」填 dsh-design-studio，重启 DSH。

[OrderG-X]

0.7.0 更新：原型连线重画、新手更顺手

• 原型连线重画：选中一屏只画它能跳去哪；线从按钮出发，沿屏和屏之间的空当横平竖直走，转角圆角，几条线各走各的道、不交叉、不穿过别的屏；底栏、返回这种每屏都有的导航只描虚线框。
• 6 屏以上预览照常刷新：以前每屏各开一条连接，到 6 屏就把浏览器占满，模型改完右侧还是旧的；现在右侧栏统一转告改动。
• 「✓ 就要这个」：几个方向并排时每屏标题旁都有。
• 空白页三句示例：点一下放进输入框，回车就发。
• 点选后接着打字另起一行；右侧栏拉宽后画布自动变成更多列；导出的图里图标不再是空的。

Version 0.7.0: prototype flow lines are redrawn — only where the selected screen leads, routed through the gaps with rounded corners and no crossings; tab bars and back buttons get a dashed outline. Previews keep refreshing past 6 screens, "Use this" sits next to every option, and the empty state offers three example prompts.

更新：在 DSH「插件」页卸载后按包名 dsh-design-studio 再添加一次（新版发布约一天后按包名才装得到）。

[OrderG-X]

0.8.0 更新：做微信小程序 + 风格卡 15 张

• 微信小程序：新类型「小程序」（375×812），画布和导出的图都画上微信右上角的胶囊；顶栏是深色时胶囊自动变白。体检会查出被胶囊挡住的字和按钮。说「做个小程序」模型就按小程序的规矩来：给胶囊留位置、底部 tabBar、安全区。
• 风格卡 9 → 15 张：新增国潮、中式雅致、赛博朋克、可爱卡通、复古、电商促销。
• 体检对比度更准：按字下面实际画着的东西算，半透明层、叠放顺序、吸顶 / 固定的底、还没滚到的字都算对了。

Version 0.8.0 adds a WeChat mini program type: the canvas and exports draw the WeChat capsule, which turns white over a dark top bar, and the design check flags text and buttons hidden under it. Six new style cards (15 in all), and contrast checks now use what is really painted behind the text.

更新：在 DSH「插件」页卸载后按包名 dsh-design-studio 再添加一次（新版发布约一天后按包名才装得到）。