Visual Hierarchypor Owl-Listener

Visual Hierarchy Skill.

Elige qué debe notarse primero y haz que la composición respalde esa elección.

Diseño de interfaz
Composición

Revisión de la fuente · Visual HierarchySKILL.md

Tarea Diseño de interfaz Produce • Una jerarquía de contenido priorizada para una vista. • Una justificación de la composición que usa varias señales de atención. • Una lista de comprobación para la revisión visual rápida y las pruebas de tareas. Antes de empezar Requiere contenido real y revisión del resultado renderizado; no incluye ninguna herramienta de puntuación visual.

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

01 Qué hace

Haz visible el orden de lectura previsto

Una referencia de composición visual para asignar atención entre niveles de contenido con varias señales que se refuerzan entre sí.

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

El enfoque de trabajo

Visual Hierarchy trata el orden en que una interfaz atrae la atención. Combina tamaño, peso, contraste, espacio en blanco, posición y densidad, en lugar de depender de un titular enorme o un botón llamativo. La fuente distingue entre información primaria, secundaria, terciaria y de fondo.

Es una guía de composición para trabajo nuevo, no un sustituto de probar una pantalla existente. Los patrones de escaneo habituales y las diferencias de tamaño sugeridas son heurísticas. La jerarquía real debe comprobarse según la tarea y el público, incluidos los diseños cuya dirección de lectura difiere de los ejemplos de izquierda a derecha de la fuente.

Entregables esperados

Una jerarquía de contenido priorizada para una vista.
Una justificación de la composición que usa varias señales de atención.
Una lista de comprobación para la revisión visual rápida y las pruebas de tareas.

Ver el brief de ejemplo

Del brief a la revisión

01
Ordena el contenido por prioridad
Elige la acción o el mensaje principal e identifica qué debe escanearse después o leerse bajo demanda.
02
Asigna peso visual
Usa cambios coordinados de tamaño, espaciado, contraste y agrupación en lugar de hacer destacar todos los elementos.
03
Comprueba el orden de lectura
Usa la prueba de entrecerrar los ojos y la observación de tareas reales para ver si la atención sigue la secuencia prevista.

02 Cuándo usarlo

Cuándo usarlo

Requiere contenido real y revisión del resultado renderizado; no incluye ninguna herramienta de puntuación visual.

Buen encaje

Composición de una pantalla nuevaÚtil cuando varios bloques de contenido compiten por el protagonismo.
Prioridad de las accionesAyuda a que una acción principal se distinga de los controles de apoyo.

Límites que conviene comprobar

No es una crítica completa de pantallaLa fuente lo presenta como establecimiento de jerarquía; auditar una pantalla existente es una tarea relacionada.
Las heurísticas necesitan contextoLas suposiciones sobre posición y escaneo deben comprobarse según el público y la dirección de escritura.

Aporta estos datos

Contenido y accionesProporciona el texto, los controles, las imágenes y los metadatos reales.
Prioridad de la tareaIndica qué debe notar o hacer primero un visitante.
Contexto del diseñoIndica el viewport, la dirección de lectura y las restricciones de marca existentes.

03 Decisiones importantes

Decisiones que importan

El espacio en blanco transmite énfasis
El aislamiento puede reforzar un elemento sin añadir otro color ni una tipografía más pesada.
La agrupación cambia el escaneo
Los elementos relacionados pueden leerse como una unidad, mientras que uno aislado atrae la atención como excepción.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada del repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Requiere contenido real y revisión del resultado renderizado; no incluye ninguna herramienta de puntuación visual.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa visual-hierarchy para componer una pantalla de revisión que contenga el título de un documento, comentarios sin resolver, metadatos de versión y una acción de aprobar. Define cuatro niveles de prioridad y explica las señales de tamaño, espaciado y contraste. Mantén una sola acción principal y ten en cuenta el orden de lectura en móvil.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El elemento principal previsto sigue siendo claro en la prueba de entrecerrar los ojos.
Los metadatos de apoyo no compiten con la tarea principal.
La agrupación refleja el significado y no una proximidad arbitraria.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales o 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 a continuación. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo del skill: ui-design/skills/visual-hierarchy/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Una referencia de composición visual para asignar atención entre niveles de contenido con varias señales que se refuerzan entre sí.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no una medida de uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿La jerarquía es solo tamaño de fuente?

No. La fuente combina el tamaño con el peso, el contraste, el espaciado, la posición y la densidad.

¿Debe cada sección tener un CTA principal?

La guía recomienda una acción principal por vista en lugar de varios controles igualmente dominantes.

¿La prueba de entrecerrar los ojos sustituye a las pruebas con usuarios?

No. Es una comprobación rápida de la composición; sigue siendo necesaria la observación basada en tareas para evaluar si los usuarios siguen el orden previsto.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración del propio skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño