Дизайн и бренд: 96 навыков ИИ-агента

QA-чек-лист вёрстки

Проверяет, что свёрстано ровно так, как в макете. Просите перед выкладкой страницы.

/owl-design-qa-checklist В заявку

UI-дизайн и компоненты

Делает интерфейсы и библиотеки компонентов — от макета до готового CSS. Просите при разработке продукта.

/ui-designer В заявку

UX-архитектура интерфейса

Связывает исследования и фронтенд: структура интерфейса, система стилей, управление состоянием. Для сложных продуктов.

/ux-architect В заявку

UX-исследования

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

/ux-researcher-designer В заявку

UX-тест лендингов и баннеров

Проектирует строгий A/B-тест интерфейса: гипотеза, варианты, метрики, размер выборки. Просите перед тестом посадочной или креатива.

/owl-a-b-test-design В заявку

Адаптивность под все экраны

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

/owl-responsive-design В заявку

Аудит дизайн-долга

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

/owl-design-debt-audit В заявку

Аудит доступности (WCAG)

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

/owl-accessibility-audit В заявку

Аудит использования токенов

Ищет захардкоженные значения, дубли и пробелы в применении токенов. Просите при наведении порядка в интерфейсе.

/owl-design-token-audit В заявку

Библиотека дизайн-систем (маршрутизатор)

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

/design В заявку

Библиотека паттернов

Оформляет типовые решения: проблема, паттерн, примеры применения, связанные паттерны. Нужна растущей продуктовой команде.

/owl-pattern-library В заявку

Большая UI/UX-библиотека

50+ стилей, 161 палитра, 57 шрифтовых пар, 99 UX-правил и 25 типов графиков под 10 технологий. Просите, когда нужен быстрый качественный интерфейс.

/ui-ux-pro-max В заявку

Брендбук под ключ

Из логотипа, пары референсов и голосовых собственника собирает единый брендбук на 20–25 разделов: миссия, тон голоса, цвета, шрифты, компоненты. Просите, когда бренд «в голове у основателя», а не на бумаге.

/brandbook-builder В заявку

Вайрфрейм и структура экрана

Описывает приоритет контента и расстановку блоков до отрисовки визуала. Просите на старте проектирования страницы.

/owl-wireframe-spec В заявку

Визуальная иерархия экрана

Расставляет акценты размером, цветом, контрастом и положением, чтобы главное видели первым. Просите для посадочных и баннеров.

/owl-visual-hierarchy В заявку

Визуальные стили оформления

Оформляет в конкретном визуальном языке: стекло, необрутализм, журнальный, люкс, минимал, ретро. Просите, когда хочется «современно» или конкретную эстетику.

/design-style В заявку

Внедрение дизайн-системы

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

/owl-design-system-adoption В заявку

Выбор уровня прототипа

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

/owl-prototype-strategy В заявку

Гайдлайны бренда (алиас)

Точка входа в сборку брендбука: цвета, шрифты, логотип, тон голоса. Запрос уходит в полноценный конструктор брендбука.

/brand-guidelines В заявку

Генератор баннеров

Делает баннеры в дизайн-системе одного из 19 мировых брендов, автоматически подбирая стиль под нишу клиента (точные цвета, шрифты, отступы). Просите, когда нужен баннер уровня «как у больших», а не картинка из стока.

/banner В заявку

Диаграмма пользовательских потоков

Рисует пути пользователя с точками решения, ветвлениями и ошибочными сценариями. Просите при проектировании сценария или воронки.

/owl-user-flow-diagram В заявку

Дизайн первого запуска

Проектирует первый опыт так, чтобы человек быстро дошёл до ценности и не утонул. Просите при низкой активации.

/owl-onboarding-design В заявку

Дизайн под несколько языков

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

/owl-localization-design В заявку

Дизайн-бриф и принципы

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

/owl-design-brief В заявку

Дизайн-принципы команды

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

/owl-design-principles В заявку

Дизайн-система Airbnb

Оформляет макет в фирменной эстетике Airbnb — тепло и доверие: мягкие скругления, живые фото людей и мест, красный акцент только на кнопке действия. Просите, когда хотите сайт или баннер «в стиле Airbnb» с точными цветами и шрифтами.

/design-airbnb В заявку

Дизайн-система Apple

Оформляет макет в фирменной эстетике Apple — матовое стекло и минимализм: полупрозрачное размытие, крупный продуктовый герой, максимум воздуха. Просите, когда хотите сайт или баннер «в стиле Apple» с точными цветами и шрифтами.

/design-apple В заявку

Дизайн-система BMW

Оформляет макет в фирменной эстетике BMW — корпоративная точность: острые углы, единственный синий акцент, жёсткий контраст начертаний. Просите, когда хотите сайт или баннер «в стиле BMW» с точными цветами и шрифтами.

/design-bmw В заявку

Дизайн-система Bugatti

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

/design-bugatti В заявку

Дизайн-система Ferrari

Оформляет макет в фирменной эстетике Ferrari — кинематографичность: почти чёрный фон, скупой красный акцент, полноэкранные фото. Просите, когда хотите сайт или баннер «в стиле Ferrari» с точными цветами и шрифтами.

/design-ferrari В заявку

Дизайн-система Figma

Оформляет макет в фирменной эстетике Figma — цветной playground: белый фон с пастельными блоками секций и чёрными кнопками-пилюлями. Просите, когда хотите сайт или баннер «в стиле Figma» с точными цветами и шрифтами.

/design-figma В заявку

Дизайн-система Lamborghini

Оформляет макет в фирменной эстетике Lamborghini — золото на абсолютном чёрном: заглавные буквы, нулевые скругления, единственный золотой акцент. Просите, когда хотите сайт или баннер «в стиле Lamborghini» с точными цветами и шрифтами.

/design-lamborghini В заявку

Дизайн-система Linear

Оформляет макет в фирменной эстетике Linear — тёмная база с лавандовым акцентом и четырёхступенчатой лестницей поверхностей. Просите, когда хотите сайт или баннер «в стиле Linear» с точными цветами и шрифтами.

/design-linear В заявку

Дизайн-система Nike

Оформляет макет в фирменной эстетике Nike — фото на весь экран, жирная типографика, минимум интерфейса, кнопки-пилюли. Просите, когда хотите сайт или баннер «в стиле Nike» с точными цветами и шрифтами.

/design-nike В заявку

Дизайн-система Notion

Оформляет макет в фирменной эстетике Notion — рабочее пространство: тёмно-синий герой, фиолетовая кнопка, скриншоты продукта, пастельные блоки. Просите, когда хотите сайт или баннер «в стиле Notion» с точными цветами и шрифтами.

/design-notion В заявку

Дизайн-система Revolut

Оформляет макет в фирменной эстетике Revolut — финтех в двух режимах: тёмный сторителлинг плюс светлый каталог, кобальтовый акцент. Просите, когда хотите сайт или баннер «в стиле Revolut» с точными цветами и шрифтами.

/design-revolut В заявку

Дизайн-система Shopify

Оформляет макет в фирменной эстетике Shopify — тёмный лес: чёрный фон, зелёные поверхности, неон только на фокусе, белые кнопки. Просите, когда хотите сайт или баннер «в стиле Shopify» с точными цветами и шрифтами.

/design-shopify В заявку

Дизайн-система SpaceX

Оформляет макет в фирменной эстетике SpaceX — полноэкранное фото и заглавные буквы, чёрный фон, полное отсутствие лишнего интерфейса. Просите, когда хотите сайт или баннер «в стиле SpaceX» с точными цветами и шрифтами.

/design-spacex В заявку

Дизайн-система Spotify

Оформляет макет в фирменной эстетике Spotify — концертный зал: почти чёрный фон, зелёный только для функций, яркие градиенты обложек. Просите, когда хотите сайт или баннер «в стиле Spotify» с точными цветами и шрифтами.

/design-spotify В заявку

Дизайн-система Starbucks

Оформляет макет в фирменной эстетике Starbucks — тёплый кремовый холст: четыре оттенка зелёного, бежевый фон вместо белого, кнопки-пилюли. Просите, когда хотите сайт или баннер «в стиле Starbucks» с точными цветами и шрифтами.

/design-starbucks В заявку

Дизайн-система Stripe

Оформляет макет в фирменной эстетике Stripe — уверенная тишина: белый фон, единственный фиолетовый акцент, синеватые тени, много воздуха. Просите, когда хотите сайт или баннер «в стиле Stripe» с точными цветами и шрифтами.

/design-stripe В заявку

Дизайн-система Tesla

Оформляет макет в фирменной эстетике Tesla — радикальное вычитание: один акцент, один шрифт, экраны на всю высоту, минимум элементов. Просите, когда хотите сайт или баннер «в стиле Tesla» с точными цветами и шрифтами.

/design-tesla В заявку

Дизайн-система Uber

Оформляет макет в фирменной эстетике Uber — чёрно-белая вселенная, где каждый пиксель служит цели, всё интерактивное — пилюли. Просите, когда хотите сайт или баннер «в стиле Uber» с точными цветами и шрифтами.

/design-uber В заявку

Дизайн-система Vercel

Оформляет макет в фирменной эстетике Vercel — тихая инженерная элегантность: белый фон, почти чёрный текст, тени вместо рамок, плотный трекинг. Просите, когда хотите сайт или баннер «в стиле Vercel» с точными цветами и шрифтами.

/design-vercel В заявку

Дизайн-система с нуля

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

/design-system-builder В заявку

Дизайн-токены

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

/owl-design-token В заявку

Жесты и касания

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

/owl-gesture-patterns В заявку

Закон Миллера: группировка

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

/owl-millers-law В заявку

Закон Хика: меньше выбора

Сокращает время решения, ограничивая число одновременных вариантов. Просите при перегруженных меню и тарифных сетках.

/owl-hicks-law В заявку

Законы UX (Фиттс, Хик, Миллер)

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

/owl-fitts-law В заявку

Защита фирменного стиля

Следит, чтобы бренд не размывался: гайдлайны, брендбук, контроль применения. Нужен зрелым брендам и тем, кто строит стиль с нуля.

/brand-guardian В заявку

Игривые детали интерфейса

Добавляет микровзаимодействия, шутки и пасхалки там, где эмоция уместна. Для потребительских продуктов и электронной коммерции.

/whimsy-injector В заявку

Инклюзивные визуалы

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

/inclusive-visuals-specialist В заявку

Исследование пользователей

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

/ux-researcher В заявку

Кейс для портфолио

Оформляет проект в кейс-историю, готовую для сайта и портфолио. Просите после успешного проекта.

/owl-case-study В заявку

Красивые схемы и диаграммы

Рисует диаграммы Mermaid и отдаёт готовыми SVG/PNG. Просите, когда нужна аккуратная схема процесса, воронки или структуры для презентации.

/beautiful-mermaid В заявку

Критика бренд-консистентности

Проверяет экран на соответствие бренду: настроение, голос, токены. Просите перед публикацией макета.

/owl-critique-brand-consistency В заявку

Критика визуальной иерархии

Смотрит, куда падает взгляд, как течёт внимание и где теряется главное. Просите, когда на странице «всё важное».

/owl-critique-visual-hierarchy В заявку

Критика композиции экрана

Разбирает баланс, воздух, ритм и гештальт-принципы макета. Просите, когда «что-то не так, а что — непонятно».

/owl-critique-composition В заявку

Критика типографики

Проверяет шкалу, читабельность и единство шрифтов на экране. Просите при вычитке макета перед версткой.

/owl-critique-typography В заявку

Микровзаимодействия

Описывает мелкие отклики интерфейса: триггер, правила, ответ, длительности и кривые. Просите для «живого» ощущения продукта.

/owl-micro-interaction-spec В заявку

Модульная сетка и адаптив

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

/owl-layout-grid В заявку

Обоснование решений дизайна

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

/owl-design-rationale В заявку

Обратная связь интерфейса

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

/owl-feedback-patterns В заявку

Ошибки и пустые состояния

Проектирует поведение при ошибках: предотвращение, понятное объяснение, восстановление; формы, оплаты, обрывы связи. Просите, когда люди теряются на сбоях.

/owl-error-handling-ux В заявку

Паттерны навигации

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

/owl-navigation-patterns В заявку

Передача макета в вёрстку

Спецификация для разработчика: размеры, токены, состояния, поведение, ассеты, краевые случаи. Нужна при сдаче макетов.

/owl-handoff-spec В заявку

План тестов доступности

Составляет матрицу проверок со вспомогательными технологиями и критериями WCAG. Просите вместе с аудитом доступности.

/owl-accessibility-test-plan В заявку

План юзабилити-тестирования

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

/owl-usability-test-plan В заявку

Порог отклика 400 мс

Держит время реакции интерфейса ниже 400 мс, чтобы пользователь не выпадал из потока. Просите при жалобах на «тормозит».

/owl-doherty-threshold В заявку

Правила именования

Устанавливает единые имена компонентов, токенов, файлов и ассетов. Просите, когда в макетах «Frame 214» и «финал_2_итог».

/owl-naming-convention В заявку

Презентация дизайна

Структурирует показ дизайна заказчику или руководству. Просите перед защитой макетов.

/owl-presentation-deck В заявку

Принципы анимации интерфейса

Задаёт осмысленную моушн-логику: что и зачем движется, а не «анимация ради анимации». Просите при оживлении сайта или приложения.

/owl-animation-principles В заявку

Работа с брендбуком

Открывает, обновляет и версионирует брендбук, отдаёт нужные разделы и экспортирует. Просите: «покажи наш брендбук», «обнови раздел».

/vibebrand В заявку

Развитие дизайн-системы

Правила эволюции без фрагментации: версии, changelog, вывод из эксплуатации, ломающие изменения. Нужно зрелым продуктовым командам.

/owl-design-system-governance В заявку

Система движения

Единый источник длительностей, кривых и хореографии анимации для всех макетов бренда. Все анимации ссылаются сюда, а не выдумывают свои значения.

/owl-motion-system В заявку

Система иконок

Задаёт сетку, размеры, именование, категории и доступность иконок. Просите при сборке или ревизии набора иконок.

/owl-icon-system В заявку

Система отступов

Строит шкалу отступов от базовой единицы с правилами применения и режимами плотности. Основа аккуратного макета.

/owl-spacing-system В заявку

Состояния загрузки

Проектирует скелетоны и постепенное появление контента вместо пустого экрана. Просите, когда данные грузятся долго.

/owl-loading-states В заявку

Состояния интерфейса

Описывает сложное поведение экрана как конечный автомат: состояния, события, переходы. Просите для многошаговых сценариев и форм.

/owl-state-machine В заявку

Спецификация компонента

Описывает компонент до деталей: свойства, состояния, варианты, доступность, правила применения. Нужна при сдаче дизайна в разработку.

/owl-component-spec В заявку

Справочник 19 дизайн-систем

Матрица дизайн-систем Apple, Stripe, Airbnb, Nike, Tesla и ещё 15 брендов с точными цветами, шрифтами, радиусами и тенями. Нужен, когда просите «сделай в стиле как у…».

/design-systems-references В заявку

Стиль иллюстраций и маскотов

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

/owl-illustration-style В заявку

Сценарии юзабилити-теста

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

/owl-test-scenario В заявку

Темизация и бренд-варианты

Проектирует архитектуру тем: несколько брендов, тёмный режим и высокий контраст поверх одного слоя токенов. Нужна при мультибрендовом продукте.

/owl-theming-system В заявку

Тест навигации первым кликом

Проектирует click-тесты: находят ли люди нужное с первой попытки. Просите при спорной структуре меню.

/owl-click-test-plan В заявку

Типографическая шкала

Создаёт модульную шкалу: размеры, насыщенность, интервалы, парность шрифтов. Просите при сборке или ревизии типографики.

/owl-typography-scale В заявку

Тёмная тема по-взрослому

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

/owl-dark-mode-design В заявку

Удобный поиск на сайте

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

/owl-search-ux В заявку

Формы без трения

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

/owl-form-design В заявку

Цветовая система продукта

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

/owl-color-system В заявку

Читабельная длина строки

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

/owl-readable-measure В заявку

Шаблоны документации дизайн-системы

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

/owl-documentation-template В заявку

Экспертная оценка удобства

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

/owl-heuristic-evaluation В заявку

Эстетика для проектов без бренда

Подбирает характерную типографику и палитру, когда своего бренда ещё нет: наборы дисплейных шрифтов по нишам и правила контраста. Просите на старте нового проекта.

/frontend-aesthetics-cookbook В заявку

Эффект «красивое = удобное»

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

/owl-aesthetic-usability В заявку