MasterUI 1.1 — на один шаг впереди стандартных комплектов пользовательского интерфейса, потому что при использовании компонента MASTER вы можете настроить весь набор под свои нужды в мгновение ока

Install

🏁 Установить плагин 🏁 #plugin

Install ️

Миша Просмицкий пишет о доступности как о части инженерного процесса, а не как о пункте в чек-листе. Команды теперь могут генерировать интерфейсы быстрее, чем раньше, но скорость легко маскирует базовые проблемы: кнопка оказывается div с обработчиком клика, фокус не работает, скринридер видит плоский текст, а пользователь не может оплатить заказ. Особенно больно это становится с ИИ-кодом. Модель часто повторяет то, на чём училась: несемантичную разметку, красивые пиксели и минимум ограничений. Поэтому доступность нужно встраивать в систему заранее: правила для ИИ, доступные компоненты в дизайн-системе, проверка в pull request, Definition of Done, тесты в CI, понятная передача фокуса, подписей, состояний и порядка клавиатурной навигации. Аудиты всё ещё нужны, но они не заменяют процесс. Внутри: – Почему аудит доступности быстро устаревает после нескольких релизов; – Как ИИ ускоряет создание интерфейсов и одновременно множит ошибки; – Почему красивый компонент может быть бесполезен для скринридера; – Зачем ограничивать ИИ правилами до генерации кода; – Почему сложные элементы лучше брать из проверенных библиотек, а не писать заново; – Как дизайн-система помогает масштабировать доступность на тысячи экранов; – Какие проверки стоит встроить в ревью, Definition of Done и CI; – Почему тесты с реальными пользователями с инвалидностью всё равно нельзя заменить линтером. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Install ️

Автор разбирает, почему у одних интерфейсы, собранные через Claude, выглядят нормально, а у других сразу пахнут нейросетью. Дело не в секретном промпте. Модель может быстро собрать компонент, анимацию или переход, но вкус, правила и сотня мелких решений всё равно остаются на человеке. Практический смысл простой: сначала нужно дать системе язык. Токены, кривые анимаций, радиусы, тени, состояния, правила для нажатий, раскрытий и доступности. Если просто попросить «сделай гладко», модель начнёт придумывать случайные значения. Если дать точные переменные, запретить одноразовые числа и отдельно настраивать каждую часть, результат становится намного ближе к продуктовой работе, а не к случайному демо. Внутри: – Почему «smooth» и «premium» почти ничего не значат для модели; – Зачем заранее задавать токены, радиусы, длительности и кривые анимаций; – Почему дефолтные easing-кривые быстро выдают сгенерированный интерфейс; – Как тактильность появляется через нажатия, snap-точки и нормальную физику drag-сценариев; – Почему входящие анимации лучше собирать из прозрачности, сдвига и лёгкого blur; – Зачем использовать слоёные тени вместо одного грубого drop-shadow; – Почему компонент нужно проектировать как набор состояний, а не как картинку; – Где заканчивается работа Claude и начинается вкус человека, который понимает, что именно надо докрутить. ➡️ Читать статью (в Х) ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Рома из Туту рассказывает, как их дизайн-система Kite выросла из старого UI-кита Order. Раньше компоненты жили отдельно на вебе, iOS и Android, дизайн догонял разработку, общей системы токенов не было, а масштабные визуальные изменения превращались в боль. В какой-то момент стало понятно, что просто иметь набор атомарных компонентов мало. Нужны общие правила, связанные токены, понятный процесс и договорённость между дизайном, разработкой и продуктовыми командами. Хорошо видно, что дизайн-система в большой компании это не библиотека кнопок. Это продукт внутри продукта. Там есть архитектура токенов, сборка под разные платформы, документация, миграции, поддержка команд, white-label сценарии, редизайны и постоянный торг между строгостью и гибкостью. Если всё сделать слишком свободным, каждый снова соберёт свой интерфейс. Если всё закрутить слишком жёстко, продуктовые команды начнут обходить систему стороной. Внутри: – Почему UI-кит без связи с дизайном быстро упирается в потолок; – Как Туту перешёл от Dev-to-Design к Design-to-Dev подходу; – Зачем дизайн-системе нужна глубокая система токенов; – Почему готового сборщика токенов может хватить на старт, но не на сложную систему; – Как CSS-переменные помогли с темами, скоупами и платформенными ограничениями; – Зачем Туту сделали собственную генерацию токенов под веб, iOS, Android и MailKit; – Как дизайн-система помогла быстрее делать white-label решения для партнёров; – Почему после запуска важны документация, внедрение в продуктовые команды и автоматизация через ИИ. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Того, кто берёт задачу, пишет код и доводит до прода. Предстоит отвечать за клиентскую часть продукта и сквозную доставку фич ⚙️ Что предстоит делать: → разрабатывать SPA на Reac/Vue — компоненты, роутинг, состояние → верстать по макетам (адаптив, кросс-браузер) → интегрировать фронт с API — запросы, кэш, обработка ошибок → делать webview для мобилок, изредка Canvas/WebGL/WebAR → backend/BFF на Node: свои эндпоинты, работа с данными → доводить фичи до прода — ревью, фиксы и поддержка релиза 💬 Взаимодействия: — работаешь в паре с бэкендером по API-контрактам, — реализуешь UX по дизайну и говоришь дизайнеру, что реально, а что — фантастика 📝 Ждём: — уверенный JS/TS + React/Vue с продакшн-опытом — HTML / CSS, адаптивная вёрстка — интеграция REST/GraphQL — базовый Node (эндпоинт/BFF) — cамостоятельно взять фичу и довести её до результата — Middle+ / Senior ➕Будет плюсом: — Canvas/WebGL/Three.js — WebAR, webview и гибриды — опыт с webview и гибридными мобильными приложениями — Docker/CI-CD — опыт агентской работы и ведения нескольких проектов параллельно 🤩 Условия: — удалёнка или гибрид (СПб / Мск) — старт парт-тайм, в дальнейшем фуллтайм — проекты: корпоративный веб, игры, мобильные игры — оплата — по итогам собеседования ⚙️ Кратко о нас REB8T — студия дизайна и геймификации от SETTERS. Помогаем растущим бизнесам и крупным компаниям делать продукты и сервисы понятными и вовлекающими. №1 по геймдизайну в России (РР), ТОП-10 разработчики сайтов в РФ (workspace) откликнуться → job@rebooot.me

