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

一句话：DeepSeek Harness（DSH）插件，模型做网页、App 界面、海报、幻灯片时，右侧栏画布实时显示每一屏，套上手机 / 浏览器外框；点一下元素或框一块区域，补一句话就改。每轮自动存版本，能导出展示图、PDF、PPT，手机扫码看；一键体检文字溢出、对比度、点击区。

什么时候用：「做个落地页」「设计一个 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

改一句「主色换成深海蓝」→ 三屏一起变；翻到上一版、左右拖动对比；一键导出整套展示图：

版本对比和导出

导出的展示图（插件直接生成，没有再加工）：

展示图

安装

dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz

装完重启 DSH（客户端代码在 DSH 启动时打包）。DSH「插件」页里显示为「设计工作台」。

开发时可以直接链到本地目录：dsh plugin --profile desktop add link:/path/to/dsh-design-studio，改了客户端代码同样要重启（lib/picker.js 每次现给，不用重启）。

用起来是什么样

做设计时自动打开：模型加载了设计技能、调了 preview_page，或页面写了设计类型标记（<meta name="dsh-design">）之后，再写 .html 文件或用命令起开发服务器（npm run dev 这类），右侧栏自动弹出「设计工作台」。别的任务写的网页不弹，只在标题栏按钮上亮个蓝点，点开能一键预览；curl、浏览器工具去看别的端口，一律不当成要预览的页面。
分类型显示：网页（浏览器窗口）、App（手机外框带灵动岛）、平板、海报（1080×1350）、幻灯片（16:9）、邮件。模型调工具时说明类型，或在页面里写 <meta name="dsh-design" content="app">（可带尺寸，如 poster 1080x1920）；工具栏「类型」菜单随时能换。
多屏画布：同一个目录里的几个 HTML 文件按生成顺序排成网格，能拖、能缩放（触控板双指滑 = 平移，捏合 / ⌘ 滚轮 = 缩放，右下角适合画布）。点一下选中一屏，双击只看这一屏；工具栏「画布 / 单页」切换。开发服务器可以让模型给几个路由并排看。
看着它生成：模型干活时右侧先放一个占位；新的一屏写出来，元素从上到下依次浮现，一道扫描光带过去；这一轮里还在出新屏时，画布末尾留一个「生成中…」的占位。模型用提问卡问你时，底部提示换成橙点「模型在等你回答」，不再转圈。
实时刷新，不白屏：本地 HTML 所在目录里任何文件一改，后台先载好新的一帧，再淡入换上来（滚动位置不丢）；开发服务器走它自己的热更新（Vite / Next 等的 WebSocket 照常通）。
改了哪里一眼看到：刷新 / 热更新前后各记一份页面「指纹」，改过、新加的元素在预览里亮一下（带一道扫光），都不在屏幕里就先滚过去；底下报「已更新 index.html · 1 处改动」。改的是共用的 CSS，画布上每一屏都会换帧、各自闪改动；只改某一屏的 HTML，别的屏不动。
模型在干活时：预览四周一圈流光，底下标「模型正在工作」或「正在写 style.css」。
选择：点工具栏「选择」，鼠标移到哪个元素就框哪个（带标签和尺寸，画布缩小时标签照样看得清；画布里点哪一屏都行）：
- 点一下：选这个元素
- 拖一块：选区域，里面的主要元素一起带上（最多 10 个）
- Esc：取消

进输入框：选好的内容整理成一段文字插进输入框（插不进时复制到剪贴板），选中的地方留一个虚线框，例如：

〔选中元素〕a.btn-order「立即点单 →」
文件：/Users/me/site/index.html
位置：section.hero > div.actions > a.btn-order
HTML：<a class="btn-order" href="#menu">立即点单 →</a>
样式：165×56 · color: rgb(255, 255, 255) · padding: 16px 36px · border-radius: 999px

React / Vue / Svelte 的开发模式下还会带上组件名和源码位置。

