Figma MCP: 5 ситуаций, когда ИИ-автоматизация дизайн-системы сбережёт часы и даже дни работы

Евгения Шамрай из студии «Проект» рассказывает, почему первый рабочий скилл часто разваливается, когда его открывает второй человек. Пока им пользуешься одна, половина правил живёт в голове. Другой видит только файл и сразу находит дыры: слабое описание, смешанные зоны ответственности и противоречивые инструкции из разных частей проекта. Большой универсальный скилл оказался плохой идеей. Нормальный командный скилл ближе к дизайн-системе: у него есть границы, владелец, структура и история изменений. Description решает, подключится ли он вообще. А знания лучше держать рядом отдельными файлами, а не в одном огромном SKILL.md. Внутри: – Почему description важнее красивых правил внутри файла; – Как делить скиллы по одной ответственности, а не по «всему проекту»; – Зачем делать SKILL.md роутером, а знания выносить в папки; – Как дописывать правила после реальных ошибок, а не заранее; – Зачем нужен отдельный проверяющий агент, а не проверка внутри исполнителя; – Почему без владельца и короткого CHANGELOG скилл быстро зарастает мёртвыми правилами. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Просишь Claude или GPT собрать экран, а в ответ получаешь набор компонентов, который потом все равно приходится переделывать руками. Цвета не из палитры, отступы не по сетке, у кнопок нет состояний. После пары таких попыток легко решить, что агенты пока не готовы к нормальной работе. Но тут есть нюанс: возможно, дело не только в самой модели, а в том, как мы ее используем. 😇 20 августа Pixel Perfect проведут бесплатный эфир: возьмут большую дизайн-систему банка и прямо в Figma попробуют собрать по ней новые экраны. Сначала попробуют собрать экраны без каких-либо настроек, а потом подготовят среду специально под эту задачу. И сравнят два результата. Заодно покажут, как дизайн-система попадает в среду, почему ее нельзя просто закинуть агенту целиком и как потом проверить результат. А еще посмотрят, где агент уже справляется сам, а где все-таки приходится вмешиваться руками. Все скиллы с эфира можно будет забрать и использовать в своих задачах, даже если большой дизайн-системы у вас нет. ↗20 августа, 18:00 мск. Эфир пройдет в телеграм канале, подписывайся!

Мы давно не устраивали никакой движухи, а тут ещё и 1 сентября совсем близко. Поэтому решили начать осень с небольшого бесплатного интенсива. С 1 по 5 сентября вместе с вами с нуля соберём полноценный сайт с помощью нейросетей. За 5 дней: ▪️ создадим структуру сайта и напишем тексты ▪️ соберём дизайн-систему ▪️ сгенерируем изображения ▪️ оформим всё это в готовый работающий сайт Будем проходить весь процесс по шагам, поэтому можно участвовать, даже если вы раньше никогда не создавали сайты. Конечно, будут подарки для самых активных, дополнительные материалы и много практики. Проходить будет на этом канале: https://t.me/neyropred Поэтому переходите и подписывайтесь 💚 Как вам такая идея?

Завтра наш куратор бренд дизайна Влад Деревянных расскажет про работу с брендами городов на вебинаре проекта «Дизайн для регионов». Влад расскажет про специфику разработки визуальной коммуникации для территорий, чем она отличается от коммерческой и какие ошибки чаще всего совершают дизайнеры не зная этой специфики. Вебинар бесплатный и пройдёт в эту среду в 13:00. Регистрация вот тут.

Стажёр в управление продуктового дизайна Альфа-Банк Ты будешь создавать удобные и интуитивно понятные пользовательские интерфейсы (UI) для веб-приложений и онлайн-сервисов банка 📍 удалённо по РФ 😍 Ждут, что вы: • Умеете делать понятный, лаконичный и выразительный дизайн интерфейсов (с портфолио); • Уверенно владеете Figma; • Понимаете теорию UX/UI; • Готовы уделять стажировке 40 часов в неделю; • Стрессоустойчивы, коммуникабельны и с хорошим чувством юмора :) 💻 Задачи которые вас ждут: • Формировать грамотный сторителлинг для страниц сайта; • Собирать макеты продуктовых лендингов в Figma на мастерах виджетов из библиотеки; • Развивать и поддерживать дизайн-систему вместе с дизайнерами сайта; • Поддерживать существующие страницы: метрики, сценарии, тексты, имиджи, пересборка блоков; • Проводить дизайн-ревью изменений на боевых страницах, фичей и доработок. 💸 Оплата: • Не указана ℹ️ Доп.информация: • Трудоустройство по ТК; • ДМС со стоматологией с первого дня; • Комфортные офисы; • Корпоративы, тусовки и фирменный мерч; • Продукты с миллионной аудиторией; • Персональный ментор. 🔠 Откликнуться ——— 💻 Вакансии в IT и digital 🔥 Закрытый канал с вакансиями 😍 Про дизайн 🎨 Референсы

Install ️

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

Как строить бренд финтеха 🦄 с нуля в чужой культуре 🇲🇽, почему в Мексике минимализм читается как бедность, и что реально даёт AI-нейросети в производственной цепочке дизайнера. Я пообщался с Александром Николаевым — бренд-дизайнер банка PLATA в Мехико, он четвёртый год отвечает за бренд, визуал и смыслы 😎. PLATA — цифровой банк для Мексики, построенный командой выходцев из Тинькова. Первые версии продукта делали вчетвером — Александр, Игорь, Катя и Александр Сыров (сейчас — дизайн-директор Платы). — Как строить бренд и весь дизайн банка вчетвером - с чистого листа создали дизайн-систему, бренд, визуальный стиль, приложение и маркетинг параллельно — Почему разделение на «интерфейсных» и «визуальных» дизайнеров — устаревшая идея — Главный инсайт: в Мексике минимализм читается не как премиум, а как «человек не постарался», как бедность — Легендарная история с новогодним мерчом в стиле Покраса Лампаса, который мексиканские коллеги встретили словами «в фавелах маргиналы в таком ходят» — Эволюция оранжевого цвета Платы: от градиентов «всё оранжевое» до метафоры «свет на оранжевой стене в тени» с точечными акцентами. И уход в тёмные оттенки, когда DiDi запустил такси-кредитку тоже оранжевого цвета — Признаки бренда Платы без логотипа: оранжевый, работа с металлом, Tone of Voice, качество графона — «Лайтморфизм» как прогноз следующей волны после неоморфизма и гласморфизма: дизайнеры научатся рисовать не тени, а свет, блики и рефлексы с историей — Как строили бренд Платы: психогеометрия + архетипы Юнга + типы потребителей (лекция Кожанова «Бренд и физиология») — Почему выбрали связку бунтаря и искателя и как «Real Money, Real Cashback» попала в архетип бунтаря на мексиканском рынке — Культура работы в Плате: «не делай плохих вещей», подход из Тинькова, увеличенный в разы. История про иконку «плюс», которую Александр рисовал 5 месяцев — Успешный цифровой банк без сильного дизайна возможен? Нет. Все интерфейсы уже одинаковые, надо цеплять эмоцией — как Duolingo с совой — Как AI-нейросети реально работают в производстве Ставьте лайки 👍, делитесь, подписывайтесь на мой ютуб канал.

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

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

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

Села я тут смотреть прошлогоднее интервью Илона Маска с Лексом Фридманом на 8,5 часов про Нейролинк. Хочу написать пост про их апдейты. Закинула во все LLM запрос и одна из них наврала так красиво и убедительно, что уже есть и дизайн-система у них, и хакатоны, ну вы там прочитаете на скрине )) И да, никогда больше не буду использовать слово Эксклюзив в LLM 😂

Фигма выложила майский 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) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы