Дизайн-skills для Claude Code, Codex и вашего агента.

Получите выражения для конкретных задач, рекомендации по экспорту и помощь в устранении проблем в проектах After Effects.

• After Effects
• Композитинг

Создавайте интерфейсы ИИ-чата из редактируемых React-компонентов.

• ИИ-интерфейсы
• React

Выбирайте и проверяйте API анимации SwiftUI для нативных интерфейсов.

• SwiftUI
• Платформы Apple

Конвертируйте и сжимайте изображения с явными настройками качества и сохранения оригиналов.

• Сжатие изображений
• WebP

Преобразуйте Markdown в оформленный HTML для публикации статей.

• Markdown
• Оформление статей

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

• Тайминг аудио
• Монтаж

Найдите готовую иконку и получите её SVG по проверенному идентификатору библиотеки.

• Поиск иконок
• SVG

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

• Планирование задач
• Зависимости

Проектируйте переиспользуемые API UI-компонентов с учётом доступности и распространения.

• API компонентов
• Доступность

Рендерите графики с точными значениями и движением, зависящим от кадра.

• Анимация данных
• Графики

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

• Цветовые системы
• Режиссура движения

Изучайте реальные UI-компоненты и варианты на холсте с панорамированием и масштабированием.

• Варианты компонентов
• Сравнение

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

• Оценка концепций
• Компромиссы

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

• Поиск дизайна
• Холст

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

• Композиция
• Иерархия

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

• Типографика
• Читаемость

Создавайте HTML/CSS-демонстрации функций на основе интерфейса реального приложения.

• CSS
• Ключевые кадры

Составьте перечень несогласованностей дизайна продукта и определите порядок их исправления.

• Дизайн-долг
• Приоритизация

Ведите дизайн-проект через явные этапы с сохранением артефактов.

• Дизайн-процесс
• Проверка

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

• Дизайн-QA
• Передача в разработку

Определите, как команды вносят вклад в общую дизайн-систему и развивают её.

• Дизайн-системы
• Управление

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

• Аудит токенов
• Миграция

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

• Токены
• Tailwind

Исправьте идентификацию страниц, сигналы индексации и превью для социальных сетей.

• Метаданные
• Социальные превью

Координируйте генерацию Veo и видеокомпозицию AVTool через MCP.

• Видеомонтаж
• Genmedia

Проясните нерешённые вопросы дизайн-плана с помощью целевого интервью.

• Проработка брифа
• Ограничения

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

• Проектирование взаимодействий
• Эмоциональные состояния

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

• Изометрия
• Объясняющая анимация

Анимируйте существующий логотип одним ясным приёмом появления и точной статичной альтернативой.

• Анимация логотипа
• Бренд

Рендерите прозрачные анимированные именные плашки и эфирные оверлеи.

• Нижние титры
• Типографика

Создавайте воспроизводимые математические и технические объясняющие анимации.

• Математическая анимация
• Python

Анимируйте географические маршруты, камеру и подписи на согласованных данных карты.

• Карты
• Маршруты

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

• Арт-дирекшен
• Стиль-кадры

Пишите сцены Motion Canvas с генераторами, реактивными сигналами и переиспользуемыми узлами.

• TypeScript
• Canvas-анимация

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

• Motion Canvas
• Проверка сцены

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

• Медиаресурсы
• OpenDesign

Превратите motion-бриф в связный фильм: спланируйте такты, направьте внимание и сохраните редактируемую шкалу времени. Официальный помощник OpenDesign работает внутри своей среды, а не как отдельный рендерер.

• Движение и видео
• OpenDesign

Исследуйте разные способы выполнения одной и той же пользовательской задачи.

• Исследование концепций
• Альтернативы

Восстановите растровый логотип в виде гладкого SVG и проверьте его постановочное появление в HTML.

• Анимация логотипа
• SVG

Планируйте промпты, референсы и связанные видеопоследовательности для Seedance 2.0.

• Видеопромпты
• Непрерывность

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

• Построение кадра
• Композиция

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

• Рисованное видео
• Раскадровки

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

• Потоковый Markdown
• React

Создавайте редактируемые анимации SVG-путей, иконок и иллюстраций.

• SVG
• Векторное движение

Создавайте и исправляйте Lottie-анимации с проверкой в реальном плеере, а не только на валидность JSON. Text to Lottie ориентирован на локальный предпросмотр Skia Skottie из репозитория и выводит важные значения в редактируемые элементы управления.

• Lottie
• Движение
• Skottie

Применяйте CSS-переходы для конкретных компонентов и семантические токены движения.

• Переходы
• Веб-анимация

Создавайте, отлаживайте и измеряйте осмысленное движение интерфейса.

• Движение UI
• Уменьшение движения

Запрашивайте точечные ИИ-правки существующего видео через each::sense.

• ИИ-монтаж видео
• Монтаж

Генерируйте видео по структурированным промптам в настроенной среде DeerFlow.

• Генерация видео
• Выбор модели

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

• Анализ видео
• Промпты кадров

Создавайте SVG-объяснения с прорисовкой и рукой с маркером, следующей каждому штриху.

• Белая доска
• Объясняющий ролик

Создавайте персональные видеоитоги из одного шаблона и проверенных записей.

• Истории данных
• Итоги

Стресс-тестирование существующего UI на реалистичных экстремальных данных с переключателем сравнения только для разработки; сообщайте о сбоях до их исправления.

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

• Стресс-тестирование UI
• Фикстуры крайних случаев
• Отчёт о проверке

