Стартовый гайд, для тех, кто хочет на простом примере научиться генерировать из Figma как минимум веб-страницу, которая: сделана по дизайну, адаптивна под разные размеры экрана, учитывает retina и non-retina дисплеи, поддерживает локализацию с динамическим переключением языков и позволяет реализовать другие свои хотелки
Последние несколько лет я усиленно увлекаюсь любительской видеореставрацией: беру старые мультики, прогоняю их через большие пайплайны цифровой обработки, зачастую работаю с аудио и по итогу всё это собираю в MKV-контейнеры. От «Чипа и Дейла» эпохи старого Диснея до чистой цифры в виде «Врат Штейна».
Казалось бы: «Обложка да обложка, какая разница? Главное — видео и звук!» Но вы крупно недооцениваете мою любовь к перфекционизму.
Проблема была даже не в том, что обложек нет, а в том, что ими почти никто не занимается. Ни корпорации-издатели, ни даже базы от энтузиастов вроде TheTvDB зачастую почти не уделяют нормального внимания стародавним релизам, из-за чего лично у меня возникает странный контраст: на диске лежит моя отреставрированная классика в 4К, а медиа-сервер подтягивает размытый скриншот серии с VHS-кассеты начала 2000-х. А иногда та же практика применяется и к новым релизам 0_0 Ужас ведь.
В этой статье я хочу показать свой путь проб и ошибок — от примитивных «ИИ-фильтров» на «Чип и Дейле» и автоматических скриптов для «Розовой пантеры» до освоения цветокоррекции и ручной реставрации на куче обложек для «Тома и Джерри», а затем — до сложного и зачастую ещё более муторного симбиоза ИИ-генерации и ручной доводки при создании уникальных постеров для «Врат Штейна» и других сериалов.
Когда RuStore только запускался, мы строили дизайн на основе UI-кита от VK — удобно, практично, а главное помогло нам быстро вывести продукт на рынок. Но стор рос, интерфейсов становилось больше, дизайнеры — смелее, а требования — сложнее. И вот настал день, когда мы решили добавить тёмную тему. И всё сломалось.
Именно тёмная тема вскрыла нашу главную проблему — ранняя структура цветовых токенов не готова к масштабируемости. Любое изменение запускало каскад правок и ломало синхронизацию между макетами и кодом.
Под катом мы — Элина Шевченко, продуктовый дизайнер RuStore, и frontend-разработчик Андрей Едунов — расскажем историю, как мы полностью перестроили систему, не останавливая разработку, аккуратно вынесли всё из Figma в код и почему теперь можем масштабировать дизайн без драмы, даже если завтра понадобится не только тёмная тема, но и ностальгия по 2008-му, где primary — это чистый #000000, а secondary — оттенок тоски.
У продуктовых дизайнеров есть странная ловушка: индустрия производит огромное количество контента про рост в профессии, но сам рост от этого почти не происходит. Можно годами смотреть референсы, читать разборы и ходить по курсам — а потом все равно теряться в работе с живым продуктом, где есть ограничения, метрики, конфликты и цена ошибки.
Я это видел много раз — и в студии, и в больших командах. Поэтому ниже не советы в духе «потрать 10 000 часов», а разбор того, что реально ускоряет рост и почему стандартные пути часто тормозят и не помогают.
Прилетела как-то ко мне задача: нужно оперативно сделать 4 посадочные страницы для разных чат-ботов, чтобы показать продукты внутри одной компании, то есть, заходя на сайт бренда, можно перейти на промостраницу каждого из них. Сразу поясню – заказчик крупный, мы делаем для него пул задач кастомной разработки. В этот раз он хотел подготовить отдельные промо на каждый вид продукта.
Подобные задачи я делаю на Тильде, которая подходит для небольших проектов. Иногда и сам клиент просит сделать сайт именно на этой платформе, так что опыт работы с ней у меня накопился приличный.
Оценила сроки и выдала: «За 2 недели будет готово». Но у заказчика был конкретный запрос — попробовать собрать лендинги с помощью ИИ и уложиться в более сжатые сроки.
Попробовала прикинуть, как ускориться — например, собрать макеты с помощью AI, перевести в Figma, и можно уложиться в полторы недели. Но и это не совсем подходило. Тогда гендиректор мне подсказал: «А попробуй вайбкодинг». Ну давайте пробовать, что уж там!
Когда разработчик открывает CAD-пакет и начинает разводку многослойной печатной платы, он реализует не только электрическую схему, но и технологическую судьбу изделия. От того, на каких слоях будут проложены сигналы, размещены полигоны питания и «земли», зависит не только помехоустойчивость, но и то, насколько легко плату будет изготовить, проконтролировать и, если потребуется, отремонтировать после пайки.
На нашем производстве мы регулярно сталкиваемся с проектами, где внешние и внутренние слои используются неоптимально. Например, силовые цепи пытаются спрятать внутрь, забывая про теплоотвод, или, наоборот, критичные высокочастотные линии выводят наружу, получая недопустимые наводки. Разберём принципиальные различия между внешними и внутренними слоями — с точки зрения технологии, электрики и эксплуатации.
Внешние слои. Верх и низ (Top и Bottom)
Верхний и нижний слои — это «лицо» печатной платы. Как правило, они покрыты паяльной маской, имеют контактные площадки для компонентов и непосредственно взаимодействуют с окружающей средой. Их трассировка имеет ряд характерных черт.
Технология изготовления
Я изучаю информационный мусор, как явление в дизайне, уже более 10 лет — в дизайне интерфейсов он представляет собой избыточный, нерелевантный или конкурирующий визуальный и текстовый контент, который нарушает когнитивные процессы восприятия и затрудняет эффективное взаимодействие пользователя с системой, поскольку человеческое внимание, обладая ограниченной пропускной способностью, не способно одновременно обрабатывать большое количество равнозначных стимулов без потери качества интерпретации этих стимулов.
Информационный мусор может содержаться: в тексте, в навигационных структурах, в колористике, в формах и в избыточности визуальных метафор (иконок) внутри интерфейса.
Представьте, что вам надо настроить камеры для целого города или очень большого завода, где их сотни или тысячи. Как сделать это удобно и не сойти с ума от конфигурирования каждой из этой тысячи?
У нас в конфигураторе Macroscop камеры организованы в виде «дерева».
За последние полтора года мы с вами стали свидетелями десятков «революций» в мире искусственного интеллекта. Каждый месяц кто-то выпускает модель, которая «наконец-то всё меняет». Но в начале февраля 2026 года я понял, что ситуация и правда начала меняться. Появились инструменты, которые позволяют по-другому выстроить само взаимодействие с ИИ. Я говорю об OpenClaw. Эта штука больше других похожа на полноценный автономный искусственный интеллект. Она решает самые разные задачи благодаря набору свойств, которые делают его полезным на практике. Внутри моя архитектура и юзкейсы для разведки и создания цифровых продуктов.
Когда ты дизайн-директор и берёшься за то, чего раньше не делал, тебя ждёт много интересного: нейросеть выдаёт голубя с переломанными лапами, модель здания не влезает в браузер, а Spline отказывается фиксировать частоту кадров.
Привет! Меня зовут Алексей Нибо, я дизайн-директор в Атвинте. Это история о том, как я собирал интерактивные 3D-модели для сайта архитектурного бюро.
Когда-то давным-давно один из хабражителей поделился своим прекрасным сервисом по созданию красивых изображений из кода. Но с тех пор много воды утекло и сайт канул в лету. У меня периодически возникала необходимость красиво показать кусочек кода и я находил другие подобные сервисы — но они были слишком ограниченные.
На связи Антон Черный, лид команды продуктового дизайна. На примере типовой задачи рассказываю, как мы пересобрали UX-процесс и ускорили проверку гипотез с помощью AI-first прототипирования.
Привет, Хабр!
У меня была довольно простая идея — сделать несколько принтов с хоккеистами. В итоге всё закончилось тем, что я превратил их в богов и собрал серию THE HOCKEY GODS SERIES.
1. Предисловие
Сегодня я хотел бы рассказать о небольшом дизайнерском проекте, который я планировал реализовать уже давно, но никак не доходили руки.
Идея была такова: сделать небольшую коллекцию футболок с эпичными изображениями современных хоккеистов. Идея базировалась на трёх архетипах «Александр Овечкин — Архангел», «Здено Хара — Кибервойн» и «Виктор Хедман — Ледяной страж», но в процессе работы по ряду соображений (узнаваемость бренда у российский аудитории и некоторые сложности с результатами генерации по Здено Харе) я решил исключить всех иностранных хоккеистов или выделить их в отдельный блок. Таким образом, сейчас в коллекцию входят футболки со следующими хоккеистами: Александр Овечкин, Артемий Панарин, Сергей Бобровский, Павел Дацюк, Михаил Сергачёв и Евгений Малкин.
Психологи уверены: то, как мы воспринимаем происходящее, — в том числе заслуга шрифтов. Они могут быть холодными и отстраненными, теплыми и яркими. Сегодня поговорим о нескольких старых шрифтах и расскажем, как они были созданы.
50 итераций колесом мыши, чтобы просмотреть содержимое одного выпадающего списка. Это не баг — это фича Хабра и десятков других сайтов.
Мы часто думаем, что плохой интерфейс — это про кнопки, цвета или сетку. Но чаще он ломается не из-за пикселей. А из-за того, что дизайнер не учитывает, как на самом деле работает мозг.
Пользователь — не машина. Он устает. Спешит. Тревожится. Делает выводы на основе первых впечатлений.
И вот здесь включаются когнитивные искажения. Разберём 5 самых опасных для UX.
В статье показан практический подход, который помогает сократить время на вёрстку, убрать лишние вопросы и сделать дизайн понятным без дополнительных объяснений. Если вы сталкивались с ситуациями, когда разработчик «не так понял макет», сроки вёрстки дизайна часто переносятся, коммуникация отделов дизайна и разработки хромает — этот материал для вас.
Выкатили mcp llm ассистента во fusion360. Я сразу попробовал сделать то, что проектировал уже 60 раз и пытался автоматизировать сам - лестницу(деревянную).
Смотрим какой Vibe-design в 2026
У Figma давно был MCP-сервер. Работал он в режиме read-only, и сценарий выглядел так: дизайнер (или вы сами) рисовали макеты руками, потом разработчик скармливал агенту ссылку на файл в Figma, агент разбирал его по слоям, вытаскивал структуру, цвета, отступы, шрифты, и на выходе генерил код, который более-менее соответствовал тому, что было нарисовано.
Вчера Figma обновила свой MCP-сервер, и теперь она умеет не только читать, но и рисовать дизайн. Причём речь не про "нарисуй мне кнопку" или "сделай один экран". Агент может собрать полноценный лендинг целиком или выстроить UX-флоу на несколько экранов. И самое ценное: он делает это в рамках вашей дизайн-системы. Берёт ваши компоненты, ваши токены, ваши стили и собирает из них макет, который выглядит как часть вашего продукта, а не как что-то из генератора 2015 года.
До этого обновления все попытки генерировать дизайн через AI выглядели так себе. Результат глючил, визуал был устаревший, компоненты не из вашего UI Kit, а откуда-то из дефолтных библиотек. Пользоваться этим в проде было нельзя, максимум для наброска. Сейчас ситуация другая. Вы подключаете свою дизайн-систему (UI Kit), и агент собирает макеты, которые реально пригодны для использования.
Я считаю для быстрых экспериментов и проверки гипотез это гигантский шаг вперёд.
Параллельно обновился Stitch от Google. У них тоже появились новые возможности по генерации интерфейсов, и для стадии брейншторма он вполне подходит: накидать вариантов, посмотреть на разные подходы к экрану, быстро визуализировать идею.
Продолжаем рассматривать случаи, когда изменения в интерфейсах и сценариях их использования помогают продукту работать эффективнее.
В предыдущей части мы разобрали:
