早上8點52分，John Bai還在健身房。他是SpaceXAI旗下Grok Bot團隊的設計師，工作內容就是用Grok Bot設計Grok Bot。這時Slack跳出同事的訊息，要他做一批社群用的設計素材。
John沒有回到電腦前，而是直接用手機把Figma裡兩張還在製作中的畫板截下來，再錄一段語音丟給自己的機器人Figma Bro。兩張截圖、一段語音，就是他交代工作的全部材料。
等他結束健身回頭看，Figma Bro已經交出三組產出。John甚至沒有逐一檢查，只把同事在Slack上的需求貼給它，要求核對是否有遺漏，最後收到一張完成項目的對照表。
這套工作流來自Claire Vo主持的podcast《How I AI》2026年9月14日節目。John Bai與同事Peng Zheng在節目中展示各自如何使用Grok Bot工作，John也曾把自己的方法寫成〈Designing Grok Bot with Grok Bot〉，並公開分享Figma Bro的機器人模板。
Grok Bot是什麼？SpaceXAI設計師把它變成Figma助手
Grok Bot是SpaceXAI推出的AI代理工具，每個Bot都有自己的雲端電腦，可以操作網站、應用程式與檔案，並透過Routine在使用者離線時持續執行任務。和一般聊天機器人不同，它不只回答問題，而是能實際操作工具，把一連串工作做到完成。
John把這種能力接進Figma，讓Grok Bot從「回答設計問題的AI」，變成能直接讀取檔案、修改畫板與批次處理素材的設計助手。
同樣一批圖示要配到十幾個版位上，多數設計師的做法是打開Figma，逐一複製、貼上、對位、換元件。John的做法是兩張截圖加一句話。差別不在機器人比較會做設計，而在他把規格交出去的方式。
Grok Bot如何操作Figma？關鍵是「截圖＋MCP」
機器人讀不懂「放在剛才那個位置」，卻看得懂一張已經對好位置的圖。截圖負責指出參考樣式與要動的範圍，精確的位置、尺寸與間距則由MCP直接讀Figma原檔。John在文章裡講得更白：檔案裡既有的畫板或元件才是依據。
Peng Zheng的說法是，這些零件其實都不新，地圖服務、影像生成、網頁渲染本來就存在，機器人真正做的是把點連起來。
Grok Bot × Figma實戰：6步驟建立AI設計工作流
第1步：連接Figma MCP，把固定規則寫進Grok Bot
先在機器人裡建立與Figma的MCP連線（可查Figma官方的MCP目錄），把要動的檔案連結交給它。接著是關鍵的一段：把排版規矩寫進機器人本身的指令，而不是每次下指令才交代。
John的要求是畫板橫向並排、依尺寸間隔50或100像素，人不在電腦前，回來才不會收到一個亂七八糟的檔案。下面這份範本不是John的原始模板，是依他在影片與文章裡提到的要求、加上幾條實務上會用到的規矩重建的，可以直接貼進指令欄再依需求增刪：
你是我的Figma助手，透過Figma MCP存取我給你的檔案連結。
固定規矩（每次都遵守，不必再問）：
1. 產出的畫板一律橫向並排，不要上下堆疊。
2. 畫板之間間隔50像素；畫板尺寸較大時間隔100像素。
3. 精確的位置、尺寸與間距以Figma原檔既有的畫板或元件為準，截圖只用來指出樣式與範圍。
4. 一次產出全部版本，完成後列一張表說明各版本做了什麼。
5. 任何一點不清楚，先問我，不要自己猜。
第2步：用兩張截圖告訴Grok Bot哪裡要改
回到健身房那一單。John截的兩張畫板，一張來自圖示庫，一張來自品牌書；前者是圖示已經擺好的樣子，後者是還沒配上圖示的那一組。他的語音指令大致如下：
情況是這樣，我給你一個Figma連結。
左邊這張截圖是幾個圖示，需要照完全相同的位置擺到每一個機器人旁邊。
第二張截圖是還沒有配上圖示的那一組。
請把圖示放大，照其他機器人的相同位置擺上去，
確保位置一致、放大後的比例也一致，讓我拿到完整的一整組。
有任何不清楚的地方，告訴我。
最後一句是整段指令裡最省時間的部分。把「不清楚就問」寫進去，等於要求機器人遇到歧義先確認，降低它自己猜一個版本做完的機會。
第3步：先做一個Figma樣板，再讓AI批次套用
錄影當天下午，John要為當天上線的機器人市集趕一批行銷素材。他先在Figma裡親手做好一個版本當樣板，連結丟給機器人：這是需求訊息、這是樣板，用品牌書裡的背景與桌布，比照這個樣式套用到其餘每一個。
省下的是逐一到各頁面抓圖、換元件、換底圖、換文案這一段。有幾張圖片沒更新完，他得回頭再催一次，但他在鏡頭前講的是另一件事：「我在開這通會的同時，工作正在完成。」
第4步：用語音改稿，一次只修改一件事
第一輪產出之後，John沒有進Figma手動調整，而是繼續用語音一次改一項：先整體放大，接著把邊角改圓，最後依回饋調顏色。一次一項的好處是每輪都看得出哪句指令造成哪個變化，出錯時不必整批重做。
第5步：讓Grok Bot先做可操作原型
John另外養了Devbot與Experiments兩個機器人，把臨時冒出來的互動點子直接做成原型。那天他傳進去兩張截圖和一段語音memo，描述想試的分享動畫。
機器人自己去找負責動態效果的另一個機器人Motion God討論轉場，還在測試用的程式碼庫裡重建了幾個元件。John幾乎沒有中途檢查，回來拿到兩個可以點的版本，最後都沒採用，覺得太像iOS截圖那一套。
主持人Claire Vo把這種做法稱為「垃圾桶開發法」：假設做出來的東西丟掉成本極低，就不必為了一個還不確定的點子，先去說服產品經理和排滿技術債的工程師。
第6步：出錯就讓Grok Bot記住修正方式
Peng Zheng的做法是每次把機器人導回正軌後，多加一句請它把這次的修正記起來，下次遇到同樣情況就照上次學到的做，用得愈久愈貼近自己的習慣。
Grok Bot還能做什麼？從網站發布到處理生活雜務
同集裡Peng Zheng把相同邏輯接到個人網站上，輸入從工作截圖換成生活素材，整套流程沒有內容管理系統，也沒有Figma檔：
- 打卡流程：傳照片、截圖或只打地名，機器人透過Google Places API找出地點與座標，再附一張朋友社群檔案的截圖就會補上同行的人
- 影像處理：同一張照片產出亮色與暗色兩版（網站切到深色時燈會亮起來）、修正透視、去掉路人、抽出建築立面，轉成3D微縮風格後寫成網站看得懂的資料結構直接發布
- 生活雜務：另一組機器人買3D列印線材並更新他在Notion的庫存清單，也從對話截圖直接排行事曆
Claire Vo在節目裡的那句話是這些流程的共同點：「我用AI是為了離開電腦，不是為了黏在電腦前。」她也提醒設計師，你的天職從來就不是在Figma裡調漸層。
先把規格變成看得見的東西，再把重複的那一段交出去。
資料來源：《How I AI》podcast、Designing Grok Bot with Grok Bot、Figma MCP目錄、Grok Bot官方頁
本文初稿為AI編撰，整理．編輯/ 李先泰
