dsh-ui-spec

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.

License

MIT