Utilizzare Grok Bot: fotomosaici su Figma

Potresti aver visto alcuni mosaici a tre pannelli nella tua timeline. Ecco come crearli con @bot in @figma.

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

Qualsiasi designer sa come realizzarne uno, è solo un po' una scocciatura.

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

Quindi dovremmo chiederci: "come posso usare l'AI per rendere questa cosa il 90% meno noiosa, così posso concentrarmi sulle parti creative e interessanti del design?"

Grok Bot può fare esattamente questo.

Se non ti interessa il "come" e vuoi solo un template per @bot, puoi trovarne uno qui: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Altrimenti, ecco come ho costruito il mio:

Costruire il fotomosaico

Il mio approccio generale con Grok Bot è: scomporre come creeresti tu stesso l'asset, poi chiedere a @Bot di fare esattamente la stessa cosa.

In questo caso, il flusso di lavoro era un design in Figma.

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

Questo è solo una tela con un asset principale, scomposto in componenti e diviso su tre pannelli. Possiamo fare reverse engineering dei rapporti d'aspetto guardando i post esistenti su X.

Ho chiesto a Bot di fare esattamente questo - ecco il mio primo prompt ottimizzato.

Sostituisci Cursor Gothic, [link all'immagine] e [inserisci file] con i tuoi asset.

1Fai reverse engineering di questo formato di pubblicazione - è un fotomosaico di tre immagini che si uniscono in un unico screenshot largo su uno sfondo condiviso.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Estrai ogni pannello a piena risoluzione e ottieni i rapporti d'aspetto.
7
8- Ritaglia tre pannelli di esportazione (sinistro / centrale / destro)
9
10- Crealo come un nuovo design nel file allegato [inserisci file] - mantienilo in una sezione
11
12- Nuovo sfondo su tutti e tre i pannelli [link all'immagine] - usa questo asset, non lo sfondo del post di riferimento
13
14- Hero: screenshot di cursor.com su un display 4K simulato (2× DPR). Ingrandisci la pagina in modo che UI/testo siano leggibili a distanza. Conferma che la cattura sia effettivamente la pagina principale (navigazione + titolo)
15
16- Ombra centrata + angoli arrotondati reali sulla finestra. Gli angoli superiori della pagina web necessitano di un livello ritagliato/mascherato altrimenti sembreranno squadrati
17
18- Stile Arc: shell Cursor ink scura, semafori colorati, URL centrato in Cursor Gothic. Barra del titolo + testo URL devono aderire all'altezza. Inset uguale L/R/B intorno alla pagina
19
20- Organizza in Figma con componenti in modo che un incolla aggiorni ogni pannello - Sfondo, Hero (Arc), Master, più tre clip di esportazione del Master
21
22Il lavoro è finito quando modificare lo sfondo o l'hero una volta aggiorna il master e tutte e tre le esportazioni.

Dopo aver inviato il prompt, controlla il tuo bot ogni pochi minuti - se le cose vanno male, chiedi perché.

Forse il bot non sta usando correttamente l'autolayout. Forse il padding è sballato. Forse un raggio del bordo ha bisogno di una regolazione.

Fai la modifica, prendi nota del perché era necessaria, poi integra queste cose nel tuo prossimo prompt.

Guardare il mio bot lavorare

Alcuni punti generali:

• Sto usando un linguaggio preciso. Nota come l'ho chiamato "fotomosaico" e non "un'immagine in un'immagine come tre cosette su una cosetta"
• Non sapevo cosa fosse un fotomosaico, ma ho chiesto a Grok "come si chiama quando un collage di tre immagini viene assemblato per creare un'immagine più grande"
• Ogni prompt dovrebbe partire da una mentalità da principiante - come imparo tutto ciò che mi serve per fare questo bene?
• Il mio primo tentativo non è stato perfetto. Sono arrivato al prompt sopra chiedendo a Grok Bot "dimmi cosa ti serviva dall'inizio per farlo bene al primo colpo"
• Chiediti sempre: "come posso duplicare questo flusso di lavoro o assicurarmi che l'AI possa fare tutto la prossima volta?" Questo è qualcosa che @poteto sottolinea molto.
• Non ho usato un bot specializzato per questo - solo uno generico collegato a Figma. Per un'operazione una tantum, va bene, ma per compiti ripetuti probabilmente ne creerei uno specializzato.

Grok Bot non riguarda solo l'uso efficace dell'AI - riguarda come usare un computer in modo efficace.

Questo significa pensare per principi primi, comunicare in modo efficace e avere pazienza. Usare Grok Bot riguarda principalmente la risoluzione dei problemi.

L'asset finito

Inoltre, ora ho un asset durevole che posso riutilizzare - come ho fatto in questo post:

Riutilizzare il mio asset per un post sull'annuncio dell'iPad

Senza una comprensione di questo formato, non sarei stato in grado di realizzare l'annuncio dell'iPad in modo tempestivo.

Il ruolo del creativo è evocare emozioni.

Grok Bot mi permette di concentrarmi sulla selezione degli asset e sulle immagini, mentre si occupa di tutto il resto.

La domanda più frequente che ricevo è "come posso usare Grok Bot" - ecco un modo per usarlo per il design.