内置设计规范：插件带一个 DSH 技能 ui-design，模型做界面前会加载：先定类型和画幅、先写 tokens.css（设计变量）、一屏一个文件；排版 / 间距 / 字号阶梯 / 配色 / 对比度 / 中文排版的规则，避开「AI 味」的清单，写完的自查表；网页、App、海报、幻灯片、邮件各有细则。从零做一套新设计时，模型先问两三个关键问题（给谁用、什么气质、要哪几屏），再出三个方向的首屏（home-a/b/c.html，各带一套配色字体）并排摆在画布上，你挑一个它再做全套，没选中的挪进 drafts/（问的时候已经挑了气质，三个方向就都在这个气质里，换版式和重点）；说「直接做」、或者需求已经很具体，就跳过这一步。在输入框打 /ui-design 也能手动加载。
设计规范面板：工具栏调色板按钮，列出这套设计 :root 上的设计变量，按颜色、字体、字号、间距、圆角、阴影分组，带色块和样例。点一个放进输入框（〔设计变量〕--brand: #c26a32 加文件位置），补一句「换成墨绿」，模型改这一个变量，所有屏一起变。还没有变量时，一键让模型按规范建一份。
导出：工具栏下载按钮，或画布上选中一屏后标签旁的按钮。可以导出这一屏（带手机 / 浏览器外框，或纯画面）、整页长图，以及几屏合成的一张展示图（品牌名做大标题、背景和主色取自设计变量，适合直接发朋友圈 / 小红书 / 作品集）。也能把所有屏导成 PDF（每屏一页，网页 / 邮件是整页长图，页面尺寸跟着画幅）或 PPT（每屏一张幻灯片，整页图片，幻灯片比例跟着画幅，PowerPoint / WPS / Keynote 都能打开）。屏和屏之间的跳转照样能点：PDF 里点「去点单」翻到菜单那页（每屏还有一条书签），PPT 放映时点了跳到那一张，导出的文件就是能点的原型。文件存到设计目录的 exports/，图片同时复制到剪贴板，点「打开文件夹」直接定位。
版本：每轮对话开始前、结束后各自动存一版（只存设计文件，名字就是你那句话，例如「主色换成深海蓝」；点选元素发出去的，名字是「「3.2 km」 · 改成绿色」这样，不会是一长串选择器）。工具栏时钟按钮列出所有版本；点一版就看当时的样子（画布 / 单页都行），点「对比」左右拖动把手，比较那一版和现在；「回到这一版」把文件写回去（回之前先把现在的存一版，随时能再切回来）。
深色模式：页面写了深色样式（@media (prefers-color-scheme: dark)，或 [data-theme="dark"] / .dark），工具栏多一个月亮按钮，一键切换看深色版，导出的图片也是深色的。
再出两版：画布上选中一屏，点标签旁的闪光按钮，让模型给这一屏出两版不同方向的设计（login-b.html、login-c.html），紧挨着原版排在画布上（开局的三个方向 home-a/b/c 也一样，按 a、b、c 排）。挑中哪版就点它标签旁的对勾「就要这个」：输入框里写好「用这一版、其他版本挪进 drafts/、接着做全套」，发出去就行。
在手机上看：工具栏扫码按钮，右侧栏出一个二维码，手机（和电脑连同一个 Wi-Fi）相机一扫就在手机浏览器里打开这套设计，按真机尺寸看、点得动。电脑上点哪一屏，手机跟着跳；模型改了设计，手机自动刷新。面板上看得到「手机已打开」，也能复制链接、随时停止；30 分钟没人看自动关。
可点原型：屏和屏之间用链接连起来（<a href="detail.html"> 或 data-href，内置技能会让模型这么写），画布上选中一屏，就画出它跳去哪、从哪跳来的箭头；隔着别的屏的箭头从屏和屏之间的空当、标题上面绕过去，不穿过中间那屏。点工具栏播放按钮进入演示：在预览里点按钮跳到对应那一屏，前进从右边滑进来、返回从左边；顶上能后退、从头来、退出（Esc）。
多尺寸并排：工具栏第三个视图按钮，把现在这一屏按几档宽度并排看：网页是手机 / 平板 / 桌面，App 是小屏 / 标准 / 大屏（小屏是 SE 那种矮屏，没有灵动岛），平板是三种尺寸，小屏挤不挤一眼看出来。并排时也能选择元素，带上是哪一档屏宽。
预览里直接改字：工具栏「改字」按钮，点页面里的任意文字就地改，回车保存、Esc 取消。本地 HTML 直接写回源文件（只改那一处，改前改后各存一版，能回退）；开发服务器的页面，或源码里找不到那段字时，改成一句「把「…」改成「…」」放进输入框，交给模型改。
参考图：把图片拖进右侧栏、在右侧栏里粘贴，或在设计规范面板点「照参考图改风格…」。图片存进设计目录的 refs/（还没有设计目录时存插件缓存），右侧栏从图里取出主要颜色（带占比，少见的鲜艳点缀色也会单独挑出来）和整体深浅，连同图片路径和一句「照这张图的风格改，先更新 tokens.css」放进输入框。
设计体检：工具栏听诊器按钮，在画好的页面上实测：文字超出屏幕、被截断、超出框、叠在一起，文字和背景对比度不够（按 WCAG，大字 3:1、正文 4.5:1），点击区太小（App 44、网页 24），字太小，图片没加载出来或被拉变形，一行太长（网页 / 邮件 / 平板，中文超过约 45 字、英文约 90 个字母），按钮、价格这种短字被挤得断了行（「再来一 / 单」），字号太杂。画布上每一屏都查，问题按屏列出来，预览里在对应位置标上编号（严重的标红）；点一条就滚过去闪一下。点「交给模型修」，清单（哪一屏、哪个元素、什么问题、差多少）放进输入框，发出去模型逐条改源文件。模型每干完一轮，右侧会自己量一遍：面板开着就直接刷新，关着就在按钮上标出还剩几个问题（没有数字就是都好了）。点一条时，那一屏要是被面板挡着或在画布外面，画布自己挪过来。模型自己也能体检：设计模式里它写完、改完会调 check_design——插件在电脑上另开一个看不见的 Chrome / Edge，按真实尺寸打开每一屏量一遍（一次可以量几种尺寸，比如 375×667 的矮屏和 430×932 的大屏，也能量深色），清单里还有每屏的测量数字：页面多高、顶栏 / 底栏多高、离内容多远。这条路另外查四类问题：固定的顶栏 / 底栏压住了内容或贴得太近（滚到底最后一行被底栏挡住这种；滚动中从栏下面经过不算）、页面脚本报错、样式表 / 脚本 / 字体没载到、跳转指向不存在的页面。对比度不够、字太小这两类还写明由哪条样式规则决定、在哪个文件第几行；严重的问题（被栏压住、文字叠在一起 / 被截断 / 超出框、超出屏幕、图片没出来、对比度很低）自动附上那一块的局部截图（最多 4 张，按发现时的尺寸和滚动位置截；红框圈出元素、框上标差多少，叠着的另一个用橙框；被栏压住的把栏调成半透明，透出下面的字；挨着的几条共用一张），模型不用再单独截图对照。文字叠在一起时还找出可能的原因（负 margin、绝对定位、transform），写明那条规则在哪个文件第几行；同一个原因引起的几处并成一条。再量一次时写「比上次修好几个、新出几个」，新出的标出来；有没量成的就明说检查不完整。不用右侧栏开着；电脑上没有 Chrome / Edge 时退回右侧栏量。
调样式：工具栏滑块按钮，点页面里的一个元素，右边出属性面板：字号、字重、文字颜色、背景、圆角、上下 / 左右内边距（排成一行 / 一列的容器还有间距）。拖滑块页面上马上变；颜色旁边列着这套设计的色块，元素原来用的是设计变量（如 --brand）会标出来。「写回文件」把改动写进 HTML 里这个元素的 style 属性（改前改后各存一版，能回退）；「交给模型」把「字号 16px → 18px」这样的清单放进输入框，让模型写进样式表、能用设计变量就用设计变量；还附上每项现在由哪条样式规则决定、在哪个文件第几行（行内 style 盖过了规则也说清楚），模型不用再翻源码找。没写回就退出，页面恢复原样。开发服务器的页面只能交给模型。
风格卡：九套现成风格——极简白、温暖手作、杂志编辑、深色高级、活泼年轻、清新自然、专业科技、玻璃质感、柔和立体，每张卡是一套配色、字体、圆角、阴影的小样。还没开始设计时，空白页上点一张，输入框里写好〔风格〕和整套配色，再补一句要做什么；已经有设计了，在设计规范面板点「换个风格…」，模型先改 tokens.css，再把写死的颜色换掉，版式和文字不动，改完自己体检一遍。
远程也能看：从手机（dsh-mobile 走外网）或别的电脑打开 DSH 网页时，电脑本机的预览端口那边连不上。本地 HTML 做的设计，插件把一屏连同样式、脚本、图片打成一份传过去，放进沙盒 iframe 显示，选择、改字、调样式、体检、导出照样能用；页面里点跳转就换到那一屏，文件改了跟着刷新（只刷用到这个文件的屏）。开发服务器的页面打包不了，还是只给一句说明。
模型自己看图：模型想看真实渲染的样子时调 look_design：同样用那个看不见的浏览器，按指定尺寸截一屏——顶上一屏、滚到底、整页分几段，或者只截某个元素（比如底栏），也能截深色——图直接交给模型看。不用自己起服务器、写截图脚本。
品牌设计系统：给一个网站地址或项目文件夹（「照我们官网的风格」），模型调 extract_design_system，插件用看不见的浏览器打开网页量真实渲染的样式——底色、正文和次要文字、主色、点睛色、边框，字体和字号阶梯，圆角、阴影，主按钮 / 次按钮 / 输入框 / 卡片 / 顶栏的样子——项目文件夹还会扫 CSS 变量、写死的颜色、Tailwind 配置和组件库。提出来的是一整套文件：tokens.css（和技能起手模板同一套变量名）、components.css（按钮、输入框、卡片、文字样式）、components.html 样张、DESIGN.md 说明，连同网站和组件截图存进 ~/.dsh/design-systems/<品牌>/。设成默认后，以后每次做新设计模型都先复制这一套，不再问「想要什么感觉」，三个方向只在版式上拉开。右侧栏设计规范面板里「品牌设计系统…」（窄的时候在「更多」里）列出所有套，带样张缩略图和色块，能设默认、取消默认、一键套用到当前设计，也能直接填地址让模型提一套。
调节滑块：模型给这套设计挑几个最值得试的维度（留白疏密、圆角、主色、卡片排法……）写进 tweaks.json，工具栏旋钮按钮列成滑块、取色、几选一；拖的时候画布上每一屏一起变（只改页面上的 CSS 变量和 <html> 上的属性，不动文件），满意了「写回文件」（变量写进 tokens.css 的默认值，属性写到每屏的 <html> 上，改前改后各存一版），或「交给模型」照这几个值改、顺手协调相关的地方。还没有滑块时一键让模型做几个；check_design 会顺带查滑块有没有真接上（变量没人用、没有默认值、选项没有对应的样式）。
转成代码：工具栏 </> 按钮，选用什么做（跟现有项目一样 / React / Vue / Next.js / 纯 HTML）、代码放哪、转全部还是这一屏，点「开始转成代码」。模型先调 handoff_design：插件在设计目录写一份 handoff/HANDOFF.md（每屏的文件、建议路由、跳去哪，设计变量，几屏共用该抽成组件的部分，脚本 / 表单 / 悬停这些交互，滑块，图片字体，做法和验收）和每屏从上到下的截图；模型照着一屏一屏写，每屏写完把开发服务器跑起来调 compare_design：同样尺寸各截一张逐像素比，回一张「设计稿 | 做出来的 | 差异」拼图，差得多的地方红框标号、写明两边分别是哪个元素，差异降到 3% 以下再做下一屏。

工具栏还有：地址（点一下能改，输文件路径 / 端口 / localhost 地址都行）、刷新、在浏览器里打开。右侧栏拉窄时，不常用的几个按钮收进「更多」菜单。会话标题栏右边有个「设计工作台」按钮，随时打开。DSH 重启后，每个会话接着预览原来的页面（类型、视图也记着）。

preview_page 工具的参数：target（文件路径 / 端口 / 地址）、kind（web / app / tablet / poster / slides / email）、size（如 1080x1920，可选）、screens（开发服务器上并排看的几个路由，可选）。check_design：screens（只量哪几屏）、sizes（如 ["375x667","430x932"]）、dark、images（false 不附截图）。look_design：screens、size、at（top / bottom / full）、selector（只截这个元素）、dark。extract_design_system：sources（网址 / 项目文件夹 / HTML 文件，1–5 个）、name、default。handoff_design：framework（same / react / vue / next / html）、dest、screens。compare_design：url（做出来的页面，本机地址或端口）、screen、size、at（top / bottom）、dark。

设计模式和开关

新会话的模式菜单里多了一个「设计模式」：标准模式的全部工具，加上设计技能和右侧工作台的预览，人设换成做设计的。做界面时选它；标准、创造等模式照常能用这些功能。

插件拆成几个组件，DSH「插件」→「设计工作台」里每个都能单独开关，马上生效，不用重启：

组件	管什么	默认
设计工作台	右侧栏和预览服务器（关掉就等于不用这个插件）	开
自动打开预览	做设计时写了 HTML、起了开发服务器，右侧自动打开；关掉后只在右侧栏给一个「预览刚写的 …」按钮	开
预览和体检工具（其他模式）	标准、创造等模式也能用 `preview_page`、`check_design`、`look_design`、`extract_design_system`、`handoff_design` 和 `compare_design`	开
设计技能（其他模式）	标准、创造等模式也能加载 `ui-design` 技能	开
设计模式	模式菜单里的「设计模式」	开

只想在设计模式里做设计、别的模式保持干净：关掉两个「（其他模式）」。设计模式自带工具和技能，不受这两个开关影响。

能预览什么

输入	怎么预览
本地 HTML 文件 / 目录 / `file://`	插件起一个本机服务器给这个目录，目录里的文件一改就刷新
端口、`localhost:端口`、`127.0.0.1:端口`	插件起一个代理转给开发服务器，热更新照常（只听 IPv6 `::1` 的也行，比如 Mac 上的新版 Vite）
外网地址	不支持（只预览本机页面）

安全

每个预览目标一个独立的 127.0.0.1 随机端口，和 DSH 不同源，页面里的脚本碰不到 DSH。

