Client
業主
XIHUI LTD.
My Role
我的角色
負責UI/UX Design、Wireframe、Design System與Design Tokens，並參與競品分析、多品牌介面架構設計，以及AI輔助設計流程的導入與優化。
Platform
平台
Web / Web APP
Tool
設計工具
Figma
Photoshop
Claude Code
Chat GPT
Gemini
Challenge
設計挑戰
每新增一個白牌品牌，都需要重新調整視覺風格與大量介面細節，不僅增加設計與開發成本，也拉長產品交付時間。如何在品牌客製化、使用體驗一致性與長期維護效率之間取得平衡，是此專案最主要的設計挑戰。
Solution
解決方法
將品牌視覺與核心產品架構拆分，透過Design Tokens、Design System與標準化版型建立可重複使用的設計框架，讓不同品牌能在維持一致操作體驗的前提下快速完成客製化，並結合AI輔助流程提升設計與交付效率。
Brief 1
多品牌客製化
在共用產品架構下，支援不同品牌的視覺風格與介面需求。
Brief 2
維持體驗一致性
品牌可以不同，但核心交易流程、操作邏輯與資訊層級必須維持一致。
Brief 3
提升交付效率
降低重複設計與開發工作，縮短新品牌的設計、建置與後續維護時間。
Solution 1
Design Token
將品牌色彩、字體、圓角與介面狀態等視覺規則抽離成Design Tokens，讓不同白牌品牌能在共用核心元件與操作邏輯的前提下，快速套用各自的品牌風格。透過集中管理設計規則，也能降低逐頁修改與後續維護的成本。
Solution 2
Design System
將交易平台中高頻使用的介面整理成可重複使用的元件與模組，統一按鈕、輸入欄位、表格、Tab與交易操作區等設計規則。不同品牌可共用相同元件結構與操作邏輯，再透過Design Tokens套用各自的品牌 風格，兼顧一致性與客製化需求。
Solution 3
Layout Architecture
以固定的頁面架構與內容層級作為核心骨架，將可變動的品牌視覺與元件樣式控制在既定區塊內。不同品牌不需要重新設計整個頁面，只需調整對應元件與樣式，即可快速建立具有品牌差異的介面，同時維持一致的操作流程與資訊結構。
Solution 4
AI Assisted Workflow
將AI導入介面設計與前端協作流程，協助產出不同品牌的視覺方向、元件變體與初步實作，並搭配既有Design System進行檢查與調整。減少重複性的製作與溝通成本，讓設計能更快地驗證並進入開發。