Диагностика потерянных кадров в веб-анимации: стоимость отрисовки, конкуренция за основной поток, обновления React на каждом кадре и наследуемые переменные CSS.

Исходный код анимации и воспроизводимое взаимодействие; профилирование в браузере и реальное целевое устройство для проверки производительности.

• Веб-анимация
• Производительность кадров
• Диагностический обзор

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

Предоставьте читаемое эталонное изображение, целевой вьюпорт, доступ к проекту и доступные ресурсы. Для проверки визуального совпадения нужна отрисовка в браузере. Аккаунт UIZZE и подключение MCP не требуются.

• Скриншот в код
• Сопоставление с образцом
• Реализация UI

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

Для CLI нужны Node.js 22+ и FFmpeg. Начните с базовых навыков; процессы создания устанавливаются по требованию. Медиасервисы и облачный рендеринг могут добавлять свои требования.

• Из HTML в видео
• Маршрутизация рабочих процессов
• Видеопроизводство

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

Набору нужны Node.js 20.10+ и Chrome или Chromium для проверок. У CLI навыков свои требования к Node; в README для CLI 1.7.1 указано 22.20+.

• Изометрический SVG
• Технические объяснения
• Интерактивные схемы

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

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

• Доступность
• Дизайн-ревью
• Фронтенд

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

Требуется отдельный навык PPTX. В описании markitdown, PptxGenJS, LibreOffice и Poppler указаны как зависимости, связанные с реализацией.

• Презентации
• Научные исследования
• PowerPoint

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

Нужен Adobe Illustrator CC или новее; сгенерированные скрипты выполняются в его среде ExtendScript.

• Векторный дизайн
• Автоматизация
• Illustrator

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

Используйте агента, который может читать предоставленные расшифровки или заметки. Укажите ID участников и вопрос для дизайна; навык синтезирует уже имеющиеся данные, а не собирает интервью.

• UX-исследования
• Синтез

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

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

• UI-анимация
• Рекомендации по дизайну

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

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

• UI-дизайн
• Дизайн-ревью

Создавайте диаграммы с AntV G2 v5, используя его марки, кодирования, шкалы и взаимодействия.

Требуется @antv/g2 v5 или описанный в документации браузерный бандл. Для необязательного получения справочных материалов используется внешний контекстный сервис AntV.

• Data Visualization
• Диаграммы
• JavaScript

Визуализируйте сетевые данные с помощью AntV G6 v5, включая раскладки графов и интерактивное исследование.

Приложение на @antv/g6 v5, контейнер графа в браузере и доступ к сети, если нужен описанный сервис получения справочных материалов. Проверяйте API по установленному релизу.

• Визуализация графов
• Сети
• AntV

Создайте редактор диаграмм «узлы и связи» на AntV X6: с соединениями, поведением редактирования и необходимыми плагинами.

Используйте описанный в документации @antv/x6 v3 API с браузерным холстом и необходимыми плагинами. Для загрузки дополнительных материалов нужен доступ к сети. Сверяйте примеры с установленной версией.

• Редакторы диаграмм
• Интерфейсы узлов
• AntV

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

Требуются прилагаемый проект Remotion/Node, вспомогательные скрипты на Python, возможность рендеринга и подходящий способ синтеза речи (TTS). Для китайского и английского по умолчанию описаны разные голосовые движки; многоагентная сборка входит в описанный рабочий процесс.

• Моушн-графика
• Видео
• Remotion

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

Нужны готовый редактор на Next.js, поддерживаемая среда Node и менеджера пакетов, а также браузер. Экспорт PNG использует html-to-image; на исходные снимки, шрифты и другие ресурсы нужны соответствующие права использования.

• Маркетинг приложений
• Скриншоты
• Локализация

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

Python 3 для проверочного скрипта, который использует только стандартную библиотеку; актуальные Apple Human Interface Guidelines (HIG); доступ к устройству или симулятору для проверки поведения.

• Нативный UI
• Доступность
• Дизайн-ревью

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

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

• Редакционная иллюстрация
• Дизайн контента

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

Доступный бэкенд для изображений; Bun или среда Bun на основе npx для прилагаемого скрипта объединения PDF.

• Комиксы
• Образовательный дизайн
• Сторителлинг

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

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

• Редакционный дизайн
• Изображения для обложек

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

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

• Прототипирование
• Дизайн-системы
• Презентации

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

Текстовая или кодовая среда для SVG; Bun или Bun через npx для прилагаемого скрипта конвертации PNG.

• Диаграммы
• SVG
• Информационный дизайн

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

Нужны Bun или среда Bun на основе npx, полные адаптеры провайдеров и учётные данные либо вход в аккаунт для выбранного поддерживаемого маршрута.

• Генерация изображений
• Пакетные рабочие процессы
• Визуальные материалы

Превратите контент в инфографику с макетом сравнения, иерархии, процесса или обзора, подходящим материалу.

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

• Инфографика
• Информационный дизайн

Генерируйте иллюстрированные слайды и собирайте презентацию из изображений для распространения; отдельные объекты слайдов не редактируются.

Нужны бэкенд генерации растровых изображений и Bun или Bun через npx для скриптов сборки PPTX/PDF.

• Презентации
• Редакционный дизайн

Создайте визуально согласованную серию карточек-изображений для Xiaohongshu с одной главной идеей на каждой карточке.

Доступный растровый бэкенд с подходящей поддержкой референсов, а также конфигурация и справочные материалы по компоновке карточек.

