前言¶
用 DeepSeek Harness（DSH）写前端时，设计环节往往游离在 agent 工作流之外：截图贴进聊天、口头描述改动、agent 改完代码后自己开浏览器核对。设计和编码是两条线，agent 看不到页面，也无法验证自己改了什么。
DSH 的理念是「一切皆插件」，这条线可以由插件来补。下面介绍的 @sal7one/dsh-design-studio 由 Sal7one 维护，MIT 许可证，把实时预览、元素选取、真实设计 agent 和视觉评审接进 harness，让设计稿成为 agent 能直接读写、验证的文件。
这是什么¶
一句话定位：一个把设计 mockup 变成一等 AI 工作流的 DeepSeek Harness 设计插件——实时预览、元素选取、真实设计 agent 与视觉评审。
几个基本盘：
- 当前版本 1.2.3，
engines要求 Node.js >= 22； - 零运行时依赖，纯 JavaScript，无构建步骤；
- 结构是
dsh.bundle（宿主侧）+dsh.client（Web UI 侧）双面包：dsh plugin add一次，design_studio工具、/design-studio预览路由、提示词段落和 Design Studio 标签页每次启动都在； - 所有设计系统都是磁盘上
temp_design_folder/下的真实文件，设计、预设、配置、评审和 agent 历史重启后仍在。
核心功能¶
design_studio 工具与实时预览¶
design_studio 是一个 agent 工具，主助手和子代理都能调用，支持 list / all / create / read / write / zip / reveal / delete / sweep 设计系统，管理身份预设、运行视觉评审、与设计 agent 对话、读取历史、配置 studio，操作范围限定在 temp_design_folder/ 下的设计目录。
实时预览路由是 /design-studio/<slug>/html/index.html，由 harness web server 提供；Design Studio 标签页以 iframe 内嵌该路由，保存后热重载。另有一段 Design-brief 提示词，会把操作者的屏幕简介自动转成设计系统。
设计系统的文件结构¶
每个设计系统的文件结构固定：
html/index.html
css/style.css
css/token.css
js/app.js
design_prompts_forcoders.md
assets/images/
design_prompts_forcoders.md 是编码 agent 要遵循的 brief；assets/images/ 存放上传的图片。mock 数据保持诚实——只有空态和加载态，不伪造线上数字。
每个设计系统按创建它的会话归属，标签页只显示当前会话的设计。
设计 agent¶
设计 agent 不是包装出来的角色，而是真实的 harness 子代理，行为有四点：
- 每条消息内自行跨多次工具调用读取、编辑设计文件，再汇总文件级改动；
- 读取和编辑活动实时流入聊天，带内联错误、按系统持久化的历史和运行超时；
- 视觉预检（Vision pre-pass）：选择器中选定的图片先由配置的视觉模型描述，agent 不会在多个资产之间猜「这张图」是哪张；
- 新鲜度戳
{hash, at}：插件经 harnessfs/observed流检测任何编辑器的改动，agent 每轮记录 design cache，下一轮据此证明 UNCHANGED 或 CHANGED。
元素选取与双 agent 应用¶
点击 🎯 Select，在实时预览中点选任意元素并描述改动，然后三选一：
| 按钮 | 行为 |
|---|---|
| 🤖 Ask DeepSeek（默认） | 写入 EDIT_REQUEST.md 并注入主聊天，DeepSeek 自己改文件；编辑落定后 studio 自动运行一次设计 agent 验证 |
| ◈ 交由设计 agent | 经典流程：设计 agent 自己应用改动并在其聊天里回复 |
| 💾 仅保存 | 只写 EDIT_REQUEST.md，之后从任一聊天应用 |
视觉评审与身份预设¶
- 👁 Review：基于 OpenRouter 视觉模型，对照 brief 给出诚实的
GOOD | POOR评语加一句话备注，模型、effort、options 均可配置； - 身份预设：保存调色板、字体、Logo；
preset_apply写入css/token.css并复制 Logo 资产； OPENROUTER_API_KEY经 harness credential seam 处理，密钥从不渲染或返回；- 📸 Shot：截取屏幕区域（macOS
screencapture）直接进入assets/images/。注意作者在 README Todos 中已计划移除该功能，因其 buggy。
其他能力¶
- 拖放区：图片或代码文件拖入标签页，图片落入
assets/images/并在 agent chat 选择器中自动选中； - Zip 导出（
_zips/<slug>.zip，仅文件）、Finder 定位（open -R）、无 shell 的递归删除，在没有 POSIX shell 的主机上也能用； - Settings → Design Studio / All designs 页面：配置、key 状态、系统列表、逐设计的 zip/reveal/delete。
安装与启用¶
插件兼容两种 harness 发行方式：npm 发行版和源码 checkout。npm 发行版按下面三步走：
# 1. 启动 harness（如未运行）
npx @deepseek-ai/dsh web
# 2. 安装插件
dsh plugin --profile web add "github:sal7two/dsh-design-studio#main"
# 3. 重启 harness，加载新层
源码 checkout 用 pnpm dsh web 启动。从本地 checkout 安装：
dsh plugin --profile web add -w /absolute/path/to/dsh-design-studio
两点注意：
-w仅当 profile 目录是 pnpm workspace 根（存在pnpm-workspace.yaml）时需要，且路径必须为绝对路径，否则会被误读为 GitHubowner/repo简写；- 上面的安装命令按 README 原文照录，其中
sal7two与 GitHub 仓库归属Sal7one/DSH-Design-Studio不一致，安装前请以仓库页面给出的命令为准。
典型用法¶
经过上面的步骤重启 harness 后，Design Studio 标签页每次启动都在。以元素选取流程为例：
- 打开 Design Studio 标签页；
- 点击 🎯 Select；
- 在实时预览中点选任意元素，描述想要的改动；
- 选择应用方式：默认的 🤖 Ask DeepSeek 把请求写入
EDIT_REQUEST.md注入主聊天，DeepSeek 编辑文件，编辑落定后 studio 自动运行设计 agent 验证；也可以 ◈ 交由设计 agent 执行，或 💾 仅保存，之后再从任一聊天应用。
另一条入口是 Design-brief 路由：在聊天里给出屏幕简介，系统提示词段落会把它自动转成设计系统，不用手动建目录。
适用场景与注意¶
适合谁：用 DSH 做界面开发的开发者；需要在主聊天之外有一条独立的设计线，且希望设计和编码共享同一套真实文件，而不是贴图和口头交接。
使用前留意：
- 插件以当前 dsh 进程的权限运行，可读写
temp_design_folder/并调用视觉模型。安装前建议检查源码与许可证（本插件为 MIT）； - 运行环境要求 Node.js >= 22；
- 📸 Shot 截图功能作者已标记为 buggy 并计划移除，使用时留意；
- 卸载等其余操作参考仓库 README。
小结¶
@sals7one/dsh-design-studio 把设计稿从贴图变成 agent 可读写、可验证的真实文件：实时预览和元素选取让改动有处可点，双 agent 应用流程让每次编辑都经过设计 agent 验证，新鲜度戳和视觉预检则处理多 agent 协作时的漂移问题。如果你在用 DSH 做界面开发，值得试一次。
- 社区目录（独立站点，非官方应用商店）：https://www.skillhub.cn/plugins/Sal7one/DSH-Design-Studio
- GitHub：https://github.com/Sal7one/DSH-Design-Studio
