Перейти к руководству
Illustration Styleавтор Owl-Listener

Illustration Style Skill.

Дайте заказным или регулярно используемым иллюстрациям единый визуальный язык и чёткую роль в интерфейсе.

  • UX
  • Рекомендации по дизайну
Обзор источника · Illustration StyleSKILL.md
Задача UX Результат • Руководство по визуальному языку иллюстраций • Правила для палитры, персонажей и повторно используемых элементов • Рекомендации по применению в разных контекстах и по доступности Перед началом Нужен агент, который может изучать визуальные референсы, цвета продукта, а также экраны и размеры, где будут использоваться иллюстрации.
Редакционное резюме · просмотренный источник 2026-10-07 · не сгенерированный пример

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

Illustration Style: определить визуальный язык

Определяет визуальный стиль семейства иллюстраций, палитру, персонажей и их использование на экранах продукта.

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

Рабочий подход

Illustration Style описывает, как должно выглядеть семейство иллюстраций и где оно уместно. Он охватывает геометричную и органичную форму, плоскую и объёмную подачу, уровень детализации, абстракцию и стиль линий.

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

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

  • Руководство по визуальному языку иллюстраций
  • Правила для палитры, персонажей и повторно используемых элементов
  • Рекомендации по применению в разных контекстах и по доступности
Смотреть пример брифа

От брифа до проверки

  1. 01
    Определите оси стиля

    Выберите форму, объём, детализацию, абстракцию и обработку линий, опираясь на конкретные референсы.

  2. 02
    Задайте правила семейства

    Ограничьте палитру, определите тени или градиенты и добавьте рекомендации по персонажам только там, где они нужны.

  3. 03
    Опишите применение

    Объясните, чем главные, точечные иллюстрации, иллюстрации пустых состояний и другие различаются по масштабу и назначению.

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

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

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

Подходит, когда

  • Заказывается серияДайте исполнителям достаточно ограничений, чтобы они создавали согласованные работы.
  • Изображения в продукте разнородныСогласуйте семейства иллюстраций, не заставляя каждый контекст использовать одну и ту же композицию.

Ограничения, которые стоит учесть

  • Это не генератор изображенийДокументированный результат — руководство; для готовых иллюстраций нужен отдельный процесс создания.
  • Это не стандарт иконокМелкая символическая иконография интерфейса описывается отдельной системной спецификацией.

Подготовьте исходные данные

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

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

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

  1. Единство при разнообразии

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

  2. Осмысленное размещение

    Правила использования объясняют, когда иллюстрация помогает, а когда становится лишним украшением.

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

Попробуйте целевой бриф

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

Проверьте настройку

Загрузите SKILL.md этой задачи из репозитория designer-skills в поддерживаемое место для навыков вашего агента. Универсальная команда установки во входном файле не указана.

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md

Предоставьте утверждённые визуальные референсы и места, где появятся иллюстрации. Навык создаёт рекомендации по арт-дирекшну, а не готовые изображения.

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

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

Пример брифа
Используй illustration-style, чтобы написать руководство для наших иллюстраций онбординга и пустых состояний. Определи правила формы, объёма, детализации, линий и палитры; включи тёмные варианты и рекомендации по репрезентации там, где есть персонажи. Укажи проверки на размерах отображения и текстовые альтернативы, не утверждая, что материалы были созданы.

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

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

  • Стилевые решения достаточно конкретны, чтобы другой иллюстратор мог им следовать.
  • Для каждого применения есть рекомендации по размеру и назначению.
  • Важная информация не передаётся только изображением.

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

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

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

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

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Просмотренный снимок
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Определяет визуальный стиль семейства иллюстраций, палитру, персонажей и их использование на экранах продукта.

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

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

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

Создаёт ли он готовые иллюстрации?

Нет. Он создаёт руководство по стилю; для готовых иллюстраций нужен отдельный процесс создания.

Должен ли каждый стиль включать персонажей?

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

Должны ли главные иллюстрации и иллюстрации пустых состояний быть одинаковыми?

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

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/illustration-style/SKILL.md