Visión y entrada

dsh-ui-spec

Convierte capturas de UI en especificaciones a nivel de implementación: tokens, escala de espaciado, rejilla de maquetación.

Qué es

Una única herramienta analyze_ui_image que convierte una captura o un mockup en una spec de frontend estructurada. Una capa de geometría determinista mide dimensiones exactas, paleta, tokens de diseño sugeridos, rejilla de maquetación y escala de espaciado; un modelo de visión opcional añade semántica encima.

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.
Del README original

Por qué importa para el diseño

  • Las coordenadas de píxel, las escalas de espaciado y las paletas de tokens se calculan de forma determinista, no las adivina un modelo de visión.
  • Los campos de la spec se corresponden directamente con la implementación: los tokens sugeridos con los design tokens, la escala de espaciado con el CSS.
  • Los roles semánticos aportan la intención mientras la geometría aporta la colocación, fusionados en una única spec JSON + Markdown.

Qué cubre

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

Cómo instalarlo

dsh-ui-spec

  1. Ejecuta esto en una terminal.

    dsh plugin --profile web add dsh-ui-spec
  2. Reinicia dsh web para que cargue el plugin.

  3. Luego describe el diseño que quieres. El harness recoge las herramientas del plugin.

Cómo ejecutarlo con DeepSeek Harness

  1. Añade el plugin; la capa de geometría funciona offline sin configuración alguna.

  2. Opcionalmente apunta la capa semántica a cualquier endpoint de visión compatible con OpenAI.

  3. Entrégale al agente una captura y construye a partir de la spec devuelta en vez de la imagen.

Todos los plugins de esta colección se pueden instalar gratis y enlazan a su fuente original real.

Más en el repo de DeepSeek Harness ↗

Siguiente paso

Diseña con OpenDesign, sin montar nada

Instala este plugin tú mismo, o ejecuta toda una capa de diseño curada alrededor de DeepSeek Harness con OpenDesign. Trae tu propia key: lo que produzcas es tuyo.

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows