Використання 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?» — ось один із способів використання його для дизайну.