Использование Grok Bot: фотомозаики в Figma

Вы могли видеть трёхпанельные мозаики в своей ленте. Вот как их создавать с помощью @bot в @figma.

https://x.com/kazarov_d/status/2094470313862136145

Любой дизайнер знает, как это сделать, но это та ещё морока.

https://x.com/studiobakers/status/2095077637639262295

Поэтому стоит спросить: «Как с помощью ИИ сделать эту мороку на 90% менее болезненной, чтобы я мог сосредоточиться на крутых, творческих аспектах дизайна?»

Grok Bot отлично с этим справляется.

Если вам всё равно на «как» и нужен просто шаблон @bot, вот он: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

В противном случае, вот как я создал свой:

Создание фотомозаики

Мой общий подход к Grok Bot: разобрать, как бы вы создали этот элемент сами, а затем попросить @Bot сделать то же самое.

В данном случае рабочий процесс был реализован в Figma.

https://x.com/justinsunyt/status/2096635033603756354

Это просто холст с основным элементом, разбитый на компоненты и разделённый на три панели. Мы можем восстановить соотношения сторон, посмотрев на существующие посты в X.

Я попросил Bot сделать именно это — вот мой оптимизированный первый промпт.

Замените Cursor Gothic, [ссылку на изображение] и [вставьте файл] на свои ресурсы.

1Reverse engineer this posting format - it's a photomosaic of three images that stitch into one wide screenshot on a shared background.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Pull each panel at full res and get the aspect ratios.
7
8- Crop three export panels (left / center / right)
9
10- Make it a new design in the attached file [insert file] - keep it in one section
11
12- New background across all three panels [link to image] - use this asset, not the reference post's BG
13
14- Hero: screenshot of cursor.com on a simulated 4K display (2× DPR). Zoom the page so UI/type read at distance. Confirm the capture is actually the lander (nav + headline)
15
16- Centered drop shadow + real corner rounding on the window. Webpage top corners need a clipped/masked layer or they'll look square
17
18- Arc-style chrome: dark Cursor ink shell, colored traffic lights, centered URL in Cursor Gothic. Titlebar + URL text should hug height. Equal inset L/R/B around the page
19
20- Organize in Figma with components so one paste updates every panel - Background, Hero (Arc), Master, plus three export clips of Master
21
22Your work is done when editing the BG or hero once updates the master and all three exports.

После отправки промпта проверяйте своего бота каждые несколько минут — если что-то идёт не так, спрашивайте, почему.

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

Внесите изменение, запишите, почему оно понадобилось, и интегрируйте эти правки в свой следующий промпт.

Наблюдаю за работой моего бота

Несколько общих моментов:

• Я использую точную терминологию. Обратите внимание, я назвал это «фотомозаикой», а не «картинка в картинке, три штуки на чём-то там».
• Я не знал, что такое фотомозаика, но спросил Grok: «как называется коллаж из трёх изображений, собранных в одно большое?»
• Каждый промпт должен исходить из позиции новичка — как узнать всё необходимое, чтобы сделать это хорошо?
• Моя первая попытка не была идеальной. Я пришёл к промпту выше, спросив Grok Bot: «скажи, что тебе нужно было с самого начала, чтобы сделать это правильно с первого раза».
• Всегда спрашивайте себя: «как я могу дублировать этот рабочий процесс или гарантировать, что ИИ сможет сделать всё в следующий раз?» Это то, что @poteto постоянно подчёркивает.
• Я не использовал специализированного бота для этого — просто обычного, подключённого к Figma. Для разовой задачи это нормально, но для повторяющихся задач я бы, наверное, создал специалиста.

Grok Bot — это не только об эффективном использовании ИИ, но и об эффективном использовании компьютера.

Это означает мышление с нуля, эффективную коммуникацию и терпение. Использование Grok Bot — это, по большей части, решение проблем.

Готовый элемент

Кроме того, теперь у меня есть долговечный элемент, который можно использовать повторно — как я сделал в этом посте:

Переиспользование моего элемента для поста об анонсе iPad

Без понимания этого формата я бы не смог своевременно сделать анонс iPad.

Роль креативщика — вызывать эмоции.

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

Самый популярный вопрос, который мне задают: «как использовать Grok Bot» — вот один из способов его применения в дизайне.