Готовы ли AI-агенты к реальной работе дизайнера?🤷‍♂🤷‍♂🤷‍♂

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

археология визуального кода, которого никогда не было наш совместный челлендж со Школой дизайна ЦУ с возможностью получить грант в магистратуру подробности ниже 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 суть: найди в городе объект, который повторяется много раз (Двери, счётчики, вывески, антенны, заплатки на асфальте — что угодно), зафиксируй 10+ таких на камеру. выбери в этой серии снимков один странный объект — твою «аномалию», выпадающую из ряда по какому-либо признаку, собери из такого объекта: 1. знак/лого 2. осмысленную аббревиатуру из 3 букв 3. цветовую палитру 4. графический паттерн по итогу получится визуальный код, которого никогда не существовало 5. презентуй этот визуальный код серией постеров (3+) сроки: этап 1 — фиксация 11.08 18:00 → 14.08 18:00 10 фото объектов одного типа + один кадр-аномалия этап 2 — мутация 14.08 18:00 → 16.08 18:00 сборка цельного визуального кода = перечисленных выше компонентов этап 3 — экспозиция 16.08 18:00 → 18.08 12:00 презентация визуального кода в виде серии постеров правила: — участие в челлендже осуществляется исключительно по регистрации (после неё вы попадёте в закрытую беседу, где и будет проходить челлендж) — живая съёмка окружающего мира, стоки не принимаются — нейронки — можно на 2 и 3 этапах и только как помощь, НО знак и буквы создаются вручную — всё создаётся за эту неделю, старое не принимается — одиночное участие — если по итогам просмотра жюри решит, что уровень работ не позволяет присудить все места, часть грантов может быть не распределена или перераспределена между призовыми позициями итоги: презентации участников разбираются в прямом эфире 18.08 в 18:00, там же объявляем победителей состав жюри: 1. Борис Шилин, основатель и креативный директор «Щёлочи»; 2. Артём Реф, арт-директор школы «Щёлочь», автор «реф³», преподаватель курса «ГАЗ»; 3. Иван Величко, сооснователь бренд-бюро «Щука», руководитель направления коммуникационного и графического дизайна в Школе дизайна ЦУ; 4 & 5. Мила Силенина & Яна Эткина — академические руководители бакалавриата Школы дизайна ЦУ, арт-директора и партнеры студии «Holystick». призы: гранты в магистратуру Школы дизайна ЦУ 2026: 1 место — 75% на весь срок обучения 2 место — 50% на весь срок обучения 3 место — 25% на весь срок обучения 🤍 РЕГИСТРАЦИЯ 🤍 p.s. закроем регистрацию по окончании первого этапа

археология визуального кода, которого никогда не было наш совместный челлендж со Школой дизайна ЦУ с возможностью получить грант в магистратуру подробности ниже 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 суть: найди в городе объект, который повторяется много раз (Двери, счётчики, вывески, антенны, заплатки на асфальте — что угодно), зафиксируй 10+ таких на камеру. выбери в этой серии снимков один странный объект — твою «аномалию», выпадающую из ряда по какому-либо признаку, собери из такого объекта: 1. знак/лого 2. осмысленную аббревиатуру из 3 букв 3. цветовую палитру 4. графический паттерн по итогу получится визуальный код, которого никогда не существовало 5. презентуй этот визуальный код серией постеров (3+) сроки: этап 1 — фиксация 11.08 18:00 → 14.08 18:00 10 фото объектов одного типа + один кадр-аномалия этап 2 — мутация 14.08 18:00 → 16.08 18:00 сборка цельного визуального кода = перечисленных выше компонентов этап 3 — экспозиция 16.08 18:00 → 18.08 12:00 презентация визуального кода в виде серии постеров правила: — участие в челлендже осуществляется исключительно по регистрации (после неё вы попадёте в закрытую беседу, где и будет проходить челлендж) — живая съёмка окружающего мира, стоки не принимаются — нейронки — можно на 2 и 3 этапах и только как помощь, НО знак и буквы создаются вручную — всё создаётся за эту неделю, старое не принимается — одиночное участие — если по итогам просмотра жюри решит, что уровень работ не позволяет присудить все места, часть грантов может быть не распределена или перераспределена между призовыми позициями итоги: презентации участников разбираются в прямом эфире 18.08 в 18:00, там же объявляем победителей состав жюри: 1. Борис Шилин, основатель и креативный директор «Щёлочи»; 2. Артём Реф, арт-директор школы «Щёлочь», автор «реф³», преподаватель курса «ГАЗ»; 3. Иван Величко, сооснователь бренд-бюро «Щука», руководитель направления коммуникационного и графического дизайна в Школе дизайна ЦУ; 4 & 5. Мила Силенина & Яна Эткина — академические руководители бакалавриата Школы дизайна ЦУ, арт-директора и партнеры студии «Holystick». призы: гранты в магистратуру Школы дизайна ЦУ 2026: 1 место — 75% на весь срок обучения 2 место — 50% на весь срок обучения 3 место — 25% на весь срок обучения 🤍 РЕГИСТРАЦИЯ 🤍 p.s. закроем регистрацию по окончании первого этапа

Набор из 10 готовых экранов приложения по продаже мебели с большим наборов уникальных компонентов. ⛓️‍💥Скачать UI Kit⛓️‍💥 #uikit

ценный тейк: эволюция начинается тогда, когда ты переходишь к сборке системной ai-архитектуры. разгоним, как применить этот подход на уровне ежедневных задач: ⚪️ память (оцифровка): превращай лучшие кейсы, рефы, правки, чаты и звонки в структурированный набор данных. лева использует для созвонов talat, а на каждый чих — obsidian и маркдаун-файлы. так ии станет ассистентом, который знает твой вкус и контекст проектов. ⚪️ интерпретация (аналитика): заставь ии делать выводы из накопленного. пиши промпты для сверки: пусть модели чекают логику ваших макетов, подсвечивают ошибки в сценариях или анализируют интерфейсы конкурентов, сравнивая их с вашим подходом. ⚪️ агентность (персональные инструменты): собирай микро-агентов под конкретную рутину. например, ресерч-агента (собирать скриншоты рынка), текстового (писать копи в нужном стиле) или арт-директора, который перед сдачей проверит компоненты и отступы по чек-листу. дальше вся эта экосистема уходит в прогнозирование и адаптацию, когда нейронки начнут сами перестраивать процессы под тебя. кстати, подробнее о том, как мы сливали на подписки 300к автоматизируем процессы с нейронками ⚪️ лева недавно рассказал на Сбер Дизайн Фесте.

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-кит и базово оформленная презентация. Пишите в комментариях, если будут вопросы по алгоритму действий 🙏

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