只给这个目录：路径按真实位置算，../、编码过的 ../、指到目录外的软链接都拒。
防 DNS 重绑定：Host 必须是本机名加这个端口。
和右侧栏通信：只和 DSH 自己的源说话（桌面版 dsh-app://app、DSH 网页端的地址）：发消息指定收件的源，收消息要来自父窗口且源对得上。别的网站把预览嵌进去，收不到也指挥不动。用反向代理或域名打开网页版 DSH 时，这个地址得写在 DSH 的 trustedHosts（dsh-client-connection 配置）里才认；没写的话点选、改字、导出不起作用。
接口（/dsh-design-studio/api/*）：交给 DSH 自己的 connection 服务验登录态；老版本 DSH 没有这个服务时只收本机、同源请求。
手机上看：默认不开，点了才在局域网开一个入口；只监听本机在局域网里的那个地址（不是 0.0.0.0），Host 也得对。链接带一次性的随机口令（128 位），手机第一次打开换成只给这个端口的 Cookie（HttpOnly），地址栏里不留口令；没口令、口令不对一律 403。停止或 30 分钟没人看就关端口，再开换新口令。同一个 Wi-Fi 里拿到这个链接的人也能看，所以别把链接发到群里。
代理开发服务器时会拆掉 X-Frame-Options 和 CSP（不然嵌不进右侧栏），只影响预览端口，开发服务器本身不动。
远程看：打包好的页面放在 sandbox="allow-scripts allow-forms" 的 iframe 里（不透明的源，碰不到 DSH 的 Cookie 和接口），页面里放一个 <base> 指着原来的预览地址，拿不到 DSH 网页的地址；只内联设计目录里的文件（越界、软链接到外面的不读），总量 12 MB 封顶；接口回 JSON，不在 DSH 的地址下直接给 HTML。
调样式写回：只收字号、颜色、圆角这几个属性，值里不许有 url(、引号、分号这类东西；按标签、序号、id、class 在源码里认出那个元素，认不准就不写，改成交给模型。

架构

服务端  preview_page 工具 / 自动发现（session/event：写 HTML、命令输出里的地址）
          → tracker（每个会话预览什么、模型在不在干活，存 ~/.dsh/cache）
          → hub（每个目标一个本机端口：静态文件 + 改动推送 / 代理 + WebSocket 透传）
        /dsh-design-studio/api/state|open|view|close   右侧栏轮询、地址栏、类型 / 视图 / 换屏
        /dsh-design-studio/api/history|restore         版本列表、回到某一版
        /dsh-design-studio/api/export|reveal           存导出的图片、在文件夹里显示
        /dsh-design-studio/api/phone                   手机上看：开 / 关局域网入口、给二维码、电脑换屏手机跟着跳
        /dsh-design-studio/api/edit|ref                预览里改的字写回 HTML、存参考图
        /dsh-design-studio/api/style|locate            调样式：写进元素在源码里的 style 属性；按规则找回源文件和行号
        /dsh-design-studio/api/bundle                  远程看：一屏连同样式、图片打成一份（放进沙盒 iframe）
        /dsh-design-studio/api/tweak                   调节滑块写回文件（tokens.css 默认值、每屏 <html> 属性、tweaks.json）
        /dsh-design-studio/api/systems|systhumb        品牌设计系统库：列出来、设 / 取消默认、样张缩略图
        /dsh-design-studio/api/project                 转成代码前：会话目录是不是前端项目、建议放哪
        check_design / look_design → 无头浏览器（browser.js）按真实尺寸开页面，picker 里量、截图（look.js）
        extract_design_system → system.js；handoff_design / compare_design → handoff.js
页面    picker.js 注入到 HTML：悬停框选、点选 / 拖选、屏间链接、演示时接住跳转、就地改字、postMessage 回右侧栏、改动后刷新
客户端  右侧栏标签页（sidebarRightTabs）+ 标题栏按钮（session.header.utilities）

lib/index.js —— 服务端：工具和技能的定义、接口、自动发现接线
lib/tool.js、lib/skill.js、lib/auto.js、lib/preset.js —— 能单独开关的几个组件：挂工具、挂技能、自动打开预览、设计模式（cordis.patch.yml 里列着；设计模式照抄 DSH 标准模式的插件，再挂上工具和技能）
lib/core.js —— 地址解析、自动发现、会话状态和存盘、每轮前后存版本、改字写回（只在看得到的文字里找，认 HTML 实体）
lib/history.js —— 设计版本：按内容存（没改的文件只存一份），最多 40 版，回到某一版
lib/serve.js —— 预览服务器：静态文件 / 代理 / 改动推送 / 注入（picker 和一段收集页面报错、没载到的资源的小脚本）
lib/browser.js —— 无头浏览器：找本机的 Chrome / Edge / Chromium / Brave，--remote-debugging-pipe 说话（不开端口），临时用户目录，闲置自己关
lib/look.js —— check_design / look_design 的量和截：挑屏、解析尺寸、每种尺寸开一页量问题和测量数字、挑严重问题截局部图、截顶上 / 滚到底 / 整页分段 / 元素，整理成交给模型的字
lib/system.js —— 品牌设计系统：在网页里收集颜色 / 字体 / 圆角 / 阴影 / 组件，扫项目文件夹，按 OKLab 聚类定角色（对比度够不够也算），写 tokens.css / components.css / 样张 / DESIGN.md，库（默认那套）和给技能补的一节
lib/tweaks.js —— 调节滑块：读 tweaks.json、写回（:root 上的默认值、属性）、查有没有接上
lib/handoff.js —— 转成代码：认现有项目、交接说明和截图、compare_design 的逐像素比（在无头浏览器里算差异、找成片的差异块、拼图）
lib/bundle.js —— 远程看：把一屏的样式表（含 @import）、脚本、图片、字体内联成一份 HTML，放 <base> 和 picker
lib/phone.js —— 手机上看：局域网入口（口令换 Cookie、转发到预览服务器、补 viewport、跟随跳屏、WebSocket 透传、闲置自动关）
lib/qr.js —— 二维码生成（字节模式、纠错 M、版本 1–10，不引第三方库）
lib/picker.js —— 页面里的脚本：选取、改动高亮（指纹比对）、生成动画、和右侧栏握手换帧（关闭的 shadow DOM，不污染页面样式）、把页面画成 PNG（样式、图片、字体都内联）、深色模式切换、报告屏间链接、演示时把点链接变成跳屏、就地改字、调样式（选中元素、实时套样式、认出用了哪些设计变量、每项由哪条规则决定）、远程看时接住跳页、给无头浏览器用的 window.__dshDesign（量、切深色、滚动、元素位置）
lib/client.js —— 右侧栏、工具栏、画布（排版、拖动、缩放）、设备外框、动画、两帧 iframe 交替（新的载好再淡入）、设计规范面板、版本面板和左右对比、导出（套外框、合成展示图）、把选取整理成文字插进输入框、原型箭头和演示、多尺寸并排、改字、参考图取色、窄栏「更多」菜单、调样式面板、风格卡、远程看（打包的页面放进沙盒 iframe，跟着改动重新打包）
skills/ui-design/ —— 内置设计规范（DSH 技能）：SKILL.md 流程和原则、references/ 各类型细则、tokens.css 起手模板
assets/demo.gif、assets/demo-versions.gif —— 演示动图（测试台里跑插件真代码录的）；assets/showcase.jpg —— 导出的展示图样例
docs/feasibility.zh.md —— 做之前的可行性调研

测试

node test/test-serve.mjs   # 静态文件、跳不出目录、Host 把门、改动推送、代理、WebSocket、只听 ::1 的开发服务器、连不上的提示页
node test/test-core.mjs    # 地址解析、自动发现（只在做设计时，后台跑的开发服务器也认）、模型 / 用户指定的不被顶掉、重放不动手、存盘恢复（恢复中先不显示空状态）、类型 / 几屏 / 换屏、改字写回、调样式写回（认元素、合并 style、只收安全的值）
node test/test-client.mjs  # 右侧栏标签页 / 标题栏按钮注册、只给当前会话自动弹出、选中内容整理成的文字、页面 meta、画布排版、设计变量分组、原型箭头（隔屏的绕开别的屏）、多尺寸排版、矮屏手机没有灵动岛、参考图取色
node test/test-skill.mjs   # 内置技能：名字 / 来源合规、内容读得到、引用的细则文件都在；拆开的几个组件、设计模式带齐标准模式的工具
node test/test-history.mjs # 版本：存一版 / 没变不存 / 只存设计文件 / 回到某一版 / 上限、每轮前后存、版本名（点选 / 变量 / 参考图换成短名字）、旧版本文件、导出的图不算改动
node test/test-bundle.mjs  # 远程看的打包：样式表 / @import / url() / 脚本 / 图片 / srcset 内联，外网的、找不到的、越界的原样留着，<base> 和 picker 放对地方，总量上限，@import 循环
node test/test-phone.mjs   # 手机上看：二维码结构、挑网卡、补 viewport、口令换 Cookie、没口令 / Host 不对 403、转发、跟随跳屏、WebSocket、停止、闲置自动关
node test/test-doc.mjs     # PDF / PPT：JPEG 尺寸、PDF 结构和交叉引用、PPT 的各个部件（解压校验 CRC）、幻灯片比例和居中、接口存进 exports/、重名加序号、坏输入拒掉
node test/test-look.mjs    # check_design / look_design：挑屏、尺寸、整理给模型的字；假浏览器走完工具和附图；本机有 Chrome / Edge 时真开页面：底栏压住最后一行（矮屏报、大屏不报）、App 壳里的滚动区、脚本报错、缺样式表、截图尺寸、元素裁剪、深色、调样式每项由哪条规则决定、严重问题附图（底栏压住、App 壳、叠字，浅色深色）
node test/test-system.mjs  # 品牌设计系统：颜色解析和对比度、扫项目、定角色、写出来的文件、库和默认、给技能补的一节；有 Chrome / Edge 时真从一个网页提一套（品牌名、角色、字体、圆角、组件、截图、再提覆盖）
node test/test-tweaks.mjs  # 调节滑块：读 tweaks.json（写错了怎么说）、值规整、写回 tokens.css（同一个变量写了几遍都改）/ <html> / tweaks.json、体检、写回走版本；真浏览器里拖了页面真变、撤掉还原
node test/test-handoff.mjs # 转成代码：认项目、路由、共用部分、只比本机地址、代码默认放哪（不放进设计目录，软链接别名也认）、交接包不跟软链接写到外面、交接说明的各节；真浏览器：交接包截图、一样的页面差异 < 1%、改过的页面标出差在哪、淡灰对白也算差异、滚到底连里面能滚的区域、data-theme 深色两边都切、本机地址跳到外网被拦下
node e2e/check-page.mjs    # 设计体检（要本机 Chrome）：十二类问题都查得出、该放过的放过（省略号、动画中的半透明字、深色页面、限宽的段落、object-fit 的图、正文里跟着折行的字…），干净的页面零问题；加 --dir <设计目录> 拿真设计稿试
node e2e/e2e-studio.mjs    # 真机（要本机 Chrome，会从 npm 装一个临时 DSH）：假模型调 preview_page 开三屏 App；干完一轮按钮上标出问题数，体检查出埋的问题、交给模型修、改完自动再量；面板开着时模型改坏别的屏，面板自己刷新、那屏挪出来；模型调 `check_design` 拿回清单和严重问题的局部截图；模型调 `look_design` 拿回一张真实渲染的图；导出的 PDF / PPT 里跳转能点；调样式拖滑块、写回、交给模型；换风格；换个地址打开（像手机走外网）时预览打包传过来、点得动、跟着改动刷新

已验证

第一期之后又打磨了一轮，同样在全新的 DSH 0.2.1-rc.3 网页版里实测（e2e/e2e-studio.mjs，40 项全过）：模型用提问卡问话时，右侧栏提示「模型在等你回答」，答完提示消失；模型调 check_design 前后各一次，第二次只剩它改坏的那屏；「再出一版」写的 home-b 在画布上紧挨着首页；选中它点「就要这个」，输入框里是〔选定方向〕，让模型把原版挪进 drafts/。真模型（DeepSeek-V4.1-Flash）在桌面端设计模式里写完首页，自己调了两次 check_design（右侧栏量完把清单交回），改完再量一遍「0 个问题」，没有再另开浏览器截图；它写的 _probe.html 这类临时文件不再出现在画布上。新加的「文字被挤断行」拿真模型写的首页试，查出 5 处（「可外带」「再来一单」和三个价格）。

第一期（导出 PDF / PPT、设计体检）在一个全新的 DSH 0.2.1-rc.3 网页版里实测（e2e/e2e-studio.mjs，36 项全过）：打开设计后按钮上自动标出 4 个问题；模型调 check_design 拿回同样的清单（只列首屏，面板关着时再调只列购物车）；模型调 preview_page 开三屏 App，体检只在首屏查出埋的四个问题（文字截断、对比度 1.59:1、26×26 的按钮、8px 小字），另两屏零问题，预览里标上编号，点一条闪一下；「交给模型修」把清单放进输入框，发出去模型收到；改好首屏「再查一次」没问题；模型改完这一轮自动再量、按钮上的数字没了；面板开着时模型改坏购物车，面板自己刷新，被挡住的那屏挪出来；导出的 PDF 三页、PPT 三张竖版幻灯片，存进 exports/，不当成设计改动，里面「去点单」「加入购物车」能点着跳页，PDF 带每屏书签。PPT 也在 PowerPoint 里打开过，三张都正常、没有修复提示。桌面端重启后插件照常加载。真模型（DeepSeek-V4.1-Flash）在桌面端设计模式里说「帮我设计一个咖啡外带 App 的界面」：先用提问卡问了三个问题（感觉、场景、必须有的），答完写出 home-a / b / c 三个方向并排在画布上，最后再用提问卡问选哪个（也可以混搭）。这次发现两点已改：问完感觉后三个方向不该再跨风格；模型靠另开浏览器截图自查，一轮用掉一百多万 token——所以加了 check_design，并让三个方向在画布上按 a、b、c 排。

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）、停止后端口关掉。0.4.0 的设计模式和开关在一个全新的 DSH（0.2.1-rc.2）里实测：模式菜单里有「设计模式」，选它发消息，模型拿到 preview_page、ui-design 和做设计的人设，调 preview_page 后右侧工作台套手机外框打开页面；标准模式默认也有这两样；插件页关掉两个「（其他模式）」后，新开的标准模式会话里没有了，设计模式里照样有；关掉「设计模式」，模式菜单里就没有它，再打开又回来。再早一轮修了几个小毛病，也在 DSH 里验过：新屏播生成动画时底部按钮是透明的，跳转箭头漏了它（现在播动画的按钮也算，播完再补报一次位置）；隔着一屏的箭头改成绕到标题上面走；点选后的版本名从「〔选中元素〕em…」变成「「3.2 km」 · 把这个距离文字改成绿色…」；先打字再点选时，选中的内容另起一行，不再粘在那句话后面；多尺寸里的小屏不再画灵动岛；提示条和顶上的提示消息不再叠在一起。

反馈

遇到问题或想要新功能，提一个 issue。报问题时写上 DSH 版本和插件版本，修起来最快。

License

MIT

dsh-design-studio

Install

Source

Tags

Creators

Readme

安装

用起来是什么样

设计模式和开关

能预览什么

安全

架构

测试

已验证

反馈

License