• Графика для соцсетей
• Контент-дизайн
• Карточки-изображения

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

Документированная сборка использует Node/npm, Vite, React, TypeScript и Reacticle. Для извлечения данных из документов и необязательного вывода в PDF могут понадобиться дополнительные инструменты; для генерации изображений нужен отдельно доступный бэкенд.

• Редакционный дизайн
• HTML
• Лонгрид

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

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

• UX-исследования
• Синтез

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

Предоставьте экран или прототип, цель пользователя и критерии набора участников. Навык создаёт план теста; проведение сессий и сбор кликов требуют отдельной организации исследования.

• UX
• Рекомендации по дизайну

Превращайте исходные материалы в иллюстрированные слайды и собирайте PPTX с содержимым слайдов на основе изображений, а не отдельно редактируемых объектов.

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

• Презентации
• Генерация изображений

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

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

• Цветовой дизайн
• Рекомендации по дизайну

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

Укажите назначение компонента, визуальные варианты и целевую платформу. Результат — спецификация для реализации и тестирования, а не готовый компонент.

• Дизайн-системы
• Спецификации

Спроектируйте, что говорит система, какого ответа она ждёт и как восстанавливается, когда они не совпадают.

Укажите поддерживаемые задачи, ограничения канала и требования к подтверждению. Голосовые сценарии также требуют тестирования на устройствах и распознавания речи; один письменный диалог не позволяет установить качество распознавания.

• UX
• Рекомендации по дизайну

Переносите иерархию интерфейса на тёмные поверхности, а не просто инвертируйте цвета.

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

• Дизайн цвета
• Рекомендации по дизайну

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

Нужны Node.js 20+, npm и генератор, входящий в комплект навыка. Для функций редактирования и экспорта используйте его локальный сервис предпросмотра: обычный статический сервер эти API не предоставляет.

• Презентации
• Слайды HTML
• PPTX

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

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

• Data Visualization
• Рекомендации по дизайну

Дайте визуальным решениям названия и связи, которые компоненты смогут использовать повторно.

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

• Дизайн-системы
• Спецификации

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

Укажите цель исследования, критерии участников, временной период и доступные инструменты записи. Результат — план исследования; набор участников, контрольные связи и сбор данных участников всё равно нужно выполнять.

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

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

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

• Визуальные итерации
• Гейм-дизайн
• Прототипирование

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

Агент, который может читать ваши исследовательские заметки, определённый пользователь или сегмент и дизайн-решение, которое должна поддержать карта.

• UX-исследования
• Синтез

Сделайте так, чтобы при сбоях было понятно, что произошло, и у людей был путь вперёд без потери их работы.

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

• UX
• Дизайн-рекомендации

Сопоставляйте опубликованные компоненты Figma с соответствующими компонентами кода через Code Connect.

Подключённые Figma MCP, доступ к опубликованным компонентам и кодовой базе, а также действующее право на Code Connect и права на редактирование.

• Figma
• Дизайн-системы
• Передача в разработку

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

Подключение Figma MCP и доступ к целевой кодовой базе; формат итоговых правил зависит от среды программирования.

• Figma
• Дизайн-системы
• Правила для агентов

Создайте редактируемый экран Figma, который остаётся связанным со своей дизайн-системой.

Подключённый Figma MCP, доступ к целевому файлу, опубликованная дизайн-система и сопутствующий Skill figma-use для операций на холсте.

• Figma
• UI-дизайн
• Дизайн-системы

Создайте повторно используемую библиотеку Figma: начните с дизайн-токенов, затем добавьте компоненты.

Figma MCP с доступом к редактируемому файлу, доступом к репозиторию и сопутствующим Skill figma-use вместе со вспомогательными справочными материалами.

• Figma
• Дизайн-системы
• Библиотеки компонентов

Реализуйте дизайн Figma, используя компоненты и соглашения целевого репозитория, затем сравните результат с дизайном.

Подключённый Figma MCP, доступ к выбранному дизайну и целевому репозиторию, а также работающий предпросмотр для визуальной проверки.

• Figma
• Фронтенд-дизайн
• Передача разработчикам

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

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

• UX
• Рекомендации по дизайну

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

FreeCAD со встроенным Python; для работы с GUI дополнительно используется встроенный PySide, а для работы со сценографом — Pivy.

• 3D-дизайн
• CAD
• Python

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

Нужны ключ API поддерживаемого провайдера и доступ к сети; доступность моделей и стоимость использования нужно проверять отдельно.

• Создание изображений
• Визуальные ресурсы

Продумайте, что происходит до жеста, во время него и после — а не только итоговое действие по свайпу.

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

• UX
• Рекомендации по дизайну

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

Локальный режим API требует явного включения в Garden, скриптов Node и настроенных учётных данных. Встроенный режим зависит от инструмента изображений в среде. Доступ к моделям, цены и поддерживаемые параметры нужно проверить в этой среде.

• Генерация изображений
• Проектирование промптов
• Редактирование изображений

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

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

• UX
• Рекомендации по дизайну

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

Требуются генерация изображений, Python, Blender и веб-среда для поставляемого просмотрщика. В источнике упоминается локальная установка зависимостей во время работы конвейера.

• 3D-дизайн
• Коллекционные карточки
• Blender

Создайте короткометражный фильм на основе арт-направления, а не череды слайдов с переходами. Huashu Art Motion объединяет сцены, нарисованные кодом, спрайты персонажей и проверку движения в локальном процессе рендеринга.

