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

@sal7one/dsh-design-studio

一个 DeepSeek Harness 插件，将设计稿转化为一流的 AI 工作流。
实时预览、元素选择器、真正的设计代理、视觉审查、截图、
身份预设——以及一个双代理应用流程，其中 DeepSeek 负责编辑，设计
代理负责验证。一切都由 temp_design_folder/ 下的真实磁盘文件支撑，
并且一切都是 启动持久化 的：安装一次，Design Studio 标签页在每次启动时都会存在。

截图

点击任意缩略图查看完整尺寸图片。

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
├── LICENSE               # MIT
├── repo-images/          # UI screenshots shown at the top of this README
├── lib/
│   ├── index.js          # HOST half: design_studio tool, /design-studio route + JSON API,
│   │                     #   design-agent engine, freshness stamps, auto-verification
│   └── client.js         # WEB UI half: conversation tab, element picker, agent chat, settings
├── examples/             # example design systems (html/css/js mockups + presets)
└── dynamic/              # legacy dynamic-plugin prototype (reference only — not needed)

待办事项

- 移除截图功能，它有缺陷

✨ 功能特性

核心平台

- 一条命令，持久生效 —— 一个双面 dsh.bundle + dsh.client 包：
只需执行一次 dsh plugin add，该工具、预览路由、提示词部分以及
Design Studio 标签页 在每次启动时都会存在。无需构建步骤，无需 TypeScript，
零运行时依赖（纯 JavaScript）。
- design_studio 代理工具 —— 你的助手（以及任何子代理）可以
list / all / create / read / write / zip / reveal / delete / sweep 设计系统，
管理身份预设、运行视觉审查、与设计代理聊天、读取其
历史记录，并配置工作室——全部限定在 temp_design_folder/ 设计文件夹范围内。
- 实时预览路由——/design-studio//html/index.html，由
harness Web 服务器提供；工作室标签页将其嵌入 iframe，并在保存时热重载。
- 设计简报路由——一个系统提示词部分会自动将操作员的屏幕简报转换为
设计系统。

设计系统

- 以模型稿为范围的文件——每个设计系统都是 html/index.html、
css/style.css、css/token.css、js/app.js（最小化呈现）加上
design_prompts_forcoders.md（编码代理遵循的简报）以及
assets/images/ 用于上传。模拟数据保持真实——空/加载状态，
绝不伪造实时数字。
- 按对话归属——每个设计系统都绑定到创建它的对话；
该标签页只显示你聊天中的设计（未绑定的旧系统
会在首次列出时被接管）。
- 拖放区——将图片或代码文件拖放到标签页上；图片会落入
assets/images/，并在代理聊天选择器中自动选中。
- Zip 导出 + Finder 显示 + 删除——_zips/.zip（仅文件）、open -R，
以及无 shell 的递归删除，即使在没有 POSIX shell 的主机上也能工作。

设计代理（真实 harness 子代理）

- 它自己完成工作——代理聊天运行一个 harness 子代理（spawn
引擎、design-studio 人格），它会在每条消息中通过多次工具调用列出、读取和编辑设计文件，
然后总结文件级更改。
- 实时活动——它的读取/编辑会在发生时流式传输到聊天中，带有
内联错误、按系统持久化的历史记录以及运行超时。
- 视觉预处理——在选择器中明确选中的图片（或按
文件名提及的图片）会由你配置的视觉模型预先描述，因此“那张图片”
始终指正确的那张，代理绝不会在多个资源之间猜测。
- 设计缓存纪律——在每一轮（即使只是一个简单的“ok”），代理都会验证
新鲜度戳记，报告设计自上一轮以来是否发生变化，
采用最新文件作为事实，并在请求含糊时询问你想要什么。

🎯 元素选择器 + 双代理应用流程

点击 🎯 Select，点击实时预览中的任意元素，描述更改：

