Grok Bot 設計交付教學：Figma 規格、畫面評論、替代文字與遊戲素材

整理更新：2026/10/28

Grok Bot 設計交付的第一個問題，是收到設計畫面的人能不能照著完成工作。一張好看的報名頁仍可能讓人找不到送出按鈕，開發者也可能不知道錯誤提示出現在哪裡。

如果只說「幫我改得有質感」，代理很容易提出另一種配色，卻沒有回答報名者為什麼在最後一步離開。於是設計改了一輪，團隊仍然不知道問題是否解決。

畫面評論、開發規格與圖片替代文字處理的是不同缺口，因此把它們分開交辦，結果才容易核對。每次設計修改也能回到同一個使用者任務，不必重新討論整個品牌。

Marketplace 的這些模板各有作者與輸入方式。加入模板也不會自動完成你的 Figma 連線、素材權利確認或團隊批准，這些條件仍需依自己的環境建立。

從一張畫面和一個使用者任務開始，會比一次要求整個品牌翻新更容易看出差異。先讓代理理解畫面要幫誰完成什麼，再決定需要哪一種交付。

Grok Bot 設計交付先確定畫面用途與使用者任務

先描述報名者要完成的動作，設計交付才知道需要解決哪個畫面問題。假設活動頁的目標是讓使用者填完資料並取得確認訊息，視覺評論就應圍繞這條路徑。

準備資料時，除了截圖，也應寫下畫面的入口、預期讀者、主要動作及不能變動的內容。例如品牌名稱與活動日期已定稿，就不應在調整版面時順便改寫。

Figma 是設計團隊用來整理畫面與元件的工具。元件是可以重複使用的介面元素，例如同一種按鈕。若沒有可讀取的 Figma 連線，先用允許分享的截圖與文字規格討論，仍能釐清問題。

設計規格則是交給製作者的說明，應包含排列、尺寸、文字與不同狀態。只有一張成功畫面，還不足以說明資料填錯、網路等待或沒有內容時應該出現什麼。

先把交付目的寫成一句話：「請幫第一次報名的人辨認必填欄位，完成送出，並知道接下來去哪裡看確認。」這個設計任務能讓評論者與開發者使用同一個判斷標準。

先做畫面評論，再整理 Figma 開發規格

先用畫面評論排出修改順序，再把選定的改法整理成開發規格。評論負責找問題，規格負責交代要怎麼做，兩者不宜混成一份沒有優先順序的願望清單。

Critiquito：把「不好用」改成可處理的問題

Manuel Muñoz Solera 的 Critiquito: Design Critique 模板會依截圖或 Figma 連結提出排序後的具體修改，涵蓋視覺層級、字體、色彩、文案與可及性。作者也明確說明它不會編輯檔案。

可及性在這裡是讓不同使用方式的人也能理解與操作介面。例如按鈕不能只靠顏色區分狀態，錯誤訊息也應讓使用者知道如何修正。

AI 郵報建議先給一張畫面、一個任務與限制，再要求每項意見附上位置與原因。這樣「按鈕不明顯」會變成「主要動作與次要連結使用相同視覺重量，報名者難以分辨下一步」。

請評論這張活動報名畫面，目標是讓第一次參加的人完成送出。保留品牌名稱與活動資訊，依影響程度列出修改建議。每項附畫面位置、使用者可能遇到的阻礙及可驗證的改法，不修改原始檔。

這是本文整理的建議指令，並非模板作者原文。收到建議後，先挑會阻礙任務的問題處理，不必一次採納所有風格偏好。

figma bro：讓開發者知道每個狀態怎麼呈現

John Bai 的 figma bro 模板把 Figma 畫面轉成製作規格，也會檢查元件、設計值與動態效果。作者說它能依需求簡報建立畫面，在未連接 Figma 時也可從貼入的連結開始。

這裡的設計值是團隊共用的顏色、字級與間距等設定。若同一個主要按鈕在不同頁面用不同顏色，開發者就需要知道哪個才是本次批准的版本。