Локальный рендеринг требует uv, FFmpeg и Playwright Chromium. Для человекоподобных спрайтов используйте готовые кадры персонажей или отдельный процесс генерации изображений; для звука и шрифтов нужны собственные материалы и разрешения.

• Арт-анимация
• Canvas
• Короткометражные фильмы

Создайте многоразовый дизайн-навык на основе визуальных референсов, дизайн-правил и токенов.

Нужны доступ к файлам, подходящие инструменты для анализа референсов, Node для validate.mjs и проверка в браузере для уверенности в визуальном результате. Доступность инструментов влияет на точность извлечения.

• Дизайн-системы
• Создание навыков
• Дизайн-токены

Задайте иконкам единую конструкцию и систему имён вместо набора несвязанных символов.

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

• Дизайн-системы
• Спецификации

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

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

• UX
• Рекомендации по дизайну

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

Нужны CLI editppt, подходящие возможности генерации изображений и мультиагентное выполнение для многостраничных запусков. PaddleOCR — необязательное настраиваемое средство; офлайн-подсказки имеют другой профиль качества.

• Презентации
• PowerPoint
• Реконструкция

Сначала решите, где должна находиться информация, и только потом — как будет выглядеть навигация.

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

• UX-стратегия
• Структура контента

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

Основные входные данные — цели исследования, критерии участников и ограничения сессии; сервисы записи и рекрутинга не предоставляются.

• UX-исследования
• Интервью

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

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

• UX-исследования
• Продуктовая стратегия

Соедините отдельные точки контакта в тот опыт, который человек действительно проходит.

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

• UX-исследования
• Карта пути пользователя

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

Отдельная среда выполнения приложения не требуется; в примерах реализации используются значения Tailwind, IntersectionObserver и дополнительные инструменты анимации.

• Лендинги
• Копирайтинг
• Веб-дизайн

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

Нужен совместимый проект на React или Next.js с Tailwind; упомянутые UI-компоненты и дополнительные инструменты анализа бренда могут требовать отдельной настройки.

• Посадочные страницы
• Копирайтинг
• Фронтенд

Определите общие колонки, поля и адаптивное поведение для связанных макетов страниц.

Явных зависимостей среды выполнения нет; для выбора подходящих значений сетки нужны реальные ограничения контента.

• UI-дизайн
• Адаптивный макет

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

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

• Дизайн взаимодействия
• UX загрузки

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

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

• Дизайн-системы
• Локализация

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

В источнике описаны вспомогательные скрипты на Python без зависимостей, но для фактического рендеринга изображений нужен доступный рендерер, например CairoSVG, Inkscape, Chrome или другой поддерживаемый вариант.

• Брендинг
• Logo Design
• SVG

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

Конкретная библиотека анимации не требуется; тестирование на целевом устройстве всё же необходимо.

• Дизайн взаимодействий
• Передача UI-макетов

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

Требуется реализация токенов или аналог на платформе; источник не требует конкретного фреймворка анимации.

• Дизайн-системы
• Анимация

Создавайте или редактируйте изображения через OpenRouter с помощью референсов и входящего в комплект Python-скрипта.

uv, входящий в комплект Python-скрипт и OPENROUTER_API_KEY с подходящим доступом к моделям и достаточным балансом.

• Редактирование изображений
• Композиция

Превратите иерархию информации в узнаваемые элементы навигации и понятные пути между разделами.

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

• Проектирование взаимодействия
• Навигация

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

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

• Дизайн взаимодействия
• Онбординг

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

Для извлечения бренда по URL нужен Firecrawl. Результаты по умолчанию не используют внешние зависимости JavaScript, но для шрифтов и изображений всё равно могут понадобиться доступность и права на использование.

• Веб-дизайн
• Презентации
• Системы бренда

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

Фронтенд-проект и осознанно выбранные библиотеки анимации; руководство не требует какой-либо одной среды выполнения.

• Фронтенд-дизайн
• Motion
• Типографика

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

Проект Remotion, @remotion/captions и нужные справочные файлы по транскрибации, импорту и отображению.

• Видео
• Субтитры

Настройте проект и композицию Remotion по видеобрифу с доступным предпросмотром во время разработки.

Node.js, Git, установка пакетов, Remotion Studio и связанные материалы по композиции и макету.

• Видео
• React

Сделайте видео редактируемым в Studio, изменив то, как React-исходник раскрывает слои, тайминг и элементы управления.

Нужна версия Remotion, поддерживающая описанные Interactive API; для описанной редактируемой интерполяции путей дополнительно нужен @remotion/paths.

• Видео
• React
• Интерактивность

Создавайте анимированные карты в Remotion, выбирая технику картографии, провайдера и данные под задуманный кадр.

Remotion плюс библиотеки и данные выбранной техники; по данным зафиксированного источника, Mapbox требует ключ.

• Видео
• Карты

Пишите разметку React, которая ведёт себя как видеотаймлайн, а не как веб-страница с анимацией CSS.

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

• Видео
• React
• Движение

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

Rhino 7 или новее; по источнику, рекомендуемая среда для единого редактора скриптов — Rhino 8.

• 3D-дизайн
• CAD
• Автоматизация

Заранее отрендеренный полёт камеры, которым управляет прокрутка, а не живой 3D-мир.

Описанный процесс использует Higgsfield и видеомаршрут Monid, а также ffmpeg/ffprobe и браузерное окружение. Аккаунты провайдеров, кредиты, возможности моделей и любой необязательный маршрут для изображений нужно проверить заново.