Amit Sheen пишет о проблеме, которую легко не замечать по привычке: мы всё ещё часто проектируем адаптивность от ширины экрана, хотя современные интерфейсы давно живут компонентами. Один и тот же блок может оказаться в ленте, сайдбаре, модалке, карточке дашборда или внутри другого компонента. В такой ситуации глобальный брейкпоинт часто отвечает не на тот вопрос. Вместо постоянных условий «если экран шире 768px, сделай так» автор предлагает начинать с более гибких решений в CSS. Сетка может сама набирать столько колонок, сколько помещается. Отступы и шрифты могут плавно меняться через clamp(). Компонент может смотреть на размер своего контейнера, а не всего окна. А медиазапросы лучше оставить для того, где они правда нужны: возможности устройства, наличие ховера, точность указателя, пользовательские настройки и режим отображения. Внутри: – Почему брейкпоинты хорошо работали для страниц, но хуже подходят для компонентных систем; – Как auto-fit и minmax() помогают строить сетки без ручного числа колонок; – Зачем использовать плавные значения вместо скачков между размерами; – Как clamp() заменяет несколько медиазапросов для шрифтов и отступов; – Почему контейнерные единицы полезнее ширины экрана для переиспользуемых компонентов; – Когда контейнерные запросы нужны для реального изменения структуры; – Почему медиазапросы не исчезают, а меняют роль; – Как такой подход делает адаптивный интерфейс проще для поддержки. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Install

Забирайте 🔠 Mac OS 27 🔠 IOS 27 Вообще они одни из немногих, кто вот так открыто пушит все компоненты и прочее бесплатно и не просит ни рублика. Респект в общем ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Знакомая боль: просишь агента собрать экран по твоей ДС. На первый взгляд всё аккуратно. Потом смотришь ближе: компонент не из библиотеки, цвет левый, отступы странные, состояние придумано на ходу. И уже проще руками пересобрать, чем чинить за ним. С маленькой библиотекой это ещё можно пережить. В большой ДС начинается цирк: сотни компонентов, варианты, токены, состояния, правила. Команда годами всё это собирала, а агент ведёт себя так, будто открыл первый попавшийся файл и начал импровизировать. Без подготовки он просто угадывает. Ему нужно нормально объяснить систему: где компоненты, какие состояния существуют, какие правила важны, что брать в первую очередь. Иначе зрелая дизайн-система превращается для AI в красивую папку, которую он почти не понимает. 😇 24 июня в 18:00 мск Даниил Шишко из Pixel Perfect покажет, как это настроить. Возьмёт одну из самых больших публичных дизайн-систем, подключит её к агенту и соберёт экраны прямо на эфире. Тем, кто будет онлайн, Даниил отдаст скилл, который сканирует дизайн-систему и готовит её к работе с агентом. То есть можно будет взять свою ДС и повторить у себя. Если у вас агент тоже каждый раз «немного дизайнер» и тащит в макет свои компоненты, я бы посмотрел. AI-навыки уже всё чаще всплывают в вакансиях, и лучше разобраться с этим сейчас, пока все ещё пытаются понять, как оно вообще должно работать. 🔠 Эфир в канале 🔠 Эфир в канале

