Ir a la guía de uso
Critique Compositionpor owl-listener

Critique Composition Skill.

Explica por qué una composición renderizada parece desequilibrada o desconectada.

  • Composición
  • Jerarquía
Revisión de la fuente · critique-compositionSKILL.md
Tarea Explica por qué una composición renderizada parece desequilibrada o desconectada. Resultados Una revisión de composición organizada en cuatro dimensiones explícitas. Antes de empezar La skill evalúa la composición renderizada; no inventa hallazgos basándose solo en un briefing.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Explica por qué una composición renderizada parece desequilibrada o desconectada

Audita equilibrio, espacio en blanco, ritmo y agrupación perceptiva de una pantalla renderizada con observaciones específicas y ajustes aplicables.

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

El enfoque de trabajo

Critique Composition examina las cualidades espaciales de una pantalla renderizada. Analiza peso visual, espacio vacío, intervalos repetidos y agrupación perceptiva para explicar por qué la composición se siente inestable o desconectada. Es especialmente útil cuando la jerarquía básica se entiende, pero la distribución sigue resultando incómoda.

El informe separa observación, problema y corrección en cuatro dimensiones: equilibrio, espacio en blanco, ritmo y Gestalt. Así, un comentario como «la página se ve rara» se convierte en una discusión concreta sobre una sección saturada, un control aislado o un patrón cuyo espaciado cambia sin motivo.

Entregables esperados

  • Una revisión de composición organizada en cuatro dimensiones explícitas.
  • Observaciones neutrales vinculadas a problemas espaciales específicos.
  • Correcciones aplicables y una valoración de gravedad por dimensión.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Leer la composición completa

    Inspecciona la pantalla renderizada y la distribución del peso visual. Considera si la simetría o asimetría parece intencionada y dónde está su centro de gravedad.

  2. 02
    Inspeccionar espaciado y ritmo

    Compara grandes huecos entre secciones con pequeños espacios dentro de grupos. Busca rellenos incoherentes, repeticiones que se desvían y transiciones abruptas entre zonas densas y vacías.

  3. 03
    Comprobar agrupación perceptiva

    Revisa proximidad, similitud, separación figura-fondo, continuidad y cierre. Identifica elementos separados del contenido relacionado o agrupados con controles ajenos.

  4. 04
    Escribir correcciones concretas

    Para equilibrio, espacio en blanco, ritmo y Gestalt, aporta observación, problema y ajuste específico. Valora cada dimensión sin convertir una crítica focalizada en un rediseño completo sin explicación.

02 Cuándo usarlo

Cuándo usarlo

La skill evalúa la composición renderizada; no inventa hallazgos basándose solo en un briefing.

Buen encaje

  • La composición parece inestableEl contenido está presente, pero peso, huecos o agrupación dificultan leerlo.
  • Una ronda de ajustes focalizadosEl equipo busca correcciones espaciales manteniendo la dirección visual aceptada.

Límites que conviene comprobar

  • Se necesita una pantalla realLa skill evalúa la composición renderizada; no inventa hallazgos basándose solo en un briefing.
  • Enfoque específicoLa fuente deriva el énfasis y el recorrido de la mirada a una crítica separada de jerarquía visual.
  • Las recomendaciones deben verificarseUn ajuste de espaciado propuesto todavía debe inspeccionarse después de implementarlo.

Aporta estos datos

  • Vista renderizadaProporciona la pantalla y los tamaños de ventana o estados de contenido pertinentes.
  • Contexto de diseñoExplica el equilibrio y la agrupación previstos, junto con la dirección visual establecida.
  • Sistema de espaciadoIncluye valores conocidos de retícula y espaciado si las correcciones deben usarlos.

03 Decisiones importantes

Decisiones importantes

  1. Lenguaje espacial concreto

    El feedback nombra la relación que hace que la composición parezca incorrecta.

  2. Dimensiones separadas

    Espacio en blanco y ritmo pueden evaluarse independientemente del peso visual.

  3. Crítica aplicable

    Cada problema va acompañado de un cambio propuesto.

04 Ejemplo de brief

Prueba con un encargo concreto

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

Revisa la fuente y la configuración

Proporciona la pantalla y los tamaños de ventana o estados de contenido pertinentes.

Archivo fuente original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

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 critique-composition para revisar el resumen del proyecto renderizado. Conserva contenido y dirección visual, y céntrate en equilibrio, espacio en blanco, ritmo y agrupación perceptiva. Identifica zonas saturadas, desconectadas o visualmente más pesadas de lo previsto. Compara espaciados repetidos de tarjetas y secciones con nuestra escala actual. Para cada dimensión, da una observación neutral, explica su consecuencia y propone un ajuste concreto. Valórala como correcta, problema menor o problema mayor. No rediseñes la página durante esta revisión e indica cualquier juicio que dependa de un tamaño de ventana no observado.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Las observaciones describen relaciones espaciales visibles y específicas.
  • Los ajustes responden a la dimensión identificada, no a estilos ajenos.
  • Los tamaños de ventana no vistos y las recomendaciones sin implementar quedan claramente señalados.

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 y dependencias de software.

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
owl-listener
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 9a6930cf84a8
Resumen editorial de la fuente
Explica por qué una composición renderizada parece desequilibrada o desconectada.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Sustituye a una revisión de jerarquía?

Se concentra en composición. La fuente trata el énfasis y el recorrido de la mirada como otro foco de crítica.

¿Qué cuenta como ritmo?

La revisión examina espaciados, tamaños, filas, tarjetas y separaciones de sección repetidos que crean una cadencia visual coherente.

¿Cuál es el formato esperado del informe?

Cada una de las cuatro dimensiones recibe observación, problema, corrección y valoración correcta/menor/mayor.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

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

Archivo fuente original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md