🎁 福利专区全网大模型免费应用 + 新用户福利 + 注册活动入口,低成本玩转 AI

设计工作室插件 Sal7one/DSH-Design-Studio

DeepSeek Harnessv2.7.6
Sal7one1 天前有提交已提供中文文档扫描:含敏感能力

灵感来自 Calude 设计,一款 DeepSeek Harness 设计插件!选中元素、调用 Open Router 视觉智能体、上传图片,功能多到数不完!!用 deepseek 快速改稿,或直接写提示词唤起视觉模型!

32.1/100
综合分
3
GitHub 星标
125
npm 周下载
—/5
用户评分

数据截至 2026/11/3 · 周下载取自 npm 全网(含 CI / 镜像),非本站安装数;综合分由星标、活跃度与兼容性检查合成。

安装命令 · 需先装 dsh CLI 引擎
dsh plugin --profile web add @sal7one/dsh-design-studio
npm 源 · @sal7one/dsh-design-studio 的发布者账号已校验与本仓库一致

状态速览

判定依据:实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态
信任档位:已验证
是什么
dsh 原生插件 · vision
装得上吗
本站已在 dsh 0.2.1-rc.5 下真实安装成功
非静态推断
L4 · 真实安装等级说明 →
安全吗
本站尚未对该插件做风险分级
暂未覆盖,不等同于无风险
还在维护吗
活跃:最近一次提交在 1 天前
档位由哪些信号合成

本站实装验证(真实安装 L4 覆盖全站;L5 为运行时冒烟或实机截图,覆盖范围小于 L4) · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。 下方各区块是它的证据明细。

验证判据与等级说明 →
社区实装还没有人打卡 · 装过的第一个就是你
安装兼容性检查✓ 自动检查通过
展开查看检查明细 ↓

以下结论由程序自动检查 npm 包、engines 声明与入口文件得出,未做人工实机验证——能装不等于用着没问题。

✓npm 包@sal7one/dsh-design-studio @ 2.7.6
✓Node 引擎要求 >=22 · 基线 Node 22.19 满足
✓dsh CLI 依赖未声明 dsh 版本约束
✓入口文件main/exports/bin 已声明

验证方式:npm registry 存在性 + package.json 静态校验 · 最后检查 2026/10/22 02:16:19

安全扫描自动 · 静态分析源码
v2.7.0
🔵 扫描:含敏感能力尚无人工评估
展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力:执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量(至少其一)。这是能力清单,不是危险判定——具体能力项与证据见下方,安装前请自行判断是否需要。

