Grok Bot verwenden: Figma-Fotomosaike

Sie haben vielleicht schon einige dreiteilige Mosaike in Ihrer Timeline gesehen. Hier erfahren Sie, wie Sie sie mit @bot in @figma erstellen können.

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

Jeder Designer weiß, wie man eines erstellt, es ist nur ein ziemlicher Aufwand.

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

Also sollten wir uns fragen: "Wie kann ich KI nutzen, um diesen Aufwand um 90 % zu reduzieren, damit ich mich auf die coolen, kreativen Teile des Designs konzentrieren kann?"

Genau das kann Grok Bot.

Wenn Ihnen das "Wie" egal ist und Sie nur eine @bot-Vorlage möchten, finden Sie eine hier: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Andernfalls erfahren Sie hier, wie ich meine erstellt habe:

Das Fotomosaik erstellen

Mein allgemeiner Ansatz mit Grok Bot ist: Zerlegen Sie, wie Sie das Asset selbst erstellen würden, und fordern Sie dann @Bot auf, genau dasselbe zu tun.

In diesem Fall war der Workflow ein Design in Figma.

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

Dies ist nur eine Leinwand mit einem Haupt-Asset, das in Komponenten aufgeteilt und auf drei Paneele verteilt ist. Wir können die Seitenverhältnisse durch die Analyse bestehender Beiträge auf X zurückentwickeln.

Ich habe Bot gebeten, genau das zu tun – hier ist mein optimierter erster Prompt.

Ersetzen Sie Cursor Gothic, [Link zum Bild] und [Datei einfügen] durch Ihre Assets.

1Analysiere dieses Beitragsformat rückwärts – es ist ein Fotomosaik aus drei Bildern, die auf einem gemeinsamen Hintergrund zu einem breiten Screenshot zusammengefügt werden.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Rufe jedes Panel in voller Auflösung ab und ermittle die Seitenverhältnisse.
7
8- Beschneide drei Export-Panels (links / mitte / rechts)
9
10- Erstelle ein neues Design in der angehängten Datei [Datei einfügen] – behalte es in einem Abschnitt
11
12- Neuer Hintergrund über alle drei Panels hinweg [Link zum Bild] – verwende dieses Asset, nicht den Hintergrund des Referenzbeitrags
13
14- Haupt-Asset: Screenshot von cursor.com auf einem simulierten 4K-Display (2× DPR). Zoome die Seite so, dass UI/Schrift aus der Ferne lesbar sind. Bestätige, dass der Screenshot tatsächlich die Landingpage ist (Navigation + Überschrift)
15
16- Zentrierter Schlagschatten + echte abgerundete Ecken am Fenster. Die oberen Ecken der Webseite benötigen eine beschnittene/maskierte Ebene, sonst sehen sie eckig aus
17
18- Arc-Stil-Chrome: dunkle Cursor Ink-Hülle, farbige Ampeln, zentrierte URL in Cursor Gothic. Titelleiste + URL-Text sollten die Höhe ausfüllen. Gleicher Innenabstand L/R/U um die Seite
19
20- Organisiere in Figma mit Komponenten, sodass ein Einfügen jedes Panel aktualisiert – Hintergrund, Haupt-Asset (Arc), Master, plus drei Export-Clips des Masters
21
22Deine Arbeit ist erledigt, wenn die Bearbeitung des Hintergrunds oder des Haupt-Assets einmal den Master und alle drei Exporte aktualisiert.

Überprüfen Sie nach dem Senden des Prompts alle paar Minuten Ihren Bot – wenn etwas schiefgeht, fragen Sie nach dem Grund.

Vielleicht verwendet der Bot Autolayout nicht richtig. Vielleicht stimmt der Abstand nicht. Vielleicht muss der Randradius angepasst werden.

Nehmen Sie die Änderung vor, notieren Sie, warum sie nötig war, und integrieren Sie diese Dinge dann in Ihren nächsten Prompt.

Ich beobachte, wie mein Bot arbeitet

Ein paar übergreifende Punkte:

• Ich verwende präzise Sprache. Beachten Sie, dass ich es ein "Fotomosaik" genannt habe und nicht "ein Bild in einem Bild als drei Dinger auf einem Ding"
• Ich wusste nicht, was ein Fotomosaik ist, aber ich habe Grok gefragt: "Wie nennt man es, wenn eine Collage aus drei Bildern zu einem größeren Bild zusammengesetzt wird?"
• Jeder Prompt sollte von einer Anfängermentalität ausgehen – wie lerne ich alles, was ich brauche, um das gut zu machen?
• Mein erster Versuch war nicht perfekt. Ich bin zu dem obigen Prompt gelangt, indem ich Grok Bot gefragt habe: "Sag mir, was du von Anfang an gebraucht hättest, um es beim ersten Mal richtig zu machen"
• Fragen Sie immer: "Wie kann ich diesen Workflow duplizieren oder sicherstellen, dass KI beim nächsten Mal alles erledigen kann?" Das ist etwas, das @poteto wirklich betont.
• Ich habe dafür keinen spezialisierten Bot verwendet – nur einen allgemeinen, der mit Figma verbunden ist. Für einen einmaligen Gebrauch ist das in Ordnung, aber für wiederholte Aufgaben würde ich wahrscheinlich einen Spezialisten erstellen.

Bei Grok Bot geht es um mehr als nur die effektive Nutzung von KI – es geht darum, einen Computer effektiv zu nutzen.

Das bedeutet, in ersten Prinzipien zu denken, effektiv zu kommunizieren und Geduld zu haben. Die Verwendung von Grok Bot besteht hauptsächlich aus Problemlösung.

Das fertige Asset

Außerdem habe ich jetzt ein langlebiges Asset, das ich wiederverwenden kann – wie ich es in diesem Beitrag getan habe:

Mein Asset für einen iPad-Ankündigungsbeitrag umfunktioniert

Ohne ein Verständnis dieses Formats hätte ich die iPad-Ankündigung nicht rechtzeitig machen können.

Die Rolle des Kreativen ist es, Emotionen zu wecken.

Grok Bot ermöglicht es mir, mich auf die Asset-Auswahl und Bildsprache zu konzentrieren, während es sich um alles andere kümmert.

Die häufigste Frage, die ich bekomme, ist "Wie kann ich Grok Bot nutzen?" – hier ist eine Möglichkeit, ihn für Design zu verwenden.