106.9K+Baixar
Ir para o guia de uso
Critique Typographypor owl-listener

Critique Typography Skill.

Avalie a tipografia renderizada pela legibilidade e pelo sistema tipográfico existente.

  • Tipografia
  • Legibilidade
Baixar OpenDesignVer guia de uso
Análise da fonte · critique-typographySKILL.md
Tarefa Avalie a tipografia renderizada pela legibilidade e pelo sistema tipográfico existente. Entregáveis Constatações agrupadas por escala, legibilidade, consistência e conformidade com tokens. Antes de começar Uma crítica da tela exige o resultado real, não apenas uma lista de declarações CSS.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Avalie a tipografia renderizada pela legibilidade e pelo sistema tipográfico existente

Revise escala tipográfica, legibilidade, consistência e conformidade com tokens de uma tela e produza constatações e correções específicas.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Critique Typography examina como a tipografia é realmente usada em uma tela renderizada. Revê o uso da escala, conforto de leitura, consistência e conformidade com tokens. Uma constatação útil identifica tanto o que está visível quanto o estilo ou token existente que deveria orientá-lo, permitindo corrigir uma divergência específica.

A fonte inclui dimensões concretas como comprimento de linha, line-height, espaçamento entre letras, contraste e papel semântico. Também verifica se elementos equivalentes recebem tratamento equivalente. Isso é útil após a implementação da interface, especialmente quando ajustes individuais enfraqueceram gradualmente o sistema tipográfico original.

Entregas esperadas

  • Constatações agrupadas por escala, legibilidade, consistência e conformidade com tokens.
  • Observação, explicação e correção prática para cada problema.
  • Classificação como aprovado, problema menor ou problema maior para cada dimensão revisada.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Leia o sistema tipográfico renderizado

    Inspecione a tela junto com seus estilos de texto e tokens definidos. Identifique títulos, rótulos, corpo de texto e legendas pelos papéis reais.

  2. 02
    Avalie as condições de leitura

    Revise tamanho, line-height, comprimento de linha, espaçamento entre letras e contraste no contexto. Trate orientações numéricas da fonte como critérios de revisão a avaliar diante dos requisitos do produto.

  3. 03
    Compare elementos equivalentes

    Confira se rótulos, títulos e blocos repetidos usam pesos, alinhamento e etapas de escala consistentes. Localize estilos pontuais e valores intermediários arbitrários.

  4. 04
    Associe constatações a correções

    Em cada dimensão, separe a observação neutra do problema e da correção proposta. Nomeie o token adequado sempre que uma definição existente se aplicar.

02 Quando usar

Quando usar

Uma crítica da tela exige o resultado real, não apenas uma lista de declarações CSS.

Bom encaixe

  • Desvio tipográficoUma tela implementada acumulou ajustes arbitrários de tamanho ou peso.
  • Crítica visual focadaO layout está definido, mas a hierarquia de texto ou o conforto de leitura precisam de atenção.

Limites a verificar

  • Evidência renderizadaUma crítica da tela exige o resultado real, não apenas uma lista de declarações CSS.
  • Sistema existenteA definição inicial da escala pertence à skill separada typography-scale.
  • Avaliação com escopo definidoRevisar tipografia não equivale a uma certificação completa de acessibilidade nem a uma auditoria integral do produto.

Traga estas entradas

  • Tela renderizadaForneça a interface nos tamanhos e estados importantes.
  • Definições tipográficasForneça os tokens tipográficos e seus papéis previstos.
  • Contexto do conteúdoInclua texto real, idioma e condições de leitura.

03 Decisões importantes

Decisões importantes

  1. Correções específicas

    As correções podem apontar o estilo ou token exato pretendido.

  2. Dimensões comparáveis

    O relatório distingue os problemas de escala dos problemas de legibilidade e consistência.

  3. Evidências visíveis

    As constatações descrevem o que pode ser observado de fato por quem revisa.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Forneça a interface nos tamanhos e estados importantes.

Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use critique-typography na visão geral de analytics renderizada em larguras de desktop e celular. Compare títulos, rótulos, valores e corpo de texto visíveis com nossos tokens tipográficos. Revise uso da escala, line-height, comprimento de linha, contraste e consistência entre elementos equivalentes. Para cada dimensão, apresente observação neutra, explique o problema e proponha uma correção específica com o nome correto do token, quando houver. Classifique como aprovado, problema menor ou problema maior. Mantenha a direção atual do layout e diferencie propriedades medidas de julgamentos que precisam de inspeção adicional.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Cada problema se refere a um elemento visível e ao papel tipográfico relevante.
  • Recomendações de tokens usam definições reais do projeto.
  • As classificações vêm acompanhadas de observações e correções específicas.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
owl-listener
Repositório
owl-listener/designer-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 9a6930cf84a8
Resumo editorial da fonte
Avalie a tipografia renderizada pela legibilidade e pelo sistema tipográfico existente.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela define uma nova escala tipográfica?

A fonte se concentra em revisar o uso e direciona a criação da escala para outra skill.

Qual é o formato das constatações?

Cada dimensão recebe observação, explicação do problema, correção prática e classificação de gravidade.

Ela examina valores tipográficos fixos no código?

Sim. A conformidade com tokens inclui família tipográfica, tamanho, peso, line-height e letter-spacing.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md