前言¶
在 DSH 工作流中,如果要把 UI 截图交给纯文本 DeepSeek 模型重建为响应式 Web 界面,需要先补充布局、视觉细节、交互和浏览器验证约束。dsh-ui-spec 是 yumimanji 维护的 DeepSeek Harness 插件,用于把 UI 截图转换为实现导向的结构化规格。
插件定位¶
- 包名:
dsh-ui-spec - 维护者:
yumimanji - 版本:
0.1.1 - 许可证:
MIT - GitHub:
https://github.com/yumimanji/dsh-ui-spec
核心能力¶
下面介绍已核实的能力,便于判断它是否适合当前任务:
- 将 UI 截图转换为实现导向的结构化规格。
- 帮助纯文本 DeepSeek 模型重建响应式 Web 界面。
- 使用 Windows 原生 OCR。
- 提供布局、视觉细节、交互和浏览器验证约束。
- 使用 OCR、确定性几何、场景图、资产和渲染比较。
安装与启用¶
从 npm 安装¶
先确认要安装的 DSH profile,然后执行 npm 安装命令。这里使用 web profile 作为示例:
dsh plugin --profile web add dsh-ui-spec
依赖与包信息¶
安装前可以查看 package.json 中的关键依赖。资料中可确认的依赖信息如下:
@deepseek-ai/cordis >=0.1.0-rc
@deepseek-ai/dsh-tools >=0.1.0-rc
这两个 peerDependencies 在资料中标明为必填依赖。
另外,package.json 依赖包含:
sharp ^0.35.3
package.json 还声明 DSH bundle patch 文件为:
./cordis.patch.yml
从 GitHub 当前版本安装¶
如果从 GitHub 当前版本安装,并且使用 pnpm 11,需要在 DSH profile 的 pnpm-workspace.yaml 中允许该仓库的 build script。先修改该 profile 的 pnpm-workspace.yaml:
allowBuilds:
"dsh-ui-spec@git+https://github.com/yumimanji/dsh-ui-spec.git": true
然后再执行 GitHub 安装命令:
dsh plugin --profile web add github:yumimanji/dsh-ui-spec
若 DSH profile 无法配置 allowBuilds,建议使用 npm release。
处理 ERR_PNPM_UNEXPECTED_STORE¶
出现 ERR_PNPM_UNEXPECTED_STORE 时,资料中的处理方式是:重建该 DSH profile 的依赖后重试安装。可以按下面步骤处理:
cd $env:USERPROFILE\.dsh\profiles\web
Rename-Item node_modules node_modules.store-mismatch-backup
pnpm install
dsh plugin --profile web add dsh-ui-spec
DSH 正常启动后,再删除备份目录。
典型用法¶
在 DSH 中向模型提出请求。下面两个示例来自 README。
分析当前目录中的两张图¶
这个示例要求分析当前目录中的两张图,实现后使用 manage_ui_browser 验证页面,并且只关闭由该工具创建的浏览器会话。
Use ui-spec to analyze the two images in the current directory and recreate them as responsive web interfaces. After implementation, validate the pages with manage_ui_browser and close only the browser session created by that tool.
分析指定路径的单张图¶
如果只需要分析一张参考图,可以给出具体路径。下面是 Windows 路径示例:
Use ui-spec to analyze C:\path\to\reference.png and implement the responsive web UI.
适用场景与注意¶
适合已有 UI 截图,希望先生成实现导向的结构化规格,再让 DeepSeek 实现响应式 Web 界面的场景。README 指出该插件使用 Windows 原生 OCR,使用时需要符合这一运行条件。
安装前需要检查源码和许可证。插件以当前 dsh 进程权限运行,因此不要将其安装方式理解成官方应用商店。
结尾¶
dsh-ui-spec 的价值在于把截图中的布局、视觉细节、交互和验证要求整理为结构化规格,为纯文本 DeepSeek 模型实现响应式 Web 界面提供约束。
当前已核实资料未提供目录页 URL,因此这里只给出 GitHub 链接:https://github.com/yumimanji/dsh-ui-spec