設計師幹掉工程師？Grok Bot 設計師的 AI Agent 工作流實錄

> Meta Shift

---

開場

Peng Zheng 坐在健身房裡，拿出手機拍了一張他剛到的咖啡廳。

照片傳出去，幾分鐘後，他的個人網站自動更新了 — 新的地點、新的照片、連版面都排好了。沒有開 Figma，沒有碰 CMS，沒有叫工程師。

這不是 demo 影片裡的幻術。這是他日常更新作品集的方式。

同一時間，他的同事 John Bai 在做類似的事：在健身房用語音備忘錄，口述他對某個 Figma 元件的修改需求，透過 MCP connection 傳給他設定好的 Figma Bro bot，等他做完深蹲回來，設計稿已經動過了。

這兩個人都是 SpaceXAI 旗下 Grok Bot 團隊的設計師，每天在做的事情之一，就是讓自己不需要坐在電腦前面也能把設計工作推進。

你可以說這只是「很會用工具的設計師」，但我覺得這個 framing 有點弱。更準確的描述是：職涯的 role boundary 正在被這些人主動打穿。他們沒有轉職，但他們在做的事情，三年前需要一個 PM + 一個前端工程師才能完成。

---

背景脈絡

Grok Bot 是 xAI（Elon Musk 創辦的 AI 公司）旗下的 AI agent 產品。xAI 在 2024 年完成了 60 億美元的 B 輪融資，估值來到 240 億美元，是目前 AI 新創裡估值最高的幾家之一（來源：Reuters）。

Grok Bot 作為產品本身，定位跟 ChatGPT 或 Claude 的 custom GPT / Projects 功能類似，但更強調 bot marketplace 生態系 — 用戶可以建立自己的 bot、分享給別人、也可以直接用別人建好的 bot。John 就在 marketplace 上分享了他的 Figma Bro bot template，供其他設計師直接套用。

設計師會用 AI 工具這件事本身不新鮮。Figma AI、Adobe Firefly、Midjourney，各種工具都在往這個方向走。但大部分的「設計師用 AI」停留在 asset generation — 生個圖、改個顏色、做個 mockup。

John 和 Peng 做的不是這個。

他們在做的是用 AI Agent 取代整個工作流程的中間層 — 不是加速某個步驟，而是把本來需要人工協調的環節（跟工程師溝通、更新 CMS、管理 Figma 版本）整個接管掉。

這背後有個更大的趨勢作為脈絡：AI coding tool 的成熟，讓「不會寫 code 的人也能建東西」這件事從口號變成可以操作的現實。Cursor、Replit、v0 這些工具在過去一年把門檻拉得很低，但設計師這個族群通常被忽略 — 大家預設「設計師要的只是 UI 生成」。

John 和 Peng 的案例說明，至少有一部分設計師，已經越過那條線了。

---

關鍵決策與轉折

來講三個具體的 workflow，每個都是一個微型的角色邊界突破。

Peng 的自我更新網站

Peng 的個人網站沒有 CMS，也沒有 Figma 設計稿。整個 backend pipeline 就是 Grok Bot。

他設定了一個「check-in bot」，串接 Google Places API 和 Swarm（Foursquare 的 check-in app）。他的操作是：拍一張照片，或者單純傳一個地點名稱，bot 就會處理剩下的事 — 解析位置、抓取相關資訊、更新網站內容、排版。

這個架構的 trade-off 很明顯：彈性換來了維護成本的轉移。傳統的 Webflow + CMS 方案更穩定，出問題也比較好 debug，有大量文件可以查。但 Peng 選擇把這個複雜度交給 AI Agent 處理，換來的是「不需要打開任何編輯介面就能更新內容」這個體驗。

對一個設計師來說，這個 trade-off 是合理的 — 因為他不想花時間在內容管理上，他想花時間在設計上。工具的目的是消滅摩擦，這個方案做到了。

John 的 Figma Bro Bot

John 把 Figma MCP server 接進了他的 Grok Bot workflow。MCP（Model Context Protocol）是 Anthropic 提出的標準，讓 AI model 能夠直接跟外部工具溝通，目前 Figma 已經有官方的 MCP catalog 支援。

