dsh-ui-spec

Readme

# dsh-ui-spec

English | [简体中文](README.zh-CN.md)

[![Version](https://img.shields.io/badge/version-v0.1.1-1684d6?style=flat-square)](package.json)
[![License](https://img.shields.io/badge/license-MIT-f2c94c?style=flat-square)](LICENSE)
[![DeepSeek Harness](https://img.shields.io/badge/DeepSeek_Harness-plugin-0f8b8d?style=flat-square)](https://github.com/deepseek-ai/DeepSeek-Harness)

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:

```powershell
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`:

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

Then install:

```powershell
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:

```text
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:

```text
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:

```powershell
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](LICENSE)