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

Недавно завайбкодил небольшой лендос с помощью Cursor, собрал ТГ-бота в n8n, не говоря уже о Nano Banana, приколах в Sora, Suno и каждодневном использовании GPT. Для продукта в GPT генерю гипотезы, анализирую конкурентов, дипсёрчу источники в Perplexity, иногда прошу GPT провести ревью флоу/экрана. Экспериментировал в Figma Make, но результат оставил желать лучшего. Чтобы узнать, как у других, поспрашивал ребят из разных компаний о том, как AI-инструменты поменяли их дизайн-процесс и поменяли ли. 👱‍♂️ Юрий Ветров ⏺️ Дизайн-директор в Точка Банк Сам дизайн-процесс не поменяли, потому что он больше завязан на совмещение целей пользователей и бизнеса, а не конкретные инструменты. Но какие-то части процесса — да. Где-то это бытовуха — вроде перегнать данные из одного формата в другой. Где-то — автоматизация этапа процесса (например, написать свой плагин для Фигмы). Где-то — возможность делать графические элементы на потоке (например, нодовые инструменты генерации). В хобби-проекте вечерами пишу учебную платформу и дизайн-систему на React в формате парного программирования. 🥷 Стефан Васадзе 🏧 Руководитель дизайн-группы в EMCD, ex.Яндекс, ex.VK В дизайне пока только внедряем и учимся, из живого: — Сделали агента, который собирает сам задачу под шаблон опрашивая продакта, далее хотим прикрутить этап первичного discovery; — Сделали плагин где маркетинговые материалы самогенерятся на основе инпута (KV + текста + ресайзы); — Собрали за день свой инструмент для assessment и perfomance review дизайн команды + аналитика и всякие приколдесы; — Делаем пересборку дизайн-системы и компонентов в сторибуке прямой связкой через Figma API, далее хотим автоматизировать пуш изменений и начать работать не с макетами, а с прототипами в коде; — Работаем над проектированием агентов под точечные задачи, в идеале скинуть на них всю операционку где можно без человека; — Собираем лендосы для тестов; — Ищем инфу по корп инструментам/анализируем исследования/копаем в инсайты из чатов/делаем выводы из аналитики и тд. 🙎‍♂️ Марк Борзенков 📦 Дизайн-менеджер в Avito Мы уже больше года генерим картинки, даже сложные 3д персонажи получаются на отлично. Текста и орфография — тоже на отлично. Но это база, как у всех. А что из интересного, смогли на прод завайбодить улучшение. Разобрались с репозиториями, прошли ревью и смержили. Дальше — больше! 🤵‍♂️ Александр Дудинский 💾 Дизайн-лид в EPAM У меня ИИ пока значительно помогает только в быстрых прототипах. Связка Figma Make + Claude Code помогают собирать быстрые прототипы для обсуждения с командой и продактом на стороне клиента. Если раньше мы иногда тратили несколько дней на первый полноценный прототип, то сейчас в течении пары часов собираем весь флоу, включая корнер кейсы. И понятное дело, что все это с анимациями, различными состояниями и т.д., но финальный дизайн всё равно собирает дизайнер. Пока не получилось отдавать готовый код разработчикам и полностью автоматизировать всё это, к сожалению. Про мелочи вроде «быстро сгенерировать сочную иконку» писать не буду, мне кажется это уже база сейчас, а не ускорение работы. 👩‍💼 Дарья Кан 🧿 Дизайн-лид в Оzon У нас в Ozon дизайн-процесс не поменялся. Ключевые этапы, такие как исследование, проработка концепций, дизайн и проверка решений, остаются прежними. Но постепенно ИИ становится вспомогательным инструментом. Мы используем ИИ, чтобы сформулировать UX-копирайтинг особенно на этапе концептов, когда нужно сосредоточиться на идее и смысле, а также при работе с иллюстрациями — быстрая генерация идеи для ускорения синхронизации с командой или заказчиком. Основная ценность по-прежнему остаётся за дизайнером — его опытом, насмотренностью и способностью принимать решения. 🌊🌊

SXL Studio — новый бесплатный набор инструментов для дизайнеров дизайн-систем, альтернатива Token Studio, быстрее и функциональнее. Поддерживает:

→ Database — маппинг слоев в фигме с backend данными из JSON, CSV, вставка картинок по https// ссылкам. → Tokens — применение, экспорт, поддержка более 35 типов токенов: number, sizing, spacing, dimenstion, typography, transition, image, color, fill, shadow, glass и другие. → Генерация component и componentSet из JSON (через ИИ можно конвертировать любой компонент (VUE3, React) в JSON и на основе этого кода сгенерировать в Figma точно такой же компонент) → Интеграция дизайна в Storybook → Экспорт переменных из JSON в CSS, Swift, Kotlin прямо из плагина → Поддержка GitHub и GitLab → Поддержка Dev Mode для Frontend разработчиков → Восстановление связей с master компонентом или подключение открепленных инстансов к мастер компоненту → Поддержка Remote соединения с Agent AI Install plugin

✨ Как не отстать в AI для дизайна и в этом разобраться

Про AI в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир как раз про нормальный рабочий процесс. На реальном продукте покажет связку Figma MCP и Claude Code. Агент будет видеть variables и компоненты прямо из Figma, собирать экраны строго по дизайн системе, а дальше из этого же процесса соберут живой React прототип. Плюс отдельно разберут Claude Design. Что он уже умеет, где реально помогает и где пока рано ждать магии. 🥰 Какую пользу получите Поймёте, как настроить агента под свою дизайн систему, какие задачи уже можно отдавать AI, а какие лучше пока держать под контролем. И главное, увидите не просто красивую демку, а рабочий пайплайн, который можно потом применить у себя. Если хотите разобраться, как AI использовать не для твиттер демо, а в нормальном боевом процессе — рекомендую 👌 Эфир будет в закрытом канале, приходите, чтобы не пропустить 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал

✨ Как не отстать в AI для дизайна и в этом разобраться

Про AI в дизайне сейчас говорят очень много. Но если честно, большая часть контента до сих пор крутится вокруг промптов и генерации картинок. А вот как встроить все это в реальный продуктовый процесс, со своей дизайн системой, компонентами и живым прототипом, про это говорят сильно реже. На демках все обычно выглядит красиво. Один запрос, и у тебя готовый экран. А когда открываешь свой продукт, начинается уже другая история: компоненты не те, переменные мимо, логика ломается, руками потом переделываешь половину. ⏱ 22 апреля в 18:00 мск Даниил Шишко из Pixel Perfect проведёт бесплатный эфир как раз про нормальный рабочий процесс. На реальном продукте покажет связку Figma MCP и Claude Code. Агент будет видеть variables и компоненты прямо из Figma, собирать экраны строго по дизайн системе, а дальше из этого же процесса соберут живой React прототип. Плюс отдельно разберут Claude Design. Что он уже умеет, где реально помогает и где пока рано ждать магии. 🥰 Какую пользу получите Поймёте, как настроить агента под свою дизайн систему, какие задачи уже можно отдавать AI, а какие лучше пока держать под контролем. И главное, увидите не просто красивую демку, а рабочий пайплайн, который можно потом применить у себя. Если хотите разобраться, как AI использовать не для твиттер демо, а в нормальном боевом процессе — рекомендую 👌 Эфир будет в закрытом канале, приходите, чтобы не пропустить 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал 🔠 Подписаться на закрытый канал
📱 Как Vercel сделали iOS-приложение, которое ощущается нативным
Vercel это компания, которая всегда фокусировалась на вебе. Когда они решили сделать мобильное приложение v0, то поставили цель: оно должно быть достойно Apple Design Award. Фернандо Рохо, Head of Mobile, рассказал, как они этого добивались. Они выбрали React Native с Expo, но это было только начало. Чтобы чат ощущался как iMessage, пришлось написать около 1000 строк кода только для обработки клавиатуры. Каждый релиз iOS ломал что-то в их приложении, и они играли в догонялки с Apple. Патчили React Native напрямую, чтобы убрать некрасивые индикаторы скролла и добавить жест свайпа вверх для открытия клавиатуры. Использовали Liquid Glass из iOS 26 для эффекта размытия в композере. А ещё решили не делать feature parity с вебом, а сфокусироваться на одном сценарии: быстро превратить идею в что-то реальное, пока ты вдали от компьютера. Внутри: – Архитектура чата: LegendList, Reanimated, Keyboard Controller; – Как сделали анимацию появления сообщений с учётом динамической высоты; – Почему contentInset оказался лучше всех других подходов для blank size; – Какие патчи пришлось внести в React Native для нативного ощущения; – Как организовали шаринг кода между вебом и мобайлом через OpenAPI. Телега, кстати, тоже максимально нативная и это кайф) ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Минутка систем:
Один из заметных трендов в дизайне этого года — системность. Как дизайн-директор, я вижу, что большинство клиентов из крупных компаний уделяют много внимания своим дизайн-системам, их развитию и автоматизации. Заметил появление коллег из t2.digital, опубликовавших в «Клубе отечественных дизайн-систем» свой кейс. Очень полезно для дизайнера изучать системные подходы к проектированию — например, как устроена новая дизайн-система в T2. Особенно интересен процесс: рассказывается о возможных сложностях, с которыми могут столкнуться команды дизайнеров и разработчиков при переходе к ее использованию, а также описывается процесс настройки UI Kit на React. Современный дизайн, особенно цифровой, это прежде всего понимание ценности и создание системных зависимостей, которые должны работать на сотнях разных носителей, экранов, разрешений. И одно дело их создавать и проектировать, а другое уметь пользоваться документацией и наборами пакетов для разработки дизайна известного бренда.
Изображение поста
Дизайн-система 👌
Ребята из t2.digital появились в «Клубе отечественных дизайн-систем». Если кто не знает, это каталог, который ведут Андрей Сундиев и Юрий Ветров. Там собраны дизайн-системы крупнейших российских компаний. Попасть туда просто так нельзя — нужно иметь реальную технологическую платформу, а не просто UI Kit в Фигме. 🔥 Почему это круто Можно посмотреть, как устроена дизайн-система изнутри. Ребята подробно разобрали опыт ее создания: с какими трудностями столкнулись, как команды дизайнеров и разработчиков переходили на новую систему. Еще описали процесс настройки UI Kit на React — от установки зависимостей до сборки готового пакета. Маст-хэв для тех, кто строит или планирует строить свою дизайн-систему (не путаем с UI-китом) 😍 ➡️ Посмотреть ДС Т2 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
🚀 Превращаем Фигма макеты в живое приложение без кода
Фёдор из Notamedia показал способ создания рабочих прототипов мобильных приложений через связку Figma, Cursor, Expo и Git. Главная идея в том, чтобы использовать ИИ-редактор кода Cursor для автоматического превращения макетов в React Native приложение. Процесс начинается с подготовки макета: все элементы должны иметь понятные названия, чтобы ИИ лучше понимал структуру. Затем через Figma MCP (специальный сервер) Cursor получает доступ к макету и с помощью команды get_code изучает структуру фрейма. После создания базового проекта через npx create-expo-app достаточно скопировать ссылку на фрейм из Figma и отправить в чат Cursor с нужной командой. Результат можно сразу посмотреть на смартфоне через приложение Expo Go, просто отсканировав QR-код. Внутри: – Зачем нужны «Записи и правила» в настройках Cursor; – Как Git спасает от случайного переписывания кода ИИ-агентом; – Почему важно правильно называть элементы в макете; – Как запустить прототип на любом смартфоне через Expo Go; – Какие команды нужны для сохранения работы через Git; – Почему навыки вайб-кодинга скоро станут обязательными для дизайнеров. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Сайт Rohit Harish
Креативный разработчик, работающий с React, Vue.js и современными веб-технологиями. #портфолио Посмотреть сайт 👨‍💻
Rocket.new. ИИ-платформа для создания мобильных и веб-приложений.
Позволяет создавать приложения с помощью промтов на простом языке либо по дизайну из Figma. Достаточно даже короткого запроса в одно предложение. Приложение генерируется сразу вместе с бэкендом, чтобы его можно было быстро развернуть на домене и подключить всё необходимое. Поддерживает работу с HTML, Next.js, React и Flutter. Есть интеграции с GitHub, Figma, а также моделями OpenAI, Anthropic, Google и другими. Есть бесплатная ограниченная версия. Цена — от 25 $ в месяц. #инструменты@zhurnalus_lite
Изображение поста
Недавно увидела на Reddit интересную визуализацию: https://laion.inference.net/embeddings">карту связей научных статей, где десятки тысяч работ собраны в кластеры по предметным областям.
Как это сделано: из открытого набора LAION (около 100 млн научных и исследовательских текстов, здесь — небольшой срез) извлекли краткие выжимки, перевели статьи в векторные представления, спроецировали в 2D и сгруппировали по близости. 🔗 Демо: https://laion.inference.net/embeddings 🛠️ Код: https://github.com/context-labs/laion-data-explorer (React + D3)
Изображение поста
☀️ Витрина компонентов для вдохновения
Наткнулся на 21st — открытую площадку, где разработчики публикуют готовые React-компоненты и целые экраны. Это что-то вроде Figma Community, только для кода. На платформе много решений, собранных с реальных маркетинговых страниц популярных SaaS-сервисов. Например, на обложке — блок с главной страницы Linear. Помимо вдохновения: если ваша команда работает с React и придерживается подхода shadcn/ui, можно просто отправить ссылку на компонент — разработчики возьмут код и адаптируют его под ваш дизайн. Единственное: сейчас платформу обновляют — похоже, на её базе делают отдельный продукт. Поэтому возможны баги, а в навигации пока легко потеряться. Вам на страницу Community в раздел Components. 📎 Ссылка на площадку
Robin Kinross:
The exchanges in 1946 between Max Bill and Jan Tschichold never go away. They combined typography, aesthetics, morality, politics, at a level of seriousness that is rare in any such debate between designers. (In a one sentence summary: Bill accused Tschichold of now practising a reactionary typography, with dangerous political echoes; Tschichold considered Bill’s typography to be artistic in a bad sense, and with a false respect for industrial production.) Recently, revising a text that I had written in the 1990s about the conditions for design in Europe after 1945, I had to check its publishing details again. https://hyphenpress.co.uk/2025/02/24/bill_5_tschichold_6/
Изображение поста
Посмотрите, что нашли!
В рубрике «Находка» мы делимся интересными инструментами, сайтами и приложениями, о которых знают единицы. → Огромная библиотека UI-элементов 🎙 Сокровищница с кнопками, карточками, инпутами — и ещё много чем. Быстрый поиск, живые превью и мгновенное получение кода — HTML/CSS, Tailwind, React. На сайте можно потрогать любой элемент — смотреть анимацию, менять на темную тему и настраивать цвет фона. У ребят постоянно проходят челленджи на разнообразные темы, которые пополняют базу знаний свежими решениями. Сохрани в закладки — пригодится, когда захочешь оживить интерфейс 🦮
Изображение поста
Прямиком из лаборатории: как разговаривать с ИИ так, чтобы макеты не расползались
Китайские исследователи показали SpecifyUI — система, которая помогает в итеративном проектировании пользовательских интерфейсов с использованием структурированных спецификаций и генеративного искусственного интеллекта. Сердце системы — SPEC — структурированное, параметризованное, иерархическое промежуточное представление, в котором элементы пользовательского интерфейса представлены в виде управляемых параметров. Да, звучит сложно. Но это может помочь с генеративным дизайном в будущем. Так что давайте разбираться. Как устроен генеративный дизайн сейчас (и что с ним не так) – Текстовые подсказки рулят сценарием: большинство инструментов просят «объяснить словами» замысел, а потом пытаются угадать структуру макета и компоненты. Итерации линейные: мелкая правка часто «расползается» по макету. – Болезненная точечная правка: без формальной структуры сложно поменять один блок, не тронув остальные. Нужна адресная правка по узлу и атрибуту, а не перегенерация целой страницы. Это и закрывает SPEC: правки вида <операция, путь, значение> — например, заменить палитру только у шапки или превратить таблицу конкретной секции в карточки. – Нет мостика к коду: обычная генерация выдает «картинку вдохновения». SPEC строит мост до инженерии: RAG по базе примеров, агент кода и отладчик доводят результат до исполнимого состояния. Чем SPEC нам полезен? – Контроль: намерение фиксируется как SPEC — структурная запись про сетку, палитру, «язык форм», сценарий и иерархию Страница → Секции → Компоненты. Правки вносятся адресно по пути в структуре, не ломая остальное. – Сборка из референсов: система режет референсы на регионы, достает из них структуру и стиль, склеивает в единый SPEC. Можно брать сетку из А, палитру из В, компоненты из С. – Повторяемость и передача в разработку: SPEC конвертируется в рабочий интерфейс и код (React + библиотека компонентов + графики); есть цикл «сгенерировать — отловить ошибку — починить». Почему это не пустая болтовня На корпусе из ~2000 экранов: меньше визуальных ошибок, выше семантическое сходство, стабильнее структура. В тесте с 16 дизайнерами участники отметили лучшее чувство контроля по сравнению с Google Stitch Где это реально заходит – Продуктовые экраны, каталоги, дашборды, лендинги с повторяющимися блоками. – Когда важно держать стиль и логику дизайн-системы. – Когда итераций много и их нужно фиксировать правилами, а не папкой картинок. Когда можно пройти мимо – Разовый визуальный эксперимент ради идеи. – Очень маленькие страницы, где быстрее нарисовать, чем описывать. – Когда нет ресурса сформулировать правила — SPEC требует дисциплины. Итог Это начало пути, но направление правильное: итеративный дизайн с ИИ под контролем структуры. Меньше случайностей, больше повторяемости.
Изображение поста
#Иконки
1200 бесплатных иконок в community. Как видно по скрину, автор любезно создал компоненты react и vue для этих иконок. Линки на компоненты есть в файле Иконки тут
Изображение поста
Plasmic — визуальный конструктор для React.
www.plasmic.app
Say — это современное приложение для расшифровки аудиозаписей, которое преобразует ваш голос в текст с помощью продвинутого машинного обучения прямо в вашем браузере.
Приложение создано на React и работает на базе Whisper, T5 и Transformers.js. Оно обеспечивает удобство записи, расшифровки и управления голосовыми заметками. 🐱 GitHub
Изображение поста
🎧 New Case Study Drop: Building SoundCloud
Ever wondered what it takes to build a platform like SoundCloud? Dive into the full breakdown — from product strategy to UX decisions and technical insights. 🔗 Check it out here ❤️ Tap a reaction if you want more posts like this
Изображение поста
Релиз 7.14.0 (1-е поколение, React)
Алоха! Продолжаем поддерживать первое поколение, исправили пару ошибок Изменения: — InputAmount: Повышена версия react-number-format до 5.4.4 для совместимости с React 19.1 — InlineNotification, Drawer, Modal: Добавлен метод обхода несовместимости с React 19.1 при использовании библиотеки react-transition-group — PickerDate: Добавлен формат для времени по умолчанию — TabsItem: Теперь в функцию onChange можно передать значение false, чтобы не выполнять логику выбора — Добавлена инструкция по подключению иконок из второго поколения в Introduction
Изображение поста