設計與程式兼具的整合者 讓專案從規劃就少走彎路
資深前端工程師
Hi，我是書珊（Susan），一位同時具備 UI/UX 設計思維與前端實作經驗的產品規劃者，擁有超過8 年網站與系統專案經歷 ，橫跨設計與開發兩端，能靈活應對多元需求。
我的背景讓我在專案初期就能從使用者體驗與技術實作的角度，初步評估需求的可行性，並提出替代性的解決方向，協助團隊釐清目標、縮短溝通成本。從電商平台、企業內部工具，到政府系統，我都能快速掌握脈絡，調整策略與規劃流程。
我不只是切畫面、做視覺的設計師，也不只是套畫面、做互動的前端工程師，而是一個能理解不同角色思維，推進產品前進的跨域協作者。如果你正在尋找一位懂設計、會前端、能協調需求與實作落差的產品夥伴，我，Susan，很樂意與你聊聊合作的可能。
職涯歷程與成長
資深前端工程師
釦釘資訊工作室
- 負責企業內部系統、後台管理介面與行銷網站的 UI/UX 設計、前端實作、API 串接與系統整合。
- 實作多個基於 Nuxt.js 的 SSR 專案，具備網站部署與 SEO 最佳化實務經驗。
- 熟悉多語系處理、動態路由與前後端資料橋接。
- 可依據需求獨立規劃資料流程與頁面結構，主動評估適合的技術實作方式（如 SSR vs SPA 架構選型）。
- 協助後端工程師除錯 API 資料傳遞問題，有效提升開發效率、降低修正成本。
- 參與專案初期規劃，負責撰寫流程圖、Wireframe、元件設計規範與欄位對照表，提升開發前期溝通效率與開發準確度。
前端工程師
樂活資訊科技有限公司
- 參與設計與開發澳門賭場內部管理系統，以及澳門政府委託之數位專案，負責前端開發與系統整合。
- 實作 SVG 動畫與多種資料視覺化圖表介面，強化前端互動性與資訊呈現效率。
- 獨立負責小遊戲系統開發，從 UX 設計、互動邏輯、流程規劃到與後端資料整合皆一手包辦，具備完整產品落地經驗。
前端工程師
創創數位科技股份有限公司
- 責公司內部產品之前端開發，聚焦使用者體驗優化與功能實作。
- 與 PM、後端工程師密切協作，參與功能邏輯與資料結構規劃，確保技術實作方向與產品目標一致。
- 協助 PM 評估開發難度與技術可行性，協助判斷問題歸屬（前端／後端），提升專案推進效率。
- 在實務中逐步強化產品視角與跨部門協作力，提升技術與產品策略整合的敏感度與判斷力。
前端設計師
德叡股份有限公司
- 專注於網站 UI 設計與 HTML/CSS 切版，確保視覺呈現符合設計規範與版型一致性。
- 熟悉各類版型架構與響應式設計（RWD）技巧，能有效處理跨裝置與瀏覽器的相容性問題。
- 在既有架構下，使用 jQuery 製作滑動動畫、展開收合、輪播等互動效果，增強使用者操作體驗。
- 因長期參與實務切版，具備開發友善的設計思維，避免出現難以套版、不利維護的設計。
- 相較於單純視覺設計師，能在考量工程限制下設計出更具邏輯與結構性的網頁介面，提升團隊協作效率。
平面設計師
東文文具有限公司
- 根據品牌調性與市場定位，設計出具吸引力與功能性的產品包裝，提升商品在通路上的競爭力。
- 規劃並設計各類宣傳品（如海報、DM、型錄、展架等），支援品牌行銷活動與線上推廣需求。
- 親自拍攝商品圖，搭配合適構圖與修圖技巧，製作符合商業用途的素材，用於網路商店與社群平台。
- 提供多款設計風格與排版方案，根據不同專案需求客製化調整，提升客戶滿意度與品牌好感度。
我的技術棧
CSS JavaScript (ES6+) Vue.js Nuxt.js jQuery D3.js
熟悉 PHP Laravel 架構，具備 Blade 模板開發與資料處理經驗，可獨立完成前後端資料串接與頁面動態呈現
SCSS / SASS Tailwind CSS Bootstrap Quasar Framework
Webpack Vite Git Hugo
Figma Photoshop Illustrator
特色專案介紹
健康呼吸｜診所專用的 LINE 整合式 SaaS 健康管理系統
參與診所專用 SaaS 系統開發，負責後台 UI/UX 設計與前端功能實作，串接 LINE 與 IOT 裝置，協助診所提升病患用藥管理與回診追蹤效率。系統已導入 13 家診所，穩定處理每日互動資料。
我的角色與貢獻
- UI/UX 設計：釐清醫療場域流程，負責設計診所後台介面，重視操作簡潔、資訊清晰，提升醫療人員使用效率
- 前端開發與整合測試：使用 Tailwind CSS、JavaScript、Vite、Axios API 等技術，實作病患資料檢視、提醒設定、報表匯出等功能，並與後端協作串接 LINE 資料
- 負責 Laravel Blade 的切版與資料顯示邏輯設計，包含問卷資料讀取、病患列表顯示與提醒設定流程。
澳門衛生局｜智慧醫療大屏改造計畫
將原為內部使用的大型醫療 DataV 頁面改造為市民可瀏覽的響應式網頁，開發 6 個雙語頁面與 10 種動態圖表，優化行動體驗與操作流程，使用 D3.js + SVG 呈現即時健康數據。
我的角色與貢獻
- 跨語系頁面開發：負責共六個響應式頁面開發：三頁中文、三頁葡文版本，處理不同語系的版面調整與資料格式轉換
- 動態圖表與動畫設計：使用 D3.js + SVG 製作 10 種不同的健康數據圖表，支援即時動畫效果與互動，資料來源透過 XMLHttpRequest 解析 XML 結構資料，轉為圖形顯示
- 介面流程與操作優化：將原本僅適用大螢幕的界面重新設計為行動裝置可用（RWD），強化市民使用體驗，導入操作動線規劃與使用者導向資訊架構
dH Shop 官網優化計畫｜購物流程與功能設計
透過 UX 設計與功能規劃，讓使用者能更順暢地搜尋產品、獲得推薦與完成購物，同時提升會員互動與品牌參與度。
我的角色與貢獻
- 會員獎勵系統功能設計：設計購物金邏輯（退款金額轉為購物金）、優惠券發放模組與點數累積制度，繪製介面與操作流程，考量會員使用體驗與管理後台設定流程，提案用戶「我的帳戶」中整合所有回饋機制的呈現方式
- 強化商品標籤與篩選器，提升搜尋精準度與轉換率
- 預約參訪系統設計
- 裝潢靈感圖片牆設計：規劃圖片牆介面，可依圖片標籤連動推薦相對應商品，設計分類與 tag-based 商品導流機制，結合視覺與導購功能
智慧床墊｜IOT 醫療數據即時顯示系統
與醫療硬體團隊合作，負責 IOT 資料流程設計與前端實作，使用 Vue、D3.js 將智慧床墊傳回的資料即時視覺化呈現，優化醫護人員監測效率。
我的角色與貢獻
- 介面與流程設計：針對醫護人員使用情境設計操作流程，並優化即時資訊的呈現方式
- 前端開發與資料視覺化：使用 D3.js 設計多種互動式圖表，呈現病患即時狀態與歷史趨勢
- 協同後端整合：與後端工程師協作 MQTT 訊息格式解析、資料狀態映射與錯誤處理機制
- 系統測試與優化：參與實機測試流程，持續調整 UI 響應與資料更新頻率，確保即時性與穩定性
導遊媒合平台｜多角色整合的智慧旅遊媒合系統
開發導遊媒合平台，支援 4 種角色，設計導遊 LINE 註冊與旅行社／機關自動媒合機制。使用 Vue + Quasar 建構多權限介面，整合 LINE 通知並優化問卷條件媒合流程。
我的角色與貢獻
- 使用流程規劃與多角色邏輯設計：參與多角色使用場景設計與權限劃分，設計導遊註冊／審核／媒合等完整流程
- 前端介面開發：使用 Quasar 架構各角色專屬介面，開發問卷表單、媒合頁面與資料列表等核心模組
- 整合 LINE 註冊與通知服務：協助前端串接 LINE 登入與導遊通知流程，實作帳號關聯與狀態回應
- 與後端串接與驗證測試：與後端密切合作，完成條件比對、媒合邏輯驗證與 UI 資料回傳整合