建議輸入除了畫面連結，也包含評論後選定的修改清單、既有元件名稱與不能改的區塊。要求它先列缺少的狀態，會比讓它自行補完所有畫面更容易保留設計原意。

請把這個報名表區塊整理成開發規格，沿用現有按鈕元件。列出一般、輸入錯誤、送出等待與成功狀態。沒有設計依據的細節請獨立列出問題，不要當成已批准內容。

交付時可拿一個欄位逐項核對：標籤、說明、錯誤訊息、手機換行與送出後狀態是否都有依據。畫面結構清楚後，圖片本身也要能傳達正確用途。

讓圖片文字跟著用途走，風格化頭像保留辨識特徵

替代文字要描述圖片在當前頁面的意義，頭像則以保留辨識特徵為重點。兩者都與圖片有關，但驗收時不能只問「像不像原圖」。

Imogen：為圖片寫出讀者需要知道的資訊

Kent C. Dodds 的 Imogen 模板會撰寫簡短、可複製的圖片替代文字，聚焦最重要的部分，協助看不到圖片的人理解內容。

替代文字常稱為 alt text，讀屏工具可以讀出這段說明。因此應先告訴代理圖片出現在哪裡，以及旁邊已經有哪些文字，避免它只是把所有可見物件逐個列出。

例如活動頁使用教室照片時，重點可能是「講師在投影幕前示範操作，學員以筆電跟著練習」。若照片只是裝飾，或說明已完整寫在附近，則要另外判斷是否需要重複描述。

建議指令是：「請為這張放在課程介紹頁的照片提供精簡替代文字，保留能幫讀者理解上課方式的內容，不猜人物身分或照片看不出的情緒。」驗收時逐句回看圖片，刪掉無法直接支持的描述。

圖片中的圖表若承載重要數字，單一句替代文字通常不足以代替完整資料。可以要求代理整理圖中可辨識的重點，再由編輯決定如何在正文或資料表中提供可讀版本。

Pfp Bot：先確認想保留的外觀特徵

Shub Gaur 的 Pfp Bot 模板會把 X 頭像、上傳照片、自拍或寵物照轉成小型 Grokbot 風格圖示。介紹中提到膠囊形眼睛、髮型、色彩與招牌特徵，風格和提示詞署名為 @Multi_Serio_Ai。

作者說資訊不足時會要求更多照片，而且不製作寫實肖像，也不代為發布。這適合風格化圖示的需求，交辦時應先給本人或有權使用的素材，並指出必須保留的特徵。

建議先選一張清楚的照片，寫下「保留圓框眼鏡與短髮，背景簡單，交回可供我挑選的圖示」。核對重點是特徵是否仍可辨認、縮小後是否清楚，以及結果是否維持預期風格。

頭像完成後，仍可先放在預覽尺寸比較，不必立即換掉所有帳號。若交付的是一組遊戲素材，還需要在多張圖之間維持一致規則。

遊戲素材先有色票與格線，再談批量輸出

遊戲素材的色票與格線先對齊，批量輸出的圖片才容易放回遊戲。單張圖片看起來漂亮，不能證明它和同場景的角色、背景及按鈕放在一起仍然一致。

Game Art Director：先定風格，再檢查素材偏移

Danny Limanseta 的 Game Art Director 模板將遊戲概念整理成風格指南、色票和供圖片工具使用的提示詞表，也會切分精靈圖，檢查素材的色票與格線偏移。

精靈圖是把多個角色動作或小圖排在同一張圖上的素材。切圖時除了格子大小，還要確認角色腳底、中心點與透明邊界是否一致，否則放入遊戲後可能出現位置跳動。

AI 郵報建議先提供遊戲設定、參考素材、目標畫面大小和允許使用的圖片工具。先產出一小組規範與試樣，讓團隊看到相同角色在站立、移動與受擊狀態下是否能保持辨識。

請根據這個小型農場遊戲設定，先整理色票、角色比例與精靈圖格線要求，再提供一組供圖片工具使用的提示詞。先做單一角色的試樣規格，說明檢查方式，不自行擴大成完整素材庫。