| 按钮 | 会发生什么 |
| --- | --- |
| 🤖 Ask DeepSeek （默认） | 保存 EDIT_REQUEST.md，将请求注入你的 主聊天。DeepSeek 自己编辑文件，并且只在需要视觉时调用设计代理（该工具会明确路由它）。一个 实时运行横幅 会在标签页中跟踪 queued → working → finished，并且工作室会在编辑稳定后 自动运行一次设计代理验证——保证设计师参与，而不是寄希望于它。 |
| ◈ Make the design agent do it | 经典流程：设计代理自己应用更改，并在其聊天中回复。 |
| 💾 Save only | 只写入 EDIT_REQUEST.md——之后可从任一聊天中应用。 |

新鲜度戳记（多代理安全）
- 每次设计变更都会更新一个 stamp {hash, at}（全新的随机哈希 + ISO 时间，
仅保留最新状态）——插件通过 harness 的 fs/observed 流检测来自任何编辑器的
变更，并在其自身的写入路径上同步更新。
- Agent 会将它们记住的哈希与当前哈希进行比较：漂移（“自你上一轮以来已变更”）
会在提示词和工具输出中呈现，设计 agent 会记录每轮的 design cache，
以便下一轮能够证明 UNCHANGED/CHANGED。

视觉、截图与预设

- 📸 Shot —— 捕获屏幕区域（macOS 上使用 screencapture）直接存入
设计系统的 assets/images/。
- 👁 Review —— 由你的 OpenRouter 视觉模型对照 brief 给出诚实的 GOOD | POOR
判定 + 一句话说明（可配置模型、effort、选项）。
- Identity presets —— 将调色板/排版/徽标保存为预设；preset_apply
写入 css/token.css 并复制徽标资源。凭据通过 harness 凭据接缝
（OPENROUTER_API_KEY）处理——密钥永远不会被渲染或返回。

设置与数据

- Settings → Design Studio / All designs 页面：配置、密钥状态、系统列表、
每个设计的 zip/reveal/delete。
- 一切都能在重启后保留 —— 设计、预设、配置、评审和 agent 历史都保存在
temp_design_folder/ 下的磁盘上。

快速开始

适用于两种 harness 发行版——npm 发行版
（npx @deepseek-ai/dsh web）和源码检出（pnpm dsh web）。

1. 启动 harness（如果尚未运行）：npx @deepseek-ai/dsh web
2. 安装插件
dsh plugin --profile web add "github:sal7two/dsh-design-studio#main"
3. 重启 harness，以便加载新的层

从本地检出安装：

dsh plugin --profile web add -w /absolute/path/to/dsh-design-studio

仅当你的 profile 目录是 pnpm workspace 根目录
（pnpm-workspace.yaml 中包含 packages: [., packages/]）时才需要 -w，
并且路径必须是绝对路径——裸相对路径会被误读为 GitHub 的 owner/repo 简写。
使用包名移除：
dsh plugin --profile web remove @sal7one/dsh-design-studio。

bundle 行默认启用。若要保留安装但关闭它，请在你的 profile 自己的
cordis.patch.yml 中覆盖它（profile 层在 bundle 层之后应用，并按行生效）：

- id: dsh-design-studio
disabled: true

可选：在标签页 → Settings → Design Studio 中，粘贴 OpenRouter API 密钥以启用
视觉评审和图像描述（通过凭据接缝存储；之后不再显示）。
其他所有功能无需它即可使用。

通俗易懂的安装说明（非高级用户）

1. 安装 Node.js（v22 或更新版本），从 nodejs.org 下载。
2. 启动 harness：
npx @deepseek-ai/dsh web

我个人跳过了 npx，改用 npm，并将其全局安装。

浏览器窗口会在 http://127.0.0.1:3080 打开——那就是 harness Web UI。
3. 安装此插件：
markdown
dsh plugin --profile web add "github:sal7two/dsh-design-studio#main"
4. 重启 harness（Ctrl+C，然后重新启动）。现在每个对话中都会出现 Design Studio 标签页，
以及 设置 → Design Studio / 所有设计。
5. 设计一些东西。 创建一个设计系统，或者直接向助手描述一个屏幕——
它会自动将需求简报路由到工作室中。实时预览地址为
http://127.0.0.1:3080/design-studio//html/index.html。

工作流程

与设计代理一起迭代。 打开 Design Studio 标签页 → 选择你的设计 →
在代理聊天中输入请求（“让状态栏左对齐”、“使用这张图片
作为背景”）。它会读取、编辑并总结；预览会重新加载。

选择一个元素，让 DeepSeek 来修改它。 🎯 选择 → 点击该元素 → 输入
修改内容 → 🤖 询问 DeepSeek。该请求会出现在你的主聊天中，DeepSeek
进行编辑，标签页横幅会跟踪进度，设计代理会自动验证结果。

给 DeepSeek 一个视觉任务。 将一张调色板图片拖放到标签页上（它会落入
assets/images/），然后在 主聊天 中：
在井字棋设计中，从 assets/images/palette.png 读取调色板
并将其应用到 css/token.css。使用设计代理进行视觉读取。

DeepSeek 将视觉工作路由到设计代理（design_studio → agent），
图片会被自动附加并进行视觉描述，结果会回流到 DeepSeek 的
工具结果中。

要求

- Node ≥ 22 以及 harness（npm 发行版 ≥ 0.1.0-rc.5，或同一代的
源码检出）并具备标准宿主服务
（fs、subprocess、webServer、llm、credentials、attachments、systemPrompt、tools）。
- 设计树根目录必须存在于 服务器进程工作区根目录 下，作为
temp_design_folder/（符号链接也可以）。
- 对于视觉审查：在凭证引用
OPENROUTER_API_KEY 下存储的 OpenRouter 密钥，或 harness 的 openrouter 提供方路由。

⚠️ 兼容性说明——我们已经犯过的错误，这样你就不必再犯

这个插件是在一个不断变化的 harness 基础上构建并调试的。陷阱如下：

1. shell 在宿主层已经不存在。 旧的 shell 执行器（resolve/run）现在位于
会话预设中。注入 shell 的宿主行会 静默地永远等待——
没有启动错误，没有路由，没有工具。注入 subprocess 并自行构建 shell 语义
（参见 lib/index.js → sh()）。
2. 对你注册的所有内容进行硬注入。 apply() 会在其
注入解析后立即运行，这可能是在 webServer/tools/llm 存在 之前。过早地
一次性调用 ctx.get() 会返回 undefined，并静默跳过路由/工具/
区段注册。将集成点放入 inject，这样 apply 就会等待。
3. 提供方密钥会与内置目录冲突。 基础版本附带 llm-pi-ai，
它原生声明了 openrouter（以及其他）。注册你自己的
openrouter 可配置提供程序会抛出 DUPLICATE_DIRECTORY，并导致整个
Web 启动失败*。在发布提供程序插件之前，请检查目标基础目录的目录清单。
4. 提交 lib/。 测试框架检出目录的 .gitignore 会忽略 lib/ —— 在其中提交的插件
发布时会缺少其入口点。此仓库位于自己的顶层目录，
并发布纯 JS，因此 lib/index.js 会被提交。
5. 动态插件在重启后会失效。 dynamic/ 中的所有内容在设计上都是内存中的。
捆绑包是重启安全的部分。不要向用户承诺来自
动态包的持久标签页。
6. 客户端服务是按作用域寻址的。 主聊天可以从另一个
标签页通过 sessions.scope(sessionId).get('conversation') 访问 —— 属性访问
（scoped.conversation）不会解析该服务。（这个确切的 bug 曾经
发布过；修复位于 lib/client.js → askDeepSeek。）

发布

gh repo create sal7two/dsh-design-studio --public --source . --push
gh repo edit sal7two/dsh-design-studio --add-topic dsh --add-topic dsh-plugin

然后向 awesome-deepseek-harness 提交一个条目 PR（按字母顺序，每次更改一个 PR，
带上 #dsh-plugin 主题以便被发现）。

许可证

MIT