• Анимация при прокрутке
• Видео
• Лендинги

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

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

• Проектирование взаимодействия
• Поиск

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

Требуются данные от заинтересованных сторон и о процессах; сам навык не получает доступ к операционным системам.

• UX-стратегия
• Сервисный дизайн

Пишите шейдеры Slang и проверяйте, как их входы, ресурсы и выходы связаны с рендерером.

Нужна среда компиляции Slang и рендерер, подходящие для целевого бэкенда; утверждения об интеграции требуют проверки на стороне хоста.

• Шейдеры
• Графика GPU
• 3D-дизайн

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

Конкретный инструмент для токенов не требуется; применение зависит от существующей системы компонентов.

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

Опишите, что может произойти дальше из каждого состояния компонента.

Никакой именованный пакет state-machine не требуется; собственно реализация и тесты остаются последующей работой.

• Проектирование взаимодействия
• Моделирование поведения

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

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

• Дизайн-системы
• Темизация

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

Нужен сетевой доступ к реестру или CDN. Интеграции с React, CLI, Figma и MCP необязательны и не требуются для простого получения URL.

• Ресурсы брендов
• SVG
• Облачные диаграммы

Задайте для загруженной модели персонажа или продукта чёткую стратегию воспроизведения и смешивания анимаций.

Рабочий проект Three.js и рендерер; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

• 3D
• Three.js

Выберите представление формы до добавления стилизации поверхности или анимации.

Рабочий проект Three.js и рендерер; сверяйте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

• 3D
• Three.js

Свяжите жест с нужным 3D-объектом, используя реальные координаты холста и камеры.

Рабочий проект Three.js и рендерер; сверяйте примеры из источника с установленной версией. Дополнительные контроллеры и загрузчики зависят от выбранного подхода.

• 3D
• Three.js

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

Рабочий проект Three.js с рендерером; сверяйте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

• 3D
• Three.js

Подберите модель шейдинга под поверхность, а затем проверьте её при предполагаемом освещении.

Рабочий проект Three.js и рендерер; проверьте примеры из источника на установленной версии. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

• 3D
• Three.js

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

Рабочий проект Three.js и renderer; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

• 3D
• Three.js

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

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

• 3D
• Three.js

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

Рабочий проект Three.js и средство рендеринга; сверьте примеры из источника с установленным релизом. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

• 3D
• Three.js

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

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

• UI-дизайн
• Типографика

Решите, что исследование должно выяснить, прежде чем назначать сессии.

Нужен пригодный для тестирования артефакт и доступ к участникам; платформа для рекрутинга и проведения сессий не предоставляется.

• UX-исследования
• Юзабилити-тестирование

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

Источник не требует какого-либо приложения для диаграмм; выбранный формат вывода должен сохранять понятную нотацию.

• Прототипирование
• Пользовательские потоки

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

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

• UX-исследования
• Персоны

Спланируйте и соберите продуктовое видео в Remotion из захватов интерфейса, инструкций по кадрам и композиции с таймингом.

Требуются среда Remotion/Node, захват в браузере и ffmpeg. Некоторым компонентам нужны пакеты, связанные с Three.js; дополнительный анализ музыки и экспорт в Jianying требуют отдельных зависимостей. Применимую лицензию Remotion проверяйте самостоятельно.

• Продуктовое видео
• Remotion
• Моушн-дизайн

Выберите, что должно быть замечено первым, и выстройте композицию так, чтобы она поддерживала этот выбор.

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

• UI-дизайн
• Композиция

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

Нужны агент, умеющий работать с кодом, и среда фронтенда, отображаемая в браузере. Отдельные паттерны могут использовать React, Babel, диаграммы или другие библиотеки; для приёмки в браузере нужен подходящий браузерный инструмент.

• Фронтенд-дизайн
• Прототипирование
• Дизайн-системы

Создавайте браузерные презентации с визуальными сценами по таймингу и дополнительной озвучкой; запись — отдельный шаг.

Используются Vite, React, TypeScript и инструменты Node. Дополнительный синтез речи (TTS) зависит от выбранного провайдера, учётных данных и адаптера; для итоговой записи нужны захват экрана в браузере или программа для записи.

• Презентации
• Анимация
• Озвучка

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

Какой-либо конкретный инструмент для вайрфреймов не требуется; в рабочем брифе должны быть сведения о контенте и состояниях.

• Прототипирование
• Вайрфреймы

Генеративная графика с p5.js: частицы с сидом, поля потоков и настраиваемые параметры.

Требуется: p5.js

• Изображения и генеративная графика
• Генеративное искусство
• В OpenDesign

Применяет официальные фирменные цвета и типографику Anthropic к любому артефакту. Только бренд Anthropic.

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

Оригинальные постеры и статичная графика в формате PNG или PDF.

• Изображения и генеративная графика
• PNG / PDF
• В OpenDesign

Задаёт выразительное визуальное направление, типографику и компоновку для нового или существующего веб-интерфейса.

• Веб и UI
• Код UI
• В OpenDesign

Анимированные GIF, соответствующие ограничениям Slack по размеру и формату.

• Моушен и видео
• GIF
• В OpenDesign

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

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

Многокомпонентные интерактивные HTML-продукты с React, Tailwind и shadcn/ui.

• Веб и UI
• HTML
• В OpenDesign