读写/删除本地文件写入剪贴板(不计风险)发起外部网络请求
查看扫描证据(共 9 处,展示前 9 条)
  • 发起网络请求
    lib/client.js:474
    const res = await fetch('/design-studio/__api/' + method, {
  • 写入剪贴板
    lib/client.js:743
    await navigator.clipboard.writeText(text)
  • 写入剪贴板
    lib/client.js:2148
    navigator.clipboard.writeText(String(text)).then(
  • 读取本地文件
    lib/host/node-io.js:202
    if (candidate && existsSync(candidate)) return candidate;
  • 发起网络请求
    lib/host/vision.js:50
    const res = await fetch(url, Object.assign({}, init || {}, { signal: controller.signal }));
  • 读取本地文件
    lib/host/styles.js:10
    const ATLAS = JSON.parse(readFileSync(DATA_PATH, "utf8"));
  • 发起网络请求
    lib/client/src/api.js:6
    const res = await fetch('/design-studio/__api/' + method, {
  • 写入剪贴板
    lib/client/src/assets-modal.js:58
    await navigator.clipboard.writeText(text)
  • 写入剪贴板
    lib/client/src/studio-view.js:678
    navigator.clipboard.writeText(String(text)).then(
扫描于 2026/11/3(0 天前) · 范围 入口闭包 + 全包扫描 · 来源 npm 发布包

静态扫描只反映源码中出现的调用,不构成安全背书;人工评估与自动扫描相互独立、互不覆盖。

给这个插件打分还没有人投票↓
用户评分
还没有人投票,来当第一个

功能亮点

  • 选中页面元素
  • 视觉智能体审查
  • 快速修改设计稿

README

由 DeepSeek 最新模型翻译生成
@sal7one/dsh-design-studio 一个 DeepSeek Harness 插件,把设计稿变成一等公民的 AI 工作流。 实时预览、元素拾取器、真正的设计智能体、视觉审查、身份预设——还有双智能体应用流程:DeepSeek 负责编辑,设计智能体负责校验。 所有内容都落在当前工作区 design-studio/ 下的真实文件里,安装是启动持久化的:装一次,之后每次启动 Design Studio 标签页都在。 截图 | 预览 | 选择 | 询问 DeepSeek | 资源 | | Design Studio preview with the design switcher | Element selection over the live preview | Ask DeepSeek about a selected element | Asset library with sha256 manifest | | 样式 | 样式巡览 | 历史 | 设置 | | Attributed style atlas | Horizontal style tour above the preview | Content-addressed edit history | Vision and capture settings | 点击任意截图查看大图。
展开完整文档(README 剩余 1 节)
@sal7one/dsh-design-studio

一个 DeepSeek Harness 插件,把设计稿变成一等公民的 AI 工作流。
实时预览、元素拾取器、真正的设计智能体、视觉审查、身份预设——还有双智能体应用流程:DeepSeek 负责编辑,设计智能体负责校验。
所有内容都落在当前工作区 design-studio/ 下的真实文件里,安装是启动持久化的:装一次,之后每次启动 Design Studio 标签页都在。

截图

| 预览 | 选择 | 询问 DeepSeek | 资源 |
| Design Studio preview with the design switcher | Element selection over the live preview | Ask DeepSeek about a selected element | Asset library with sha256 manifest |
| 样式 | 样式巡览 | 历史 | 设置 |
| Attributed style atlas | Horizontal style tour above the preview | Content-addressed edit history | Vision and capture settings |

点击任意截图查看大图。

DSH-Design-Studio/
├── package.json # dual-face manifest: dsh.bundle (host) + dsh.client (web UI)
├── cordis.patch.yml # the composition layer this bundle contributes
├── README.md # this file
├── CHANGELOG.md # release notes (2.3 atlas, 2.2 history, 2.1 split/settings)
├── LICENSE # MIT
├── THIRD_PARTY_NOTICES.md # style-atlas 归属声明与 MIT 许可声明 ├── icon.svg # 插件清单插图 ├── locale/ # 插件清单显示元数据(en/zh) ├── repo-images/ # README 顶部展示的 UI 截图 ├── lib/ │ ├── data/ │ │ └── style-atlas.json # 带归属声明的 88 风格快照(无运行时依赖) │ ├── index.js # 宿主编排器:设计系统、智能体、HTTP 路由 + 工具 │ ├── host/ # 宿主域 │ │ ├── constants.js # 共享限制、键引用、slug 正则 │ │ ├── util.js # 纯辅助函数:zip 写入器、路径、base64、PNG 尺寸 │ │ ├── node-io.js # Node 辅助接缝、二进制写入、删除、浏览器截图 │ │ ├── config.js # 配置加载/保存、键信息、harness 视觉检测 │ │ ├── vision.js # harness + OpenRouter 审查、图片描述 │ │ ├── preview.js # 无头预览快照 │ │ ├── presets.js # 身份预设增删改查 + 应用 │ │ ├── assets.js # 资源清单、sha256 去重、上传/导入/删除 │ │ ├── history.js # 内容寻址 blob、树、快照 + 恢复 │ │ └── styles.js # style atlas 应用/保存/创建 + CSS token 生成 │ ├── client.js # 生成的独立 ModuleLoader 包(随包发布) │ └── client/src/ # runtime、styles、labels、primitives、api、element-picker、 │ # scaled-preview、assets-modal、history、style-atlas、 │ # studio-view、settings、index ├── scripts/ │ ├── check.mjs # 无依赖的发布/检查脚本 │ └── bundle-client.mjs # 源码 → lib/client.js;安装时从不运行 ├── tests/ # 宿主 + 客户端冒烟测试(node --test) └── examples/ # 示例设计系统(html/css/js 原型 + 预设)

✨ 功能

核心平台

- 一条命令,持久生效 —— 双面 dsh.bundle + dsh.client 包:执行一次 dsh plugin add,之后每次启动,工具、预览路由、提示词段落和 Design Studio 标签页都在。没有安装时构建步骤,没有 TypeScript, 零运行时依赖(纯 JavaScript);客户端源码拆分在发布前打包进已提交的 lib/client.js。
- design_studio 智能体工具 —— 你的助手(以及任何子代理)可以 list / all / create / read / write / zip / reveal / delete / sweep 设计系统,管理业务页面(page_list / page_create / page_rename / page_delete),管理资源(asset_list / asset_upload / asset_import / asset_delete),保存并恢复编辑历史(history / snapshot_save / snapshot_restore / snapshot_undo),应用/保存/创建样式(style_list / style_apply / style_save / style_create),管理身份预设、运行视觉审查、与设计智能体对话、读取其历史,并配置工作室 —— 设计文件存放在工作区中 design-studio/<slug>/ 文件夹(旧版配置档设计仍可读取)。
- 可选的 Compose Desktop 目标 — 把 app.project 指向一个 Compose Multiplatform 项目,该项目需暴露 Compose Hot Reload 的 hotMcpServer(CMP 1.12+),App 标签页即可驱动真实应用:启动、重载、截图、语义树、日志。没有 Gradle wrapper 或没有项目时,该功能保持关闭,并显示如实说明的空状态。见 docs/compose-desktop.md。
- Android 应用目标(Appium) — 把一个设计项目绑定到已构建好的 Android 应用,App 标签页即可通过 Appium 驱动它:实时截图和 uiautomator2 树、悬停高亮后再点击、带变更请求输入框的选择弹窗,以及一键捕获到项目的 assets 和编辑历史。Connect 弹窗保存应用包名/Activity,以及项目根目录、Gradle 构建任务和 APK 路径,这样智能体在收到请求后可以重新构建并重装同一个现有项目。它还会索引项目的静态导航路由,把选中的 test tag 映射回源码定义和其他使用位置;屏幕标识来自 SCREEN_ 标签。Screens 芯片通过 NAV_/ROUTE_ 目标标签导航,应用没有暴露这些标签时给出如实说明的兜底提示。会话通过宿主 keepalive 在标签页切换后存活,并自动重连。见 docs/android-app-targets.md。
- 实时预览路由 — /design-studio/<slug>/html/index.html,由 harness web 服务器提供。内联 Preview 是默认打开的标签页,与 App、Pages、Styles、Agent、Assets、History、Review、Upload 和 Settings 同处一个标签栏——没有模态框,没有右上角面板。
它在真实的 Desktop(1440×1600)、Tablet 或 Mobile 视口中居中渲染设备;切换视口会缩放整个设备框,周边区域使用面板背景色,而不是白条。Fit / 1:1 控件(默认 1:1)按实际尺寸显示并可滚动;Fit 把设备缩放到可用窗格。打开的 Studio 每 1.5s 轮询所选设计的 stamp,外部编辑后自动重载 Preview/outline/assets。
- 大型 Studio 工作区 — 300px 的资源库(Designs、Assets、Outline)和宽大的标签式工作区(Preview / App / Pages / Styles / Agent / Assets / History / Review / Upload);⚙ Settings 按钮打开共享的 DeepSeek Design Studio 设置页。工作区栏的 Design 选择器列出工作区中的每个设计(冻结时显示 🔒),无需离开 Preview 即可切换预览、文件、历史、assets 和样式。Settings 和 Preview 标签页占满整个工作区;独立 Settings 页在宽屏下采用双栏布局。Open ↗ 是宿主操作,不是链接:它启动操作系统默认浏览器(rundll32 / open / xdg-open),绕过 DSH 应用内浏览器。
- 设计简报路由 — 系统提示词中有一段,能把操作员的屏幕简报自动转成设计系统。预览 URL 从运行中的服务器源地址推导出来。

设计系统

- 按 mockup 划分的文件 — 每个设计系统都包含 html/index.html、css/style.css、css/token.css、js/app.js(只做最小呈现),外加 design_prompts_forcoders.md(编码智能体遵循的简报)和用于上传的 assets/images/。Mock 数据保持真实 — 空状态、加载状态,绝不编造实时数字。
- 按会话归属 — 每个设计系统绑定到创建它的会话;标签页只显示你所在聊天里的设计(未绑定的旧系统在首次列出时被收编)。
- 拖放区 + 素材库 — 把图片或代码文件拖到标签页上;图片落到 assets/images/,并在智能体聊天的选择器里自动选中。🗂 Assets 弹窗支持拖放/选择器上传,按 sha256 去重,在 assets/assets.json 里记录 MIME/尺寸/字节数/alt,并提供缩略图、灯箱、复制路径/复制 、删除。asset_import 能直接拉取操作员附件的路径。预览截图不进入素材库。
- 带署名的风格图集 — 88 种风格及其主题配色和字体气质,改编自 dsh-ui-ux-pro-max(MIT;见 THIRD_PARTY_NOTICES.md)。Styles 标签页是画廊网格,带一个大号 Try them now 操作。点它会针对当前设计打开横向风格巡览:方向键或 ←/→ 实时自动试每种风格,可滚动条带能跳到任意位置,Apply/Revert 只差一步。巡览位于预览上方,只滚动自己的条带。画廊还提供筛选/搜索、随机下一个、应用前快照加 Undo apply、全模板 New,以及「Save current」存成可复用的自定义风格。自动快照跟随 AI 编辑批次和设计智能体轮次。
- 内容寻址的编辑历史 — 每个设计在 _studio/history/<slug>/ 下有一棵快照树:sha256 blob、排序后的树清单、带 head 游标的父链快照。编辑稳定后自动捕获;History 标签页提供手动检查点、撤销上次编辑、恢复到快照。恢复只移动 head,不删除之后的快照,所以更早的状态仍可恢复。
- 跨平台 zip 导出 + 定位 + 删除 — 内置 store-only ZIP 写入器(不依赖 zip 二进制)、系统文件管理器(open -R、Explorer、xdg-open),以及不依赖 POSIX shell 的递归删除。

设计智能体(真正的 harness 子代理)

- 它自己干活 — 智能体聊天通过 ctx.subagents.startActivation 启动一个 harness 子代理(design-studio 人设,delivery: 'caller',cwd 设为设计系统,maxDepth: 1 — 子级深度为 1,所以它能运行但不能再生孙级),由它列出、读取和编辑跨多次工具调用分发设计文件,每次消息一轮,然后汇总文件级改动。
- 实时活动 — 读取和编辑会实时流进聊天,带内联错误、按系统持久化的历史记录和运行超时。
- 视觉能力,harness 优先 — 当前 harness 模型声明支持图像输入时(由 action config → harnessVision 报告),在选取器里显式选中的图片(或按文件名提到的图片)会直接附加到子提示词,设计智能体自己看像素。只有 harness 模型无法接受图片时,插件才回退到 OpenRouter 描述。
- 设计缓存纪律 — 每一轮(哪怕只是一句「ok」)智能体都会校验新鲜度戳,报告设计自上一轮以来是否变化,把最新文件当作事实,请求含糊时主动问你想做什么。

🎯 元素选取器 + 双智能体应用流程

点 🎯 Select,点实时预览里的任意元素,描述改动:

| 按钮 | 会发生什么 |
| 🤖 Ask DeepSeek (默认)* | 保存 EDIT_REQUEST.md,通过保留的 Session 绑定(session.prompt(..., 'queue'))把请求发到你的主聊天。DeepSeek 自己改文件,只在需要看视觉效果时调用设计智能体。实时运行横幅在标签页里跟踪排队 → 执行中 → 完成,编辑稳定后工作室自动跑一次设计智能体校验。 |
| ◈ Make the design agent do it | 经典流程:设计智能体自己应用改动,并在自己的聊天里回复。 |
| 💾 Save only | 只写 EDIT_REQUEST.md — 之后从任一聊天里应用。 |

- 设计切换器 — 每个标签页(包括 Preview)的工作区栏都会列出所有设计,冻结的标 🔒。切换会重新加载该设计的预览、文件、历史、资源、样式和冻结状态。工作室级设置(视觉、截图尺寸、智能体预设)保持全局。
- 一个设计多页面 — 一个设计可以包含多个业务页面,在 Pages 画板画布中一起展示,可从 Preview 切换。页面位于 pages/<id>.html,共用 css/token.css 和资源;每个页面有自己的 css/pages/<id>.css、js/pages/<id>.js 和可选的 css/pages/<id>.tokens.css。页面级样式应用(Styles → This page)写入页面 token 文件;Entire design 写入全局 css/token.css。侧边栏、抽屉、弹窗、标签页和筛选器都是同一页面上的浮层状态 — 不是新页面。用固定浮层加模糊/惰性背景。只有新的业务界面/流程才加页面。Zip、冻结、历史和删除自动覆盖所有页面,因为它们作用于整个设计根目录。

设计冻结(设计 → 实现交接)

- 大号 ❄ Finish & freeze design 按钮把设计系统标记为只读的事实来源。冻结会抓取最终快照、刷新 zip,并记录一个实现目标(默认是当前项目;选择器还会列出其他活跃的聊天项目、已包含设计的 workspace,以及最近的冻结目标,并提供自定义路径作为兜底),外加一条可选的交接备注。
- 冻结期间,design_studio 会拒绝写入、样式、资源、历史恢复、删除和设计智能体操作;读取、快照、评审、打包和打开仍然可用。list/all 会返回 frozen 和冻结记录,让每个智能体都能看到。
- UI 会显示 Design frozen — implementation mode 横幅,并禁用编辑控件。只有明确确认 Thaw design 才会重新启用编辑。
- 智能体指引见 AGENTS.md、skills/design-studio/SKILL.md 和手册:冻结意味着在实现目标里干活,而不是在 mockup 里。
- 内置路由:插件会把这条工作流注入 DSH 系统提示词。运维人员不必在每个项目上写「只做 mockup」「我说冻结的时候……」或「实现冻结的设计」。用 done / looks good / LGTM / freeze 确认就够了;冻结默认指向当前项目。
- 完成闸门:设计就绪时,智能体用一个原生问题提问,给出三个选项——Keep refining、Freeze only 或 Freeze & implement——然后按回答执行。每个完成的修订问一次,不是每次小改动都问;细化之后,它用原生工具再问一次,而不是退回普通聊天。

新鲜度戳(多智能体安全)

- 每次设计变更都会递增一个戳 {hash, at}(新的随机 hash + ISO 时间,只保留最新状态)——插件通过 harness 的 fs/observed 流检测来自任何编辑器的变更,并在自己的写入路径上同步递增。路径比较会考虑 Windows(旧代码只比较 / 前缀)。
- 智能体把记住的 hash 与当前 hash 对比:漂移(「自你上一轮之后已变更」)会出现在提示词和工具输出里,设计智能体还会记录每轮的设计缓存,让下一轮能证明 UNCHANGED/CHANGED。

视觉与预览

- 👁 Review —— 对照需求给出诚实的 GOOD | POOR 判定 + 一句话说明。插件会问 ctx.llm.resolveModelInfo 当前模型是否接受图像;接受时,评审走 harness 路由,不需要 OpenRouter key(transport: harness)。visionTransport 可以是 auto(默认)、harness(不兜底)或 openrouter(始终用 key)。
- 📷 Capture —— 无头 Edge/Chrome 把实际提供的预览渲染成 PNG(assets/images/preview-.png),并作为附件图像返回。模型能直接看到渲染后的设计,而不是从源码猜。同一次捕获也供 review 和设计智能体使用。如果没装 Chromium 浏览器,该操作如实报告;工作室其余部分仍照常工作。
- OpenRouter 兜底 —— 当 harness 模型不接受图片时,评审和图片描述改用配置好的 OpenRouter 模型,走 Node 内置的 fetch(不用 curl,不落临时文件)。密钥是 harness 凭据引用(OPENROUTER_API_KEY),绝不渲染或返回。
- 身份预设 —— 把配色、字体、logo 存成预设;preset_apply 写入 css/token.css 并复制 logo 资源。

设置与数据

- 设置 → Design Studio —— 单个 DeepSeek 设置入口,内含 Preferences 和 All designs 两个标签页。Preferences 涵盖视觉传输、评审风格、默认样式应用范围、推理强度、截图视口、智能体预设、自动校验、生命周期和高级预设。All designs 是分组的工作区库,支持搜索、状态筛选、计数、最新 ZIP 日期,以及预览、打包、在文件夹中显示、删除操作。
- 重启后一切都在 —— 设计文件存在工作区的 design-studio/ 目录里;预设、配置、评审和智能体历史留在配置档中。

智能体知识与技能

面向在本仓库工作的智能体,Design Studio 现在有仓库内手册和技能。这些尚未安装进 DSH 配置档,只是将来分发用的源材料。

- docs/design-studio-handbook.md —— 工作流、文件布局、样式/历史/视觉行为、质量检查清单和安全事项。
- skills/design-studio/SKILL.md —— 创建、编辑、预览、设置样式、快照和评审 mockup 的操作流程。
- AGENTS.md —— 面向编码智能体的仓库级指引。

快速开始

两种 harness 分发方式都能用 —— npm 分发(npx @deepseek-ai/dsh web)和 Desktop/源码检出。

从 npm 安装(推荐;不依赖 git 网络)

包发布后:

dsh plugin --profile desktop add @sal7one/dsh-design-studio

也可以从 Web 的 Plugins 页面安装(该 bundle 可发布,声明了 dsh.bundle.patch、dsh.manifestVersion: 1、engines.dsh、展示元数据和图标)。如果你的配置档没有 HMR,安装后重启 harness。

从 git 安装

dsh plugin --profile desktop add git+https://github.com/Sal7one/DSH-Design-Studio.git

包没有 prepare/构建脚本,所以 pnpm 不会弹出构建权限提示。只需在拉取/安装期间能访问 GitHub。

从本地检出安装

dsh plugin --profile desktop add "link:/absolute/path/to/DSH-Design-Studio"

在 Windows 上,等价写法是 link:S:/projects/dsh/DSH-Design-Studio。请用绝对路径:裸相对路径会被当作 GitHub 的 owner/repo 简写。用包名卸载:

dsh plugin --profile desktop remove @sal7one/dsh-design-studio
bundle 行默认启用。想保留安装但关闭它,就在你自己配置档的 cordis.patch.yml 里覆盖(配置档层在 bundle 层之后生效,逐行优先):

- id: dsh-design-studio
disabled: true

可选:只有当当前 harness 模型不支持图片输入时,才需要 OpenRouter 密钥作为兜底。运行 design_studio → config;如果 harnessVision.available 为 true,评审和选中的图片直接走 harness 模型。密钥通过凭据接缝存储,之后不再显示。

白话安装指南(非技术用户)

1. 安装 Node.js(v22 或更新版本),从 nodejs.org 下载。
2. 启动 harness:
npx @deepseek-ai/dsh web

浏览器会在它打印的 harness URL 打开窗口(通常是回环地址,如 http://127.0.0.1:<port>)——那就是 harness Web UI。
3. 安装本插件:
dsh plugin --profile desktop add @sal7one/dsh-design-studio

4. 重启 harness(Ctrl+C,再启动)。现在每个会话里都会出现 Design Studio 标签页,另外 Settings → Design Studio 里多一个入口。
5. 开始设计。 创建设计系统,或者直接向助手描述一个界面——它会自动把需求转进 studio。实时预览的地址是 <harness-origin>/design-studio/<name>/html/index.html(具体 origin 就是 harness 打印的那个)。

工作流

设计 → 冻结 → 实现。 描述你的设计稿。插件注入的路由会让智能体保持设计模式,直到设计通过。它认为设计就绪时会问一个原生问题:继续打磨、仅冻结、冻结并实现。冻结默认指向当前项目。「LGTM / looks good / done」直接冻结;「freeze and implement」一步完成两件事,不再二次确认。

和设计智能体一起迭代。 打开 Design Studio 标签页 → 选中你的设计 → 在智能体聊天里输入需求(「把状态栏改成左对齐」「用这张图当背景」)。它读取、编辑并总结;预览自动刷新。

选中元素,让 DeepSeek 改。 🎯 Select → 点击元素 → 输入改动 → Enter 发送给 Ask DeepSeek(Shift+Enter 换行;Save 只写入请求不发送)。请求出现在主聊天里,DeepSeek 动手改,标签页横幅跟踪进度,设计智能体自动校验结果。

给 DeepSeek 一个视觉任务。 把配色图拖到标签页上(会落到 assets/images/),然后在主聊天里说: In the tic-tac-toe design, read the color palette from assets/images/palette.png and apply it to css/token.css. Use the design agent for the visual read.

DeepSeek 把视觉工作转给设计智能体(design_studio → agent),图片自动附加并做视觉描述,结果回流到 DeepSeek 的工具结果里。

要求

- Node ≥ 22,以及 0.2.x 线上的 harness(engines.dsh:>=0.2.0-rc.2 <0.3.0;已在 0.2.1-rc.2 上测试),并带有标准宿主服务(fs、subprocess、webServer、llm、credentials、attachments、systemPrompt、tools,设计智能体聊天还需要可选的 agents/subagents)。
- 工作区 design-studio/ 文件夹会在首次使用时自动创建;旧版配置档中的设计仍可读取。无需符号链接,也无需手动设置。
- 视觉能力:优先使用声明支持图像输入的 harness 模型(无需额外密钥),回退方案是凭据引用 OPENROUTER_API_KEY 下的 OpenRouter 密钥。
- 📷 截图:需要本地安装 Microsoft Edge、Google Chrome 或 Chromium。此项可选;没有它,工作室其余功能照常工作。
- 可选的 Android Appium 目标:需要 Appium 3 加 uiautomator2,运行在回环地址上,已安装 debug APK,并有一台已授权的模拟器或设备。显式执行 Build & install 会调用配置好的构建和安装命令;参见安全限制。
- 实验性的 QaLens companion 默认关闭;只有在你选择启用时,才需要单独选择加入的 SDK/debug 应用和本地工作台。Web、Appium 和 Compose Desktop 用户不需要 QaLens,也不需要它的 Python 工具链。

存储与升级(2.7.0)

- 新设计: <workspace>/design-studio/<slug>/。这些是普通的工作区文件,可以在常规沙箱下提交、审查和编辑。以该工作区为根的所有会话都能看到它们,不只是创建它的那个聊天。
- 页面: 第一页沿用现有的 html/index.html。其他页面是 pages/<id>.html,配套 css/pages/<id>.css、js/pages/<id>.js 和 css/pages/<id>.tokens.css;_studio/pages.json 是清单。它们共用设计的 css/token.css、css/style.css 和 assets/。ZIP/冻结/历史记录和设计删除都作用于整个设计根目录,因此所有页面都会包含在内。
- 配置档: temp_design_folder/ 仍存放全局配置、预设、slug 注册表,以及 2.7.0 之前创建的旧版设计。
- 旧版设计不会自动迁移。 它们在工作室中仍可读取和编辑,但仅限工作区的智能体可能没有访问配置档路径的文件系统权限。新工作应使用新的工作区设计。
- slug 冲突: slug 在配置档注册表和旧版设计之间唯一。在另一个工作区创建相同 slug 会被拒绝。请使用唯一的 slug,或有意识地迁移旧版设计。
- 预览会解析设计注册的根目录,因此 /design-studio/<slug>/ 对工作区设计和旧版设计都有效。

安全模型

Design Studio 是本地、操作者可信的工具。

- HTTP API 仅限回环地址,且不做身份验证。不要把 harness 端口暴露到网络。
- 预览 iframe 同源,且有意不加沙箱,以便元素选择器可以检查设计 DOM。因此,一个 mockup 的 HTML/JS 就是可执行代码,并且拥有同源访问权限;只打开你信任的设计。
- asset_import 接受本地源路径。请把 Studio API 视为等同于本地文件访问。
- Freeze 是工具/上下文守卫,不是操作系统 ACL。直接写文件不受它控制。
- 当宿主 fs 策略拒绝某个设计路径时,工作区写入回退会使用 Node 写入接缝;该回退仅限于当前设计根目录。

Issue #1 — 安装/分发失败(已关闭)

最初的报告尝试了:

dsh plugin --profile desktop add git+https://github.com/sal7one/dsh-design-studio.git

并在提交 c08abef 处失败,报错为 git fetch 退出码 128 / LibreSSL SSL_connect: SSL_ERROR_SYSCALL。这涉及三个独立的层面:

1. 该包无法发布。 那个提交仍带有 "private": true,也不在 npm 上。此问题已修复:private 已移除,包已公开,并且具备 publishConfig、files、engines.dsh、dsh.manifestVersion 以及由 tag 驱动的发布工作流。
2. hub 的 registry 搜索查询不受支持。 npm search repository:sal7one/dsh-design-studio 不会搜索 npm 元数据中的 repository 字段,所以即使 @sal7one/dsh-design-studio 已发布,它也返回空结果。这是 hub 侧的 bug;变通方法是按包名搜索/安装: npm search sal7one 或 dsh plugin --profile desktop add @sal7one/dsh-design-studio。
3. git fetch 本身在那台机器上访问 github.com:443 时遇到 TLS/网络故障。 当前包没有 prepare 脚本,也没有安装时构建,所以只要 GitHub 连接正常,就不需要 allowBuilds 权限;npm 安装完全绕开 git。

当前仓库是公开的、可发布的,并且可以从 npm 安装。用 npm view @sal7one/dsh-design-studio version 验证已发布的产物;npm 包名是 @sal7one/dsh-design-studio,而不是仓库搜索命中的结果。hub 侧的搜索 bug 仍需向 hub 报告;按包名安装可以绕过它。

⚠️ 兼容性说明 — 当前 harness 契约

这个插件是在一个不断变化的 harness 基础上构建并调试的。仍然相关的陷阱:

1. 设计智能体使用 startActivation,而不是 start。 当前契约是
ctx.subagents.startActivation({ provider, label, request, signal, delivery });
request 携带 prompt、parent、cwd、signal 和 maxDepth。旧的
.start(provider, { persona, … }) 调用在 0.2.x 上会静默失败。
2. 一个活动会话就是一个活动 Agent,其 id 是 agent.id。 宿主级的 sessions 服务已不存在;孤儿检测读取 ctx.agents.list()。
工具处理程序必须读取 exec.agent.id,而不是已移除的 exec.agent.sessionId。
3. 客户端模块必须注入真实的客户端包,并立即加载。 dsh.client.inject 现在指定 @deepseek-ai/dsh-client-ui-conversation, …-ui-settings、…-ui-session 和 …-locale;immediately: true 让标签页在启动时注册。已移除的 @deepseek-ai/dsh-client-runtime 条目不再存在。
4. conversation.view 把 sessionId 作为标准 prop 传入。 已废弃的注册写法 inject: (sessionId) => ({ sessionId }) 被移除;视图直接读取 props.sessionId。

5. Send to the main chat through SessionFace.prompt. The scoped
conversation.send path is gone; the tab uses
sessions.binding(id).session.prompt([{ type: 'text', text }], 'queue').
6. No shell assumptions. The host builds shell semantics itself only where it
still needs the subprocess seam (Node helper for binary writes/deletes, OS file
manager for reveal). ZIP export is a built-in store-only writer. This is what makes
the plugin work on Windows.
7. Commit lib/. A harness checkout's .gitignore ignores lib/ — a plugin committed inside one ships without its entry point. This repo lives at its own top level and ships plain JS, so lib/index.js is committed.
8. Hard-inject host services you register against. apply() runs as soon as its
injections resolve; webServer, systemPrompt, tools, etc. must be in inject
so the route/tool/section registration cannot be silently skipped.
9. Vision is route-dependent, not plugin-assumed. The studio asks
ctx.llm.resolveModelInfo for the current selection's inputModalities and only
then sends ImageBlocks. deepseek-account/deepseek-flash on this harness reports
["text","image"], so reviews and selected images run on the harness with no
OpenRouter key. A text-only route falls back to OpenRouter; visionTransport
(auto|harness|openrouter) can force either path.
10. Preview capture is an optional local capability. action snapshot resolves a
local Edge/Chrome/Chromium and renders the actual served route with a temporary
--user-data-dir; it returns an attached image block. No npm browser dependency is
added, and a missing browser is reported instead of faked.

Development

The host is plain ESM under lib/host/; the client source is split under
lib/client/src/ and bundled into the committed lib/client.js (installs never run a
build). Regenerate the bundle after client edits:

npm run build:client
npm run check # fails if lib/client.js is stale
npm test
npm pack --dry-run

The tests use a virtual fs and a fake host context, so they run without a live
harness. The client test loads lib/client.js through the module loader in a VM and
asserts the three slot registrations plus style cleanup.

Publishing

The package is publish-ready and has no install-time build step; lib/client.js is
committed in generated form:

npm publish --access public

Or push a version tag (v2.8.0); .github/workflows/publish.yml publishes to npm
using the NPM_TOKEN repository secret. .github/workflows/ci.yml runs the same
checks on pull requests and pushes.

Before tagging, verify the release smoke path:

npm run build:client && npm run check && npm test
npm pack --dry-run

- npm pack contains lib/host/pages.js, scripts/, AGENTS.md, the handbook,
and no tests, research, or local design-studio/ data.
- A throwaway design: page_list → page_create → style_apply scope=page →
zip → inspect the zip for pages/<id>.html, _studio/pages.json and page
CSS/JS → page_delete.
- README screenshots use unique filenames and absolute raw URLs. The local
v2.8.0 tag must match package.json; the workflow rejects a mismatch.

Then PR one entry into awesome-deepseek-harness (alphabetical, one PR per change,
carry the #dsh-plugin topic for discovery).

License

MIT

The style-atlas data is adapted with attribution from
dsh-ui-ux-pro-max (contributors) and its upstream
ui-ux-pro-max-skill (Next Level Builder), both MIT.
See THIRD_PARTY_NOTICES.md.

Changelog

2.8.0 — Android app targets and Compose Desktop. Bind a design project to an installed Android app and drive it through Appium from the App tab: live screenshot/tree, hover highlighting, selection popup, project-root/build fields, capture into assets + history, and a keepalive session that survives tab switches. Also ships the optional Compose Desktop target. See docs/android-app-targets.md.

2.7.7 — larger canvas and project style scope. Preview opens at 1:1 (large design area, scrolls) with Fit available. Style apply defaults to the project/all-pages scope, configurable in Design Studio settings. All designs lives inside Design Studio as an internal tab, grouped by workspace with search, status filters, counts, latest ZIP dates, and clean preview/zip/show-in-folder/delete actions. Settings now makes unsaved changes explicit and keeps its Save/Refresh header aligned.

2.7.6 — explicit style apply scope. Style preview and tour actions expose Apply to this page and Apply to all pages buttons.

2.7.5 — sidebar-safe preview and multi-page canvases. Preview defaults to Fit with an explicit Fit / 1:1 control; wide 1:1 previews start at the left edge and scroll horizontally instead of disappearing under the open conversation sidebar. One design can now hold multiple business pages with a Pages canvas, page switcher and page-scoped style applies. Sidebars/modals stay in-page overlays.

2.7.4 — release-review hardening. Local API rejects cross-site writes, workspace write fallback is root-bound, vision brief overrides work, design switches reset the run banner, and the publish workflow checks tag/version. Freeze's project picker now lists other live chat projects and workspaces with designs. Screenshots now render on npm; the local security model is documented.

2.7.3 — design switcher. Preview now has a Design selector in the workspace bar for every visible design, with frozen badges; switching reloads that design's files, history, assets, styles and freeze state.

2.7.2 — workspace designs visible across chats. A design in <workspace>/design-studio/ appears in every conversation rooted at that workspace, not just the chat that created it. Legacy profile designs keep their old per-session behavior.

2.7.1 — repeat the Design ready gate after refinement. Choose Keep refining, finish the next revision, and the native three-choice question returns. No plain-chat fallback while ask_user_question is available.

2.7.0 — workspace-local designs. New designs live in the current workspace at design-studio/<slug>/, readable by workspace-sandboxed agents. Profile temp_design_folder/ remains only for legacy designs, global config/presets and the slug registry.

2.6.3 — design-ready question gate. When the design is done, the agent asks one native question with Keep refining / Freeze only / Freeze & implement, then acts on the choice. Asked once, not after every edit.

2.6.2 — built-in design→freeze→implementation routing. The plugin injects the workflow into the DSH system prompt: design phase is default, LGTM/done freezes, frozen means implement in the current project, and “freeze and implement” does both. No per-project boilerplate.

2.6.1 — project selector for freeze. Freeze defaults to the current conversation project; choose This project/Recent/Other path from a selector. No path typing required.

2.6.0 — design freeze. A large Finish & freeze design handoff marks the mockup read-only, records the implementation target, blocks Studio/AI writes, and switches the agent to implementation mode until an explicit Thaw.

2.5.0 — agent handbook + skill. Added a repo-local Design Studio handbook, a reusable design-studio skill, and AGENTS.md guidance. Not installed into the DSH profile yet.

2.4.6 — assets top spacing. The full-screen Asset library starts below the OS/window controls, so Upload/Refresh/Close no longer overlap them.

2.4.5 — cancel delete. Arming Delete now shows a Cancel button, so the confirmation can be dismissed without switching tabs.

2.4.4 — tab row spacing. The workspace tab row now has breathing room above it instead of sitting flush against the Create row.

2.4.3 — vision warning. The selection editor warns when the active model has no image input and no OpenRouter fallback is configured, so you know that DeepSeek will edit from files only and cannot visually verify the result.

2.4.2 — Enter asks DeepSeek. In the selection editor, Enter now sends the change to Ask DeepSeek; Shift+Enter adds a line, and Save only remains an explicit “don’t send” action.

2.4.1 — run banner lifecycle. The Ask-DeepSeek banner now polls the session binding so a finished run clears on its own; unobserved pickups fall back to “watch the main chat” and finished/untracked banners auto-dismiss after 8s.

2.4.0 — style tour and safe applies. The Styles grid gets a large Try them now* button that opens a horizontal style tour over the current design; arrow keys auto-try each style. The tour sits above the preview and has a Fit toggle that scales and centers the whole preview so the page does not scroll; the strip scrolls horizontally on its own. Random-next preview, one-click Undo apply backed by a pre-style snapshot, and auto snapshots after AI edit batches/agent turns.

2.3.0 — attributed style atlas. 88 design styles from dsh-ui-ux-pro-max (MIT) are vendored as normalized data, then exposed through a Styles tab: try a style live in the current design, apply tokens, create a new project from the full template, save the current token.css as a custom style, and shuffle fonts/palettes. No runtime dependency on the source repo.

2.2.0 — content-addressed edit history. Every design now has a snapshot tree (_studio/history/<slug>/) with sha256 blobs, sorted tree manifests, parent-linked snapshots and a head cursor. Auto-capture runs after edits settle; the History tab offers undo-last-edit and restore-to-snapshot.

2.1.0 — settings redesign and file split. A vision-first Settings page (transport, review style, capture viewport, agent preset, auto-verify) and modular host/client sources: lib/host/ and lib/client/src/, with a zero-dependency bundler that emits the committed lib/client.js. Installs still need no build step.

2.0.0 — modernized for DSH 0.2.x. The host now uses the current ctx.subagents.startActivation contract and Agent.id, the client uses the current slot registration and Session prompt() API, and the plugin no longer shells out to sh, curl, zip, base64 or screencapture. The buggy screenshot-capture feature and the unused dynamic/ prototype were removed. See CHANGELOG.md.

Optional Android: QaLens companion

The experimental companion is off by default. To use it, enable QaLens
companion in Settings → Design Studio, save, then choose Android · QaLens in App. Enabling the desktop setting does not install an SDK, start a server, pair a phone, or change a host app. The web editor and other app targets work independently.

The integration guide covers opted-in installation,
QA/release variants, the existing workbench, privacy, verification and rollback.
The separate agent skill helps with explicit
integration requests; it is not required for mockup work. The feature in this
checkout may not yet exist in a published npm version.
预览分享卡片长什么样 ↓Sal7one/DSH-Design-Studio
分享 · DeepSeek Harness Hub
Sal7one/DSH-Design-Studio

灵感来自 Calude 设计,一款 DeepSeek Harness 设计插件!选中元素、调用 Open Router 视觉智能体、上传图片,功能多到数不完!!用 deepseek 快速改稿,或直接写提示词唤起视觉模型!

这是你的仓库?认领条目

回到顶部