Grok Bot(專業版)粉皮書
16 / 17
產品設計15

用 Grok Bot 做產品設計

約 6 分鐘第 16 / 17 章

一位設計師如何利用常駐待命的 Grok Bot 探索更多創意、直接操控真實線上代碼素材,並在整個創作中堅守高標準判斷力。

在 SpaceXAI,我們正在打造能夠接收創意並將其一步步化為現實的 Agent。對於設計師而言,這徹底改變了“究竟什麼樣的想法才值得花精力探索”的遊戲規則。

設計向來是一個將構想賦予形態的過程:做出來、感受體驗、反覆修改,直到感覺恰到好處。當創造的門檻大幅降低,我們便能在更早期探索更多可能性,讓創意在實踐中自然顯露它應有的模樣,而不是在動筆之前就憑空給它設限。

我一直都在使用 Grok Bot 來設計 Grok Bot。雖然它並未取代我現有的工具箱,但 AI 設計 Agent 的加入,不僅極大加快了我將想法變為現實的速度,更讓我願意去探索多得多的前沿創意。

Grok Bot 為我提供了一支 7×24 小時常駐待命的 AI 設計團隊,它們擁有屬於自己的電腦。它們具備記憶能力、熟練調用工具,能將工作從雛形一路推進至精美的終稿。即使我離開電腦桌,它們仍在繼續運轉——這尤為重要,因為靈感往往總是在我不坐在辦公桌前的時候突然降臨。

認識我的設計夥伴們

John 的設計夥伴:Experiments、Motion God、Figma Bro 和 Devbot

Figma Bro 負責處理 Figma 中那些繁瑣重複的生產製作;Motion God 幫助我實現動效原型,隨著我對交互手感的描述即時調整;Experiments 是我快速驗證那些天馬行空想法的試驗田,在摸清它該成為什麼之前先把它具象化;Devbot 回答工程可行性問題,協助其他夥伴理解一項創意究竟該如何落到代碼實處。

這些名字讓每個 Bot 的職責一目瞭然,但它們絕非孤立作戰。我的設計 Agent 們能彼此開會碰撞、拆解分工任務,最後匯聚成統一成果。以下是最近的三個鮮活案例。

Experiments:隨時動手探索,無需瞻前顧後

我最早想探索的創意之一,是如何讓 Bot 隨時隨地觸手可及。我想嘗試快捷鍵、系統級全局入口等各種喚醒方式,因此我給 Experiments 派發了任務:打造一系列關於環境化泛在 Bot 交互的原型探索。

第一種方案將 Bot 巧妙地藏入 Mac 屏幕頂部的劉海(Notch)中。它在後臺工作時靜靜收攏在固定位置,需要注意力時輕柔探出,當我需要了解更多時可展開為一個迷你工作臺。這讓 Agent 擁有了一個家,而無需強迫我多開一個窗口。

第二種方案讓 Bot 在鼠標懸停時從桌面角落優雅探出身來。這種感覺不再像一個固定的死板界面,更像是一個擁有生命的角色:在被召喚或有話要說時走入視野。

第三種方案讓 Bot 化身為鼠標光標旁的小隨從,與我在當下屏幕上所做的一切建立起更加緊密的連結。

我向 Experiments 描述了這些行為設想,它自行推演如何將其化為可交互的實體。它將角色動作與過渡動畫委託給 Motion God,將桌面窗口與實現細節向 Devbot 請教,隨後整合為我可以直接實際上手體驗的真實原型。我可以在日常工作中自然使用各個版本,親身體會何時感到得力、何時感到打擾、何時恰到好處。

這就是我專門保留 Experiments 這個夥伴的原因。在把想法變成可以直觀評判的實物之前,我無需糾結這個創意是否理智、技術是否可行、或者是否值得排入產品路線圖。這些方案最終都沒有原封不動地上線,但這本就不是重點。我有了靈感,做出了三種真實版本,並從中汲取了寶貴經驗。想到什麼,放手去做就好。

Motion God:直接操控真實線上資產