Консультация по продуктовому дизайну с предложением полной дизайн-системы: эстетика, типографика, цвет, компоновка, движение.

• Бренд и дизайн-системы
• Дизайн-система
• В OpenDesign

Создаёт готовый к продакшену HTML/CSS на основе согласованного дизайн-направления.

• Веб и UI
• HTML

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

• Design Review & Accessibility
• Отчёт проверки
• В OpenDesign

Генерирует несколько дизайн-вариантов параллельно и открывает доску сравнения для обратной связи.

• Веб и UI
• Код UI

Превращает описание или код Mermaid в редактируемый файл Excalidraw плюс SVG и PNG.

Требуется: Excalidraw

• Diagrams & Data Visualization
• Diagram

Аудит визуального дизайна iOS-приложений на реальном оборудовании.

• Mobile Apps
• Отчёт проверки

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

• Design Review & Accessibility
• Отчёт проверки
• В OpenDesign

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

• Изображения и генеративная графика
• Image

Голос бренда, визуальная идентичность, фреймворки месседжинга и консистентность бренда.

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

Фирменный стиль, дизайн-токены, UI-стилизация, генерация логотипов и программы корпоративной идентичности.

Требуется: сервис генерации изображений (Gemini, Atlas Cloud или MuAPI)

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

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

• Бренд и дизайн-системы
• Дизайн-система

Стратегические HTML-презентации с Chart.js, дизайн-токенами и адаптивными макетами.

Требуется: Chart.js

• Presentations
• HTML-слайды
• В OpenDesign

Доступная стилизация интерфейсов с shadcn/ui, Tailwind CSS и визуализацией на canvas.

Требуется: shadcn/ui, Tailwind CSS

• Веб и UI
• Код UI

Экспертиза UI/UX дизайна для веб, мобильных и десктопных приложений: компоновка, цвет, типографика и UX-правила.

• Веб и UI
• Код UI
• В OpenDesign

Добавляет, находит, исправляет, стилизует и компонует shadcn-компоненты в проекте.

Требуется: shadcn/ui

• Веб и UI
• Код UI

Создаёт продакшен-качественные, доступные, адаптивные пользовательские интерфейсы.

• Веб и UI
• Код UI

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

Требуется: Image generation service

• Бренд и дизайн-системы
• Image
• В OpenDesign

Чистый фронтенд-дизайн лендингов, портфолио и редизайнов без шаблонщины.

• Веб и UI
• Код UI
• В OpenDesign

Редакционные макеты, разнообразие вёрстки и GSAP-анимация в одном фронтенд-скилле.

Требуется: GSAP

• Веб и UI
• Код UI

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

• Веб и UI

Генерирует и анализирует дизайн-макет, затем реализует соответствующую страницу.

Требуется: Image generation service

• Веб и UI
• Код UI

Высокоточные концепции мобильных экранов и пользовательских сценариев через генерацию изображений.

Требуется: Image generation service

• Mobile Apps
• Image
• В OpenDesign

Посекционные референсы дизайна сайтов через генерацию изображений.

Требуется: Image generation service

• Веб и UI
• Image
• В OpenDesign

Брутальные интерфейсы, объединяющие швейцарскую типографику с эстетикой терминала.

• Веб и UI
• Код UI

Чистые монохромные интерфейсы в редакционном стиле.

• Веб и UI
• Код UI

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

• Design Review & Accessibility
• Код UI

Создаёт DESIGN.md для Google Stitch с акцентом на визуальную узнаваемость.

Требуется: Google Stitch

• Бренд и дизайн-системы
• DESIGN.md

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

• Design Review & Accessibility
• Код UI
• В OpenDesign

Преобразует текст, заметки или статью в обучающее видео без лиц с созданными визуальными сценами.

Требуется: HyperFrames

• Моушен и видео
• Video

Импортирует Figma-ассеты, брендовые токены и сторибборды в композицию HyperFrames.

Требуется: HyperFrames, Figma

• Моушен и видео
• Video

Создаёт или редактирует многосценное видео HyperFrames, когда готовый шаблон не подходит.

Требуется: HyperFrames

• Моушен и видео
• Video

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

Требуется: HyperFrames

• Моушен и видео
• Video

Креативное направление видео HyperFrames: палитра, шрифт, композиция, закадровый голос, темп.

Требуется: HyperFrames

• Моушен и видео
• Video

Наезды, зумы, рефреймы, эффекты Кена Бёрнса и 2D/3D-ключевые кадры для HyperFrames.

Требуется: HyperFrames

• Моушен и видео
• Video

Короткая дизайн-моушн-графика: кинетический тайп, анимация статистики, логозаставки, нижние титры.

Требуется: HyperFrames

• Моушен и видео
• Video

Превращает URL продукта, скрипт или бриф в видео-запуск или промо-ролик.

Требуется: HyperFrames

• Моушен и видео
• Video

Интерактивные слайд-шоу HyperFrames с фрагментами, ветвлением и режимом докладчика.

Требуется: HyperFrames

• Presentations
• HTML-слайды

Презентации для разработчиков с Markdown, Vue-компонентами, подсветкой кода и анимацией.

Нужно: Slidev

• Presentations
• HTML-слайды

Интерфейсы, соответствующие WCAG 2.2, с поддержкой мобильной доступности и ассистивных технологий.

• Design Review & Accessibility
• Код UI

Сначала интервью о фирменном стиле, затем создаёт и дорабатывает лендинг через Stitch.

Требуется: Google Stitch

• Веб и UI
• Код UI

