dsh-ui-spec
English | 简体中文
  
将 UI 截图解析为面向实现的结构化规范,帮助纯文本 DeepSeek 模型还原自适应 Web 界面。插件使用 Windows 原生 OCR 辅助识别,并提供布局、视觉细节、交互和浏览器验证约束。
效果展示
以下结果来自 Desktop/8 测试。右侧页面由模型根据插件输出自主实现。
| 原始参考图 | DeepSeek 实现效果 |
|---|---|
| <img src="https://raw.githubusercontent.com/yumimanji/dsh-ui-spec/main/docs/images/desktop-8-reference.webp" width="420" alt="Desktop 8 个人成长 UI 原始参考图"> | <img src="https://raw.githubusercontent.com/yumimanji/dsh-ui-spec/main/docs/images/desktop-8-result.webp" width="420" alt="DeepSeek 根据 ui-spec 实现的页面"> |
安装
从 npm 安装:
dsh plugin --profile web add dsh-ui-spec安装 GitHub 当前版本时,pnpm 11 需要允许源码包执行构建脚本。在 DSH profile 的 pnpm-workspace.yaml 中加入:
allowBuilds:
"dsh-ui-spec@git+https://github.com/yumimanji/dsh-ui-spec.git": true然后安装:
dsh plugin --profile web add github:yumimanji/dsh-ui-spec如果当前 DSH profile 无法配置 allowBuilds,请使用 npm 版本。
使用
在 DSH 中直接告诉模型:
使用 ui-spec 对当前目录下的两张图片进行分析并模拟实现,页面需要自适应屏幕。完成实现后使用 manage_ui_browser 验证页面,并只关闭该工具启动的浏览器会话。也可以指定单张图片:
使用 ui-spec 分析 C:\path\to\reference.png,并实现对应的自适应 Web UI。安装问题
如果出现 ERR_PNPM_UNEXPECTED_STORE,说明 DSH profile 现有的 node_modules 与当前 pnpm store 不一致。重建该 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 正常启动后再删除备份目录。
许可证
[MIT](LICENSE)