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