用 Grok Bot 做設計:探索、正式資產、判斷留在人
把設計工作流拆成探索實驗、動效調校與 Figma 產製,Bot 加速試錯,版本取捨仍由人決定。
本頁目錄
來源
根據官方指南《Designing Grok Bot with Grok Bot》(約 2026-08-24,作者 John Bai)重寫。完整示範與影片請看原文;畫面、連線名稱與權限以你當下 App 為準。
若還沒裝好,先看 從零上手。
這套工作流在解什麼
設計常卡在「想法還沒成形,卻要先排進時程」。原文作者用多隻 Grok Bot 分工,讓探索變便宜、產製變重複可驗,同時把「哪一版該進產品」留在自己手上。本篇抽出可套用步驟,給台灣設計/產品設計讀友。
請把三件事分開想,比較好養 Bot:
- 探索:想法還沒進 roadmap,先做成可點、可感受的原型,再決定要不要繼續。
- 正式資產:動效、角色、元件用產品裡真實的檔案與規格,少靠截圖重畫或近似生成。
- 判斷在人: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 一定要做,而在流程:
- 用一句話寫行為目標(例如「工作中可瞥見進度,又不佔一整窗」)。
- 交給 Experiments,要求至少兩到三種可互動原型,並註明各自要交辦給誰。
- 你在真實一天裡碰到它們:何時有幫助、何時分心,寫三行筆記即可。
- 多數探索不會原樣上線;目的是學到感覺,再決定下一輪要收斂哪一條。
給 Bot 的繁中交辦範例:
這是一個尚未定案的探索。請做出三種「快速叫出助手」的桌面原型,說明各自優缺。動效交 Motion,實作可行性問 Devbot。不要改我正式 Figma 檔;做完給我可開啟的預覽與簡短比較表。
動效:圍著正式資產開 playground
常見做法是截圖重畫角色,結果 timing 對了、資產卻對不上產品。原文做法比較接近「導演+技術指導」:
- 把產品正在用的 animation spec/角色檔交給 Motion Bot。
- 請它在 localhost(或你慣用的本機預覽)圍著該檔開可調 playground:duration、spring、距離、縮放、easing 可手動調,也可口頭改。
- 你用比較句下指令:「往左下看的停頓再長一點」「彈跳太誇張」。改完立刻重播整段。
- 你常常無法事先說死 280ms 或 340ms;看過才知道對不對。Bot 負責改與重播,你負責說「感覺對了」。
停止線:沒有授權的正式資產庫、或公司規定不准把品牌角色丟上雲端電腦時,先用公開樣板練習流程,勿硬接正式檔。
Figma:重複產製交給「讀得到檔」的 Bot
適合交接的工作通常長這樣:已有 auto-layout component,要依 20 筆說明填頭像與屬性;或版面模板已定,要依使用率排序放工具 logo。這類事耗創意注意力,小不一致又會放大(錯版 logo、舊 component、間距漂掉)。
可照做步驟:
- 你先做好一個正確的 component/頁面模板,當唯一真相來源。
- 確認 Figma 連線(文件常寫 MCP/connector;以你畫面為準)能讀到該檔的座標、間距、字級、填色與 component 結構。
- 交辦時寫死:「以現有 frame/component 為準,禁止另開近似元件;填完後列出變更清單給我抽查。」
- 你抽查第 1、第 10、最後一張卡,比對間距與變體名稱。
台灣個人/小團隊縮小版 checklist
- 至少兩隻 Bot:一隻「探索/實驗」,一隻「產製/Figma」;需要再加 Motion 或 Dev。
- 每隻說明寫清楚職稱、可碰哪些檔、禁止改什麼。
- 探索任務要求「多版本+可試」,上線決策自己留著。
- 動效與角色優先接正式資產;接不上就降級用樣板,並在交辦裡註明。
- Figma 任務先有正確母元件,再批量;Bot 回報後你抽樣驗收。
- 寄出、發布、覆寫共用元件庫、推正式環境:一律你核可後再做。
- 同一帳號下多隻 Bot 常共用雲端電腦與登入狀態;分工方便,不代表資安隔離。
你真正省下的是什麼
迴圈變緊:想法較早進世界、回饋較高擬真、注意力多花在版本之間的判斷。Grok Bot 增加你能評的版本數;取捨仍是設計職能本身。
下一步:挑一個本週卡住的小靈感,用上面的探索交辦跑一輪,再決定要不要接 Figma 產製。細節與示範影片以官方原文為準。