2026 Figma AI Agent 設計系統實戰：學校招生網站、報名表與廣告素材如何維持品牌一致性

2026 年 10 月 23 日，Figma 發布如何讓 AI 設計代理運用品牌設計系統的實務說明。對台灣學校招生承辦與中小企業來說，值得關注的不是又多了一個自動畫圖工具，而是能否讓首頁、活動頁、報名表與廣告素材維持一致的字型、色彩與按鈕規則。本文從網站專案管理角度出發，建立一套能由設計、行銷及工程人員共同執行的流程。

一、為什麼招生網站需要設計系統，而不是只做漂亮首頁？

學校招生網站設計系統示意，呈現首頁、活動頁與報名表共用品牌元件 — 圖／AI 示意圖：學校招生網站品牌設計系統與共用元件

招生檔期常同時製作學校官網、科系介紹頁、開放日活動頁、手機報名表和社群廣告。若不同外包商各自選擇顏色、按鈕與標題大小，讀者在廣告點擊後可能覺得進入了另一個網站，甚至分不清真正的報名入口。設計系統的目的就是把反覆使用的規則整理成共用資產，讓同一品牌在不同頁面仍有穩定辨識度。

二、Figma AI Agent 的新重點：有依據的設計，而非隨機產出

Figma AI 設計代理參考品牌元件與色彩變數的示意圖 — 圖／AI 示意圖：Figma AI Agent 與設計元件資料庫

Figma 官方在 10 月 23 日說明，設計代理可以利用已發布的元件資料庫與變數，並透過指引、實際範例和技能流程取得設計背景。這種做法讓 AI 不只是接收一句「做得更現代」，而是能參考團隊既定的按鈕規格、間距與元件名稱，再產出可供設計師審查的畫面。實際效果仍取決於資料庫是否完整，以及設計人員的複核。

但必須區分「協助生成設計稿」與「自動將網站公開上線」。Figma 畫布中的設計變更，不代表 WordPress 佈景主題、報名資料庫或廣告追蹤碼會同步更新。真正上線仍需工程實作、跨裝置測試與權限審核。

三、先盤點招生旅程，再定義設計元件

學校招生網站從科系介紹到線上報名的頁面流程設計示意圖 — 圖／AI 示意圖：從學校科系介紹到線上報名的使用者旅程

建議先畫出使用者從廣告或搜尋進站到完成報名的旅程：看見校園特色、比較科系、確認招生資訊、提交表單、收到通知。每一個節點都應列出需要的元件，例如課程卡片、報名資格提醒、活動日期、常見問題、手機固定報名按鈕及表單錯誤訊息。這樣做能避免設計系統淪為一份只有顏色和圖示的展示文件。

以高職招生網站為例，可建立「科別介紹卡片」元件，包含科系名稱、教學特色、畢業出路和了解更多按鈕。設計師只要更新共用元件，就能讓不同科系使用相同資訊結構；文案仍由各科教師核對，避免 AI 自行補出不存在的設備與證照。

四、四類基本資產：色彩、字級、元件與互動狀態

第一類是色彩變數，區分主色、輔色、背景和警示色；第二類是字級與行距，讓手機閱讀與多語文字都有足夠空間；第三類是按鈕、卡片、導覽及表單欄位；第四類則是滑鼠懸停、鍵盤焦點、填寫錯誤、停用及提交成功等狀態。只有視覺截圖而沒有互動規則，往往會在製作階段出現落差。

五、把招生規則寫成 AI 看得懂的指引

網站品牌設計規範比較主要按鈕、輔助按鈕與表單狀態的示意圖 — 圖／AI 示意圖：品牌按鈕、色彩與表單互動規則

設計代理知道有哪些按鈕，卻未必知道何時該用哪一種。此時應把設計決策寫成明確規則：報名頁的主要行動必須使用主按鈕；外部連結與下載簡章應採不同標示；手機螢幕不得把截止日期藏在折疊區；錯誤訊息不能只靠紅色表達。這些內容可作為內部設計指引，再由管理者依實際產品功能配置到工具中。

