106.9K+Télécharger
Aller au guide d’utilisation
Critique Typographypar owl-listener

Critique Typography Skill.

Évaluez la typographie rendue selon sa lisibilité et le système existant.

  • Typographie
  • Lisibilité
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · critique-typographySKILL.md
Tâche Évaluez la typographie rendue selon sa lisibilité et le système existant. Résultats Des constats regroupés par échelle, lisibilité, cohérence et respect des tokens. Avant de commencer Une critique à l’échelle de l’écran exige le rendu réel, pas seulement une liste de déclarations CSS.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Évaluez la typographie rendue selon sa lisibilité et le système existant

Examinez l’échelle typographique, la lisibilité, la cohérence et le respect des tokens d’un écran, puis formulez des constats et corrections précis.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Critique Typography examine l’usage réel de la typographie sur un écran rendu : échelle, confort de lecture, cohérence et respect des tokens. Un constat utile précise ce qui est visible et le style ou token existant qui devrait s’appliquer, pour corriger un écart concret.

La source propose des dimensions précises : longueur de ligne, interligne, espacement des lettres, contraste et rôle sémantique. Elle vérifie aussi si les éléments équivalents reçoivent le même traitement. Elle est donc utile après réalisation d’une interface, notamment lorsque des ajustements ponctuels ont progressivement affaibli le système typographique initial.

Livrables attendus

  • Des constats regroupés par échelle, lisibilité, cohérence et respect des tokens.
  • Une observation, une explication et une correction applicable pour chaque problème.
  • Une évaluation conforme, problème mineur ou problème majeur pour chaque dimension examinée.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Lire le système typographique rendu

    Examinez l’écran avec ses styles de texte et tokens définis. Identifiez titres, libellés, corps de texte et légendes selon leur rôle réel.

  2. 02
    Évaluer les conditions de lecture

    Examinez taille, interligne, longueur de ligne, espacement des lettres et contraste en contexte. Traitez les recommandations chiffrées de la source comme des critères à évaluer selon les besoins du produit.

  3. 03
    Comparer les éléments équivalents

    Vérifiez la cohérence des graisses, alignements et niveaux d’échelle des libellés, titres et blocs répétés. Repérez les styles isolés et valeurs intermédiaires arbitraires.

  4. 04
    Relier constats et corrections

    Pour chaque dimension, distinguez observation neutre, problème et correction proposée. Nommez le token approprié lorsqu’une définition existante s’applique.

02 Cas d’usage

Quand l’utiliser

Une critique à l’échelle de l’écran exige le rendu réel, pas seulement une liste de déclarations CSS.

Un bon choix

  • Dérive typographiqueUn écran réalisé a accumulé des ajustements arbitraires de taille ou de graisse.
  • Critique visuelle cibléeLa mise en page est arrêtée, mais la hiérarchie textuelle ou le confort de lecture mérite attention.

Limites à vérifier

  • Preuves issues du renduUne critique à l’échelle de l’écran exige le rendu réel, pas seulement une liste de déclarations CSS.
  • Système existantLa définition initiale de l’échelle relève du skill distinct typography-scale.
  • Évaluation délimitéeUne revue typographique n’est ni une certification complète d’accessibilité ni un audit intégral du produit.

Éléments à fournir

  • Écran renduFournissez l’interface aux dimensions et dans les états importants.
  • Définitions typographiquesFournissez les tokens typographiques et les rôles prévus.
  • Contexte du contenuIncluez les textes réels, la langue et les conditions de lecture.

03 Décisions importantes

Les décisions importantes

  1. Corrections précises

    Les corrections peuvent désigner exactement le style ou token prévu.

  2. Dimensions comparables

    Le rapport sépare les problèmes d’échelle de ceux de lisibilité et de cohérence.

  3. Preuves visibles

    Les constats décrivent ce que l’examinateur peut réellement observer.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez l’interface aux dimensions et dans les états importants.

Fichier source amont
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise critique-typography sur la vue d’ensemble analytique rendue aux largeurs ordinateur et mobile. Compare titres, libellés, valeurs et corps de texte visibles à nos tokens typographiques. Examine échelle, interligne, longueur de ligne, contraste et cohérence entre éléments équivalents. Pour chaque dimension, donne une observation neutre, explique le problème et propose une correction précise avec le bon nom de token lorsqu’il existe. Attribue la mention conforme, problème mineur ou problème majeur. Conserve la direction de mise en page actuelle et distingue les propriétés mesurées des jugements nécessitant un examen supplémentaire.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque problème renvoie à un élément visible et à son rôle typographique.
  • Les recommandations de tokens utilisent les définitions réelles du projet.
  • Les évaluations sont accompagnées d’observations et de corrections précises.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
owl-listener
Dépôt
owl-listener/designer-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 9a6930cf84a8
Résumé éditorial de la source
Évaluez la typographie rendue selon sa lisibilité et le système existant.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Définit-il une nouvelle échelle typographique ?

La source se concentre sur l’usage et renvoie la création d’une échelle à un autre skill.

Quel format prennent les constats ?

Chaque dimension reçoit une observation, une explication du problème, une correction applicable et un niveau de gravité.

Examine-t-il les valeurs typographiques codées en dur ?

Oui. Le respect des tokens couvre famille de police, taille, graisse, interligne et espacement des lettres.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md