Перейти к руководству
Critique Typographyавтор owl-listener

Critique Typography Навык.

Проверьте готовую типографику на читаемость и соответствие существующей системе.

  • Типографика
  • Читаемость
Обзор исходных материалов · critique-typographySKILL.md
Задача Проверьте готовую типографику на читаемость и соответствие существующей системе. Результаты Замечания, сгруппированные по шкале, читаемости, согласованности и соблюдению токенов. Перед началом Для разбора экрана нужен реальный результат, а не только список CSS-деклараций.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Проверьте готовую типографику на читаемость и соответствие существующей системе

Оцените типографическую шкалу, читаемость, согласованность и соблюдение токенов на экране и подготовьте конкретные замечания и исправления.

Процесс на основе источникаНе тест выполнения

Принцип работы

Critique Typography изучает реальное использование текста на отрендеренном экране. Он проверяет применение шкалы, удобство чтения, согласованность и соблюдение токенов. Полезное замечание описывает и видимый результат, и существующий стиль или токен, который должен его определять, чтобы команда могла исправить конкретное несоответствие.

Источник задаёт конкретные параметры: длину строки, line-height, межбуквенные интервалы, контраст и семантическую роль. Он также проверяет, одинаково ли оформлены эквивалентные элементы. Это полезно после реализации интерфейса, особенно когда отдельные правки постепенно ослабили исходную типографическую систему.

Ожидаемые результаты

  • Замечания, сгруппированные по шкале, читаемости, согласованности и соблюдению токенов.
  • Наблюдение, объяснение и применимое исправление для каждой проблемы.
  • Оценка «пройдено», «небольшая проблема» или «серьёзная проблема» для каждого проверенного измерения.
Смотреть пример задания

От задания до проверки

  1. 01
    Изучите готовую типографическую систему

    Рассмотрите экран вместе с определёнными текстовыми стилями и токенами. Различайте заголовки, метки, основной текст и подписи по их реальной роли.

  2. 02
    Оцените условия чтения

    Проверьте размер, line-height, длину строки, межбуквенные интервалы и контраст в контексте. Числовые рекомендации источника рассматривайте как критерии проверки с учётом требований продукта.

  3. 03
    Сравните эквивалентные элементы

    Проверьте согласованность насыщенности, выравнивания и ступеней шкалы у повторяющихся меток, заголовков и текстовых блоков. Найдите разовые стили и произвольные промежуточные значения.

  4. 04
    Свяжите замечания с исправлениями

    Для каждого измерения отделите нейтральное наблюдение от проблемы и предложенной правки. Если применимо существующее определение, укажите нужный токен.

02 Когда использовать

Когда использовать

Для разбора экрана нужен реальный результат, а не только список CSS-деклараций.

Хорошо подходит

  • Отклонения в типографикеНа готовом экране накопились произвольные изменения размера или насыщенности.
  • Целевая визуальная критикаКомпоновка определена, но иерархия текста или удобство чтения требуют внимания.

Ограничения

  • Результат рендерингаДля разбора экрана нужен реальный результат, а не только список CSS-деклараций.
  • Существующая системаПервичное определение шкалы относится к отдельному навыку typography-scale.
  • Ограниченная оценкаПроверка типографики не является полной сертификацией доступности или аудитом всего продукта.

Что подготовить

  • Отрендеренный экранПредоставьте интерфейс в значимых размерах и состояниях.
  • Определения типографикиПередайте типографические токены и их предполагаемые роли.
  • Контекст содержимогоДобавьте реальный текст, язык и условия чтения.

03 Важные решения

Важные решения

  1. Конкретные исправления

    Правки могут указывать точный нужный стиль или токен.

  2. Сопоставимые измерения

    Отчёт отделяет проблемы шкалы от читаемости и согласованности.

  3. Видимые свидетельства

    Замечания описывают то, что проверяющий действительно может наблюдать.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте интерфейс в значимых размерах и состояниях.

Исходный файл в репозитории
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Примени critique-typography к отрендеренному обзору аналитики при настольной и мобильной ширине. Сравни видимые заголовки, метки, значения и основной текст с нашими типографическими токенами. Проверь использование шкалы, line-height, длину строки, контраст и согласованность эквивалентных элементов. Для каждого измерения дай нейтральное наблюдение, объясни проблему и предложи конкретное исправление с правильным именем токена, если он определён. Оцени измерение как «пройдено», «небольшая проблема» или «серьёзная проблема». Сохрани текущее направление компоновки и отдели измеренные свойства от суждений, требующих дополнительной проверки.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Каждая проблема относится к видимому элементу и соответствующей роли текста.
  • Рекомендации по токенам используют реальные определения проекта.
  • Оценки сопровождаются наблюдениями и конкретными исправлениями.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
owl-listener
Репозиторий
owl-listener/designer-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 9a6930cf84a8
Редакционное резюме источника
Проверьте готовую типографику на читаемость и соответствие существующей системе.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Он определит новую типографическую шкалу?

Источник сосредоточен на проверке применения; создание шкалы относится к отдельному навыку.

В каком формате представлены замечания?

Каждое измерение получает наблюдение, объяснение проблемы, применимое исправление и оценку серьёзности.

Проверяются жёстко заданные значения?

Да. Соблюдение токенов охватывает семейство шрифта, размер, насыщенность, line-height и letter-spacing.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Исходный файл в репозитории
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md