在過去,動效往往是我不得不移交給團隊專職人員的環節。我可以描述動作或畫幾幀關鍵幀,但必須等待別人做出實物我才能感受反饋。而有了 Motion God,我能全程留在探索循環中,憑直覺手感親自指揮交互動效。

在一場營銷郵件推廣中,我需要為 Grok Bot 角色製作一段宣傳視頻的原型。鏡頭序列非常具體:Bot 登場,注意到應用窗口,然後彈跳就位。

Bot 登場、注意到應用窗口並彈跳就位

我不想讓 Agent 從截圖去拙劣臨摹角色,也不想要粗糙的近似素材。我希望它直接調用已經在真實產品中鮮活運行的完全相同的高清素材。因此,我讓 Motion God 基於真正的動畫參數規範文件在本地構建了一個動態測試場(Playground)。這樣一來,在動效實時運行播放時,我就能手動實時調節時間軸、彈簧係數、位移距離、縮放比例和緩動曲線。

同時我也給出了許多簡短而敏銳的對比反饋:“朝左下看的時間再長一點。”“回彈有些誇張了,收一點。”Motion God 會即時更新修改,我可以瞬間重新完整預覽整個動效序列。

這無比貼合我設計動效的本能感覺。在親眼看到畫面之前,我通常無法憑空預知一個過渡動畫究竟該用 280 毫秒還是 340 毫秒。但我非常清楚該如何用語言描述它,並且只要手感恰到好處,我一眼就能確認。

最激動人心的並非是我的 Bot“做出了一個動畫”,而是我能遞給它真實生產環境的工程資產,並在其周圍構建一個可運行的交互環境。我既可以通過確定性的數字滑塊精細微調,也可以繼續像與真人同事溝通一樣,用日常語言指揮 Motion God 進行藝術創作。

Figma Bro:全權接管枯燥重複勞動

在 Grok Bot 的新用戶引導流程中,我們希望展示一系列開箱即用的新手 Bot,能立即幫新用戶承擔工作。我們在內部徵集了許多創意,例如“幕僚長(Chief of Staff)”和“收件箱整理助手(Inbox Triage)”。我拿到了包含 20 個描述的清單,它們都需要各具特色的頭像與輔助屬性標籤。我在 Figma 中做出了一個自動佈局(Auto-layout)組件,然後讓 Figma Bro 批量生成其餘全部卡片。

Figma Bro 用同一個組件填充入門夥伴卡片

我們還想了解新用戶經常使用的軟件工具,以便為其首個 Bot 配置對應的上下文信息。我設計了頁面版式模板,讓 Figma Bro 負責搜尋精準的高清品牌資產,並按照用戶使用頻率概率排列放置。

Figma Bro 將常用工具標誌放進入門引導佈局

這些任務在創意上並不深奧,但它們極度消耗設計師寶貴的精力和注意力。這更是微小不一致性極易滋生的地方:貼錯了 Logo 變體、使用了過時的組件版本、從不同來源拽取了風格迥異的頭像、或者第十張卡片的間距與第一張莫名脫節。

我不希望 Figma Bro 靠肉眼瞎猜。通過 Figma MCP 工具,它可以深入檢查真實的 Figma 文件,使用絲毫不差的 x 和 y 絕對座標、寬度、高度、外邊距、排版字體、填充、描邊以及組件嵌套結構。只要存在現成的畫框或組件,那就是絕對的唯一事實來源(Source of Truth)。

保持緊湊高效的創作迭代環

這並沒有讓設計變成某種“一鍵直接出成稿”的快餐,它真正改變的是讓思考與反饋的循環變得更加緊密高效。

藉助 AI 設計 Agent,我能夠更早地讓構想在真實世界中初具雛形,在更高保真度的層面上進行推敲與反應,並將更多精力傾注在不同設計版本之間的權衡與美學裁決上。Grok Bot 並不會取代這種設計判斷力,而是賦予了我更多揮灑這種品味的機會。

如果你也是一名設計師,把你的下一個創意拋給 Grok Bot,靜候屬於你的驚喜吧。

学完后记得保存进度

完成状态只保存在当前浏览器,不会上传你的学习记录。

用 Grok Bot 做產品設計 | Grok Bot(專業版)粉皮書 | 超级峰 AI 课堂