Grok Bot の活用：Figma でのフォトモザイク作成

タイムラインで 3 枚のモザイク画像を見かけたことがあるかもしれません。以下は、@bot と @figma を使ってそれを作成する方法です。

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

デザイナーなら誰でも作り方はわかりますが、ちょっと面倒な作業です。

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

そこで私たちが問うべきは、「AI を使ってこの面倒さを 90% 削減し、デザインのクールでクリエイティブな部分に集中するにはどうすればいいか」です。

Grok Bot はまさにそれを実現できます。

「方法」に興味がなく、@bot のテンプレートだけ欲しい場合は、こちらから入手できます：https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

それ以外の方は、私がどのように構築したかを以下で説明します。

フォトモザイクの構築

Grok Bot に対する私の一般的なアプローチは、自分でアセットを作成する手順を分解し、@Bot にまったく同じことを実行するように指示することです。

この場合、ワークフローは Figma でのデザインでした。

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

これは、ヒーローアセットをコンポーネント化し、3 つのパネルに分割したキャンバスです。X 上の既存の投稿を見ることで、アスペクト比を逆解析できます。

私は Bot にまさにこれを実行するように依頼しました。以下が最適化した最初のプロンプトです。

Cursor Gothic、[画像へのリンク]、[ファイルを挿入] は、ご自身のアセットに置き換えてください。

1この投稿フォーマットを逆解析してください。これは、共有の背景上で 1 つのワイドスクリーンショットにつながる 3 枚の画像からなるフォトモザイクです。
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- 各パネルをフル解像度で取得し、アスペクト比を取得してください。
7
8- 3 つのエクスポートパネル（左 / 中央 / 右）を切り抜いてください
9
10- 添付ファイル [ファイルを挿入] 内に新しいデザインとして作成してください。1 つのセクションにまとめてください
11
12- 3 つのパネルすべてに新しい背景 [画像へのリンク] を設定してください。このアセットを使用し、参照投稿の背景は使用しないでください
13
14- ヒーロー：シミュレートされた 4K ディスプレイ（2× DPR）上の cursor.com のスクリーンショット。UI/テキストが遠くからでも読めるようにページをズームしてください。キャプチャが実際にランディングページ（ナビ + 見出し）であることを確認してください
15
16- ウィンドウに中央揃えのドロップシャドウと実際の角丸を適用。Web ページの上部の角はクリップ/マスクされたレイヤーが必要です。そうしないと四角く見えます
17
18- Arc スタイルのクローム：ダークな Cursor インクシェル、カラフルな交通信号、Cursor Gothic で中央揃えの URL。タイトルバー + URL テキストは高さに沿って配置。ページの周囲に均等なインセット L/R/B
19
20- コンポーネントを使用して Figma で整理し、1 回のペーストですべてのパネルが更新されるようにしてください。背景、ヒーロー（Arc）、マスター、およびマスターの 3 つのエクスポートクリップ
21
22背景またはヒーローを 1 回編集するだけでマスターと 3 つのエクスポートすべてが更新された時点で作業は完了です。

プロンプトを送信した後は、数分おきにボットを確認してください。うまくいっていない場合は、理由を尋ねてください。

ボットがオートレイアウトを適切に使用していないかもしれません。パディングがずれているかもしれません。ボーダー半径の微調整が必要かもしれません。

変更を加え、なぜその変更が必要だったかをメモし、それらの点を次のプロンプトに組み込んでください。

ボットが作業しているのを見守る

いくつかのメタ的なポイント：

• 正確な言葉を使っています。「3 つのやつが何かにくっついた絵の中の絵」ではなく「フォトモザイク」と呼んでいる点に注目してください
• フォトモザイクが何か知らなかったのですが、Grok に「3 枚の画像のコラージュを組み合わせて大きな画像にすることを何と呼ぶか」と尋ねました
• すべてのプロンプトは初心者の考え方から始めるべきです。これをうまく行うために必要なことをすべて学ぶにはどうすればよいか？
• 最初の試みは完璧ではありませんでした。上記のプロンプトにたどり着くために、Grok Bot に「最初からこれを正しく行うために、事前に何が必要だったか教えて」と尋ねました
• 常に「このワークフローを複製するにはどうすればよいか、または次回は AI がすべてを実行できるようにするにはどうすればよいか」を考えてください。これは @poteto が強く強調している点です
• これには専用のボットは使用しませんでした。Figma に接続された汎用のボットだけです。1 回限りならそれで十分ですが、繰り返しのタスクにはおそらく専用のものを作成するでしょう

Grok Bot は AI を効果的に使用することだけではありません。コンピューターを効果的に使用する方法についてです。

つまり、第一原理思考、効果的なコミュニケーション、そして忍耐力が必要です。Grok Bot を使用することは、主に問題解決についてです。

完成したアセット

さらに、この投稿で行ったように、再利用可能な耐久性のあるアセットも手に入りました。

iPad 発表投稿用にアセットを再利用

このフォーマットを理解していなければ、iPad の発表をタイムリーに行うことはできなかったでしょう。

クリエイティブの役割は感情を呼び起こすことです。

Grok Bot は、アセットの選択とイメージに集中できるようにし、それ以外のすべてを処理してくれます。

最もよく受ける質問は「Grok Bot をどのように使えばいいですか」というものです。ここでは、デザインに使用する 1 つの方法を紹介しました。