Навыки проектирования взаимодействий
rastian/interaction-design-skillsClaude-скилл для UX/UI и продуктовых дизайнеров. Аудит потоков, спецификация состояний компонентов, тайминги, микровзаимодействия и принципы IxD — с готовой документацией для передачи разработчикам.
Установка
git clone https://github.com/rastian/interaction-design-skills.gitREADME
◈ AUDIT → ANALYSE → SPECIFY → HANDOFF ◈
Interaction Design
A Claude Code Skill
Принципиальное проектирование взаимодействий: от маппинга поведения до передачи в разработку. Создан для продуктовых дизайнеров, UX-дизайнеров, UI-дизайнеров, сервисных дизайнеров и специалистов по взаимодействию.
Установка
Добавить в существующий проект Claude Code:
# Клонировать в директорию .claude/skills вашего проекта
git clone https://github.com/65ping/interaction-design-skill.git .claude/skills/interaction-designИли установить глобально (доступно во всех проектах):
git clone https://github.com/65ping/interaction-design-skill.git ~/.claude/skills/interaction-designClaude Code обнаружит скилл автоматически. Дополнительная настройка не требуется.
Что умеет скилл
Этот скилл превращает Claude в практикующего специалиста по проектированию взаимодействий: аудит потоков, спецификация состояний, определение таймингов и подготовка документации для передачи в разработку. Опишите, что вы проектируете и где застряли — скилл адаптируется к вашей роли, фазе работы и нужному формату вывода.
"Какие состояния нужны этому переключателю?"
"Составь карту потока взаимодействия для многошагового чекаута, включая все пути ошибок"
"Как долго должен отображаться скелетон загрузки перед переходом в состояние ошибки?"
"Напиши спецификацию взаимодействия для drag-and-drop сортировки, которую можно передать разработчикам"
"Я сервисный дизайнер. Как применить принципы IxD к пути пациента?"
Claude отвечает структурированными потоками, таблицами состояний, спецификациями таймингов или аннотированной документацией — на основе устоявшихся принципов.
Пять измерений
| # | Измерение | Ключевой вопрос | Результат |
|---|---|---|---|
| 1 | 📝 Слова | Направляет ли язык пользователя, не создавая путаницы? | Лейблы, инструкции, тексты ошибок, микрокопи |
| 2 | 👁️ Визуальные представления | Передают ли иконки, изображения и макет состояние чётко? | Аффордансы, сигнификаторы, визуальная обратная связь |
| 3 | 🖐️ Физические объекты и пространство | Как контекст устройства и среда влияют на взаимодействие? | Ограничения оборудования, пространственный маппинг, дизайн жестов |
| 4 | ⏱️ Время | Приходит ли обратная связь именно тогда, когда пользователь её ожидает? | Спецификации таймингов, переходы, состояния загрузки и скелетона |
| 5 | 🔁 Поведение | Реагирует ли система так, как пользователь предсказывает? | Машины состояний, потоки, правила, пути восстановления после ошибок |
Большинство сбоев взаимодействия восходят к одному упущенному измерению. Диагностировать, какому именно, — уже половина решения.
Для кого
🖥️ Продуктовые и UX-дизайнеры
Продуктовые и UX-дизайнеры, определяющие поведение продукта от начала до конца: от онбординга до восстановления после ошибок и пустых состояний.
- Составляет полные карты задач с точками входа, ветками решений и путями выхода
- Определяет все 10 состояний компонентов, чтобы ничего не оставалось на усмотрение разработчика
- Формирует спецификации взаимодействий в формате для передачи в разработку
🎨 UI и визуальные дизайнеры
UI-дизайнеры, специфицирующие детальный слой: поведение компонентов, анимацию, тайминги и микровзаимодействия, которые отличают хорошие интерфейсы от отличных.
- Специфицирует длительность анимации, кривые плавности и намерение движения
- Документирует микровзаимодействия по фреймворку: триггер → правила → обратная связь → петли
- Выявляет пробелы в аффордансах и сигнификаторах до того, как они становятся проблемами юзабилити
🔄 Сервисные и системные дизайнеры
Сервисные дизайнеры и системные мыслители, применяющие принципы IxD через точки контакта: цифровые, физические и очные.
- Адаптирует принципы проектирования взаимодействий к кросс-канальным путям
- Определяет, где опыт разрушается между точками контакта
- Рассматривает качество взаимодействия как проблему уровня сервиса, а не уровня экрана
Содержимое
interaction-design/
│
├── SKILL.md ← Основной файл скилла (автоматически загружается Claude Code)
│ ├── 5 измерений взаимодействия ← Слова, визуальное, физическое, время, поведение
│ ├── 6 основ Нормана ← Видимость, обратная связь, ограничения, маппинг, согласованность, аффорданс
│ ├── 19 принципов Тогнаццини ← Предвосхищение, автономия, умолчания, эффективность и другие
│ ├── Состояния компонентов (все 10) ← Default, hover, focus, active, loading, disabled, error, success, empty, skeleton
│ ├── Пороги времени отклика ← ≤100ms, ≤1s, ≤10s с рекомендациями по отображению на каждом
│ ├── Фреймворк микровзаимодействий ← Триггер, правила, обратная связь, петли и режимы
│ ├── Анимация и переходы ← Длительность, плавность, когда анимировать, а когда нет
│ ├── Руководство по ролям ← Пути для продуктового / UX / UI / сервисного дизайнера
│ └── Антипаттерны ← Типичные сбои взаимодействия, сгруппированные по измерениям
│
└── reference/
├── principles.md ← Полный справочник Нормана + Тогнаццини с прикладными примерами
├── response-time.md ← 3 порога + все паттерны обратной связи, загрузки и скелетона
└── patterns-and-flows.md ← Формы, навигация, поиск, онбординг, ошибки, пустые состояния, модалки, drag-and-drop, жесты
Примеры промптов
Наиболее эффективный способ использовать скилл — описать, что вы проектируете и что вам нужно. Claude сделает остальное.
Простые: поиск отдельного принципа или состояния
Получить все состояния компонента:
Какие состояния нужны основной кнопке?
Перечисли все и опиши, что каждое из них вызывает.
Проверить тайминг:
Пользователь нажимает «Сохранить». Операция занимает 2,3 секунды.
Что именно должно происходить в интерфейсе в течение этого времени?
Применить принцип:
Объясни принцип предвосхищения Тогнаццини и покажи,
как он применяется к форме поиска.
Средние: проектирование конкретного компонента или потока
Спроектировать микровзаимодействие:
Спроектируй микровзаимодействие для кнопки «Нравится» в ленте контента.
Используй фреймворк триггер → правила → обратная связь → петли.
Включи варианты для тач и десктоп.
Составить карту потока с ошибками:
Составь карту потока взаимодействия для формы входа.
Включи: успешный путь, неверный пароль, заблокированный аккаунт,
восстановление пароля и состояния загрузки на каждом шаге.
Проверить аффорданс:
Я проектирую карточку, которую можно перетаскивать для изменения порядка.
Какие визуальные сигналы нужны, чтобы пользователи поняли, что она перетаскиваемая?
Проверь по принципам Нормана.
Сложные: полные спецификации и документация для передачи
Написать спецификацию взаимодействия:
Напиши полную спецификацию взаимодействия для компонента drag-and-drop сортировки списка.
Включи: триггеры, визуальную обратную связь, состояния, тайминги, обработку ошибок
и примечания по доступности. Формат — для передачи разработчикам.
Провести аудит потока:
Я проектирую многошаговый онбординг для B2B SaaS-продукта (5 шагов, сбор данных компании).
Проведи аудит по всем 5 измерениям взаимодействия.
Выяви пробелы и предложи улучшения.
Применить к сервисному дизайну:
Я сервисный дизайнер, работающий над путём пациента в системе здравоохранения.
Точки контакта: мобильное приложение, киоск регистрации, уведомления по SMS.
Как применить принципы IxD последовательно по всем каналам?
Принципы
Скилл основан на двух устоявшихся фреймворках:
6 основ дизайна Нормана — видимость, обратная связь, ограничения, маппинг, согласованность, аффорданс.
19 принципов Тогнаццини — предвосхищение, автономия, цветовые слепые пользователи, согласованность, умолчания, эффективность, исследуемость, закон Фиттса, человеческий интерфейс, латентное время, обучаемость, метафоры, защита работы пользователя, читаемость, отслеживание состояния, видимая навигация и другие.
Оба фреймворка применяются практически, а не теоретически — с конкретными примерами и диагностическими вопросами.
Лицензия
MIT