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

Critique Typography Skill.

Audita la tipografía renderizada según su legibilidad y el sistema tipográfico existente.

  • Tipografía
  • Legibilidad
Revisión de la fuente · critique-typographySKILL.md
Tarea Audita la tipografía renderizada según su legibilidad y el sistema tipográfico existente. Resultados Hallazgos agrupados por escala, legibilidad, coherencia y cumplimiento de tokens. Antes de empezar Una crítica de pantalla requiere el resultado real, no solo una lista de declaraciones CSS.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Audita la tipografía renderizada según su legibilidad y el sistema tipográfico existente

Revisa escala tipográfica, legibilidad, coherencia y cumplimiento de tokens de una pantalla; obtén hallazgos y correcciones específicos.

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

El enfoque de trabajo

Critique Typography examina cómo se usa realmente la tipografía en una pantalla renderizada. Revisa escala, comodidad de lectura, coherencia y cumplimiento de tokens. Un hallazgo útil identifica tanto lo visible como el estilo o token existente que debería regirlo, para corregir una discrepancia concreta.

La fuente incluye dimensiones como longitud de línea, interlineado, espaciado de letras, contraste y función semántica. También pregunta si elementos equivalentes reciben tratamientos equivalentes. Resulta útil tras construir la interfaz, especialmente cuando ajustes individuales han debilitado el sistema tipográfico original.

Entregables esperados

  • Hallazgos agrupados por escala, legibilidad, coherencia y cumplimiento de tokens.
  • Una observación, explicación y corrección aplicable por problema.
  • Valoración correcta, problema menor o problema mayor para cada dimensión revisada.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Leer el sistema tipográfico renderizado

    Inspecciona la pantalla junto con sus estilos y tokens definidos. Identifica encabezados, etiquetas, cuerpo y pies de texto por su función real.

  2. 02
    Evaluar condiciones de lectura

    Revisa tamaño, interlineado, longitud de línea, espaciado y contraste en contexto. Trata las orientaciones numéricas de la fuente como criterios que contrastar con los requisitos del producto.

  3. 03
    Comparar elementos equivalentes

    Comprueba si etiquetas, títulos y bloques repetidos mantienen pesos, alineaciones y niveles de escala coherentes. Localiza estilos aislados y valores intermedios arbitrarios.

  4. 04
    Vincular hallazgos con correcciones

    Por dimensión, separa la observación neutral del problema y del ajuste propuesto. Nombra el token adecuado cuando exista una definición aplicable.

02 Cuándo usarlo

Cuándo usarlo

Una crítica de pantalla requiere el resultado real, no solo una lista de declaraciones CSS.

Buen encaje

  • Desviación tipográficaUna pantalla construida ha acumulado ajustes arbitrarios de tamaño o peso.
  • Crítica visual focalizadaLa composición está definida, pero jerarquía textual o comodidad de lectura necesitan atención.

Límites que conviene comprobar

  • Evidencia renderizadaUna crítica de pantalla requiere el resultado real, no solo una lista de declaraciones CSS.
  • Sistema existenteLa definición inicial de escala corresponde a la skill separada typography-scale.
  • Evaluación acotadaRevisar tipografía no equivale a certificar toda la accesibilidad ni a auditar el producto completo.

Aporta estos datos

  • Pantalla renderizadaProporciona la interfaz en los tamaños y estados relevantes.
  • Definiciones tipográficasAporta tokens tipográficos y sus funciones previstas.
  • Contexto del contenidoIncluye texto real, idioma y condiciones de lectura.

03 Decisiones importantes

Decisiones importantes

  1. Correcciones específicas

    Los ajustes pueden señalar el estilo o token exacto previsto.

  2. Dimensiones comparables

    El informe separa problemas de escala de los de legibilidad y coherencia.

  3. Evidencia visible

    Los hallazgos describen lo que quien revisa puede observar realmente.

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 interfaz en los tamaños y estados relevantes.

Archivo fuente original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/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-typography en el resumen de analítica renderizado en anchos de escritorio y móvil. Compara encabezados, etiquetas, valores y cuerpo visibles con nuestros tokens tipográficos. Revisa escala, interlineado, longitud de línea, contraste y coherencia entre elementos equivalentes. Para cada dimensión, da una observación neutral, explica el problema y propone una corrección específica con el nombre correcto del token cuando exista. Valora la dimensión como correcta, problema menor o problema mayor. Conserva la dirección actual de composición y distingue propiedades medidas de juicios que requieren más inspección.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Cada problema hace referencia a un elemento visible y una función tipográfica relevante.
  • Las recomendaciones de tokens usan definiciones reales del proyecto.
  • Las valoraciones incluyen observaciones y correcciones específicas.

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
Audita la tipografía renderizada según su legibilidad y el sistema tipográfico existente.

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

¿Define una nueva escala tipográfica?

La fuente se centra en revisar el uso y remite la creación de escala a otra skill.

¿Qué formato tienen los hallazgos?

Cada dimensión recibe observación, explicación del problema, ajuste aplicable y valoración de gravedad.

¿Examina valores tipográficos escritos directamente en código?

Sí. El cumplimiento de tokens incluye familia, tamaño, peso, interlineado y espaciado de letras.

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-typography/SKILL.md