你可能已經在時間軸上看過一些三格拼貼圖。以下是如何透過 @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
這只是一個包含主要素材的畫布，將其元件化並分割成三個面板。我們可以透過查看 X 上現有的貼文來逆向工程出長寬比。
我要求 Bot 完全做到這一點——以下是我優化後的第一個提示。
將 Cursor Gothic、[圖片連結] 和 [插入檔案] 替換成你自己的素材。
1逆向工程這個貼文格式——這是一個由三張圖片組成的照片拼貼，它們在共享背景上拼接成一張寬螢幕截圖。23https://x.com/kazarov_d/status/20944703138621361454https://x.com/studiobakers/status/209507763763926229556- 以全解析度擷取每個面板，並取得長寬比。78- 裁切三個匯出面板（左 / 中 / 右）910- 在附加檔案 [插入檔案] 中建立一個新的設計——將其保留在同一個區段1112- 在所有三個面板上建立新的背景 [圖片連結]——使用這個素材，而不是參考貼文的背景1314- 主要素材：在模擬的 4K 顯示器（2 倍 DPR）上截取 cursor.com 的螢幕截圖。放大頁面，讓 UI/文字在遠處也能閱讀。確認擷取到的確實是登陸頁面（導覽列 + 標題）1516- 在視窗上加入置中陰影 + 真實的圓角。網頁頂端角落需要一個裁剪/遮罩圖層，否則看起來會是方的1718- Arc 風格的 Chrome：深色 Cursor 墨色外殼、彩色信號燈、置中 URL 使用 Cursor Gothic 字體。標題列 + URL 文字應貼合高度。頁面周圍的內縮（左/右/下）要相等1920- 在 Figma 中使用元件組織，這樣一次貼上就能更新所有面板——背景、主要素材（Arc）、主版，以及三個主版的匯出片段2122當編輯背景或主要素材一次就能更新主版和所有三個匯出內容時，你的工作就完成了。
發送提示後，每隔幾分鐘檢查一下你的 Bot——如果事情進展不順利，就問為什麼。
可能是 Bot 沒有正確使用自動佈局。可能是內距不對。可能是某個邊框半徑需要調整。
進行修改，記下為什麼需要這個修改，然後將這些內容整合到你的下一個提示中。
看著我的 Bot 運作
幾個後設重點：
- 我使用了精確的語言。請注意我稱之為「照片拼貼」，而不是「一個東西裡面的三個小東西」
- 我原本不知道什麼是照片拼貼，但我問了 Grok：「把三張圖片拼成一個更大圖片的拼貼叫什麼？」
- 每個提示都應該從初學者的心態開始——我如何學習做好這件事所需的一切？
- 我的第一次嘗試並不完美。我是透過問 Grok Bot「告訴我你一開始需要什麼才能第一次就做對」來反推出上面的提示
- 永遠要問：「我要如何複製這個工作流程，或確保 AI 下次能完成所有事情？」這是 @poteto 非常強調的一點。
- 我沒有為此使用專門的 Bot——只是一個連接到 Figma 的通用 Bot。對於一次性任務，這樣就夠了，但對於重複性任務，我可能會建立一個專門的 Bot。
Grok Bot 不僅僅是關於有效使用 AI——更是關於如何有效使用電腦。
這意味著要有第一性原理思維、有效溝通，以及保持耐心。使用 Grok Bot 主要是在解決問題。
完成的素材
此外，我現在有一個可以重複使用的持久素材——就像我在這篇貼文中做的那樣：
將我的素材重新用於 iPad 發表貼文
如果沒有理解這個格式，我就無法及時製作出 iPad 發表貼文。
創作者的角色是喚起情感。
Grok Bot 讓我能專注於素材選擇和圖像，而它負責處理其他所有事情。
我最常被問到的問題是「我該如何使用 Grok Bot」——這裡有一個將它用於設計的方法。
