Image to UIpor UIZZE

Image to UI Skill.

Implementa la interfaz que ya puedes ver. Image to UI trata una captura de pantalla o maqueta como la especificación visual, mantiene el stack existente del proyecto y pide a tu agente que renderice y compare antes de afirmar que coincide.

De captura a código
Coincidencia con la referencia
Implementación de UI

Descargar OpenDesign Ver guía de uso

Revisión de la fuente · image-to-uiSKILL.md

Tarea Implementación de UI a partir de una captura Produce • Código de interfaz en el proyecto existente • Texto y controles reales, no una captura aplanada • Un resumen de la comparación con las diferencias que quedan Antes de empezar Aporta una imagen de referencia legible, su viewport objetivo, acceso al proyecto y los recursos disponibles. Se necesita renderizado en el navegador para verificar la coincidencia visual. No se requiere cuenta de UIZZE ni conexión con MCP.

Resumen editorial · fuente revisada 2026-10-12 · no es un ejemplo generado

01 Qué hace

Usa la imagen como especificación

Esta skill breve se centra en reproducir una decisión visual existente, no en buscar una nueva dirección de arte. El flujo de trabajo descrito abajo corresponde a la fuente; no es una reconstrucción completada.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

Cómo se trabaja

El agente empieza por la imagen real: sus dimensiones, el texto visible, la jerarquía, las proporciones y los recursos. También lee el proyecto de destino para que la implementación encaje con el framework y la pantalla existentes. Una captura recortada solo define el área visible; no autoriza a inventar el resto de la página.

La implementación usa maquetación, texto y controles reales. Una vez ajustado el viewport de referencia, el agente comprueba los demás tamaños solicitados. El último paso es renderizar con las dimensiones de la referencia, esperar a las fuentes y las imágenes, comparar el resultado y corregir las diferencias visibles. Los recursos que faltan y el renderizado sin verificar deben indicarse de forma explícita.

Entregables esperados

Código de interfaz editable que use el stack del proyecto de destino y componentes reutilizables adecuados
Controles solicitados conectados al comportamiento existente, sin funcionalidad de backend inventada
Un breve informe de las comparaciones visuales realizadas, las diferencias restantes y los recursos que faltan

Ver el brief de ejemplo

De la referencia a la comparación

01
Inspecciona la imagen real
Lee la propia imagen, no solo su nombre de archivo ni el texto extraído. Identifica sus dimensiones, la región visible, la alineación, la tipografía y los recursos antes de editar el código.
02
Construye al tamaño de la referencia
Ajusta la jerarquía, los saltos de línea, el espaciado y los recortes en el stack existente. Reutiliza componentes cuando puedan reproducir la referencia; no la fuerces hacia valores por defecto que no vengan al caso.
03
Renderiza y corrige
Captura la pantalla en ejecución con el mismo viewport. Compara primero las grandes diferencias de maquetación y proporción, y después la tipografía, el color y los detalles pequeños; vuelve a renderizar tras los cambios.
04
Comprueba las variantes solicitadas
Una vez establecido el tamaño de referencia, prueba los tamaños responsive y los controles funcionales solicitados. Informa de las diferencias que queden en lugar de prometer fidelidad pixel-perfect.

02 Cuándo usarla

Cuándo usarla

Elige Image to UI cuando la dirección visual ya está decidida y necesitas implementarla con fidelidad.

Encaja bien

Una maqueta de pantalla aprobadaConvierte una imagen de diseño proporcionada en una pantalla de una app existente, manteniendo la jerarquía y el contenido visibles.
Una reconstrucción a partir de una capturaRecrea una referencia cuyo archivo de diseño original no está disponible, indicando de forma explícita las fuentes o imágenes que falten.
Una corrección visual concretaAcerca una implementación a una referencia conocida mediante capturas con el mismo viewport y una lista de las diferencias restantes.

Límites a tener en cuenta

Una captura no define el comportamiento ocultoLas secciones no visibles, las respuestas del backend y las pantallas adicionales quedan fuera de la referencia. Aporta requisitos para ellas en lugar de esperar que la skill deduzca un producto.
Pueden faltar los recursos exactosLa skill pide que se indiquen las fuentes, los iconos o las imágenes que falten. No puede establecer una coincidencia visual exacta si no están disponibles los recursos necesarios.
La fidelidad requiere evidencia renderizadaUna implementación verosímil o una compilación correcta no verifican la similitud. Si el entorno no puede renderizar la pantalla, la coincidencia visual sigue sin verificarse.

Aporta estas entradas

Una referencia legible y un viewportAdjunta la imagen real e indica las dimensiones del navegador previstas. Señala si la imagen es un recorte y qué región debe implementarse.
El proyecto existente y los recursosIdentifica la ruta o el componente de destino, el framework, las fuentes, los iconos y los archivos de imagen. Indica los componentes o comportamientos existentes que deben conservarse.
Requisitos de interacción y responsiveNombra los controles que hay que conectar y los anchos adicionales que se deben admitir. Indica qué no muestra la captura y qué debe quedar fuera del alcance.

