<!-- grokbot.tw · 非 SpaceXAI／xAI 官方文件 · 步驟以你畫面為準 · 來源：https://grokbot.tw/guides/official-design-zh/ -->

# 用 Grok Bot 做設計：探索、正式資產、判斷留在人

> 把設計工作流拆成探索實驗、動效調校與 Figma 產製，Bot 加速試錯，版本取捨仍由人決定。

## 來源

根據官方指南《[Designing Grok Bot with Grok Bot](https://x.ai/bot/guides/designing-grok-bot-with-grok-bot)》（約 2026-08-24，作者 John Bai）重寫。完整示範與影片請看原文；畫面、連線名稱與權限以你當下 App 為準。

若還沒裝好，先看 [從零上手](https://grokbot.tw/guides/getting-started-tw/)。

## 這套工作流在解什麼

設計常卡在「想法還沒成形，卻要先排進時程」。原文作者用多隻 Grok Bot 分工，讓探索變便宜、產製變重複可驗，同時把「哪一版該進產品」留在自己手上。本篇抽出可套用步驟，給台灣設計／產品設計讀友。

請把三件事分開想，比較好養 Bot：
1. **探索**：想法還沒進 roadmap，先做成可點、可感受的原型，再決定要不要繼續。
2. **正式資產**：動效、角色、元件用產品裡真實的檔案與規格，少靠截圖重畫或近似生成。
3. **判斷在人**：Bot 可以平行做出多版本；哪一版幫助、干擾、或兩者之間，仍要你自己看完才定。

專名如 Figma、MCP、localhost 可留英文。

## 建議的四種角色（可合併）

官方案例裡大致是這四席，名字可自訂，職責請寫進每隻 Bot 的說明：
| 角色 | 負責 | 刻意不做 |
| --- | --- | --- |
| Experiments | 把模糊想法做成可試原型 | 不直接改正式設計系統 |
| Motion | 依感受調 timing、spring、easing | 不擅自換成近似角色檔 |
| Figma 產製 | 依既有 component／auto-layout 大量填卡、擺 logo | 不「目測」對齊或另開一版元件 |
| Devbot | 回答實作邊界，幫其他 Bot 對齊能怎麼做 | 不替你下產品決策 |

重點是**可互相交辦、再合回來**。例如 Experiments 描述行為，Motion 負責角色動線，Devbot 回答桌面行為能不能做，最後合成你真能開整天試用的原型。

## 探索：先做成兩到三種版本再評

原文舉「隨時叫出 Bot」的 ambient 入口：Mac notch 常駐、游標角落探頭、跟著游標當伴。重點不在這三個 UI 一定要做，而在流程：
1. 用一句話寫行為目標（例如「工作中可瞥見進度，又不佔一整窗」）。
2. 交給 Experiments，要求至少兩到三種可互動原型，並註明各自要交辦給誰。
3. 你在真實一天裡碰到它們：何時有幫助、何時分心，寫三行筆記即可。
4. 多數探索不會原樣上線；目的是學到感覺，再決定下一輪要收斂哪一條。

給 Bot 的繁中交辦範例：
> 這是一個尚未定案的探索。請做出三種「快速叫出助手」的桌面原型，說明各自優缺。動效交 Motion，實作可行性問 Devbot。不要改我正式 Figma 檔；做完給我可開啟的預覽與簡短比較表。

## 動效：圍著正式資產開 playground

常見做法是截圖重畫角色，結果 timing 對了、資產卻對不上產品。原文做法比較接近「導演＋技術指導」：
1. 把產品正在用的 animation spec／角色檔交給 Motion Bot。
2. 請它在 localhost（或你慣用的本機預覽）圍著該檔開可調 playground：duration、spring、距離、縮放、easing 可手動調，也可口頭改。
3. 你用比較句下指令：「往左下看的停頓再長一點」「彈跳太誇張」。改完立刻重播整段。
4. 你常常無法事先說死 280ms 或 340ms；看過才知道對不對。Bot 負責改與重播，你負責說「感覺對了」。

停止線：沒有授權的正式資產庫、或公司規定不准把品牌角色丟上雲端電腦時，先用公開樣板練習流程，勿硬接正式檔。

## Figma：重複產製交給「讀得到檔」的 Bot

適合交接的工作通常長這樣：已有 auto-layout component，要依 20 筆說明填頭像與屬性；或版面模板已定，要依使用率排序放工具 logo。這類事耗創意注意力，小不一致又會放大（錯版 logo、舊 component、間距漂掉）。

可照做步驟：
1. 你先做好**一個**正確的 component／頁面模板，當唯一真相來源。
2. 確認 Figma 連線（文件常寫 MCP／connector；以你畫面為準）能讀到該檔的座標、間距、字級、填色與 component 結構。
3. 交辦時寫死：「以現有 frame／component 為準，禁止另開近似元件；填完後列出變更清單給我抽查。」
4. 你抽查第 1、第 10、最後一張卡，比對間距與變體名稱。

## 個人／小團隊縮小版 checklist

- [ ] 至少兩隻 Bot：一隻「探索／實驗」，一隻「產製／Figma」；需要再加 Motion 或 Dev。
- [ ] 每隻說明寫清楚職稱、可碰哪些檔、禁止改什麼。
- [ ] 探索任務要求「多版本＋可試」，上線決策自己留著。
- [ ] 動效與角色優先接正式資產；接不上就降級用樣板，並在交辦裡註明。
- [ ] Figma 任務先有正確母元件，再批量；Bot 回報後你抽樣驗收。
- [ ] 寄出、發布、覆寫共用元件庫、推正式環境：一律你核可後再做。
- [ ] 同一帳號下多隻 Bot 常共用雲端電腦與登入狀態；分工方便，不代表資安隔離。

## 你真正省下的是什麼

迴圈變緊：想法較早進世界、回饋較高擬真、注意力多花在版本之間的判斷。Grok Bot 增加你能評的版本數；取捨仍是設計職能本身。

下一步：挑一個本週卡住的小靈感，用上面的探索交辦跑一輪，再決定要不要接 Figma 產製。細節與示範影片以[官方原文](https://x.ai/bot/guides/designing-grok-bot-with-grok-bot)為準。

## 來源
- 本頁：https://grokbot.tw/guides/official-design-zh/
- 原文／公告：https://x.ai/bot/guides/designing-grok-bot-with-grok-bot