dsh-ui-spec

A DeepSeek Harness plugin that turns UI screenshots / mockups / reference images into structured, implementation-grade web frontend specs.

It merges two complementary layers into one spec (JSON + Markdown):

1. Deterministic geometry (always on, sharp-based, no Python needed) — exact dimensions, dominant color palette + suggested design tokens, layout grid, major region candidates, component bounding-box candidates, spacing scale, and style hints. These are the measurable facts that vision models are bad at.
2. Semantic layer (optional, on by default if configured) — page type, visible text, icon meanings, component roles, and interaction states, from an OpenAI-compatible vision model. These are the meanings that pixel math can't produce.

This is a TypeScript port + extension of the ui-reference-frontend Claude Code skill. The original skill's Python analyzer (analyze_ui_image.py) was deliberately non-semantic; this plugin keeps that geometry layer and adds a vision-model semantic layer on top, so the same tool serves both as the "floor" and (optionally) the "ceiling."

Why this exists (and how it differs from dsh-vision / modlens)

Existing DSH vision plugins give text-only models the ability to "see" an image. They don't extract exact pixel coordinates, spacing scales, or design-token palettes — vision models are unreliable at those. This plugin's differentiator is the deterministic geometry layer. Used together with a vision model, you get precise placement and semantic intent in one spec.

Install

From a DSH profile directory:

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

Or directly:

npm install dsh-ui-spec

sharp ships prebuilt binaries for Windows/macOS/Linux, so npm install works without a native toolchain or Python.

Configure the semantic layer (optional)

If unset, the plugin silently returns geometry-only specs (matching the original skill). Set env vars to enable vision semantics:

Var	Default	Notes
DSH_UI_SPEC_VISION_API_KEY	—	Falls back to DEEPSEEK_API_KEY, then OPENAI_API_KEY