03 Decisiones que importan

Decisiones que importan

Igualar antes de rediseñar
La imagen determina la paleta, la composición y el contenido visible. Añadir elementos decorativos o cambiar la dirección de diseño requiere una petición aparte.
Reconstruye la interfaz, no el mapa de bits
Las maquetaciones normales con grid y flex, el texto real y los controles utilizables conservan una UI editable. El posicionamiento absoluto se reserva para superposiciones reales, no para toda la pantalla.
Compara cosas equivalentes
Que coincidan las dimensiones del viewport y los recursos cargados hace que la comparación tenga sentido. El orden de corrección documentado empieza por las proporciones y la maquetación antes de pulir los detalles pequeños.

04 Prueba un brief concreto

Prueba un brief concreto

El ejemplo de abajo no se ha ejecutado. Adjunta tu imagen de referencia y adapta los detalles del proyecto antes de usarlo.

Revisa la configuración

El README original documenta el comando de instalación siguiente. Instala el paquete Image to UI nativo de GitHub; no instala el servicio opcional UIZZE MCP.

Comando de instalación documentado

npx skills add uizze/uizze --skill image-to-ui

Usa un agente que pueda inspeccionar imágenes y editar tu proyecto. Ejecuta el proyecto en un navegador para la verificación visual. La skill en sí no requiere cuenta de UIZZE ni conexión con MCP; tu proyecto y tu agente mantienen sus propios requisitos de configuración.

Adjunta una pantalla

Mantén la primera tarea acotada a una pantalla visible o a un recorte. Incluye la imagen, los recursos exactos y las interacciones que la app ya admite.

Brief de ejemplo

Usa image-to-ui para implementar en la app existente la referencia adjunta de la pantalla de facturación. Primero inspecciona la imagen y el proyecto y, si no están claros, confirma conmigo la ruta de destino y el viewport de referencia. Respeta el texto visible, la jerarquía, el espaciado, los saltos de línea y los recortes de imagen en lugar de rediseñarlos. Usa las fuentes y los recursos proporcionados; indica lo que falte en lugar de sustituirlo en silencio. Conserva el comportamiento existente de pagos y facturas, y no inventes respuestas de API ni secciones que no se ven. Renderiza con el viewport de referencia, espera a las fuentes y las imágenes, compara con la imagen proporcionada y corrige primero las mayores diferencias. Después comprueba los anchos de 390 px y 320 px sin cambiar la identidad visual. Informa de las capturas que realmente comparaste, los controles comprobados y las diferencias que queden.

Revisa el resultado renderizado

Compara con el mismo viewport antes de juzgar las variantes responsive. Comprueba tanto el diseño visible como los controles solicitados.

La referencia y la captura renderizada usan el mismo viewport, con las fuentes y las imágenes cargadas.
El contenido visible y las proporciones siguen la imagen; se nombran los recursos que faltan o las diferencias deliberadas.
Los controles solicitados conservan su comportamiento real y los diseños estrechos especificados siguen siendo utilizables.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Que aparezca en este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: UIZZE
Repositorio: uizze/uizze
Archivo de la skill: skills/image-to-ui/SKILL.md
Licencia: MIT · licencia a nivel de skill
Instantánea revisada: 2026-10-12 · 146928eb50bc

Resumen editorial de la fuente

Image to UI es un flujo de trabajo breve de reconstrucción a partir de capturas: inspecciona la imagen y el proyecto, implementa la interfaz visible en el stack existente, y después renderiza con el viewport de referencia y corrige las diferencias. Este es un resumen editorial, no el informe de una prueba ejecutada.

Resumen original de OpenDesign, basado en la fuente enlazada. La licencia MIT es específica de este directorio de la skill; otros paquetes del repositorio pueden tener avisos diferentes. Las estrellas del repositorio no son recuentos de instalaciones.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Image to UI necesita el UIZZE MCP de pago?

No. La skill y el README original dicen explícitamente que no se requiere cuenta ni conexión con MCP. El repositorio también ofrece un servicio opcional de pago de búsqueda de referencias, pero es independiente de implementar la imagen que tú proporcionas.

¿Puede construir el resto de una página a partir de una captura recortada?

La fuente indica que se reproduzca la región visible y que no se inventen secciones que no se ven. Aporta imágenes de referencia adicionales o requisitos explícitos para todo lo que quede fuera del recorte.

¿Garantiza un resultado pixel-perfect?

Las instrucciones no implican ninguna garantía. La skill busca una reconstrucción cercana y exige una comparación renderizada. Los recursos que faltan y las diferencias restantes deben comunicarse; sin renderizado, la fidelidad visual no está verificada.

Image to UI

Construye la pantalla que ya elegiste

Aporta la referencia legible, el proyecto de destino y sus recursos. Ajusta el viewport original, inspecciona la interfaz en ejecución y haz explícitas las diferencias restantes.

Descargar OpenDesign Explorar skills de diseño