Vision & Eingabe

dsh-ui-spec

Macht aus UI-Screenshots implementierungsreife Specs: Tokens, Spacing-Skala, Layout-Raster.

Worum es geht

Ein einzelnes analyze_ui_image-Tool, das einen Screenshot oder ein Mockup in eine strukturierte Frontend-Spec umwandelt. Eine deterministische Geometrie-Ebene misst exakte Abmessungen, Palette, vorgeschlagene Design-Tokens, Layout-Raster und Spacing-Skala; ein optionales Vision-Modell legt Semantik obendrauf.

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.
Aus der Upstream-README

Warum das fürs Design zählt

  • Pixelkoordinaten, Spacing-Skalen und Token-Paletten werden deterministisch berechnet, nicht von einem Vision-Modell geraten.
  • Spec-Felder mappen direkt auf die Umsetzung: vorgeschlagene Tokens auf Design-Tokens, die Spacing-Skala auf CSS.
  • Semantische Rollen liefern die Absicht, Geometrie liefert die Platzierung — zusammengeführt in einer JSON- plus Markdown-Spec.

Was es abdeckt

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

So installierst du es

dsh-ui-spec

  1. Führe das in einem Terminal aus.

    dsh plugin --profile web add dsh-ui-spec
  2. Starte dsh web neu, damit es das Plugin lädt.

  3. Beschreibe dann das gewünschte Design. Der Harness greift die Tools des Plugins auf.

So nutzt du es mit DeepSeek Harness

  1. Füg das Plugin hinzu; die Geometrie-Ebene arbeitet offline und ohne jede Konfiguration.

  2. Verweise die semantische Ebene optional auf einen beliebigen OpenAI-kompatiblen Vision-Endpoint.

  3. Gib dem Agenten einen Screenshot und bau aus der gelieferten Spec statt aus dem Bild.

Jedes Plugin hier ist kostenlos installierbar und verlinkt auf seine echte Originalquelle.

Mehr im DeepSeek-Harness-Repo ↗

Nächster Schritt

Mit OpenDesign designen, ohne Setup

Installiere dieses Plugin selbst, oder leg mit OpenDesign eine ganze kuratierte Design-Ebene um DeepSeek Harness. Eigener Key, eigenes Ergebnis.

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows