🧰 UI-кит для дизайнера: что в него складывать и как поддерживать

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

🧾 Контракт компонентов: как сделать решения проверяемыми

Нейтан Кёртис разбирает, зачем дизайн-системам нужны формальные контракты компонентов. В них фиксируют свойства, состояния, зависимости и правила поведения, чтобы разные платформы одинаково понимали замысел компонента. Автор предлагает строить такие контракты на основе схемы. Она помогает проверять структуру данных, автоматически находить ошибки и генерировать большую часть кода. Хороший контракт должен быть типизированным, неповторяющимся, независимым от конкретной платформы, проверяемым, детерминированным, недорогим в поддержке и готовым к изменениям. Внутри: – Чем контракт компонента отличается от обычного описания или файла в Markdown; – Почему каждое решение нужно хранить в одном месте; – Как сделать контракт независимым от Фигмы, веба, iOS и Android; – Зачем нужны схемы, автоматическая проверка и детерминированная генерация; – Как менять контракты через ADR, версии и понятные правила совместимости. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🧱 Спецификации компонентов как общий язык Фигмы и кода

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

🦤 В Додо разобрались, почему общий модуль компонентов ещё не дизайн-система

В приложении было много кнопок и других элементов, но общего порядка не было. Одни компоненты копировали по фичам, другие напрямую использовали чужие команды. В итоге изменения приходилось вносить в нескольких местах, а разработчики зависели от решений коллег. Команда добавила паспорта компонентов, правила разработки, сторибук и скриншот-тесты. После этого компоненты начали делать сами фичевые команды, а ИИ стал помогать с шаблонным кодом. За ним всё равно проверяют люди, но ошибки теперь находят до релиза, а разработка компонента подешевела с 3–5 до 2 сторипоинтов. Внутри: – Почему копипаста и прямое переиспользование чужих компонентов одинаково создают проблемы; – Как отличить компонент дизайн-системы от компонента конкретной фичи; – Зачем нужны паспорта компонентов и сторибук; – Как распределить разработку между командами, если владельцев дизайн-системы всего двое; – Почему ИИ хорошо собирает бойлерплейт только вместе с правилами, тестами и ревью. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Figma MCP: 5 ситуаций, когда ИИ-автоматизация дизайн-системы сбережёт часы и даже дни работы
Перенос готового стиля на пачку вайрфреймов, автозаполнение макетов реальным контентом, сборка однотипных таблиц из компонентов, светлая тема из тёмной за пару минут. Разобрали в Relate с примерами под каждый сценарий Читать на дизайнерс | #AI
🧱 Дизайн-система должна хранить решения, а не только компоненты
Автор проверил это на трёх ИИ-агентах. Всем дали одну библиотеку компонентов, токены и задания собрать страницу настроек для разных продуктов. В результате получились три вполне рабочие страницы, но с разной структурой: где-то вкладки, где-то карточки, разные способы сохранения и разные подходы к опасным действиям. Компоненты задают кнопки, поля и переключатели, но не отвечают на вопросы более высокого уровня. Поэтому команда должна отдельно описывать повторяющиеся решения: как устроена страница настроек, где размещается опасная зона, когда изменения сохраняются и как подтверждается удаление. После этого такие правила можно закрепить в коде и понятных паттернах, чтобы следующий дизайнер или ИИ не решал ту же задачу заново. Внутри: – Почему библиотеки компонентов сами по себе не создают единую систему; – Какие решения чаще всего остаются только в головах и старых макетах; – Как разложить страницу настроек на поведение, строки, группы и общий шаблон; – Что меняется, когда правила описаны рядом с компонентами; – Как использовать ИИ-агентов, чтобы находить места, где продукт начинает расходиться. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайнер, привет
Claude или Codex? А что у вас вообще настроено?)
Просишь агента собрать экран по своей дизайн-системе. Он что-то делает, ты открываешь Фигму, а там компоненты свои, стили свои. Пишешь ещё раз, прикладываешь скрин, объясняешь. Потом думаешь, что надо попробовать другого агента, может, тот поймёт быстрее. Только новому тоже придётся показать, где лежат файлы, какие компоненты брать и по каким правилам всё собирать. Иначе опять объясняешь одно и то же в каждом чате. Сначала вроде терпимо, потом хочется уже нормально настроить и заниматься задачами. Вчера, кстати, статейку как раз от Фигмы выкладывал, они там тоже таким занимались с Coinbase, почитайте. В общем, Даня Шишко собрал бесплатный гайд по настройке агентов для дизайнеров. С файлами, которые можно скачать и использовать у себя, подключением Фигмы и разбором того, что делать, когда агент снова ничего не видит. Как обычно, бесплатно и с пользой. 📌 Что внутри - Стартовые файлы и инструкции для повторяющихся задач; - Подключение Фигмы, чтобы агент видел компоненты и стили; - Разница между Claude и Codex и выбор под свои задачи; - Три кейса: прототип из брифа за день, экраны по дизайн-системе и прототип раньше макетов; - Что проверить, если агент не находит файлы или делает что-то не то. Если пока настраивали всё по ходу дела, можно пройтись по гайду и сравнить со своей сборкой. А если только начинаете, будут готовые файлы и примеры, с которых можно стартовать. Газ настраивать 👍 🔠 Гайд лежит в закрепе канала Даниила, забирайте 🔠 Гайд лежит в закрепе канала Даниила, забирайте 🔠 Гайд лежит в закрепе канала Даниила, забирайте
Изображение канала: Дизайнер, привет
🧩 Когда приложение уходит, а сценарий остаётся
Михаил Харитончик из Сбера разбирает, почему мы сами стали API-шлюзом между картами, такси, трекером и календарём. Каждое приложение оптимизирует свою функцию, а реальное намерение пользователя живёт между ними: доехать домой, успеть на тренировку и не выжечь остаток внимания на выбор тарифа. Дальше появляется агент со skills и памятью, но текстовый ответ снова превращает человека в парсера. Нужен GenUI: интерфейс, который собирается под текущее намерение из готовых компонентов, с явным подтверждением опасных действий и без генерации HTML с нуля. Внутри: – Почему набор приложений заставляет пользователя склеивать сценарий вручную; – Чем агент отличается от супераппа и где нужна персонализация по целям; – Как выглядит GenUI как визуальный ответ на намерение; – Зачем модели декларативный протокол вместо генерации интерфейсного кода; – Что останется дизайнеру и продукту, когда экран собирается на лету. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Дизайн-снайпер
Все вокруг говорят про AI-агентов. Но вот с чего начать, толком никто не объясняет))
Как обычно, инструментов море, разговоров еще больше, а конкретики ноль. Что ставить, чем Claude отличается от Codex, как подружить агента со своей Figma и почему он в упор не видит файлы...? 🙈 Поэтому делюсь! Даниил Шишко 😎 собрал подробный гайд, который проводит по всему пути с нуля Внутри: • 3 реальных кейса применения AI в работе дизайнера • как подключить агента к Figma, чтобы он видел ваши компоненты и стили • Claude vs Codex: что выбрать и в чем разница • пошаговая настройка среды со стартовыми файлами и скиллами • что делать, если агент не видит файлы или выдает не то 🤘 Гайд бесплатный, забирайте в закрепе канала Даниила
Изображение канала: Дизайн-снайпер
Готовы ли AI-агенты к реальной работе дизайнера?🤷‍♂🤷‍♂🤷‍♂
Просишь Claude или GPT собрать экран, а в ответ получаешь набор компонентов, который потом все равно приходится переделывать руками. Цвета не из палитры, отступы не по сетке, у кнопок нет состояний. После пары таких попыток легко решить, что агенты пока не готовы к нормальной работе. Но тут есть нюанс: возможно, дело не только в самой модели, а в том, как мы ее используем. 😇 20 августа Pixel Perfect проведут бесплатный эфир: возьмут большую дизайн-систему банка и прямо в Figma попробуют собрать по ней новые экраны. Сначала попробуют собрать экраны без каких-либо настроек, а потом подготовят среду специально под эту задачу. И сравнят два результата. Заодно покажут, как дизайн-система попадает в среду, почему ее нельзя просто закинуть агенту целиком и как потом проверить результат. А еще посмотрят, где агент уже справляется сам, а где все-таки приходится вмешиваться руками. Все скиллы с эфира можно будет забрать и использовать в своих задачах, даже если большой дизайн-системы у вас нет. ↗20 августа, 18:00 мск. Эфир пройдет в телеграм канале, подписывайся!
Изображение канала: ГРАФДИЗЩ®
🤍«АНОМАЛИЯ»: Щ x ЦУ🤍
археология визуального кода, которого никогда не было наш совместный челлендж со Школой дизайна ЦУ с возможностью получить грант в магистратуру подробности ниже 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 суть: найди в городе объект, который повторяется много раз (Двери, счётчики, вывески, антенны, заплатки на асфальте — что угодно), зафиксируй 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. закроем регистрацию по окончании первого этапа
Изображение канала: Щёлочь®
🤍«АНОМАЛИЯ»: Щ x ЦУ🤍
археология визуального кода, которого никогда не было наш совместный челлендж со Школой дизайна ЦУ с возможностью получить грант в магистратуру подробности ниже 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤🖤 суть: найди в городе объект, который повторяется много раз (Двери, счётчики, вывески, антенны, заплатки на асфальте — что угодно), зафиксируй 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. закроем регистрацию по окончании первого этапа
Изображение канала: Retro Figma
Home Store Mobile App UI Kit by Rifqi Naufal F
Набор из 10 готовых экранов приложения по продаже мебели с большим наборов уникальных компонентов. ⛓️‍💥Скачать UI Kit⛓️‍💥 #uikit
Изображение канала: Дизайн 360° | Pragmatica
как уйти от тестинга тулов и стать ai-native спецом — делится лид продуктового дизайна ⚪️ лева ловушка
ценный тейк: эволюция начинается тогда, когда ты переходишь к сборке системной ai-архитектуры. разгоним, как применить этот подход на уровне ежедневных задач: ⚪️ память (оцифровка): превращай лучшие кейсы, рефы, правки, чаты и звонки в структурированный набор данных. лева использует для созвонов talat, а на каждый чих — obsidian и маркдаун-файлы. так ии станет ассистентом, который знает твой вкус и контекст проектов. ⚪️ интерпретация (аналитика): заставь ии делать выводы из накопленного. пиши промпты для сверки: пусть модели чекают логику ваших макетов, подсвечивают ошибки в сценариях или анализируют интерфейсы конкурентов, сравнивая их с вашим подходом. ⚪️ агентность (персональные инструменты): собирай микро-агентов под конкретную рутину. например, ресерч-агента (собирать скриншоты рынка), текстового (писать копи в нужном стиле) или арт-директора, который перед сдачей проверит компоненты и отступы по чек-листу. дальше вся эта экосистема уходит в прогнозирование и адаптацию, когда нейронки начнут сами перестраивать процессы под тебя. кстати, подробнее о том, как мы сливали на подписки 300к автоматизируем процессы с нейронками ⚪️ лева недавно рассказал на Сбер Дизайн Фесте.
Изображение канала: Retro Figma
MasterUI 1.1 — на один шаг впереди стандартных комплектов пользовательского интерфейса, потому что при использовании компонента MASTER вы можете настроить весь набор под свои нужды в мгновение ока
Install
Изображение канала: Retro Figma
Плагин «DesignDoc» by gm Плагин визуализирует интервалы, поля, отступы и размеры компонентов
🏁 Установить плагин 🏁 #plugin
Изображение канала: Retro Figma
Evolve Component Library — библиотека из 300+ компонентов
Install ️
Изображение канала: Дизайнер, привет
♿ Доступность нельзя чинить одним аудитом перед релизом
Миша Просмицкий пишет о доступности как о части инженерного процесса, а не как о пункте в чек-листе. Команды теперь могут генерировать интерфейсы быстрее, чем раньше, но скорость легко маскирует базовые проблемы: кнопка оказывается div с обработчиком клика, фокус не работает, скринридер видит плоский текст, а пользователь не может оплатить заказ. Особенно больно это становится с ИИ-кодом. Модель часто повторяет то, на чём училась: несемантичную разметку, красивые пиксели и минимум ограничений. Поэтому доступность нужно встраивать в систему заранее: правила для ИИ, доступные компоненты в дизайн-системе, проверка в pull request, Definition of Done, тесты в CI, понятная передача фокуса, подписей, состояний и порядка клавиатурной навигации. Аудиты всё ещё нужны, но они не заменяют процесс. Внутри: – Почему аудит доступности быстро устаревает после нескольких релизов; – Как ИИ ускоряет создание интерфейсов и одновременно множит ошибки; – Почему красивый компонент может быть бесполезен для скринридера; – Зачем ограничивать ИИ правилами до генерации кода; – Почему сложные элементы лучше брать из проверенных библиотек, а не писать заново; – Как дизайн-система помогает масштабировать доступность на тысячи экранов; – Какие проверки стоит встроить в ревью, Definition of Done и CI; – Почему тесты с реальными пользователями с инвалидностью всё равно нельзя заменить линтером. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение канала: Retro Figma
NextUI — UI Kit c большим количеством компонентов
Install ️
Изображение канала: Дизайнер, привет
🧰 Claude не сделает красивый интерфейс просто по слову «премиально»
Автор разбирает, почему у одних интерфейсы, собранные через Claude, выглядят нормально, а у других сразу пахнут нейросетью. Дело не в секретном промпте. Модель может быстро собрать компонент, анимацию или переход, но вкус, правила и сотня мелких решений всё равно остаются на человеке. Практический смысл простой: сначала нужно дать системе язык. Токены, кривые анимаций, радиусы, тени, состояния, правила для нажатий, раскрытий и доступности. Если просто попросить «сделай гладко», модель начнёт придумывать случайные значения. Если дать точные переменные, запретить одноразовые числа и отдельно настраивать каждую часть, результат становится намного ближе к продуктовой работе, а не к случайному демо. Внутри: – Почему «smooth» и «premium» почти ничего не значат для модели; – Зачем заранее задавать токены, радиусы, длительности и кривые анимаций; – Почему дефолтные easing-кривые быстро выдают сгенерированный интерфейс; – Как тактильность появляется через нажатия, snap-точки и нормальную физику drag-сценариев; – Почему входящие анимации лучше собирать из прозрачности, сдвига и лёгкого blur; – Зачем использовать слоёные тени вместо одного грубого drop-shadow; – Почему компонент нужно проектировать как набор состояний, а не как картинку; – Где заканчивается работа Claude и начинается вкус человека, который понимает, что именно надо докрутить. ➡️ Читать статью (в Х) ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы