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 |
|---|---|
| <img src="https://raw.githubusercontent.com/yumimanji/dsh-ui-spec/main/docs/images/desktop-8-reference.webp" width="420" alt="Desktop 8 personal growth UI reference"> | <img src="https://raw.githubusercontent.com/yumimanji/dsh-ui-spec/main/docs/images/desktop-8-result.webp" width="420" alt="Page implemented by DeepSeek from ui-spec output"> |
Install
Install from npm:
dsh plugin --profile web add dsh-ui-specInstalling 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": trueThen install:
dsh plugin --profile web add github:yumimanji/dsh-ui-specUse 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-specRemove the backup only after DSH starts normally.
License
[MIT](LICENSE)