企業共用設計系統建置
打造跨產品共用設計系統，確保一致體驗並強化品牌識別。
專案時間
2023.12 — 2024.01 完成初版設計系統（9 週）
2024.02 — Now 持續迭代與優化
專案目標
建立一套公司共用設計系統，整合字級、icon、間距與元件，並與前端工程師使用的 Ant Design 對應，提升設計一致性與開發效率。
角色與產出
• 主導設計系統架構規劃，制定設計原則與撰寫完整規範
• 與前端工程師協作，盤點常用 UI 元素，重新定義 52 種核心元件（按鈕、表單、表格、導航、佈局等）
• 整合字級規範、icon 套件與間距系統，搭建 Figma 元件庫，並對應 Ant Design，降低交付落差
• 培訓設計團隊，分享新元件的使用情境，建立跨部門溝通基礎與長期維護流程
專案挑戰
• 缺乏統一規範，設計重工成本高
• 設計與 Ant Design 缺乏對應規範
• 無完整元件庫，初期盤點耗時
• 團隊缺乏系統經驗，實作需多次協調
成果與反饋
• 切版效率提升，單頁 30 分鐘完成
• 系統導入 2 App、3 網站、8 系統
• 建立元件規範，支援 Ant Design → shadcn
• 團隊回饋規範清晰，協作更順暢
問題定義
專案背景
Accudata同時維運多個應用程式、企業網站與核心系統，但由於缺乏統一的設計規範，各產品的字級、icon、間距與元件樣式各自為政，不僅導致視覺風格不一致，也造成設計與開發的重複投入。前端團隊普遍以 Ant Design 作為基礎，但設計端並未建立對應規範，因而在交付與實作之間產生落差，增加了溝通與修改的成本。
我在加入公司後的第一週便參與兩個專案，並立即觀察到這些問題。與主管討論後，確立由我主導設計系統建置的計畫，這也成為我在公司推動的核心任務之一。由於團隊中僅有我具備相關經驗，這個專案不只是單純的系統建置，更是一次設計流程再造的契機。
在 Accudata 的開發流程中，通常遵循「需求端 → SA → RD → UI/UX（非必要）」的順序。專案交付開發後，設計師多半只在工程師或 SA 無法決定界面流程時才被拉進流程，導致設計參與間歇且作用被弱化。許多元件直接由工程師依需求自行調整與修改，造成相同元件在不同情境下的交互設計出現差異，進而破壞了使用者體驗的一致性。
這些問題在長期累積下，逐漸演變成組織層級的挑戰。公司一直缺乏一套統一的設計系統，使得設計與開發間的協作存在諸多困難。相同元件在不同專案中往往被拆分為獨立的子元件，後期維護與版本管理的難度因此大幅增加，也讓產品在一致性與效率上都面臨瓶頸。
現況痛點
隨著產品線與專案數量增加，缺乏統一設計規範的問題逐漸浮現，導致設計與開發的效率大幅下降：
重複元件問題
相同的元件在不同專案中被多次設計或開發，缺乏統一的定義與管理。工程端元件庫中常出現多個版本的同一元件，設計端則需要花費額外時間進行比對或重新設計，造成資源浪費。
跨專案共享困難
當不同團隊需要使用同一元件時，由於沒有共用規範，往往在各自專案中獨立開發，導致工程師重工、設計師也需在不同專案中多次檢驗，後期修改更需投入多位人力，增加錯誤風險。
一致性與維護困難
由於缺乏標準化的使用情境定義，元件在不同產品與情境下的表現不一致，直接影響使用者體驗。再加上缺少設計對焦與協作流程，SA 與 RD 常會自行定義與修改元件交互，進一步加劇了不一致性與後續維護的難度。
設計認知差異
設計師之間對元件的定義與使用方式缺乏共識，導致相同元件在不同設計師手上呈現出不同風格與交互，降低了產品的一致性，甚至影響了團隊間的信任。
解決方向
為了解決這些問題，我決定建立一套與 Ant Design 對應的設計系統，整合字級、icon、間距與元件規範，確保設計與開發能夠無縫對接。透過統一規範，不僅能夠提升跨產品的一致性與品牌辨識度，也能降低設計與開發的成本。Figma 元件庫的導入讓設計交付與前端切版的時間大幅縮短，而隨著系統的逐步完善，我也持續補充更多模組與模式，並建立使用情境的文件，幫助新進成員快速上手，確保這套設計系統能長期維護與擴充。
設計過程
01
需求蒐集
在專案初期，針對既有的產品、設計師與前端工程師的需求進行盤點，包含字級、icon、間距與常用元件，並整理開發端現行使用的 Ant Design 規範，確立需要解決的落差與優先級。
02
規範制定
根據需求分析，建立跨產品可共用的設計規範，定義字級層級、icon 樣式與間距系統，確保不同系統在視覺與邏輯上的一致性，並兼顧品牌調性。
03
元件設計
將最常被使用的按鈕、輸入框、表單、表格等元件模組化，並以 Figma 建立元件庫，讓設計師可直接套用，並與前端的 Ant Design 元件一一對應。
04
規範落地
將設計規範與元件文件化，整理成清晰的指南與手冊，幫助團隊快速理解並在協作中保持一致。同時在實際專案中導入設計系統，與前端合作測試可行性，收集回饋並針對使用或實作上的問題持續優化，確保規範真正落地並長期維護。
目標釐清
在目標釐清的階段，我與主管及跨部門成員一同對齊了專案的核心方向。我將需求拆解為四個層面：業務、產品、使用者，以及體驗與設計，並針對每一面向制定了清楚的目標，作為後續規劃與決策的依據。
業務目標
• 降低重複設計所造成的資源浪費
• 提升不同產品之間的一致性
• 讓設計投資轉化為更具長期效益的產出
• 迭代或新專案啟動時，以更低成本維持品質
產品目標
• 建立可快速複用的 UI 元件庫
• 協助既有系統更快完成整合
• 在新增或調整功能時具備良好延展性與彈性
• 與 Ant Design 對應，避免設計與開發間出現落差
使用者目標
• 提供設計師與工程師清楚完整的規範
• 設計師可直接套用共用元件，避免重複處理相似設計
• 工程師能快速找到對應規範，減少跨部門溝通成本
• 降低修正次數，使專案執行更流暢
體驗與設計目標
• 維持品牌調性，確保跨產品的一致性
• 建立統一且清晰的設計語言
• 提供內部系統與外部平台一致的使用體驗
• 增加使用者熟悉感與信任感
需求梳理
需求梳理是專案的關鍵步驟。我逐一盤點公司既有的產品，包括字級、icon、間距及常用元件，並同時參考前端工程師現行使用的 Ant Design 規範。這個過程讓我能夠找出差異點，並確認哪些元素需要調整、合併或重新定義。
系統流程
我將設計系統分為四個核心模組：字級層級（定義標題、段落與提示文字的層次）、icon 套件（統一尺寸與線條粗細，避免出現風格混亂）、間距系統（以 4/8pt grid 為基礎，確保設計與開發落地時的一致性）、以及元件設計（優先處理使用頻率最高的互動元件）。
在元件設計部分，系統涵蓋了按鈕、表單、表格、選單、側邊欄、分頁等常見模組，並延伸至 Layout、Grid、Divider、Breadcrumb、Autocomplete 等結構與導覽元素。這些規範全數整合至 Figma，成為可重複利用的設計資源，並與前端的 Ant Design 元件對應，讓交付流程更為順暢。
專案成果
設計輸出
我建立了完整的設計系統文件，涵蓋字級、icon、間距與常用元件，並在 Figma 中建置對應的元件庫。這套元件庫與 Ant Design 保持一致，讓設計與前端工程師可以在同一語言下協作，降低溝通與交付的摩擦。
成果與迭代
這套設計系統導入後，團隊在日常工作中的效率與協作明顯提升。設計師能更快完成設計稿，工程師也能直接套用規範，減少反覆調整與確認的情況。跨部門之間的溝通流程因此更加順暢，專案進行的節奏也更穩定。
系統建置後並未停下，而是持續迭代中。近期因為工程師在技術棧上由 Ant Design 轉為 shadcn，我也同步調整設計系統的對應規範，確保設計與開發依然能保持一致。同時，逐步補充更多模組（如 Navigation、Notification 等），將全色票與語意化色票製作成 color token，方便設計師在日常設計中快速取用，並規劃加入「使用情境（Usage Guideline）」示例，幫助新進設計師快速上手。這些努力不僅改善了當前的專案流程，也為公司奠定了跨產品設計一致性的基礎，讓設計系統成為推動組織設計品質的核心工具。
設計時間平均縮短
20%
前端切版時間縮短至
30 分鐘內
設計與開發的來回確認次數減少
10%
結論與反思
為了改善公司內部多產品缺乏一致規範、設計與工程協作成本高的狀況，我決定推動設計系統的建置，將零散的設計資源整理成完整規範。專案挑戰在於如何在短時間內，將既有產品的字級、icon、間距與元件盤點整合，並同時考量前端使用的技術基礎進行迭代（Ant Design → shadcn）。
最終我完成了初版的設計系統，並逐步擴充模組與使用情境，確保它能真正支持不同系統的開發需求。這個過程讓我體會到設計系統不僅是文件，更是跨部門的「溝通橋樑」。雖然前期投入龐大，但長遠來看，大幅降低了重複設計與開發的成本，並提升了團隊協作效率。未來若有更多時間，我希望補充更多情境化指引，幫助新進設計師快速上手，讓這套系統更具持續性的價值。
看看其他作品來更認識我！
想了解更多細節，歡迎與我聯絡 👋
企業共用設計系統建置
打造跨產品共用設計系統，確保一致體驗並強化品牌識別。
專案時間
2023.12 — 2024.01 完成初版設計系統（9 週）
2024.02 — Now 持續迭代與優化
專案目標
建立一套公司共用設計系統，整合字級、icon、間距與元件，並與前端工程師使用的 Ant Design 對應，提升設計一致性與開發效率。
角色與產出
• 主導設計系統架構規劃，制定設計原則與撰寫完整規範
• 與前端工程師協作，盤點常用 UI 元素，重新定義 52 種核心元件（按鈕、表單、表格、導航、佈局等）
• 整合字級規範、icon 套件與間距系統，搭建 Figma 元件庫，並對應 Ant Design，降低交付落差
• 培訓設計團隊，分享新元件的使用情境，建立跨部門溝通基礎與長期維護流程
專案挑戰
• 缺乏統一規範，設計重工成本高
• 設計與 Ant Design 缺乏對應規範
• 無完整元件庫，初期盤點耗時
• 團隊缺乏系統經驗，實作需多次協調
成果與反饋
• 切版效率提升，單頁 30 分鐘完成
• 系統導入 2 App、3 網站、8 系統
• 建立元件規範，支援 Ant Design → shadcn
• 團隊回饋規範清晰，協作更順暢
問題定義
專案背景
Accudata同時維運多個應用程式、企業網站與核心系統，但由於缺乏統一的設計規範，各產品的字級、icon、間距與元件樣式各自為政，不僅導致視覺風格不一致，也造成設計與開發的重複投入。前端團隊普遍以 Ant Design 作為基礎，但設計端並未建立對應規範，因而在交付與實作之間產生落差，增加了溝通與修改的成本。
我在加入公司後的第一週便參與兩個專案，並立即觀察到這些問題。與主管討論後，確立由我主導設計系統建置的計畫，這也成為我在公司推動的核心任務之一。由於團隊中僅有我具備相關經驗，這個專案不只是單純的系統建置，更是一次設計流程再造的契機。
在 Accudata 的開發流程中，通常遵循「需求端 → SA → RD → UI/UX（非必要）」的順序。專案交付開發後，設計師多半只在工程師或 SA 無法決定界面流程時才被拉進流程，導致設計參與間歇且作用被弱化。許多元件直接由工程師依需求自行調整與修改，造成相同元件在不同情境下的交互設計出現差異，進而破壞了使用者體驗的一致性。
這些問題在長期累積下，逐漸演變成組織層級的挑戰。公司一直缺乏一套統一的設計系統，使得設計與開發間的協作存在諸多困難。相同元件在不同專案中往往被拆分為獨立的子元件，後期維護與版本管理的難度因此大幅增加，也讓產品在一致性與效率上都面臨瓶頸。
現況痛點
隨著產品線與專案數量增加，缺乏統一設計規範的問題逐漸浮現，導致設計與開發的效率大幅下降：
重複元件問題
相同的元件在不同專案中被多次設計或開發，缺乏統一的定義與管理。工程端元件庫中常出現多個版本的同一元件，設計端則需要花費額外時間進行比對或重新設計，造成資源浪費。
跨專案共享困難
當不同團隊需要使用同一元件時，由於沒有共用規範，往往在各自專案中獨立開發，導致工程師重工、設計師也需在不同專案中多次檢驗，後期修改更需投入多位人力，增加錯誤風險。
一致性與維護困難
由於缺乏標準化的使用情境定義，元件在不同產品與情境下的表現不一致，直接影響使用者體驗。再加上缺少設計對焦與協作流程，SA 與 RD 常會自行定義與修改元件交互，進一步加劇了不一致性與後續維護的難度。
設計認知差異
設計師之間對元件的定義與使用方式缺乏共識，導致相同元件在不同設計師手上呈現出不同風格與交互，降低了產品的一致性，甚至影響了團隊間的信任。
解決方向
為了解決這些問題，我決定建立一套與 Ant Design 對應的設計系統，整合字級、icon、間距與元件規範，確保設計與開發能夠無縫對接。透過統一規範，不僅能夠提升跨產品的一致性與品牌辨識度，也能降低設計與開發的成本。Figma 元件庫的導入讓設計交付與前端切版的時間大幅縮短，而隨著系統的逐步完善，我也持續補充更多模組與模式，並建立使用情境的文件，幫助新進成員快速上手，確保這套設計系統能長期維護與擴充。
設計過程
01
需求蒐集
在專案初期，針對既有的產品、設計師與前端工程師的需求進行盤點，包含字級、icon、間距與常用元件，並整理開發端現行使用的 Ant Design 規範，確立需要解決的落差與優先級。
02
規範制定
根據需求分析，建立跨產品可共用的設計規範，定義字級層級、icon 樣式與間距系統，確保不同系統在視覺與邏輯上的一致性，並兼顧品牌調性。
03
元件設計
將最常被使用的按鈕、輸入框、表單、表格等元件模組化，並以 Figma 建立元件庫，讓設計師可直接套用，並與前端的 Ant Design 元件一一對應。
04
規範落地
將設計規範與元件文件化，整理成清晰的指南與手冊，幫助團隊快速理解並在協作中保持一致。同時在實際專案中導入設計系統，與前端合作測試可行性，收集回饋並針對使用或實作上的問題持續優化，確保規範真正落地並長期維護。
目標釐清
在目標釐清的階段，我與主管及跨部門成員一同對齊了專案的核心方向。我將需求拆解為四個層面：業務、產品、使用者，以及體驗與設計，並針對每一面向制定了清楚的目標，作為後續規劃與決策的依據。
業務目標
• 降低重複設計所造成的資源浪費
• 提升不同產品之間的一致性
• 讓設計投資轉化為更具長期效益的產出
• 迭代或新專案啟動時，以更低成本維持品質
產品目標
• 建立可快速複用的 UI 元件庫
• 協助既有系統更快完成整合
• 在新增或調整功能時具備良好延展性與彈性
• 與 Ant Design 對應，避免設計與開發間出現落差
使用者目標
• 提供設計師與工程師清楚完整的規範
• 設計師可直接套用共用元件，避免重複處理相似設計
• 工程師能快速找到對應規範，減少跨部門溝通成本
• 降低修正次數，使專案執行更流暢
體驗與設計目標
• 維持品牌調性，確保跨產品的一致性
• 建立統一且清晰的設計語言
• 提供內部系統與外部平台一致的使用體驗
• 增加使用者熟悉感與信任感
需求梳理
需求梳理是專案的關鍵步驟。我逐一盤點公司既有的產品，包括字級、icon、間距及常用元件，並同時參考前端工程師現行使用的 Ant Design 規範。這個過程讓我能夠找出差異點，並確認哪些元素需要調整、合併或重新定義。
系統流程
我將設計系統分為四個核心模組：字級層級（定義標題、段落與提示文字的層次）、icon 套件（統一尺寸與線條粗細，避免出現風格混亂）、間距系統（以 4/8pt grid 為基礎，確保設計與開發落地時的一致性）、以及元件設計（優先處理使用頻率最高的互動元件）。
在元件設計部分，系統涵蓋了按鈕、表單、表格、選單、側邊欄、分頁等常見模組，並延伸至 Layout、Grid、Divider、Breadcrumb、Autocomplete 等結構與導覽元素。這些規範全數整合至 Figma，成為可重複利用的設計資源，並與前端的 Ant Design 元件對應，讓交付流程更為順暢。
專案成果
設計輸出
我建立了完整的設計系統文件，涵蓋字級、icon、間距與常用元件，並在 Figma 中建置對應的元件庫。這套元件庫與 Ant Design 保持一致，讓設計與前端工程師可以在同一語言下協作，降低溝通與交付的摩擦。
成果與迭代
這套設計系統導入後，團隊在日常工作中的效率與協作明顯提升。設計師能更快完成設計稿，工程師也能直接套用規範，減少反覆調整與確認的情況。跨部門之間的溝通流程因此更加順暢，專案進行的節奏也更穩定。
系統建置後並未停下，而是持續迭代中。近期因為工程師在技術棧上由 Ant Design 轉為 shadcn，我也同步調整設計系統的對應規範，確保設計與開發依然能保持一致。同時，逐步補充更多模組（如 Navigation、Notification 等），將全色票與語意化色票製作成 color token，方便設計師在日常設計中快速取用，並規劃加入「使用情境（Usage Guideline）」示例，幫助新進設計師快速上手。這些努力不僅改善了當前的專案流程，也為公司奠定了跨產品設計一致性的基礎，讓設計系統成為推動組織設計品質的核心工具。
設計時間平均縮短
20%
前端切版時間縮短至
30 分鐘內
設計與開發的來回確認次數減少
10%
結論與反思
為了改善公司內部多產品缺乏一致規範、設計與工程協作成本高的狀況，我決定推動設計系統的建置，將零散的設計資源整理成完整規範。專案挑戰在於如何在短時間內，將既有產品的字級、icon、間距與元件盤點整合，並同時考量前端使用的技術基礎進行迭代（Ant Design → shadcn）。
最終我完成了初版的設計系統，並逐步擴充模組與使用情境，確保它能真正支持不同系統的開發需求。這個過程讓我體會到設計系統不僅是文件，更是跨部門的「溝通橋樑」。雖然前期投入龐大，但長遠來看，大幅降低了重複設計與開發的成本，並提升了團隊協作效率。未來若有更多時間，我希望補充更多情境化指引，幫助新進設計師快速上手，讓這套系統更具持續性的價值。
看看其他作品來更認識我！
想了解更多細節，歡迎與我聯絡 👋