yumimanji/dsh-ui-spec

Name: yumimanji/dsh-ui-spec
Author: yumimanji

Plugin插件 Native原生 ⭐ 2 MIT Vision & Media视觉与多媒体 Docs & Writing文档与写作 UI & Themes界面与主题

DeepSeek Harness插件：将UI截图转化为结构化、可实现级的Web前端规格。确定性几何（Sharp）+ 可选视觉模型语义，合并为一个JSON + Markdown规格。

Project Overview项目介绍

Edited by Zhiwei Agent (zhiwei)由知微Agent(zhiwei)编辑

dsh-ui-spec is a native DeepSeek Harness plugin built exclusively for the DSH ecosystem. Its core function is to convert UI design screenshots into implementation-focused structured specifications, enabling text-only DeepSeek large language models to recreate responsive web interfaces from the provided reference images. The plugin leverages Windows native OCR to extract layout, visual detail, interaction rules, and browser verification constraints from input screenshots to guide the model’s implementation process. It can be installed directly via the DSH plugin command line interface using either the npm published release or the source code hosted on GitHub. Installing the GitHub version requires an extra configuration step to allow the package build script in DSH’s pnpm workspace settings.

Once installed, the typical workflow for using this plugin is straightforward within DSH. A user just needs to write a clear prompt asking the DSH model to use ui-spec to analyze the target screenshot, and specify the full file path of the screenshot if it is not already stored in the current working directory. The plugin will process the input image and output the structured UI specification, then the DeepSeek model will use that specification to write the full code for the target responsive web UI. This tool is designed for frontend developers, UI designers, and anyone who needs to quickly turn a static UI design screenshot into working responsive web code.

This plugin is released under the permissive MIT open source license, so it can be used and modified freely with no cost or restrictions beyond the license terms. Because it relies on Windows native OCR, it only works on Windows systems and will not function on macOS or Linux. A common installation issue is the ERR_PNPM_UNEXPECTED_STORE error, which happens when the DSH profile’s node_modules uses a different pnpm store. To fix this, users must back up the existing node_modules folder, run a fresh pnpm install for the profile, and then retry installing the plugin. After the plugin installs successfully, users can delete the backup folder.

这是一款专为 DeepSeek Harness 开发的原生插件，核心功能是将 UI 设计截图转换为面向实现的结构化规格说明，帮助纯文本 DeepSeek 模型复现截图中的响应式网页界面。该插件调用 Windows 原生 OCR 能力提取截图中的界面信息，生成的规格会包含布局结构、视觉细节、交互规则以及后续浏览器验证约束等内容，辅助模型完成符合设计要求的 UI 复现。

用户安装插件后，只需要在 DSH 中向模型发出明确指令，指定待分析的截图存放路径，就可以让模型基于插件生成的结构化规格自动实现对应的网页界面。开发者上传设计好的 UI 截图，即可让大模型自主完成从设计稿到可运行网页代码的转换工作，适合需要快速将UI设计落地为网页的前端开发者和设计师使用。

该插件采用 MIT 许可证开源，可通过 npm 官方发布包或 GitHub 源码安装，安装 GitHub 版本需要在 DSH 对应配置文件中添加允许构建的规则，目前仅支持 Windows 平台，依赖 Windows 原生 OCR 能力。如果安装时遇到 pnpm 存储不匹配错误，需要备份并重装 profile 依赖后再重试安装。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：dsh-ui-spec（yumimanji/dsh-ui-spec）
仓库：https://github.com/yumimanji/dsh-ui-spec
本站详情页：https://www.yhbd.top/plugins/yumimanji-dsh-ui-spec/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 MIT · ⭐ 2 · 最近提交 2026-08-21 · 主语言 TypeScript

按下面顺序执行，每步先把结论告诉我，再进入下一步：

【1 兼容性检查】
① 我这边：DSH 版本、Node 版本、操作系统、当前 profile（web / desktop）。
② 读它的 README、package.json、插件 manifest，列出它要求的 DSH 版本 / Node 版本 / 操作系统 / 外部依赖 / 需要另外先装的运行时。
③ 逐条比对，结论只写「满足 / 不满足 / 未知」三种；不满足的给出可行替代方案。
④ 检查是否和我已装的插件冲突：命令名重复、skill / tool 重名、端口占用、重复注册的 MCP server。

【2 安全性检查】
① 仓库可信度：和上面「本站登记」是否一致；star / fork 数、创建时间、最近提交，是否归档或长期停更。
② 安装脚本：逐行看 package.json 的 preinstall / install / postinstall，以及 install.sh、setup.ps1 之类脚本。出现 curl|bash、下载后直接执行、混淆代码、访问与插件功能无关的域名，立刻停下来告诉我，不要继续装。
③ 依赖：列出新增依赖，标出无人维护、或与知名包拼写近似的可疑包（typosquatting）。
④ 权限与副作用：它会读写哪些目录、访问哪些域名、需要哪些 DSH 权限（filesystem / network / shell / clipboard 等），以及怎么卸载和回滚。
⑤ 如果它要求 sudo / 管理员权限，或权限明显超出功能所需，先停下来问我。

【3 安装】
上面两步没有「不满足」和「高危项」时才执行；用官方推荐方式安装，不要自行提权。

【4 汇报】
用表格输出：检查项 / 结论 / 依据 / 是否需要我决策。拿不准的一律写「未知」并说明要我怎么确认——不要猜，也不要替我决定。

Send this message to DSH in your current session: it verifies compatibility and security first (answering met / not met / unknown item by item) and only installs once everything checks out — it will stop and ask you if it finds a high-risk item. The box scrolls; the copy is the full prompt. CLI install commands may not be accurate across systems, so DSH is the safer route.把上面这条消息直接发给当前会话里的 DSH：它会先核对兼容性与安全性（逐条给「满足 / 不满足 / 未知」），确认没问题再安装，有高危项会停下来问你。框内可滚动，复制到的是完整提示词；安装命令不一定准确，发给 DSH 更稳。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 1 warning1 项注意

Only 2 stars - very few users, little community feedback星标只有 2，几乎没人在用，遇到问题缺少社区反馈

DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时（Electron / Python / Docker 等）是否齐备
Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突：命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致，是否归档或长期停更
Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需（filesystem / network / shell / clipboard）
Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限，以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照，不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装（适合开发者）

CLI Install命令行安装

dsh plugin --profile web add dsh-ui-spec

把 yumimanji/dsh-ui-spec 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

2.5 KB · 缓存于 2026-08-23 03:42:26 · 2.5 KB

dsh-ui-spec

English | 简体中文

Turn UI screenshots into implementation-oriented structured specifications that help a text-only DeepSeek model recreate responsive web interfaces. The plugin uses Windows native OCR and supplies layout, visual-detail, interaction, and browser-verification constraints.

Showcase

This example comes from the Desktop/8 test. The page on the right was implemented autonomously from the plugin output.

Reference	DeepSeek implementation

Install

Install from npm:

dsh plugin --profile web add dsh-ui-spec

Installing the current GitHub version with pnpm 11 requires allowing its source-package build script. Add this to the DSH profile's pnpm-workspace.yaml:

allowBuilds:
  "dsh-ui-spec@git+https://github.com/yumimanji/dsh-ui-spec.git": true

Then install:

dsh plugin --profile web add github:yumimanji/dsh-ui-spec

Use the npm release when the DSH profile cannot configure allowBuilds.

Use

Ask the model in DSH:

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.

For one image:

Use ui-spec to analyze C:\path\to\reference.png and implement the responsive web UI.

Installation Troubleshooting

ERR_PNPM_UNEXPECTED_STORE means the DSH profile's existing node_modules uses a different pnpm store. Rebuild that profile's dependencies, then retry installation:

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

Remove the backup only after DSH starts normally.