# 使用 Grok Bot 設計 Grok Bot

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：John Bai (@johnbai) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥 · 日期：2026-08-25

> 原始來源：https://x.com/johnbai/status/2092019324797989023

## 證據與延伸閱讀

- [# 使用 Grok Bot 設計 Grok Bot](https://x.com/johnbai/status/2092019324797989023)
- [Bot 介面探索的的三種版本](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787640861108-s80abloa.mp4)
- [Figma Bro 透過 MCP 檢查實際檔案](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/641a8fdfc4762615.jpg)

## 中文摘要

# 使用 Grok Bot 設計 Grok Bot

在 SpaceXAI，我們正在打造能把一個想法化為現實、並立即開始動手實作的 Agent。對設計師來說，這也改變了什麼值得探索。

設計一直都是替想法賦予形體的過程：做出一些東西、對它做出反應，再持續修改，直到它開始讓人覺得對了。當製作變得更容易，我們就能探索更多方向、更早做出反應，也能讓想法自己揭示它想成為什麼，而不是在開始之前就先替它下定義。

我一直在用 Grok Bot 設計 Grok Bot。雖然它還沒有取代我工具箱裡既有的工具，但使用 AI design agents 已經改變了兩件事：我能多快讓一個想法成形，以及一開始我願意探索多少想法。

Grok Bot 為我提供一支隨時待命、各自擁有電腦的 AI design agents 團隊。它們具備記憶、能使用工具，也能把工作從最初的想法一路推進到完成的成果。即使我暫時離開電腦，它們也會繼續工作；這一點很重要，因為靈感往往不是在我坐在書桌前時出現。

## 認識我的 Bots

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787640861108-s80abloa.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/641a8fdfc4762615.jpg" autoplay loop muted playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 顯示 Figma、DevBot、Motion God 與 Experiments 四個 Bot 卡片的介面

Figma Bro 負責在 Figma 中處理重複性的製作工作。Motion God 會根據我描述的互動感受，協助我製作 prototype。Experiments 是我用來丟入各種想法的地方；我想先把它們具體做出來，即使還不知道它們最後究竟會成為什麼。Devbot 回答工程問題，也幫助其他 Bots 理解一個想法實際上應該如何建構。

這些名稱讓每個 Bot 的角色一目瞭然，但它們並不是各自獨立運作。我的 design agents 可以彼此 huddle、分派專案中的部分工作，再把成果整合回來。以下是最近的三個例子。

## Experiments：你就是可以直接動手做

最早期我想探索的想法之一，是如何讓 Bots 隨時隨地都能被使用。我想嘗試鍵盤快速鍵、作業系統層級的進入點，以及其他呼叫 Bot 的方式，因此我請 Experiments 建立一系列關於環境式 Bot 存取方式的探索。

第一個版本把 Bot 放進 Mac 的瀏海。它可以在工作時一直收在固定位置，需要注意時再現身；當我想查看更多內容時，則展開成一個小型 workspace。這讓 Agent 擁有了一個歸屬的位置，也不必要求我一直開著另一個視窗。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787640957246-8plee0zy.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/5e25056f89846c72.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> macOS 桌面上的 Grok Bot 選單與 Figma 對話介面

第二個版本讓 Bot 在滑鼠移到桌面角落時探出頭來。這感覺比較不像一個持續存在的介面，更像是一個角色：當它被呼叫，或有話想說時，才進入畫面。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787640969023-s5sf0xd6.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e3f3e53173c237d4.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 顯示 Grok Bot 訂閱定價方案與檔案管理視窗的介面畫面

第三個版本讓 Bot 像夥伴一樣跟著游標移動，和我當下正在做的事情建立更緊密的連結。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787640986038-5b9uvt6d.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/9e1dab85ab767994.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 搭配瀏覽器分頁與定價表介面的 Grok Bot 互動操作與 Slack 訊息整合畫面

我向 Experiments 描述這些行為後，它自行想辦法把每一個想法具體做出來。它把角色移動與轉場交給 Motion God，把桌面行為與實作問題交給 Devbot，接著再把所有成果整合成不同完成度的 prototype，讓我真的可以親自試用。

這就是為什麼我會特別保留一個 Agent 給 Experiments。我不需要在把想法做出來、讓它足以接受評估之前，先決定它是否合理、可行，或注定會被列入 roadmap。這些概念最後沒有一個完全按照探索時的樣子上線，但那其實不是重點。我有一個想法，做出了三個實際版本，並從每個版本中學到東西。你就是可以直接動手做。

## Motion God：直接和真實成果一起工作

過去，動態通常是我會把想法交給團隊專家的部分。我可以描述行為，或做出幾個關鍵影格的 mockup，但在我能對它做出反應之前，還是得由其他人先把它真正做出來。有了 Motion God，我可以留在探索迴圈中，憑感覺指揮互動。

作為一個 email campaign 的一部分，我想製作 Grok Bot 角色的 promotional video prototype。這段流程相當明確：Bot 出現、注意到應用程式視窗，然後彈跳到定位。

![紫色圓形圖示與帶有紅黃綠控制按鈕的白色視窗的動畫演示](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e0c8b26247525ea7.jpg)
> 三張連續的黑底圖顯示一個帶有兩道黑色圓角直條的紫色圓形圖示逐漸縮小並向上移動，同時下方浮現一個白色視窗邊框。

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為三個連續排列的橫向黑底圖格，呈現一個帶有紫色圓形圖示（內含兩道黑色直條）與一個具備紅、黃、綠三色控制按鈕的白色視窗之動畫過程。
- 第一格：紫色圓形圖示較大，位於中央偏右；白色視窗僅露出頂部邊緣與三個控制按鈕，位於下方。
- 第二格：紫色圓形圖示縮小並往右上移動；白色視窗向上位移，露出更多視窗範圍。
- 第三格：紫色圓形圖示位於白色視窗內側的左上角；白色視窗完整呈現於黑色背景中央。</div></details>

我不希望 design agent 根據螢幕截圖重新創造角色，或生成一個近似版本。我希望它使用產品中已經存在、也已經在產品裡移動的同一個 asset。因此，我讓 Motion God 根據實際的 animation spec file，在 localhost 上建立一個 playground。這樣一來，我就能在動畫執行時手動調整時間、彈簧、距離、縮放與 easing。

但我也發現，自己常常會給出簡短、用來比較的回饋：「左下方的視線維持久一點。」「彈跳太誇張了。」Motion God 會做出修改，而我可以立即重新觀看整段流程。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1787641000551-g7jiw500.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/c6ebdd3b9bff2052.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Chief of Staff 應用程式介面顯示左側對話清單與右側對話檢視區

這更接近我自然設計動態的方式。在看到轉場之前，我通常不會憑空知道它應該花 280 還是 340 毫秒。但我知道該怎麼描述它，也知道什麼時候感覺剛剛好。

有趣的地方不在於我的 Bot「製作了一段動畫」，而在於我可以給它一個真正用於 production 的 asset，並在它周圍建立一個可運作的環境。我可以透過確定性的控制項直接微調動態，也可以繼續用我和人類協作者溝通時會使用的相同語言來指揮 Motion God。

## Figma Bro：處理重複工作

在 Grok Bot 的 onboarding flow 中，我們希望展示一些 starter Bots，讓新使用者一開始就能交給它們處理任務。我們在內部徵集了一份想法清單，例如「Chief of Staff」和「Inbox Triage」。我拿到一份包含 20 個描述的清單，還需要為每個描述製作具有區別性的肖像與支援屬性。我在 Figma 中建立了一個 auto-layout component，然後請 Figma Bro 填入其餘內容。

![一名男士的輸入範例與 Figma Bro's output 產生的多個項目清單比較](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/c20b7715d3472f8c.jpg)
> 顯示 Figma Bro 輸出結果與使用者輸入介面的對比圖，左側列出帶有頭像與描述輸入欄位的表單，右側則以 12 張帶有不同色彩圓形圖示與文字說明的清單卡片展示多種具名助理功能（如 Chief of Staff、CRM Scribe、Competitor Watch 等）。

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">左側標題為「我的輸入」，下方卡片包含：- 名稱 - 描述、2 行文字，之後截斷。右側標題為「Figma Bro 的輸出」，下方包含 12 個項目卡片：1. 幕僚長 讀取明天的行事曆，準備早晨摘要 2. 客戶關係管理記錄員 寫通話筆記、更新欄位、草擬後續追蹤 3. 競爭者觀察員 監控競爭者網站與定價，向你簡報... 4. 每週回顧
將上週的數據整理成包含通訊的報告... 5. 收件匣分類 整理電子郵件、草擬回覆、找出緊急事項 6. 應徵者篩選器 將新的應徵者分類為強健、考慮中與不錄取 7. 立會記錄員 發布關於已交付項目與受阻項目的每日摘要 8. 清單豐富器 為任何公司或人員清單填補缺少的詳細資訊 9. 承諾追蹤器
追蹤你承諾的事項以及別人欠你的款項10. 發票追蹤器追蹤未付發票、草擬提醒通知、標記wh...11. 資料輸入專員將收據、PDF 與門戶網站轉換為電子試算表...12. 回饋探勘器將客服單、通話紀錄與評論分群整理成核心主題</div></details>

我們也想了解新使用者正在使用哪些工具，讓他們的第一個 Bot 能具備相關 context。我建立了頁面版型 template，再讓 Figma Bro 去搜尋正確的 asset，並依照使用可能性排序放置。

![展示使用者輸入與其輸出結果介面的比較畫面](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/7fd4ff64f4525e20.jpg)
> 左側為使用者輸入每日使用工具的問卷介面，右側則並列顯示名為 Figma Bro's output 的工具清單（包含 Trello、monday.com、ClickUp 等多項常用生產力與協作軟體）。

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">上方左側標示有頭像與「My input」，右側標示有圖示與「Figma Bro's output」。左側視窗內容：標題為「What do you use every day?」下方有一個搜尋列「Q Search」。下方有多個選項方塊（部分被勾選或未勾選）：Workspace（帶有勾選框）、Slack、Notion、Salesforce、Microsoft 365、LinkedIn、Trello、monday.com、ClickUp、Figma、HubSpot、Canva。下方有兩個按鈕：「Next」、「Back」。右側清單內容（依序排列）：第一欄：Trello、Intercom、Dropbox、Loom、Apollo、Nooks、QuickBooks、Workday。
第一欄：Greenhouse、Hex、Snowflake。第二欄：monday.com、Zendesk、DocuSign、Outreach、Clay、Stripe、NetSuite、Rippling、Vercel、Amplitude、Databricks。第三欄：ClickUp、Box、Calendly、Salesloft、ZoomInfo、Shopify、Ramp、Ashby、Tableau、Mixpanel、Mailchimp。</div></details>

這些任務在創意上並不困難，但會消耗創意注意力。它們也是各種小不一致開始被放大的地方：錯誤的 logo 版本、過時的 component、從不同來源抓來的肖像，或是第十張卡片的間距和第一張不同。

我不希望 Figma Bro 靠目測處理這些事情。透過 Figma MCP，它可以檢查實際檔案，並使用精確的 x 與 y 位置、寬度、高度、間距、字體排版、填色、筆畫和 component 結構。如果已經存在某個 frame 或 component，那它就是唯一的真實來源。

這一切並沒有讓設計變成一次完成的流程，而是讓迴圈變得更緊密。透過 AI design agents，我可以更早把想法帶進真實世界，以更高的保真度做出回應，也能把更多注意力放在不同版本之間的判斷上。Grok Bot 並沒有取代這種判斷，它只是提供更多使用這種判斷力的機會。

如果你是設計師，就把下一個想探索的想法交給 Grok Bot，看看它會帶回什麼。試試 Grok Bot，然後讓我看看你做出了什麼。

## 媒體內容

**macOS 桌面上的 Grok Bot 選單與 Figma 對話介面**

**影片中的 Prompt 與操作**

Prompt（00:06）：

```
清理我的圖層
```

原文：clean up my layers

操作步驟：

1. （00:01）點擊圓形選單圖示
2. （00:05）點擊下方輸入框
3. （00:06）輸入指令
4. （00:07）送出並開啟對話與歷史紀錄面板

**顯示 Grok Bot 訂閱定價方案與檔案管理視窗的介面畫面**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）游標移動至右側檔案視窗下方並懸停

**搭配瀏覽器分頁與定價表介面的 Grok Bot 互動操作與 Slack 訊息整合畫面**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:02）點擊 Slack 通知選單
2. （00:06）在底部輸入框點擊並準備回覆

## 標籤

Agent, AIGC, 新產品, SpaceXAI, Grok