前言¶
用 DeepSeek Harness（DSH）让模型写网页、App 界面或海报时，常见做法是反复在对话里描述「把按钮改成橙色」，再在浏览器里对照 HTML 找元素。预览和改稿往往拆在多个窗口里，多屏并排、版本对比、导出展示图也要自己拼流程。
dsh-design-studio（DSH 插件页显示为「设计工作台」）把预览放进 DSH 右侧栏：模型生成的一屏屏界面套上设备外框排在画布上，点选元素会把结构化信息写进输入框，再配合内置 ui-design 技能与版本、导出、手机扫码预览，把「看—指—改」收在同一条会话里。下面介绍它是什么、怎么装、典型怎么用，以及安装前需要注意的安全与权限。
这是什么¶
dsh-design-studio 是 OrderG-X 维护的 DSH 客户端插件（MIT 许可证）。定位是：模型做界面设计时，右侧「设计工作台」实时显示生成结果——网页、App、海报、幻灯片、邮件等分类型套外框；点元素或拖区域选中后，整理成文字插入输入框，补一句修改意图发给模型，模型按源码改，改动在预览里高亮。
插件通过 preview_page 工具、自动发现（写 HTML、起开发服务器等），或页面里的 <meta name="dsh-design"> 触发；非设计类任务写的页面不会自动弹栏，只在标题栏「设计工作台」按钮上亮蓝点，可手动打开预览。
社区目录页：skillhub.cn 上的 dsh-design-studio。源码与说明：GitHub OrderG-X/dsh-design-studio。
核心功能¶
画布与多屏¶
同一目录下多个 HTML 按生成顺序排成网格，可拖动、缩放（触控板双指平移，捏合或 ⌘ 滚轮缩放）。单击选中一屏，双击单屏查看；工具栏可在「画布 / 单页」间切换。开发服务器场景下，模型可通过 preview_page 的 screens 参数并排多个路由。
模型生成时右侧先占位，新屏写出后元素依次浮现；本轮仍在出新屏时，画布末尾保留「生成中…」占位。
类型与外框¶
支持 web（浏览器窗口）、app（手机外框含灵动岛）、tablet、poster（默认 1080×1350）、slides（16:9）、email。类型可由模型在工具里指定 kind，或在页面写：
<meta name="dsh-design" content="app">
也可带尺寸，例如 poster 1080x1920；工具栏「类型」菜单可随时切换。
实时刷新与改动高亮¶
本地 HTML 目录内文件变更时，后台先载入新帧再淡入替换（滚动位置保留）。走 Vite、Next 等开发服务器时，热更新与 WebSocket 照常。刷新前后比对页面「指纹」，改过或新增的元素在预览里闪一下并扫光；底部提示如「已更新 index.html · 1 处改动」。共用 CSS 变更时各屏都会换帧；只改某一屏 HTML 时其它屏不动。
点选进输入框¶
工具栏「选择」模式下：悬停框选元素；单击选单个元素；拖矩形选区域内主要元素（最多 10 个）；Esc 取消。选中内容会整理成一段文字插入输入框（失败则复制剪贴板），示例格式包括元素标签、文件路径、DOM 路径、HTML 片段与尺寸样式；React / Vue / Svelte 开发模式还会带组件名与源码位置。
设计规范与变量¶
内置 DSH 技能 ui-design：模型做界面前可加载，约定先定类型与画幅、先写 tokens.css、一屏一个文件等；输入框执行 /ui-design 也可手动加载。工具栏调色板打开设计规范面板，列出 :root 设计变量（颜色、字体、字号、间距、圆角、阴影等），点一项插入输入框，便于让模型只改变量而全画布联动。
版本、导出与协作向能力¶
- 版本：每轮对话开始与结束自动存版（仅设计相关文件）；工具栏时钟可列表、单屏查看、左右拖动对比、回到某一版（回退前会先存当前状态）。上限约 40 版。
- 导出：单屏（带外框或纯画面）、长图、多屏合成展示图；输出到设计目录
exports/，并复制剪贴板。 - 再出两版：选中一屏可让模型生成
*-b.html、*-c.html两版备选，并排画布。 - 手机上看：扫码后在同 Wi-Fi 真机浏览器打开；电脑换屏手机跟随；默认 30 分钟无访问关闭；需主动开启局域网入口。
- 可点原型：屏间
<a href>或data-href链起来，画布显示跳转箭头；播放模式内在预览里点按跳转动画演示。 - 多尺寸并排：同一屏按手机 / 平板 / 桌面等宽度并排，检查小屏布局。
- 改字：预览内就地改文字，本地 HTML 写回源文件并记版本；开发服务器或找不到源码时转为输入框指令交给模型。
- 参考图：拖入或粘贴图片，取主色与深浅，引导模型按参考更新
tokens.css等。
preview_page 工具参数（资料原文）：target（路径 / 端口 / 地址）、kind、size（可选）、screens（可选，开发服务器多路由）。
能预览什么¶
| 输入 | 方式 |
|---|---|
本地 HTML / 目录 / file:// |
插件为本目录起本机静态服务，改动推送刷新 |
端口、localhost |
代理到开发服务器，热更新透传 |
| 外网 URL | 不支持 |
安装与启用¶
安装命令（来自仓库 README）：
dsh plugin add https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz
装完后重启 DSH（客户端在启动时打包）。DSH「插件」页中显示为「设计工作台」。
本地开发可链到目录（改 lib/picker.js 相关逻辑时每次现给，其它客户端改动仍需重启）：
dsh plugin --profile desktop add link:/path/to/dsh-design-studio
典型用法¶
- 在 DSH 中让模型做界面设计（例如多屏 App）。模型加载
ui-design、创建tokens.css与分屏 HTML，或调用preview_page并指定kind。 - 右侧自动打开设计工作台；若未自动打开，点会话标题栏「设计工作台」。
- 在画布上查看各屏；不对处用「选择」点元素，在输入框补一句如「主色换成深海蓝」或「改成橙色」发送，模型改源码后预览高亮差异。
- 需要回溯时用版本面板对比；要对外展示时用导出到
exports/；要在真机上看时点扫码（注意同一 Wi-Fi 下链接勿随意传播）。
页面需被识别为设计任务时，除技能与 preview_page 外，可在 HTML 中加入：
<meta name="dsh-design" content="web">
适用场景与注意¶
适合：在 DSH 里用模型迭代网页 / App 原型、海报、幻灯片草图；需要多屏画布、点选改稿、设计 token、版本对比与导出展示图的前端或产品设计协作流程。
权限与安全：插件以当前 dsh 进程权限运行。安装前请阅读 GitHub 源码 与 MIT 许可证，确认符合你的环境策略。
资料中说明的安全要点摘要：
- 每个预览目标使用独立
127.0.0.1随机端口，与 DSH 不同源；目录访问限制在真实路径内，拒绝../与越界软链。 - 预览 iframe 与右侧栏通过指定源
postMessage通信；反向代理或域名访问网页版 DSH 时，需在dsh-client-connection的trustedHosts中配置，否则点选、改字、导出等可能无效。 - 「手机上看」仅在用户点击后于局域网开端口，链接带一次性口令；同一 Wi-Fi 内持有链接者可访问，勿发到公开群聊。
- 代理开发服务器时会去掉预览侧的
X-Frame-Options与 CSP，仅作用于预览端口。
DSH 生态强调「一切皆插件」；SkillHub 等社区目录为独立站点，与 DeepSeek / 幻方无官方从属关系。
结尾¶
dsh-design-studio 把「模型写界面」从纯文本往返，变成右侧栏画布上的可视化迭代：设备外框、点选进框、设计变量、版本与导出、扫码真机预览，都挂在同一会话里。若你已在用 DSH 做前端或视觉稿，可按上文命令安装 release 包，重启后在插件页确认「设计工作台」已启用。
- 目录页：https://www.skillhub.cn/plugins/OrderG-X/dsh-design-studio
- GitHub：https://github.com/OrderG-X/dsh-design-studio