Install ️

Кейс NDA. Поэтому, увы, покажу вам бокал, но зато расскажу как это было и как можно получить действительно качественный результат. ⚡️ Дано: презентация pptx на 18 слайдов со сложными схемами. В некоторых схемах 3х-ступенчатый уровень вложенности (кто сталкивался — поймет КАК это больно верстать). 💥 Результат: лендинг на 18 экранов в Claude Design за 3(!) часа с сохранением контента, стиля компании, анимациями и интерактивными схемами 🏃‍♂️ Что получилось: — дословный перенос контента — сохранение фирменного стиля компании — сложные, многоэтажные, статичные схемы стали интерактивными. И это стало главным вау-эффектом для заказчика — спецэффекты без боли: анимации появления экранов и отдельных блоков, эффекты стекла и плавные переходы. 🥲 Главное в этом кейсе — это скорость и возможность повторить алгоритм на других презентациях. Напоминаю, эту красоту со сложнейшим контентом удалось сотворить (десктоп+моб версии) за 3(!) часа. По моему скромному мнению, это — невероятный результат. И наконец-то реальный кейс с эффективным использованием ИИ. Кстати, коллегам так зашло, что на встрече с заказчиком показывали именно лендинг, а не классическую статичную презентацию. 💥 Что нужно на вход, чтобы попробовать применить у себя: — собственно оформленная презентация, сохраненная в .pdf. Но если у вас совсем нет времени, то супер базовая верстка и отдельно прикрепить визуалы. 👀 Важный нюанс: все визуалы прикрепляю отдельными вложениями и прописываю на каком экране какой визуал должен быть. — UI-кит стиля компании. Причем я делала компонентами не так много вещей: палитру, типографику и плашки) Все! Никакие skills, референсы и специальные промпты не давали такого результата, как ui-кит и базово оформленная презентация. Пишите в комментариях, если будут вопросы по алгоритму действий 🙏

Скрин от моего технического директора, как он с ними общается (первая строчка текста на скрине) Нейронки применяем плотно уже больше полугода. Но важно использовать их с умом. Это когда хорошая дизайн-система, все разложено по компонентам и есть системная архитектура. Тогда нейронке легче делать новые компоненты на основе уже заложенного фундамента. Также важно не рассчитывать на нейронку и постоянно перепроверять ее. Потому что она дает много ошибок в первой, второй, третьей... итерации. И может довести до того, что хочется ударить по столу😅 ➡️ Делюсь внутрянкой, так как вчера поставили много сердечек, вижу вам интересно. Поставите еще – продолжу дальше. Кстати, Алексей, мой тех дир, говорит, что лучший критерий, заменит нейронка прогеров или нет, – это когда он перестанет на них ругаться матом.

После Апрока я устроилась в продуктовую команду, и наконец собрала кейс по одной из рабочих задач. Показываю, как в реальном продукте перерабатывала чат: от анализа и UX до компонентов и подготовки к разработке. Если интересно, чем занимается UX/UI в продукте после курса, заглядывайте) Буду рада вашей поддержке и лайкам ❤️ Beh

Команда дизайна и исследований Делимобиля собрала гайд по безопасным интерфейсам для сервисов, которыми могут пользоваться в машине. Это не только про карты и навигацию. Сюда же попадают звонки, музыка, заправки и любые сценарии, которые человек хотя бы теоретически может открыть во время движения. Важная рамка здесь простая: сначала нужно спросить не «как сделать удобнее», а «должен ли водитель вообще делать это за рулём». Если нет, функция должна уходить в режим стоянки или автоматизироваться. Если да, интерфейс проектируется по другим правилам: меньше действий, выше читаемость, крупнее цели, понятнее состояние, меньше визуального шума. На скорости 60 км/ч одна секунда взгляда в экран это уже 16 метров без полноценного внимания к дороге. Внутри: – Почему водительский интерфейс нельзя считать упрощённой версией мобильного приложения; – Как решить, можно ли вообще оставлять сценарий доступным во время движения; – Почему лучшая функция для водителя часто та, которая не требует действия; – Какие правила помогают оценивать читаемость, контраст, шрифты и анимации; – Что разрешено делать за рулём, а какие сценарии лучше блокировать до стоянки; – Из каких компонентов собирать безопасные экраны для машины; – Почему дизайн-решения здесь оцениваются не только по удобству, но и по риску отвлечения; – На какие стандарты опирается гайд: ГОСТ, ISO, NHTSA и Android Automotive. ➡️ Читать гайд ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Фигма выложила майский Workflow Lab про Code to Canvas. Если коротко: прототип, который вы собрали в коде через Cursor, Codex, Claude Code или другой агент, можно затащить обратно в Фигму как редактируемые экраны. Дальше уже смотреть флоу целиком, править компоненты, токены, состояния и при желании пушить изменения обратно в код. Сама связка «дизайн-код-дизайн» не новая. Интереснее другое. Последний год все очень радостно продавали вайбкодинг как короткий путь: написал промпт, получил интерфейс, запустил, погнал дальше. Типа Фигма больше не нужна, дизайнеры мешают скорости, агент сам всё соберёт. А потом выясняется, что быстро собранный экран всё равно надо где-то нормально посмотреть. Вайбкодинг быстро даёт экран, но плохо показывает продуктовый сценарий целиком В браузере ты видишь один экран. Иногда пару состояний, если не лень потыкать. В коде видишь компоненты, файлы, стили, условия. А продуктовый флоу целиком обычно расползается по вкладкам, роутам и «сейчас я тебе покажу, только сначала залогинюсь». Для разработки ок, для обсуждения интерфейса так себе. У меня так постоянно. Быстро сделал фичу, локально вроде работает, в голове всё ясно. Потом открываешь рядом несколько экранов и видишь: • кнопка называется иначе • пустое состояние забыто • фильтр ведёт себя странно • мобильная версия поехала • пользователь попадёт в тупик и будет смотреть на экран как на квест от плохого диза И всё. Твоя «почти готовая» фича уже не такая готовая В доке Фигма прямо описывает похожий сценарий. Агент берёт локальный прототип, переносит уникальные экраны на холст, использует компоненты и стили из дизайн-системы, добавляет страницу с саммари. Потом дизайнеры уже могут смотреть и чинить: где лишний элемент, где лучше взять нормальный компонент, где просела иерархия, где токены уехали итд Это хорошая роль для Фигмы. Она не обязана быть местом, где всё начинается. Иногда она может быть местом, куда продукт возвращается на проверку. Быстро накидали в коде, положили на холст, посмотрели весь сценарий, привели в чувство, отправили обратно в разработку. Тут, кстати, спор «фигма или код» становится совсем уставшим. В реальной работе чаще нужен круг: 1. быстро собрать рабочий вариант 2. увидеть весь флоу рядом 3. поправить продуктовую логику 4. вернуть изменения туда, где это реально живёт Главное, чтобы этот круг не превратился в новый ритуал ради ритуала. Типа сначала агент сделал экран, потом агент перенёс его в Фигму, потом агент поправил, потом агент вернул в код, а команда всё это время сидела и смотрела на красивую автоматизацию. Дизайнерское решение всё равно кто-то должен принять. Пока что, желательно человек. Что думаете? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Карина Веласкес рассказывает историю не про то, как Claude Code «сам собрал дизайн-систему», а про то, как накопленное знание наконец получило быстрый способ материализоваться. На работе она не могла использовать Claude Code, сервер Фигма MCP и другие инструменты из-за политики безопасности, поэтому взяла личный ноутбук, пустой файл в Фигме и за один пятничный день собрала Prisme, личную дизайн-систему с токенами, темами, компонентами и плагином для синхронизации. Самое интересное здесь не скорость сама по себе, а то, почему эта скорость сработала. Карина уже понимала архитектуру токенов: где нужны глобальные значения, где живут брендовые темы, как должен работать семантический слой, почему алиасы важны и чем нативный формат переменных Фигмы отличается от Token Studio JSON. Claude Code не придумал это за неё. Он просто оказался достаточно быстрым исполнителем, чтобы описание превращалось в структуру, структуру можно было сразу проверить, а ошибки быстро поправить. Внутри: – Почему сильный результат с ИИ начинается не с промпта, а с внутренней модели; – Как Фигма MCP позволяет работать с переменными и токенами без ручного кликанья в интерфейсе; – Зачем дизайн-системе нужны глобальный, брендовый и семантический слои; – Почему токены, которые живут только в Фигме, остаются артефактом, а не инфраструктурой; – Как Prisme Bridge переводит данные между Token Studio JSON и переменными Фигмы; – Почему кнопка стала хорошей проверкой всей токенной архитектуры; – Как Claude Code помог собрать компонент с размерами, состояниями, вариантами и заменяемыми иконками; ➡️ Читать статью (EN) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

📱Глянуть UI Kit📱 #uikit