Using Grok Bot: Figma Photomosaics

You may have seen some three-panel mosaics on your timeline. Here's how you can create them with @bot in @figma.

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

Any designer knows how they'd make one, it's just a bit of a pain in the ass.

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

So we should be asking "how can I use AI to make this 90% less of a pain in the ass, so I can focus on the cool, creative parts of design"

Grok Bot can do exactly that.

If you don't care about the "how" and just want a @bot template, you can find one here: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Otherwise, here's how I built mine:

Building the photomosaic

My general approach with Grok Bot is: break down how you'd create the asset yourself, then prompt @Bot to do exactly the same.

In this case, the workflow was a design in Figma.

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

This is just a canvas with a hero asset, componentized and split across three panels. We can reverse engineer the aspect ratios by looking at existing posts on X.

I asked Bot to do exactly this - here's my optimized first prompt.

Replace Cursor Gothic, [link to image], and [insert file] with your assets.

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.

After sending the prompt through, check on your bot every few minutes - if things are going awry, ask why.

Maybe the bot isn't properly using autolayout. Maybe the padding is off. Maybe a border radius needs a tweak.

Make the change, make a note of why it was needed, then integrate those things into your next prompt.

Watching my bot cook

A few meta-points:

• I'm using accurate language. Note how I called it a "photomosaic" and not "a picture in a picture as three thingys on a thingy"
• I didn't know what a photomosaic was, but I asked Grok "what is it called when a collage of three images are assembled to make a larger image"
• Every prompt should start from a beginner's mindset - how do I learn everything I need to do this well?
• My first attempt was not perfect. I backed into the prompt above by asking Grok Bot "tell me what you needed up front to get this right on the first try"
• Always be asking, "how can I duplicate this workflow or ensure AI can do everything next time?" This is something @poteto really drives home.
• I didn't use a specialized bot for this - just a general one connected to Figma. For a one-off, that's fine, but for repeated tasks I'd probably create a specialist.

Grok Bot is about more than using AI effectively - it's about how to use a computer effectively.

That means first principles thinking, communicating effectively, and having patience. Using Grok Bot is mostly about problem solving.

The finished asset

Plus, I now have a durable asset that I can reuse - like I did in this post:

Repurposing my asset for an iPad announcement post

Without an understanding of this format, I wouldn't have been able to make the iPad announcement in a timely way.

The role of the creative is to evoke emotion.

Grok Bot allows me to focus on asset selection and imagery, while it takes care of everything else.

The most popular question I get is "how can I use Grok Bot" - here's one way to use it for design.