01｜AI 產品設計實務
在規劃 CSMS 介面流程時，我會將 AI 放進需求理解、Prototype 與 Design System 等不同階段。除了協助理解 OCPP、充電樁與陌生業務邏輯，也會用它整理複雜需求、快速建立 Prototype，或協助探索元件架構與狀態。
探索需求與分析研究
理解陌生領域、整理需求與技術脈絡
快速建立可操作的 Prototype
將複雜需求快速轉成操作情境，協助團隊討論流程
規劃 Design System
探索系統狀態與規則，最後由依產品情境規劃元件
02｜AI 協作設計專案
專案簡介
2026 年 5 月離職後，我接了一個產品設計合作案。客戶希望整個專案約八成能透過 AI 協作完成，因此除了將 AI 工具導入主要設計流程外，最終也需要建立一套客戶能持續使用的 Claude + Figma MCP 工作流程。這個專案並不是從全新的產品開始，而是在既有產品基礎上重新整理 Design System。前期除了盤點現有元件，我也需要理解產品的使用情境，並預先思考後續可能延伸的元件與狀態。
Design System 建置
這次 Design System 從 0 開始重新整理。我先從 Foundation、Variables、Components 與 Variants 建立基礎架構，再透過 AI 協助討論元件結構、狀態與使用規則，並使用 Claude + Figma MCP 將部分 Variables 與 Component Variants 建立到 Figma。產出後，再依實際產品情境調整尺寸、參數、命名與使用方式。在規劃 Design System 時，我不會直接讓 AI 從零決定設計規則，而是依過去的經驗，參考產品型態接近的系統，再依實際需求重新調整。當元件架構與使用規則明確後，再透過 AI 延伸元件、補齊狀態與處理重複性的設定。
1–2 週 Design System 重建
AI Design Loop
Design System 完成後，我進一步整理 Design.md，將元件的使用方式、狀態與設計規則轉成 AI 能理解的內容，再透過 Claude 依照既有產品的資訊架構建立新的 UI Mockup。過程中，我會持續檢查結果，並回頭調整 Component 與 Design.md，讓後續畫面更接近實際設計規範。
經過幾輪調整後，我認為 AI 產出的 UI Mockup 約能完成 9 成。這並不是完全不需要人工修改，而是在既有產品資訊架構與 Design System 規則下，AI 能先完成大部分畫面與元件配置，後續再由設計師處理細節、情境與例外狀態。
Design System → Design.md → AI Mockup → Review → 調整規則 → 再產出
最終交付
最終交付時，我除了提供完整的 Design System，也整理了 AI 產出 UI Mockup 的操作方式，包含 Prompt 撰寫、Component 調整與 Design.md 優化，並製作簡易的教學簡報與操作影片，最後再透過實際操作，帶客戶從既有產品資訊架構出發，完成一個新的 UI Mockup，確認這套 Workflow 能由客戶後續延伸使用。
操作影片與教學文件
Claude + Figma MCP 教學簡報