Масштабируемые дизайн-системы: токены, инфраструктура тем, архитектура компонентов.

• Бренд и дизайн-системы
• Дизайн-система

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

• Моушен и видео
• Код UI

Дашборды KPI: выбор метрик, типов графиков, компоновка и паттерны реального времени.

• Diagrams & Data Visualization
• Dashboard

Нативный Android UI с Material Design 3 и Jetpack Compose.

• Mobile Apps
• Код UI

Нативный iOS UI следуя Apple Human Interface Guidelines с SwiftUI.

• Mobile Apps
• Код UI

Проверяет и чинит редактируемые PPTX на корректность геометрии, доступности и структуры пакета.

• Presentations
• PPTX

Анализирует референсный PPTX на тему, типографику, ритм компоновки и диагностику.

• Presentations
• Отчёт проверки

Создаёт JSON-спецификации с явными координатами для редактируемых PPTX.

• Presentations
• PPTX

Выбирает и размещает утверждённые иконки, изображения, SVG и инфографику в PPTX.

• Presentations
• PPTX

Стилизация React Native, навигация и анимации Reanimated.

Требует: React Native

• Mobile Apps
• Код UI

Отзывчивые раскладки с container queries, гибкой типографикой, CSS Grid и mobile-first брейкпоинтами.

• Веб и UI
• Код UI

Тестирует веб-приложения со скринридерами VoiceOver, NVDA и JAWS.

• Design Review & Accessibility
• Отчёт проверки

Дизайн-системы с Tailwind CSS v4: токены, библиотеки компонентов, отзывчивые паттерны.

Требуется: Tailwind CSS

• Бренд и дизайн-системы
• Дизайн-система

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

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

Аудит WCAG 2.2 с автоматизированными тестами, ручными проверками и рекомендациями по устранению.

• Design Review & Accessibility
• Отчёт проверки

Многоразовые паттерны компонентов React, Vue и Svelte и стратегии композиции.

• Веб и UI
• Код UI

Создаёт и редактирует файлы диаграмм draw.io (.drawio, .drawio.svg, .drawio.png).

Требуется: draw.io

• Diagrams & Data Visualization
• Diagram

Генерирует диаграммы и ментальные карты Excalidraw из естественного языка.

Требуется: Excalidraw

• Diagrams & Data Visualization
• Diagram

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

Требуется: GSAP

• Моушен и видео
• Код UI

Профессиональный UI/UX-дизайн, компоненты и дизайн-системы в Penpot через MCP-инструменты.

Требуется: Penpot MCP

• Веб и UI
• Файл дизайна

Дизайн отчётов Power BI: выбор графиков, компоновка, читабельность, доступность.

Требуется: Power BI

• Diagrams & Data Visualization
• Dashboard

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

• Design Review & Accessibility
• Отчёт проверки

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

• Моушен и видео
• Код UI

Жесты, пружины и переходы для React Native и Expo.

Требуется: React Native / Expo

• Mobile Apps
• Код UI

Обратный глоссарий, который превращает расплывчатое описание движения в точный термин.

• Моушен и видео

Жесты Apple, физическое движение и пространственная иерархия, адаптированные для веба.

• Веб и UI
• Код UI

Философия Эмиля Ковальски о полировке UI, дизайне компонентов и решениях по анимации.

• Веб и UI
• В OpenDesign

Находит в интерфейсе места для анимации с рекомендациями параметров, отсеивая лишнее.

• Моушен и видео
• Отчёт проверки

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

• Design Review & Accessibility
• Отчёт проверки

Создаёт несколько действительно разных версий элемента интерфейса с живым визуальным переключателем.

• Веб и UI
• Код UI

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

• Design Review & Accessibility
• Отчёт проверки
• В OpenDesign

Переходы между страницами с ощущением нативности через View Transition API в React.

Требуется: React

• Моушен и видео
• Код UI

HTML-слайды с насыщенной анимацией с нуля или конвертированные из PowerPoint (PPT).

• Presentations
• HTML-слайды
• В OpenDesign

Преобразует JSON-спецификации в интерактивные терминальные интерфейсы с помощью Ink.

Требуется: Ink

• Веб и UI
• Терминальный UI

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

Требуется: Image generation service

• Изображения и генеративная графика
• Image
• В OpenDesign

Горизонтальные HTML-презентации в одном файле в журнальном или швейцарском стиле с режимом докладчика и синхронизацией.

• Presentations
• HTML-слайды
• В OpenDesign

Определяет или применяет брендбук для любого продукта: цвет, типографика, логотип, тон.

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

Фиксирует айдентику бренда через визард из 10 вопросов для последующих документов и презентаций.

• Бренд и дизайн-системы
• Дизайн-система

Конвертирует Markdown-презентацию в брендированные слайды.

• Presentations
• HTML-слайды

Токены дизайна, документация компонентов, адаптивные расчёты и передача разработчикам.

• Бренд и дизайн-системы
• Дизайн-система

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

• UX и исследования
• Исследовательский документ

Высокоточные HTML-прототипы, слайды, анимация и визуализации; начинает с трёх вариантов.

• Веб и UI
• HTML

WCAG 2.1 AA аудит дизайна или страницы: контраст, клавиатура, области касания.

• Design Review & Accessibility
• Отчёт проверки

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

• Design Review & Accessibility
• Отчёт проверки

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

• Бренд и дизайн-системы
• Спецификация передачи

Аудит, документирование или расширение существующей дизайн-системы.