John 的做法是錄語音備忘錄，描述他想對 Figma 做的修改：「把這個 button 的 padding 改一下」「把這個 section 的間距調整成跟 design system 一致」，然後 Figma Bro 去執行。

他在 podcast 裡提到，這個 bot 是他「在健身房時的 production design 工具」。重點不在他能做什麼，而在他不在電腦前也能推進工作這件事本身。

從工程師的角度看，這其實就是一個有 tool use 能力的 AI agent 接了一個設計工具的 API。技術上沒有太多新鮮的東西。但它解決的問題是真實的 — 設計師的工作跟工程師一樣，有很多「小到不值得專門坐下來開電腦，但又不能忽略」的任務。這個 workflow 把那些任務處理掉了。

DevBot：從洗澡想法到可互動 Prototype

這個我覺得是三個裡面最有意思的。

John 提到他有一個叫 DevBot 的 bot，專門用來測試互動想法。流程是：他在洗澡或健身時想到一個 interaction concept，直接口述給 DevBot，DevBot 幫他做出一個可以點的 prototype。

這件事的關鍵在於他說的一句話：「不需要先過 PM 或工程師」。

傳統的設計流程，從 idea 到 prototype，中間有很多協調成本 — 你需要說服 PM 這個值得試、你需要工程師幫你做出來、你需要排 sprint。整個流程少則幾天，多則幾週。

John 的 workflow 把這個壓縮到幾分鐘。他管這個叫 「trash can method」 — 快速做出來、試一試、不行就丟掉，成本低到可以接受高失敗率。

這讓我想到的是工程師用 Cursor 做 side project 的體驗 — 那種「想到就做」的即時反饋循環，以前是工程師的特權，現在設計師也有了。

---

Meta 判讀

我把這件事歸類為 Meta Shift，而不是 Patch Note。

Patch Note 的特徵是量的改變：工具更快了、更準了、更便宜了。Design 工具加 AI 功能，大部分都是 Patch Note。

Meta Shift 的特徵是角色關係的改變：誰能做什麼事、誰依賴誰、誰可以被繞過。

John 和 Peng 的案例是 Meta Shift，因為他們展示的不是「設計師做設計更快了」，而是「設計師開始做以前不屬於他們的事」。Prototype 原本是工程師的領域，內容更新原本是 CMS + 後端的領域，Figma 批次操作原本是設計師坐在電腦前才能做的事。

這跟 2010 年代「全端工程師」崛起有點像 — 那時候 frontend 和 backend 的邊界開始模糊，full-stack 成為主流。現在發生的事情是類似的，只是這次 design 和 engineering 的邊界在模糊。

歷史上每次這種 role boundary 的模糊，都會先帶來恐慌（「設計師要取代工程師了！」），然後達到一個新的平衡 — 不是誰取代誰，而是每個角色能做的事情集合擴大了，分工的邊界重新劃定。

但這個重新劃定的過程，對特定族群是有威脅的：那些只做「中間層協調」的角色。

---

對讀者的啟發

如果你是工程師，Peng 的網站 pipeline 你看完大概會有點無聊 — 技術上沒什麼難的，Google Places API + 一個有 tool use 的 LLM，這誰都能做。

但這不是重點。

值得注意的是：以前這種東西，設計師不會做。不是因為他們不夠聰明，是因為門檻在那裡，他們不想花時間學。現在門檻消失了，他們就做了。

如果是我，我會開始認真想一個問題：我現在的工作裡，有多少部分的核心價值是「協調」和「翻譯」，而不是「建造」本身？

PM 跟工程師之間的翻譯？設計師跟工程師之間的翻譯？前端跟後端之間的翻譯？

這些「翻譯」的工作，是 AI Agent 最容易接管的那種。

另外一個值得學的東西是 John 的 trash can method 心態 — 快速做、快速丟。工程師普遍有個毛病是太在乎「做出來的東西品質夠不夠好」，結果 idea validation 的速度慢下來。設計師反而因為習慣了 rapid prototyping，在這件事上心態更健康。

工具不是重點，workflow 才是。

延伸閱讀

• Coding Agent 正在改變工程、產品、設計的協作方式 — 但改變的不是你想的那個
• 用 Claude 做設計比 Figma 還順手？一個設計師的 AI 工作法
• Coding 被 AI 解決之後呢？Claude Code 團隊主管的答案