Vision & Input

dsh-ui-spec

Turns UI screenshots into implementation-grade specs: tokens, spacing scale, layout grid.

What it is

A single analyze_ui_image tool that converts a screenshot or mockup into a structured frontend spec. A deterministic geometry layer measures exact dimensions, palette, suggested design tokens, layout grid and spacing scale; an optional vision model adds semantics on top.

DeepSeek Harness plugin: turn UI screenshots into structured, implementation-grade web frontend specs. Deterministic geometry (sharp) + optional vision-model semantics, merged into one JSON + Markdown spec.
From the upstream README

Why it matters for design

  • Pixel coordinates, spacing scales and token palettes are computed deterministically, not guessed by a vision model.
  • Spec fields map straight to implementation: suggested tokens to design tokens, the spacing scale to CSS.
  • Semantic roles supply intent while geometry supplies placement, merged into one JSON + Markdown spec.

What it covers

  • Why this exists
  • Configure the semantic layer
  • The tool
  • How to use the spec
  • Status & caveats

How to install

dsh-ui-spec

  1. Run this in a terminal.

    dsh plugin --profile web add dsh-ui-spec
  2. Restart dsh web so it picks up the plugin.

  3. Then describe the design you want. The harness picks up the plugin’s tools.

How to run it with DeepSeek Harness

  1. Add the plugin; the geometry layer works offline with zero configuration.

  2. Optionally point the semantic layer at any OpenAI-compatible vision endpoint.

  3. Hand the agent a screenshot and build from the returned spec instead of the image.

Every plugin here is free to install and links to its real upstream source.

More in the DeepSeek Harness repo ↗

Next step

Design with NEXGERCORE, without the setup

Install this plugin yourself, or run a whole curated design layer around DeepSeek Harness with NEXGERCORE. Bring your own key, own your output.

NEXGERCORE เดสก์ท็อป

ดีไซน์ซิสเต็มเดียว ทุกงานที่ออกมาคือแบรนด์ของคุณ

ใน NEXGERCORE IDE ฉบับเต็ม ใช้กฎแบรนด์ชุดเดียวกันได้ทั้งเว็บไซต์ สไลด์ โปรโตไทป์ที่กดเล่นได้ แดชบอร์ด รูปภาพ และวิดีโอ HTML เชื่อม Codex, Claude Code, Cursor และ coding agent ตัวอื่นที่มีอยู่ในเครื่องคุณแล้ว จากนั้นสร้างงานในเครื่องได้ฟรี

  • เว็บ สไลด์ โปรโตไทป์ แดชบอร์ด รูปภาพ และวิดีโอ
  • ดีไซน์ซิสเต็มกว่า 140 ชุด พร้อมคลังเทมเพลตและสกิลครบ
  • เชื่อม Codex ในเครื่องและ coding agent อีกกว่า 21 ตัว · ใช้ฟรี
ดาวน์โหลดฟรี

รองรับ macOS, Windows และ Linux