驗收時可把原始規格、切圖結果和遊戲預覽放在一起。若某張素材偏離色票，應指出是哪個色彩或區域，才能回到生成設定修正，而不是重新換一整套風格。

對需要把設計規則交給程式代理的團隊，共用元件與規範能讓後續修改更有依據。

延伸閱讀：【設計師的 AI 秘笈】Figma MCP 開放 Beta，4步驟一鍵產出代碼

用同一份交付清單接住設計與開發

設計交付清單應把畫面、狀態、圖片文字與修改依據放在一起。若只留下最新截圖，接手者很難知道哪些差異已批准，哪些只是代理提出的建議。

以報名頁為例，可以保存原畫面、選定的評論、調整後規格與操作預覽。每份檔案寫清楚版本與負責人，下一次修改就能從已批准的內容開始，不必重新猜測設計意圖。

對圖片則保留用途、來源、權利紀錄與替代文字。生成圖也應標示用途，不能用概念插畫證明某個產品已經具備特定介面或功能。

最後回到原先的使用者任務，實際檢查主要動作是否可辨認、錯誤能否修正，以及手機上是否仍能讀懂。這些是本文建議的驗收方法，沒有把模板介紹當成完成測試的證據。

團隊若需要讓不同代理接手，可用可追蹤的工作紀錄保存決策與交付位置。

用一張交付表驗證狀態有沒有漏掉

以報名表為例，可先把一般狀態與錯誤狀態並排看。如果姓名欄位的錯誤只靠外框變紅表示，評論者應指出讀者如何知道錯在哪裡，開發規格則要寫清楚文字提示出現的位置。

等待狀態也需要交代。送出後按鈕是否能繼續點、使用者會看到什麼回應，以及完成後停在哪一個區塊，最好在同一份規格中說明。否則開發者可能各自補出不同做法，畫面雖然接上了，操作感卻不一致。

再把文字拉長測一次，例如改成較長的姓名或課程名稱，觀察欄位與按鈕是否被擠壓。這類測試用來檢查版面，不應把測試文字留在正式內容。手機版也要看實際換行，不能只把桌面截圖縮小。

圖片替代文字則可和附近文字一起朗讀。若照片旁已寫出完整活動說明，替代文字再重複整段，讀者反而要聽兩次；若圖片承載新的資訊，就要把讀者需要知道的差異補進可讀內容。

對精靈圖試樣，先選一個動作序列比較每格的角色位置。若人物在切換時突然向上跳，就把格線與角色基準點記錄給製作者，讓修正能對應到具體格子。只回覆「動起來不順」仍不足以直接修改。

最後把批准設計版本和候選設計版本分開保存。團隊可能喜歡兩種不同配色，但開發者需要知道這次採用哪一種設計。清楚標記版本，能減少代理把尚在討論的建議當成定稿，也讓下次評論有相同起點。

常見問題

Grok Bot 設計交付可以只提供截圖嗎？

畫面評論可以從截圖開始，但仍應補上使用者任務、限制與預期交付。要製作精確規格時，還需要尺寸、元件或其他可核對的設計資料。

加入模板會複製作者的 Figma 帳號嗎？

不應如此理解。官方將模板視為可分享的配方，可含指令與可分享內容，實際連線與私人資料仍要依自己的環境設定。

模板給出的替代文字可以直接使用嗎？

先核對圖片和出現情境，尤其是人物身分、數字與圖片看不出的推測。修改後也要確認它沒有只是重複附近的完整文字。

先完成一張畫面的交付

先選一個報名頁區塊，完成評論、規格與圖片文字的交接。只要接手的人能依據資料做出相同結果，這次設計工作就有可回查的基礎。

從本文對應的模板入口開始，準備一張有權分享的畫面與清楚任務。完成後再對照延伸教學，逐步加入共用元件、原型與團隊協作。

延伸閱讀：Workbench 多代理協作教學：用 Markdown 看板，把 AI 交接和驗收寫清楚

資料來源

• Grok Bot Marketplace
• Grok Bot 模板分享與安裝說明
• 各模板作者與入口已標在對應章節，功能描述依 2026/10/28 查詢頁面整理。