人在健身房，設計照樣交件！SpaceXAI設計師公開Grok Bot工作流，如何2張截圖就改完Figma？
- 原文標題：人在健身房，設計照樣交件！SpaceXAI設計師公開Grok Bot工作流，如何2張截圖就改完Figma？
- 作者：李先泰（BusinessNext；本文初稿為 AI 編撰，整理．編輯／李先泰）
- 發布時間：2026-09-16T17:30:00+08:00（JSON-LD datePublished／dateModified）
- 來源：數位時代 BusinessNext
- 原始資料來源：Claire Vo《How I AI》podcast 2026-09-14 集（John Bai、Peng Zheng 各自展示工作流）、〈Designing Grok Bot with Grok Bot〉一文、Figma MCP 目錄、Grok Bot 官方頁
- 擷取方式：BusinessNext
NewsArticle.articleBodyJSON-LD；以下保留 JSON-LD 正文原始文字，不加入衍生摘要。 - Canonical URL：https://www.bnext.com.tw/article/92273/grok-bot-figma-screenshot-workflow
- 擷取時間：2026-09-16T09:55:16+00:00（direct HTTP GET，status 200、
Date: Wed, 16 Sep 2026 09:55:16 GMT、399,260 bytes）
原文擷取
早上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連結。左邊這張截圖是幾個圖示，需要照完全相同的位置擺到每一個機器人旁邊。第二張截圖是還沒有配上圖示的那一組。請把圖示放大，照其他機器人的相同位置擺上去，確保位置一致、放大後的比例也一致，讓我拿到完整的一整組。有任何不清楚的地方，告訴我。最後一句是整段指令裡最省時間的部分。把「不清楚就問」寫進去，等於要求機器人遇到歧義先確認，降低它自己猜一個版本做完的機會。John截的兩張畫板，一張來自圖示庫，一張來自品牌書；前者是圖示已經擺好的樣子，後者是還沒配上圖示的那一組。（圖／YouTube）第3步：先做一個樣板，再讓它套完其餘錄影當天下午，John要為當天上線的機器人市集趕一批行銷素材。他先在Figma裡親手做好一個版本當樣板，連結丟給機器人：這是需求訊息、這是樣板，用品牌書裡的背景與桌布，比照這個樣式套用到其餘每一個。省下的是逐一到各頁面抓圖、換元件、換底圖、換文案這一段。有幾張圖片沒更新完，他得回頭再催一次，但他在鏡頭前講的是另一件事：「我在開這通會的同時，工作正在完成。」第4步：改稿用語音，一次只改一件事第一輪產出之後，John沒有進Figma手動調整，而是繼續用語音一次改一項：先整體放大，接著把邊角改圓，最後依回饋調顏色。一次一項的好處是每輪都看得出哪句指令造成哪個變化，出錯時不必整批重做。第5步：想法先做成能點的原型，不必先過PMJohn另外養了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編撰，整理．編輯/ 李先泰
Source notes / claim ledger
- 來源分類： secondary synthesis（BusinessNext 依 Claire Vo《How I AI》podcast 2026-09-14 集、John Bai〈Designing Grok Bot with Grok Bot〉一文與 Figma MCP 目錄整理；文末自述初稿 AI 編撰）。
- 健身房案例（John Bai 在手機上以兩張 Figma 截圖＋語音指令交件、機器人交出三組產出並核對 Slack 需求）： partially-supported（podcast 第一方口徑，本輪未讀取影片原文；BusinessNext 正文直接轉述）。
- Figma Bro 為公開分享的機器人模板、John Bai 曾寫〈Designing Grok Bot with Grok Bot〉一文： partially-supported（文章 attribution，原文與模板本輪未讀取）。
- 「截圖指出樣式與範圍、MCP 讀 Figma 原檔取得精確位置尺寸」的分工原則： supported as article account（BusinessNext 正文直接陳述 John Bai 的做法；屬個人工作流描述非獨立研究）。
- 五步工作流（Figma MCP 連線＋固定排版規矩寫進指令、兩張截圖劃分「已做／未做」、樣板套用其餘版位、語音逐項改稿、Devbot／Experiments 原型與 Motion God 跨機器人討論）： supported as article account；其中「範本指令」為 BusinessNext 依影片與文章要求重建，非 John Bai 原始模板（正文已自述）。
- 「垃圾桶開發法」（Claire Vo 用語：丟掉成本極低就不必先說服 PM／工程師）： partially-supported（podcast 主持人用語，維持 attribution）。
- Peng Zheng 個人網站工作流（Google Places API 打卡、亮暗兩版影像處理、3D 列印線材採購與 Notion 庫存、對話截圖排行事曆）與「出錯就請機器人記下修正」做法： supported as article account。
- 「我用AI是為了離開電腦，不是為了黏在電腦前」（Claire Vo）： partially-supported（podcast 主持人引述）。
- 證據界線： 本輪未讀取《How I AI》podcast 影片、〈Designing Grok Bot with Grok Bot〉原文、Figma MCP 目錄或 Grok Bot 官方頁；所有 podcast 內容維持 BusinessNext attribution，無獨立 human verification。