Spotx Studio
預約諮詢
幽默創意
藝術攝影
快樂家庭

彌合設計與工程的鴻溝，打造具備商業戰略價值的系統架構。

我是 Gabriel，一位駐點台北的產品設計師，擅長以前端開發者思維 (Design Technologist) 解決複雜的數位挑戰。
聯絡合作 下載履歷

專業技能

結合 UX 邏輯、系統設計與前端工程的核心工具箱
UX 策略與邏輯
視覺與設計系統
程式開發與架構
進階

Figma / Design Systems

  • 建立高度自動化、具備變數系統的設計規範。
  • 運用 Variables 與 Semantic Tokens 建立高擴充性系統。
  • 實踐 Boolean 變數與 RWD 斷點對齊的 1:1 開發交付。
  • 導入 DesignOps，大幅降低跨部門溝通與技術債。
進階

Photoshop

  • 製作高轉換率的數位行銷與視覺溝通素材。
  • 針對跨平台介面進行高質感的影像合成與校色。
  • 運用批次處理與壓縮技術輸出優化後的數位資產。
  • 使用非破壞性工作流維持設計檔案的高度迭代性。
熟悉

Lottie / UI Motion

  • 打造兼顧視覺動效與前端效能的輕量級互動。
  • 製作網頁與 App 端的流暢微互動 (Micro-interactions)。
  • 整合動畫規格以確保不影響 DOM 渲染載入效能。
  • 與前端工程師對接 JSON 參數以實現狀態觸發控制。
熟悉

Illustrator

  • 建構具備可擴展性的向量 UI 元件與品牌圖形。
  • 設計清晰的向量圖示系統 (Iconography) 與插畫。
  • 建立包含色票與符號的品牌視覺指南 (Brand Guidelines)。
  • 輸出乾淨、程式碼友善的 SVG 供前端組件使用。
熟悉

Premiere Pro / AE

  • 製作流暢的多媒體影音以輔助產品展示。
  • 規劃影片分鏡、轉場邏輯與產品宣傳動態。
  • 加入動態圖形 (Motion Graphics) 以強化視覺敘事。
  • 針對不同數位載具與斷點輸出優化後的背景影音。
基礎

Rive

  • 運用狀態機邏輯打造即時互動的 UI 動效。
  • 設計基於狀態機 (State Machine) 的高階動態回饋。
  • 輸出極小檔案格式以適配嚴苛的 Web/App 效能要求。
  • 實驗觸發器邏輯以提升使用者介面的情感連結。
進階

CMS 架構與開發

  • 客製化佈景主題與架構，兼顧開發效能與可擴充性。
  • 建構輕量化系統架構與複雜的自訂欄位 (ACF) 邏輯。
  • 導入全域變數確保前端樣式與設計系統 (Design System) 一致。
  • 建立模組化的頁面區塊，確保客戶順利接手後續營運。
進階

前端佈局整合

  • 熟稔 Box Model 與 Flex/Grid 邏輯進行響應式開發。
  • 使用全域樣式與模組化思維快速落實 Landing Page。
  • 處理 DOM 結構以優化跨斷點 (Breakpoints) 的無縫切換。
  • 落實效能優化策略，如延遲載入與資源壓縮。
進階

Webflow / 資料驅動

  • 打造符合前端標準的響應式佈局與進階視覺互動。
  • 建立靈活的 CMS 集合結構，落實資料導向的頁面模板。
  • 精準控制 HTML/CSS 標籤，確保產出無冗餘的乾淨代碼。
  • 串接 Webhooks 與 API 達成跨系統的自動化工作流。
熟悉

Bootstrap / CSS 架構

  • 運用 Sass 落實模組化設計，精確還原 UI 介面設計。
  • 客製化 Grid 斷點與變數，確保各螢幕尺寸下的視覺邏輯。
  • 定義 CSS Variables，與 Figma 的 Semantic Tokens 對齊。
  • 優化開發交接流程，具備與資深 RD 溝通技術限制的能力。
熟悉

電子商務系統優化

  • 建置高轉換率的電商系統，優化使用者的購物體驗。
  • 運用響應式控制 (RWD) 確保跨裝置結帳流程的順暢。
  • 串接自動化行銷工具與設定資料轉換追蹤分析。
  • 整合第三方 API 與外掛，擴充產品的數位服務量能。
基礎

數據追蹤與整合

  • 設定與整合行銷追蹤碼，建立量化數據的反饋機制。
  • 配置 Google Analytics 等追蹤事件以洞察使用者行為。
  • 確保數據收集邏輯與產品的商業轉換目標一致。
  • 優化頁面資源與伺服器請求以提升 Web Vitals 表現。
基礎

版本控制與營運

  • 掌握數位產品的上線發布與基礎的系統維運流程。
  • 理解網域配置、DNS 設定與基礎的伺服器運作邏輯。
  • 將設計元件庫視為產品代碼庫般進行版本迭代管理。
  • 確保線上產品在更新過程中的系統穩定與效能最佳化。
熟悉

顧客旅程地圖

  • 視覺化完整的服務旅程，精準識別 B2B/B2C 的痛點與機會。
  • 繪製端到端 (End-to-End) 的體驗地圖，找出系統阻力點。
  • 深入理解高壓或複雜場景下，使用者的真實情緒與需求。
  • 將痛點轉化為具備商業價值的產品功能與優化方案。
熟悉

使用者任務分析

  • 將複雜的業務目標轉化為明確的設計行動與功能優先級。
  • 將抽象的商業需求分解為 RD 可執行的技術規格。
  • 根據核心任務的價值來規劃 Sprint 的開發優先順序。
  • 確保設計解決方案符合企業級軟體的防錯與合規要求。
精通

使用者流程圖 (Userflow)

  • 規劃並優化多角色的操作路徑，打造直覺的系統任務流程。
  • 梳理多模組 B2B 系統中的跨部門簽核與操作動線。
  • 運用流程圖及早發現邊緣案例 (Edge Cases) 與邏輯斷點。
  • 透過 Wireframe 快速迭代並與利害關係人對齊認知。
精通

資訊架構與權限邏輯

  • 梳理複雜業務邏輯與權限，重塑高密度數據介面的易讀性。
  • 拆解金融、醫療等硬核商業邏輯，建立清晰的資訊層級。
  • 將高密度數據 (Data-heavy UI) 轉化為易於決策的儀表板。
  • 在高度專業的資訊呈現與認知負荷之間取得完美平衡。
進階

產品藍圖與擴充性

  • 建立具備高度擴充性的系統藍圖，支援未來功能模組迭代。
  • 規劃具備前瞻性的產品架構，減少重工與架構重構風險。
  • 確保新功能的無縫整合不破壞既有使用者的操作習慣。
  • 為設計端、開發端與商業端提供共識的產品發展地圖。
熟悉

人物誌與洞察研究

  • 運用研究數據描繪目標用戶輪廓，引導精準的產品決策。
  • 從第一線臨床觀察或業務訪談中萃取核心的設計洞察。
  • 定義目標受眾的技術熟悉度與操作環境的特殊限制。
  • 結合量化與質性回饋，確保解決方案直擊痛點並帶來產值。

我的旅程

從服務人因出發，結合技術思維，深耕數位產品轉型

飯店櫃檯接待

@The Pier, 香港
2021-2022

概覽

工作內容
  • 每日登記入住與退房作業的流程執行
  • 處理訂房管理與第一線客戶諮詢
  • 解決住客即時需求與危機處理
技能與成就
  • 培養高壓環境下的即時問題解決能力
  • 建立跨文化溝通與深度同理心的思維
  • 鍛鍊出對使用者情緒極高的敏銳觀察力
顯示詳情

轉捩點

服務業的歷練賦予了我強大的「同理心」與「人因洞察」，但我發現自己更渴望創造具備規模影響力的系統。因此，我開始自修視覺設計與技術工具，並將這份對「體驗」的熱忱轉化為數位產品設計的起點，成功跨足商業設計領域。

視覺與平面設計師

@In-well Ltd., 香港
2022-2023

概覽

工作內容
  • 建立品牌視覺規範與高轉換率行銷素材
  • 執行跨平台的數位廣告與產品視覺設計
  • 整合視覺策略以驅動品牌的商業銷售表現
技能與成就
  • 精通商業視覺傳達與品牌資產的標準化管理
  • 將商業行銷策略精準轉化為具體視覺產出
  • 奠定日後 UI 介面設計中扎實的美學掌控力
顯示詳情

轉捩點

這段經驗補足了我對美學的敏銳度，但我發現純粹的視覺呈現無法解決產品在「邏輯、互動與資料流」上的根本痛點。為了更深入解決商業問題，我開始鑽研前端程式碼與 UI/UX 架構，正式往兼具邏輯與技術的產品設計師 (Product Designer) 邁進。

產品設計師 (專案主導)

@Spotx Studio, 台北
2023 至今

概覽

工作內容
  • 主導 B2B/SaaS 複雜系統從 0 到 1 的規劃與設計
  • 建置跨平台設計系統，導入 DesignOps 協作工作流
  • 與工程團隊緊密溝通，確保設計符合前端技術規格
技能與成就
  • 獨立完成多個醫療、金融等高複雜度系統落地
  • 結合前端思維大幅縮短開發成本與來回溝通時間
  • 建立具備 Semantic Tokens 邏輯的高擴充性架構
顯示詳情

高潮與挑戰

身為專案的戰略主導者，我最大的優勢在於能「同時用設計與技術的角度拆解產品」。我致力於不只交付美觀的圖稿，而是提供符合前端邏輯的系統級方案，讓產品在應對未來商業擴展時，依然具備高效的工程可維護性。

多媒體專案組長

@TCOC, 台北
2023 至今

概覽

工作內容
  • 領導團隊進行大型品牌重塑與數位內容產出
  • 協調跨部門需求，梳理開發流程以確保設計品質
  • 指導團隊成員技術成長並制定標準化協作規範
技能與成就
  • 導入專案管理系統，顯著提升團隊交付準時率
  • 優化資源整合流程，成功消弭跨部門資訊落差
  • 展現跨領域溝通與複雜專案下的衝突解決能力
顯示詳情

高潮與挑戰

從單兵作戰的執行者轉變為帶領團隊的管理者，我學習到如何建立系統化規範來引導整體團隊產出。透過推動專案追蹤流程與資源透明化，我們成功打造出極具凝聚力的團隊，這段經歷更深刻深化了我對流程優化 (Operations) 的實戰理解。

聯絡與社群

追蹤我的最新動態 =)
2025 © Spotx Studio 版權所有

首頁

關於

作品

聯絡