• Бренд и дизайн-системы
• Дизайн-система

Синтезирует интервью, опросы и заметки тестирования в темы и рекомендации.

• UX и исследования
• Исследовательский документ

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

• UX и исследования
• Исследовательский документ

Пишет или проверяет UX-тексты: микрокопи, сообщения об ошибках, пустые состояния, призывы к действию.

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

Основное API GSAP: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

GSAP во Vue, Svelte и других не-React фреймворках: жизненный цикл, область видимости, очистка.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Производительность GSAP: трансформации, избежание layout thrash, will-change, батчинг.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Плагины GSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG и физика.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

GSAP в React и Next.js с хуком useGSAP, refs, context и очисткой.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Прокрутка с анимацией через ScrollTrigger: закрепление, scrub, триггеры, параллакс.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Таймлайны GSAP: параметр position, вложенность и управление воспроизведением.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Вспомогательные функции gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

Требуется: GSAP

• Моушен и видео
• Код UI
• В OpenDesign

Цветовые палитры и шрифтовые пары для презентаций PPT и дизайн-задач.

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

Согласованная визуальная система для PPT-слайдов на основе правил радиуса и отступов.

• Presentations

Превращает фотографии людей, питомцев, объектов или логотипов в четыре GIF-стикера с подписями.

• Моушен и видео
• GIF
• В OpenDesign

Генерирует, редактирует и читает редактируемые презентации PowerPoint (PPTX).

• Presentations
• PPTX
• В OpenDesign

GLSL-шейдеры: ray marching, SDF, жидкости, частицы, процедурная визуализация.

Требуется: GLSL / WebGL

• Изображения и генеративная графика
• Генеративное искусство
• В OpenDesign

Реализует отдельные слайды PowerPoint с помощью PptxGenJS.

Требуется: PptxGenJS

• Presentations
• PPTX

Быстро улучшает UI-код, исправляя отступы, иерархию, типографику и мелкие проблемы вёрстки.

• Design Review & Accessibility
• Код UI

Создаёт или обновляет DESIGN.md на основе существующего репозитория продукта или публичного сайта.

• Бренд и дизайн-системы
• DESIGN.md

Проверяет и исправляет ошибки ARIA, клавиатурной навигации, фокуса, контраста и форм.

• Design Review & Accessibility
• Отчёт проверки

Находит и исправляет рывки в CSS/JS-анимациях и прокрутке.

• Моушен и видео
• Отчёт проверки

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

• Design Review & Accessibility
• Отчёт проверки

Анализирует проекты Stitch и создаёт семантический файл DESIGN.md.

Требуется: Google Stitch

• Бренд и дизайн-системы
• DESIGN.md
• В OpenDesign

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

Требуется: Google Stitch

• Веб и UI
• В OpenDesign

Конвертирует Stitch-дизайны в React + Vite дашборды с TanStack Query.

Требуется: Google Stitch

• Веб и UI
• Код UI

Пошаговые видеоролики из проектов Stitch с переходами и масштабированием в Remotion.

Необходимо: Google Stitch, Remotion

• Моушен и видео
• Video
• В OpenDesign

Интеграция и настройка компонентов shadcn/ui: обнаружение, установка, лучшие практики.

Требуется: shadcn/ui

• Веб и UI
• Код UI
• В OpenDesign

Преобразует frontend-код в Stitch-дизайн через статический HTML и извлечение дизайн-системы.

Требуется: Google Stitch

• Веб и UI
• Файл дизайна

Извлекает полный DESIGN.md из исходного кода фронтенда в любом фреймворке.

• Бренд и дизайн-системы
• DESIGN.md

Извлекает автономные статические HTML-снимки с встроенными CSS и изображениями.

• Веб и UI
• HTML

Генерирует, редактирует и создаёт вариации экранов в Stitch из текста или референсных изображений.

Требуется: Google Stitch

• Веб и UI
• Файл дизайна

Создаёт, обновляет и применяет дизайн-системы в Stitch через MCP-инструменты.

Требуется: Google Stitch

• Бренд и дизайн-системы
• Дизайн-система

Конвертирует или синхронизирует Stitch-дизайны в модульные React + Vite компоненты.

Требуется: Google Stitch

• Веб и UI
• Код UI

Конвертирует или синхронизирует Stitch HTML-дизайны в React Native компоненты.

Требуется: Google Stitch, React Native

• Mobile Apps
• Код UI

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

• Веб и UI
• Код UI

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

• Веб и UI

Проверяет и улучшает веб-доступность согласно WCAG 2.2.

• Design Review & Accessibility
• Отчёт проверки

Применяет принципы моушн-дизайна: тайминг, easing, хореография и основы анимации.

• Моушен и видео

Комплексный ассистент по пользовательским исследованиям: качественные и количественные методы, гайды и планы.

• UX и исследования
• Исследовательский документ

Реализует токены, компоненты и адаптивные макеты Material Design 3.

• Mobile Apps
• Код UI

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

• Моушен и видео

Именование цвета, теория, цветовые пространства, палитры, рампы, градиенты, конвертация и контраст.

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

Визуализирует данные в виде столбчатых, линейных, круговых, лепестковых диаграмм, диаграмм Санки, ментальных карт и блок-схем через AntV API.

Требуется: AntV API

• Diagrams & Data Visualization
• Изображение диаграммы

Создаёт инфографику из заданного текста.

Требуется: AntV API

• Diagrams & Data Visualization
• Image

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

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