從產品設計中的 AI 探索，延伸至商業專案的 Design System 重整與 AI 協作流程建立，探索如何結合設計規則與 AI，提升設計效率與可延續性。
產品設計實務
於 2024 到 2025 年工作期間，我在 CSMS 充電管理平台的設計過程中，開始將 AI 運用於需求理解、流程探索與 Design System 規劃，協助釐清複雜的業務邏輯、加快設計探索，並依實際產品情境進行判斷與調整。
探索需求與分析研究
理解陌生領域、整理需求與技術脈絡
快速建立可操作的 Prototype
將複雜需求快速轉成操作情境，協助團隊討論流程
規劃 Design System
探索系統狀態與規則，最後由依產品情境規劃元件
AI 記帳產品專案
負責角色
UI/UX Designer
合作對象
外包專案
負責項目
Design System、UI Mockup、AI Design Workflow
時程
2026/06 - 2026/08
專案簡介
客戶原先透過 Pencil.dev 生成介面，並開發一套內部使用的記帳產品，但尚未明確定義 UI 視覺風格與元件規範，導致介面呈現與操作方式缺乏一致性。我的任務是定義產品視覺風格、建立 Design System，並規劃 AI 協作流程，讓客戶未來能依循設計規範，透過 AI 自主延伸元件及產出新功能介面。
畫面為客戶透過 Pencil.dev 生成的既有產品介面
視覺風格探索與定義
在建立 Design System 前，我先蒐集不同 B2B 管理平台的介面案例，從色彩搭配、版面配置與介面風格探索適合產品的視覺方向，並整理成提案與客戶討論。
經討論後，客戶最終選擇以鮮明的黃色作為產品主要識別色，搭配簡潔的灰白色系，讓原本偏向工具導向的管理介面多一點活潑感，同時保留資訊閱讀與操作的清晰度。
蒐集不同管理平台的設計案例，探索配色、排版與整體視覺方向。
確認產品的主色與介面風格，作為後續 Design System 與 UI 設計的基礎。
Design System 建置
這次 Design System 從零開始重整。我參考產品型態相近的 B2B 設計系統，並從 Foundation、Variables、Components 與 Variants 建立一致的設計規範。
建置過程中，我運用 Claude + Figma MCP 協助建立 Variables 與元件變體，再依實際產品情境調整尺寸、狀態、命名及使用規則。AI 負責加速建置與重複性工作，而設計方向與規則仍由我判斷，確保後續新增功能能延續一致的介面風格。
重新建立 Design System，作為後續 AI 延伸元件與產出介面的設計基礎
AI Design Loop
這次 AI 協作流程可分為兩個階段。第一階段先建立 Design System 與 Design.md，讓 AI 能依循既有規範產出畫面；第二階段則在實際操作中，透過 Skill、檢查與規則修正，持續改善元件應用與畫面品質。
01｜從設計規範到 AI 畫面產出
Design System 建立後，我進一步將元件使用方式、狀態與設計規範整理成 Design.md，再透過 Claude + Figma MCP，依循既有產品架構產出 UI Mockup，並在實際操作中檢查設計規範是否正確套用。
02｜從產出問題調整 AI 協作方式
實際操作時，我發現 AI 雖能完成畫面配置，卻可能未正確引用既有 Component、套用 Variables，或產生不符合規範的畫面結構。
因此，我將設計規範與技術操作分開管理，額外建立 Skill，規範 AI 在畫面生成時的元件應用與操作方式，並在產出後檢查元件、變數及版面結構，持續修正問題與優化產出流程，經過多輪調整，在既有產品架構與 Design System 下，AI 已能完成約 90% 的 UI Mockup 初步配置，後續再由設計師處理細節與特殊情境。
最終交付
除了重新建立 Design System，我也整理了 Design.md、Skill 與 AI 協作操作流程，並製作教學簡報及操作影片，協助客戶掌握後續的元件應用與畫面產出方式。
最後透過實際操作，帶領客戶從既有產品架構延伸出新的 UI Mockup，驗證這套流程的可行性，讓客戶未來能持續運用 AI 進行介面設計與功能擴充。
操作影片與教學文件
Claude + Figma MCP 教學簡報