Relate Community&Studio

Привет! Это Игорь — бренд-дизайнер в Relate 👉

Частая история на проектах: клиент не прислал копик: никаких лайнов и саблайнов. А презентацию чем-то заполнять надо. В вебе, если текста нет, дизайнер может спарсить данные с другого сайта с помощью Figma MCP (об этом мы уже писали). А для презентаций с брендингом я просто генерю текст с Claude без копирайтера.

Вот, например, как тут

Привет! Это Анита, бренд-дизайнер Relate 👉

Сегодня много букв не будет, лучше всё сразу покажу на примере. Надо было отрисовать пак на 15 иконок. Даже не заморачивалась над промптом — и с первого же захода получила общее направление и наброски, которые осталось только перерисовать. Что думаете?

Самая долгая часть генерации — объяснить нейросети, чего вы хотите

Привет, я Игорь, дизайнер Relate. Нашёл скилл, который собирает подробный технический промпт вместо разговорного описания — итераций на подгонку результата стало в разы меньше.

Заодно погонял ещё три скилла, которые сейчас в топе у UX/UI-дизайнеров. Всё это — в новой статье на дизайнерс 👇

🎙 Что такое скиллы для ИИ и какие мы уже используем в команде Relate

Брендинг и сайт для MEV-инфраструктуры Shio 👉

Минутка ликбеза: MEV‑инфраструктура — это система в блокчейне, которая помогает участникам зарабатывать на порядке транзакций в блоке. Искатели находят выгодные сделки, строители собирают из них блоки, валидаторы включают блоки в сеть — и все получают часть прибыли.

Нам нужно было сделать сложную технологию визуально понятной и доступной — и не потерять при этом техническую глубину.

Итог — чистая подача и выразительные анимации, которые помогают ясно раскрыть технологию Shio и сформировать её визуальную идентичность.

Ловите подборку видосов, которые мы делали для любимых Jupiter — крупнейшей платформы для крипто-финансов на блокчейне Solana.

Ну что, пробовали Figma MCP?

В любом случае будет полезно прочитать пост выше. А в этом — покажем на конкретном кейсе, как с помощью MCP перенести новый дизайн на целую пачку вайрфреймов.

Полный видеотуториал про Figma MCP

Зачем использовать Lorem Ipsum, если можно вставить реальные данные за 5 минут? Вопрос риторический: не за чем

Макет с реальным контентом лучше показывает, как интерфейс будет вести себя в жизни. С Lorem Ipsum сложнее заметить, что заголовок не помещается в карточку, название обрезается, а цифры ломают сетку. Поэтому реальный контент лучше вставлять ещё на этапе дизайна. Но есть «но».

Если в продукте огромное количество аватарок, названий токенов, статистики и прочих мелочей — вставлять их руками долго и больно: нужно заходить на сайт-источник, копировать каждую сущность и вставлять по одной. А вот как сделать то же самое за 5 минут.

Шаг 1. Подключаем MCP

Figma MCP (Model Context Protocol) — это технология и официальный сервер от Figma, который связывает дизайн-макеты напрямую с AI-агентами.

Можно использовать любую ИИ-модель, которая поддерживает работу с Figma MCP. Чтобы установить MCP, просто пишете в чат «Помоги мне установить MCP», нажимаете две кнопки — и всё готово. 

Шаг 2. Выбираем нужный участок макета (selection)

Копируем ссылку на него и отдаём модели вместе со ссылкой на сайт-источник: у нас это DexScreener — один из крупнейших бесплатных агрегаторов данных по DEX-токенам.

Шаг 3. Пишем промпт

Возьми из [источник] аватарки, название и статистику и вставь в [макет].

За пару итераций получаем результат, который можно показать клиенту — уже с реальными данными вместо условных плейсхолдеров.

Слева — DexScreener, справа — наш макет, заполненный данными с DexScreener

Кстати, про эту задачу и другие, где поможет MCP, рассказывали в туториале с интенсива

Я вернулась — и вот эффект из Paper Design и то, как я скопировала его же в свою тулзу

Скрин 1 — Paper Design
Скрин 2 — моя тулза

Привет! На связи Анита, бренд-дизайнер Relate. Недавно собирала тул, и не хватило одной детальки, чтобы зафиналить результат. Нужен был конкретный шейдер как на сайте-референсе. Руками с кодом я не работаю, разбираться пришлось бы долго — и, честно говоря, не хотелось тратить на это время. Спросила Claude: 10 минут — и деталь уже задеплоена. Собрала короткую инструкцию, как я это сделала.

Шаг 1. Находим нужный эффект
Открываем сайт-референс, включаем инспектор браузера: F12 → вкладки Elements и Sources. Смотрим, какие библиотеки подгружаются (three.js, GSAP, WebGL-шейдеры) — это уже сузит задачу для нейронки.

Шаг 2. Вгружаем эффект в нейронку
Если нашли код фрагмента — копируем его как есть. Если нет — описываем эффект своими словами: что именно происходит, при каких условиях, как выглядит переход.

Промпт: «Вот код эффекта с сайта [ссылка]: [вставить фрагмент]. Мне нужно перенести именно этот эффект в свой проект — не переписывать всё с нуля».

Или без доступа к коду:

Промпт: «Я пытаюсь повторить эффект с сайта [ссылка]: [описание — что происходит, как выглядит, что меняется]. Похоже, что это делается через шейдер / WebGL — предложи, как это реализовать».

Шаг 3. Погружаем нейронку в контекст своего проекта
Прикладываем файлы, в идеале — указываем стек. Так нейронка адаптирует эффект под вашу структуру и не сломает остальное.

Промпт: «Вот мой текущий код тулзы: [вставить]. Адаптируй эффект выше под эту структуру, сохранив логику: [вставить эффект/описание]».

Шаг 4. Просим нейронку объяснить, что изменилось
Что именно она поменяла и почему — это и страховка от нерабочего кода, и способ самому лучше разобраться в теме.

Промпт: «Объясни своими словами, что ты изменила и почему — хочу понимать логику, а не просто скопировать код».

Шаг 5. Финалим результат через скриншоты, а не текстом
Если результат не совпадает с референсом — не пытаемся описать разницу словами, просто присылаем скриншот и указываем, что не так.

Промпт: «Вот скриншот моего результата и скриншот референса. Разница в [цвете / скорости / плавности] — поправь под референс».

Ну, а можно просто поросить Claude самому написать для себя промпт, как у меня на скрине, — и тоже получить адекватный результат.

10 реакций — и Анита покажет эффект-референс и результат, когда вернётся из дэй-оффа.