前言¶

用 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 子代理，行为有四点：

1. 每条消息内自行跨多次工具调用读取、编辑设计文件，再汇总文件级改动；
2. 读取和编辑活动实时流入聊天，带内联错误、按系统持久化的历史和运行超时；
3. 视觉预检（Vision pre-pass）：选择器中选定的图片先由配置的视觉模型描述，agent 不会在多个资产之间猜「这张图」是哪张；
4. 新鲜度戳 {hash, at}：插件经 harness fs/observed 流检测任何编辑器的改动，agent 每轮记录 design cache，下一轮据此证明 UNCHANGED 或 CHANGED。

元素选取与双 agent 应用¶

点击 🎯 Select，在实时预览中点选任意元素并描述改动，然后三选一：

视觉评审与身份预设¶

• 👁 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

两点注意：

1. -w 仅当 profile 目录是 pnpm workspace 根（存在 pnpm-workspace.yaml）时需要，且路径必须为绝对路径，否则会被误读为 GitHub owner/repo 简写；
2. 上面的安装命令按 README 原文照录，其中 sal7two 与 GitHub 仓库归属 Sal7one/DSH-Design-Studio 不一致，安装前请以仓库页面给出的命令为准。

典型用法¶

经过上面的步骤重启 harness 后，Design Studio 标签页每次启动都在。以元素选取流程为例：

1. 打开 Design Studio 标签页；
2. 点击 🎯 Select；
3. 在实时预览中点选任意元素，描述想要的改动；
4. 选择应用方式：默认的 🤖 Ask DeepSeek 把请求写入 EDIT_REQUEST.md 注入主聊天，DeepSeek 编辑文件，编辑落定后 studio 自动运行设计 agent 验证；也可以 ◈ 交由设计 agent 执行，或 💾 仅保存，之后再从任一聊天应用。

另一条入口是 Design-brief 路由：在聊天里给出屏幕简介，系统提示词段落会把它自动转成设计系统，不用手动建目录。

适用场景与注意¶

适合谁：用 DSH 做界面开发的开发者；需要在主聊天之外有一条独立的设计线，且希望设计和编码共享同一套真实文件，而不是贴图和口头交接。

使用前留意：

1. 插件以当前 dsh 进程的权限运行，可读写 temp_design_folder/ 并调用视觉模型。安装前建议检查源码与许可证（本插件为 MIT）；
2. 运行环境要求 Node.js >= 22；
3. 📸 Shot 截图功能作者已标记为 buggy 并计划移除，使用时留意；
4. 卸载等其余操作参考仓库 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