Figma 指引能在新設計工作時提供共用背景，但官方也提醒，代理對既有畫面的修改並非每次都能穩定遵循全部規則。因此大型網站改版不能跳過人工驗收，特別是校徽、招生資格、隱私權說明及報名資料的處理方式。

六、用可重複的範例，比只提供抽象形容詞更有效

與其輸入「請設計專業又活潑的高中網站」，不如提供已核定的科系頁面、活動報名頁和表單完成頁作為範例，並指出哪些區塊可修改、哪些不能動。範例不僅呈現視覺外觀，也讓設計團隊看出標題、照片、說明與按鈕的優先順序。此方法特別適合每年更新招生年度、活動時間，但主要架構相同的網站。

可以製作一套假的招生專案作為練習：職群體驗活動頁、科系比較表和資料送出成功頁。設計代理先完成草案，教師檢查資訊，招生承辦確認流程，工程師核對可行性。如此能在正式製作之前找出錯誤，而不是等廣告投放後才修改。

七、AI 設計與 WordPress 工程如何正確交接？

WordPress 網站設計交接與報名表手機測試驗收流程示意圖 — 圖／AI 示意圖：WordPress 網站上線與表單測試檢查

Figma 畫面完成後，交付文件應包含各裝置寬度、元件狀態、色彩規格、圖片裁切規則、字型授權與表單欄位。工程師再決定要使用 WordPress 區塊、主題樣板或客製元件。若網站已有外掛管理表單，先測試新介面是否影響欄位驗證、通知郵件、資料儲存及權限，而不是只驗收首頁看起來像不像設計稿。

如果另有 LINE 通知、CRM 或招生系統介接，要把串接邏輯寫成獨立的功能規格。AI 產出的按鈕雖然可能看起來已完成，卻不代表資料會正確送達。上線前應以測試帳號走過每個流程，並確認錯誤時能提示訪客重新操作。

八、同一設計系統如何用於 Google 與社群招生廣告？

學校招生廣告視覺與網站著陸頁品牌配色一致的設計示意圖 — 圖／AI 示意圖：學校招生廣告與網站著陸頁品牌一致性

廣告主視覺與著陸頁可以共用品牌色、標題字體和主要行動文案，但仍需依版位調整構圖。例如社群短影音封面要一眼看到活動核心價值，搜尋廣告進站頁則應立即呈現科系資訊、地點與報名方式。兩者不能僅透過改尺寸就視為完成，因為使用者進站意圖不同。

成效評估也不能只看點擊率。建議同時觀察報名表開始填寫率、完成率、錯誤率以及廣告轉換事件是否正確觸發。若調整按鈕顏色後報名數下降，先檢查流量來源、表單是否失效及活動期間變動，再判斷是否為設計造成。

九、教育網站的無障礙與個資保護不能交給 AI 猜測

網站設計必須考量鍵盤操作、文字與背景對比、圖片替代文字、表單標籤和錯誤提示。當 AI 依設計系統產生新頁時，應使用檢查清單驗收這些項目。設計代理可協助提示問題，卻不能取代無障礙測試，也無法直接保證網站符合所有規範。

如果表單蒐集學生、家長聯絡方式或其他個資，測試時應使用虛構資料，避免把真實名冊貼進設計工具。涉及授權帳號、資料保留及與第三方系統的串接，則需要校方資訊管理人員檢查，並落實最小權限原則。

十、給校方與企業的兩週導入流程

第一到第三天整理現有首頁、招生頁、表單和廣告素材，找出重複元件及不一致的地方；第四到第六天建立共用色彩、字級、按鈕、卡片和表單規則；第七至第九天選一個低風險活動頁測試 AI 設計代理，並記錄哪些畫面需要人工修正；第十至第十二天交給工程師製作測試頁；最後兩天測試手機、無障礙、報名與追蹤事件。此為示範時程，實際專案應依網站規模調整。

各階段應留下元件清單、指引版本與測試結果。小型團隊可先從三項高頻元件試行。