Дизайн сайта с управлением жестами без Фигмы: как остаться автором, когда руки — ИИ
Июль 2026 года. Мир веб-дизайна переживает очередную тектоническую сдвижку. Ещё недавно казалось, что будущее — за голосовыми интерфейсами и нейросетями, генерирующими макеты по текстовому описанию. Но свежая публикация на Habr, основанная на реальном опыте разработчиков, открывает совсем другую перспективу: дизайн сайта с управлением жестами. Не в VR-шлеме, не в метавселенной, а прямо на обычном сайте, где пользователь управляет интерфейсом не мышью, не голосом, а движением рук, снятым с обычной веб-камеры.
Это не футуристический концепт, а рабочий прототип, построенный без использования единого макета в Фигме. В этой статье мы разберём, как авторы проекта подошли к задаче, какие технологии использовали, и — самое главное — как в эпоху тотального внедрения ИИ сохранить за собой авторство и контроль над продуктом.
Почему отказ от Фигмы — это не шаг назад, а шаг в сторону
Традиционный процесс создания сайта начинается с Figma, Sketch или Adobe XD. Дизайнер рисует пиксели, разработчик верстает. Этот конвейер работает десятилетиями, но у него есть фундаментальный недостаток: он плохо приспособлен для интерфейсов, которые нельзя нарисовать статично.
Что такое управление жестами с точки зрения дизайна
Когда пользователь взаимодействует с сайтом через веб-камеру, интерфейс перестаёт быть набором кнопок и форм. Он становится реактивной средой, где:
- Сжатие кулака может означать «выбрать»
- Взмах руки — «пролистать»
- Поднятый вверх большой палец — «лайк»
Ни один статический макет не передаст логику таких взаимодействий. Именно поэтому авторы статьи сознательно отказались от Figma. Они пошли по пути, который называют «дизайн кодом» (design-in-code).
Практический пример: Вместо того чтобы рисовать 50 экранов с разными положениями руки, команда написала один HTML-файл с CSS-анимациями, который в реальном времени реагировал на координаты пальцев, получаемые с камеры.
«Мы нарисовали не интерфейс, а поведение», — так описывают свой подход разработчики в исходной статье.
Как работает дизайн сайта с управлением жестами без Фигмы
Разберём техническую сторону вопроса. Авторы проекта использовали связку из трёх ключевых технологий, которые доступны любому разработчику в 2026 году.
1. Распознавание жестов через MediaPipe Hands
MediaPipe Hands — это библиотека от Google, которая позволяет отслеживать 21 ключевую точку на каждой руке в реальном времени, используя обычную веб-камеру. Она работает прямо в браузере через JavaScript (WebAssembly).
Как это было реализовано:
- Скрипт захватывал видеопоток с камеры
- MediaPipe определял координаты пальцев
- На основе этих координат вычислялись жесты: «щипок» (сведение большого и указательного пальца), «раскрытая ладонь», «кулак»
2. Прямая манипуляция DOM
Поскольку дизайн не был заранее «нарисован», все элементы интерфейса создавались и изменялись динамически. Например:
- Когда пользователь сжимал кулак, JavaScript добавлял CSS-класс active кнопке
- Когда разжимал — класс удалялся
- Перемещение руки в пространстве меняло CSS-свойства translateX и translateY
Этот подход позволяет создавать интерфейсы, которые невозможно отличить от «нарисованных» в редакторе, но которые при этом живут и дышат.
3. Отсутствие промежуточных инструментов
Весь процесс — от идеи до рабочего сайта — занял два дня. Авторы не экспортировали макеты, не нарезали SVG-иконки, не согласовывали отступы в пикселях. Они писали код, который сразу становился интерфейсом.
Как остаться автором, когда руки — ИИ
Заголовок статьи-первоисточника интригует: «Как остаться автором, когда руки — ИИ». Эта фраза отсылает к парадоксу современной разработки. С одной стороны, нейросети (вроде GPT-5 или Claude 4) могут сгенерировать код интерфейса по текстовому описанию. С другой — кто в этом случае автор?
Проблема авторства в эпоху генеративного дизайна
Многие компании уже используют AI-генерацию макетов. Сервисы вроде Galileo AI или Uizard позволяют получить прототип из текстовой подсказки. Однако у такого подхода есть три серьёзных ограничения:
- Отсутствие контроля над деталями. Нейросеть может нарисовать красивый макет, но она не знает, как ваш пользователь сжимает кулак.
- Проблема с уникальностью. Сгенерированные интерфейсы часто похожи друг на друга, потому что обучены на одних и тех же датасетах.
- Юридическая неопределённость. В 2026 году всё ещё нет единого мнения, кому принадлежат авторские права на контент, созданный ИИ.
Решение от авторов статьи
Разработчики из первоисточника предложили радикальный способ сохранить авторство: делать то, что нейросеть пока не умеет. А именно:
- Проектировать нестатичные интерфейсы, которые невозможно нарисовать
- Использовать живые данные с камеры как часть дизайна
- Писать код вручную, но с умом — используя ИИ как ассистента, а не как автора
Конкретный пример из статьи:
Вместо того чтобы попросить ChatGPT нарисовать страницу товара, авторы написали каркас (HTML+CSS) сами, а нейросеть использовали только для генерации CSS-анимаций, которые сглаживали движения руки. Таким образом, архитектура интерфейса осталась авторской, а ИИ выполнил роль «подмастерья».
Практические советы для тех, кто хочет попробовать
Если вы хотите создать собственный сайт с управлением жестами без использования дизайн-редакторов, вот дорожная карта, основанная на опыте из исходной статьи.
Шаг 1: Освойте MediaPipe Hands
Начните с официальной документации Google. Библиотека бесплатна, имеет открытый исходный код и работает в любом современном браузере (Chrome, Edge, Safari, Firefox).
Что нужно сделать:
- Подключите CDN-ссылку на MediaPipe
- Напишите скрипт, который выводит координаты пальцев в консоль
- Добавьте отладочный вывод — нарисуйте точки на видео с камеры
Шаг 2: Определите жесты
Не пытайтесь распознавать 50 разных жестов. Достаточно трёх-четырёх:
| Жест | Значение | Реализация |
|---|---|---|
| Кулак | Клик/выбор | Если расстояние между кончиками пальцев < 30px |
| Раскрытая ладонь | Отмена/выход | Если все пальцы разведены > 50px |
| Указательный палец вверх | Скролл/наведение | Если остальные пальцы сжаты |
| Сведение пальцев «щипок» | Перетаскивание | Если большой и указательный почти соприкасаются |
Шаг 3: Создайте интерфейс «на лету»
Не рисуйте макет. Напишите HTML-страницу с минимальным набором элементов: кнопка, слайдер, карточка. Привяжите их положение к координатам руки через CSS-трансформации.
Пример кода (упрощённо):
// Псевдокод для иллюстрации
if (gesture === 'fist') {
button.classList.add('hovered');
button.style.transform = `translate(${handX}px, ${handY}px)`;
}
Шаг 4: Тестируйте с реальными пользователями
Управление жестами — это не про красоту, а про удобство. Попросите 3-5 человек попробовать ваш интерфейс и запишите их реакцию. Скорее всего, вы обнаружите, что некоторые жесты неинтуитивны.
Риски и ограничения подхода
Как и любая инновация, дизайн сайта с управлением жестами без Фигмы имеет свои «подводные камни». Авторы статьи честно о них рассказывают.
1. Аппаратные требования
Для работы MediaPipe Hands требуется камера с разрешением не ниже 720p и частотой кадров 30 FPS. На старых ноутбуках (2018-2020 годов) библиотека может «тормозить», что делает взаимодействие некомфортным.
2. Освещение
Библиотека чувствительна к условиям освещения. При ярком контровом свете или в полной темноте распознавание рук резко ухудшается. Разработчикам пришлось добавить предупреждение: «Пожалуйста, включите свет».
3. Доступность
Не все пользователи могут использовать жесты. Люди с ограниченными возможностями (например, отсутствие кистей рук) не смогут взаимодействовать с таким интерфейсом. Авторы подчёркивают, что жестовое управление должно быть дополнением, а не заменой традиционных методов ввода.
4. Отсутствие привычных инструментов прототипирования
Работа без Figma требует от дизайнера навыков программирования. Не каждый веб-дизайнер умеет писать JavaScript. Однако авторы статьи считают это не недостатком, а новым вызовом: «Дизайнер будущего — это тот, кто может написать код».
Как это вписывается в тренды 2026 года
Июль 2026 года — время, когда границы между физическим и цифровым миром стираются всё быстрее. Управление жестами — лишь один из элементов этого процесса.
Zero-UI и невидимые интерфейсы
Концепция Zero-UI (нулевой интерфейс) предполагает, что лучший интерфейс — это его отсутствие. Вы не нажимаете кнопки, а просто делаете то, что хотите. Подход авторов статьи полностью соответствует этой философии.
AI как инструмент, а не автор
В 2026 году ИИ уже умеет писать код, рисовать макеты и даже тестировать интерфейсы. Но, как показывают авторы, настоящая ценность — в идеях, которые невозможно сгенерировать. Управление жестами — это именно такая идея: она требует понимания человеческого поведения, а не просто комбинаторики пикселей.
Экономия ресурсов
Отказ от Figma и других дизайн-инструментов экономит не только деньги на лицензиях, но и время. Авторы сообщают, что процесс от идеи до рабочего прототипа занял два дня, тогда как в классическом подходе (Figma → согласование → вёрстка) на это ушла бы неделя.
Заключение: будущее за теми, кто не боится писать код
Статья на Habr, которую мы разобрали, не просто описывает технический эксперимент. Она задаёт важный вопрос: что значит «быть дизайнером» в 2026 году?
Ответ, который дают авторы, прост и сложен одновременно: дизайнер — это не тот, кто рисует в Фигме, а тот, кто проектирует поведение. Если вы можете представить, как пользователь будет двигать рукой, чтобы пролистать страницу, — вы уже дизайнер. Не нужны макеты, не нужны пиксели, не нужны утверждённые сетки. Нужен код.
Главный вывод: Дизайн сайта с управлением жестами без Фигмы — это не про технологии. Это про смелость отказаться от привычных инструментов и создать что-то действительно новое. И в этом новом мире авторство принадлежит тому, кто придумал поведение, а не тому, кто нарисовал кнопку.
Если вы хотите глубже разобраться в том, как проектировать такие интерфейсы, обратите внимание на современные курсы по веб-разработке. Например, ASI Biont поддерживает подключение к [MediaPipe Hands] через API — подробнее на asibiont.com/courses. Но главное — не ждите готовых решений. Берите камеру, открывайте редактор кода и пробуйте. Ваши руки уже готовы стать интерфейсом.
Комментарии