Designing the Future of AI Data Centers
Designing the Future of AI Data Centers
這份專案記錄了我如何從零開始，打造一個 AI 驅動的智慧工廠平台。Agaruda 專注 AI 數位孿生與資料中心模擬，主要透過 AI Agent 與 Digital Twin 技術的整合模擬數位工廠的即時場景。在這種多權限管理者的情境下，設計師不只需要釐清產品的核心功能規畫與需求優先級，更需要透過理解多方使用者角度，協助管理者把原本「出事才補救」的被動模式，提升為「能預演未來」的積極策略，讓 AI 真正的成為輔助管理者做決策的工具，確保每一份資源投入都能精準發揮其價值。
ROLE
Product Strategy
UI / UX Design
Visual Identity
DELIVERABLES
產品架構與流程
品牌視覺規範定義
產品動態展示
線下展覽整合文宣
產品架構與流程
品牌視覺規範定義
產品動態展示
線下展覽整合文宣
Year
2026
PLATFORMS
Omniverse, MAC, WINDOWS
Introducing
Introducing
從 0 到 1
從 0 到 1
奠定智慧工廠的數位體驗基石
奠定智慧工廠的數位
體驗基石
作為 Agaruda 第一代設計師團員之一，我負責從零建構品牌識別與產品體驗的完整體系。在新創起步的挑戰下，我將開發思維深度融入 UX 流程，在技術挑戰與商業目標間取得平衡。對我而言，設計不只是視覺的呈現，更是需要在技術限制與商業目標之間取得平衡。
以下是我在團隊中的核心貢獻:
作為 Agaruda 第一代設計師團員之一，我負責從零建構品牌識別與產品體驗的完整體系。在新創起步的挑戰下，我將開發思維深度融入 UX 流程，在技術挑戰與商業目標間取得平衡。對我而言，設計不只是視覺的呈現，更是需要在技術限制與商業目標之間取得平衡。
以下是我在團隊中的核心貢獻:
Product Planning
Product Planning
系統化的需求收斂
以設計方法論釐清碎片化需求，將洞察收斂為嚴謹的邏輯流程。透過與開發團隊深度對齊，我們成功排除潛在操作風險，更協助團隊在產品初期順利排定功能優先序與技術佈局。
系統化的需求收斂
以設計方法論釐清碎片化需求，將洞察收斂為嚴謹的邏輯流程。透過與開發團隊深度對齊，我們成功排除潛在操作風險，更協助團隊在產品初期順利排定功能優先序與技術佈局。
設計與開發自動化串聯
建立一套從 Figma 到 Storybook 與 GitHub 的自動化交付流。透過 Skill 規範導入 AI 工具，讓基礎元件標準化，並透過版本控制確保設計資產與多團隊即時同步，降低溝通成本。
設計與開發自動化串聯
建立一套從 Figma 到 Storybook 與 GitHub 的自動化交付流。透過 Skill 規範導入 AI 工具，讓基礎元件標準化，並透過版本控制確保設計資產與多團隊即時同步，降低溝通成本。
具開發思維的設計體系
針對虛實整合情境，導入 VisionOS 26 設計理念並重構 Token，確保 UI 在 2D 資訊與 3D 場景間具備高度適應性。再透過 Skill 規範文件，供第三方 MCP 調度，成立完整的開發循環。
具開發思維的設計體系
針對虛實整合情境，導入 VisionOS 26 設計理念並重構 Token，確保 UI 在 2D 資訊與 3D 場景間具備高度適應性。再透過 Skill 規範文件，供第三方 MCP 調度，成立完整的開發循環。
系統化的需求收斂
以設計方法論釐清碎片化需求，將洞察收斂為嚴謹的邏輯流程。透過與開發團隊深度對齊，我們成功排除潛在操作風險，更協助團隊在產品初期順利排定功能優先序與技術佈局。
具開發思維的設計體系
針對虛實整合情境，導入 VisionOS 26 設計理念並重構 Token，確保 UI 在 2D 資訊與 3D 場景間具備高度適應性。再透過 Skill 規範文件，供第三方 MCP 調度，成立完整的開發循環。
設計與開發自動化串聯
建立一套從 Figma 到 Storybook 與 GitHub 的自動化交付流。透過 Skill 規範導入 AI 工具，讓基礎元件標準化，並透過版本控制確保設計資產與多團隊即時同步，降低溝通成本。
Brand Experience
Brand Experience
主產品 Logo 設計
根據 CI 核心視覺設計主產品 Logo。透過幾何比例設計，並延續品牌主視覺核心概念。
主產品 Logo 設計
根據 CI 核心視覺設計主產品 Logo。透過幾何比例設計，並延續品牌主視覺核心概念。
科技展會影片製作
將 3D 場景 與 AI 協作方式直觀化，於 Nvidia GTC & Computex 現場展示。
科技展會影片製作
將 3D 場景 與 AI 協作方式直觀化，於 Nvidia GTC & Computex 現場展示。
展覽視覺與品牌觸點
參與 Nvidia GTC 與 Computex 兩大科技展覽設計。從大型易拉展、展場背板到名片與識別證。
展覽視覺與品牌觸點
參與 Nvidia GTC 與 Computex 兩大科技展覽設計。從大型易拉展、展場背板到名片與識別證。
主產品 Logo 設計
根據 CI 核心視覺設計主產品 Logo。透過幾何比例設計，並延續品牌主視覺核心概念。
展覽視覺與品牌觸點
參與 Nvidia GTC 與 Computex 兩大科技展覽設計。從大型易拉展、展場背板到名片與識別證。
科技展會影片製作
將 3D 場景 與 AI 協作方式直觀化，於 Nvidia GTC & Computex 現場展示。
Requirement Definition and Refinement
Requirement Definition and Refinement
產品雛形收斂
產品雛形收斂
轉化碎片化資訊為優先級策略
轉化碎片化資訊為優先
級策略
在 AI 的趨勢下，資料安全的重要性相較於過往，其複雜度線性提升。以資料中心而言，登入不只是簡單的帳號密碼輸入，更需注意在數據安全的流程安排。
但是複雜過於繁瑣的身份驗證會成為用戶進入 AI 工具的阻礙，為了加速團隊理解目前市場上的競品狀況，我重點研究了各家產品在 安全性 與 便利性 之間的權衡方式。我深入拆解了市面競品 (3 家直接、3 家間接)，逐一蒐集了 部署方式、定價模式、執行流程、登入方式、多人使用限制 等資訊，並依照 UX 流程繪製待追蹤的任務情境表，提供適合現階段的設計建議，讓調查結果可以直接提供為團隊在開發上的決策依據，加速溝通時間。
在 AI 的趨勢下，資料安全的重要性相較於過往，其複雜度線性提升。以資料中心而言，登入不只是簡單的帳號密碼輸入，更需注意在數據安全的流程安排。
但是複雜過於繁瑣的身份驗證會成為用戶進入 AI 工具的阻礙，為了加速團隊理解目前市場上的競品狀況，我重點研究了各家產品在 安全性 與 便利性 之間的權衡方式。我深入拆解了市面競品 (3 家直接、3 家間接)，逐一蒐集了 部署方式、定價模式、執行流程、登入方式、多人使用限制 等資訊，並依照 UX 流程繪製待追蹤的任務情境表，提供適合現階段的設計建議，讓調查結果可以直接提供為團隊在開發上的決策依據，加速溝通時間。
Screenshots Of The Relevant Pages
競品定位與 UX 分析
競品定位與 UX 分析
•
第一步 : 競爭分析模型
針對 6 家競品 (3 家直接、3 家間接) 逐一蒐集了部署方式、定價模式、執行流程、登入方式、多人使用限制、官方網址等欄位，也包含主要畫面截圖以利後續 UI 設計。
# 競品調查
# 競品客群
# 操作邏輯
•
第一步 : 競爭分析模型
針對 6 家競品 (3 家直接、3 家間接) 逐一蒐集了部署方式、定價模式、執行流程、登入方式、多人使用限制、官方網址等欄位，也包含主要畫面截圖以利後續 UI 設計。
# 競品調查
# 競品客群
# 操作邏輯
•
第二步 : 競品策略對照
將原始競品資料轉化為五個策略維度（登入流程、SSO識別方式、登入頁獲客漏斗、2FA 強制度、Idp清單、SCIM配置、多裝置支援、新用戶開通方式、登入失敗通知方式），讓六家競品橫向對齊比較，並給予適合現階段的設計建議，讓調查結果可以直接提供為團隊在開發上的決策依據。
# 橫向比較
# 策略萃取
•
第二步 : 競品策略對照
將原始競品資料轉化為五個策略維度（登入流程、SSO識別方式、登入頁獲客漏斗、2FA 強制度、Idp清單、SCIM配置、多裝置支援、新用戶開通方式、登入失敗通知方式），讓六家競品橫向對齊比較，並給予適合現階段的設計建議，讓調查結果可以直接提供為團隊在開發上的決策依據。
# 橫向比較
# 策略萃取
•
第三步 : 階段任務追蹤單
針對UI/UX設計頁面時，會需要顧慮到的情境所擬定的任務追蹤表，裡面列出所有還需要去截圖確認的畫面情境 (登入第二步、忘記密碼流程、2FA 設定頁等) ，並用紅黃綠標示優先度。用途是讓研究工作可以拆成多次進行，不會因為某個畫面沒截到就卡住開發時間。
# 情境追蹤
# 介面優先級
•
第三步 : 階段任務追蹤單
針對UI/UX設計頁面時，會需要顧慮到的情境所擬定的任務追蹤表，裡面列出所有還需要去截圖確認的畫面情境 (登入第二步、忘記密碼流程、2FA 設定頁等) ，並用紅黃綠標示優先度。用途是讓研究工作可以拆成多次進行，不會因為某個畫面沒截到就卡住開發時間。
# 情境追蹤
# 介面優先級
•
第四步 : UX Flow 研究框架
更加深入比對各競品的所有 UX 流程 (首次登入、忘記密碼、SSO 登入、錯誤情境) ，依序拆成逐步驟的追蹤列表。此內容目的是為下一階段的深度使用者旅程研究建立骨架，讓設計師去補資料時不需要重新擬定結構。
# 流程拆解
# 使用者旅程
# 產品骨架
•
第四步 : UX Flow 研究框架
更加深入比對各競品的所有 UX 流程 (首次登入、忘記密碼、SSO 登入、錯誤情境) ，依序拆成逐步驟的追蹤列表。此內容目的是為下一階段的深度使用者旅程研究建立骨架，讓設計師去補資料時不需要重新擬定結構。
# 流程拆解
# 使用者旅程
# 產品骨架
利用 HMW 與團隊腦力激盪
利用 HMW 與團隊腦力激盪
由於產品處於草創期、沒有開發主軸，且 NLP 能力與資料庫串接的需求邊界模糊，容易讓每次討論都從不同切入點重複發散。
為了讓設計方向能更聚焦，設計團隊一起腦力激盪。我們用 HMW 將問題聚焦在 如何讓使用者理解 NLP 能力 等問題。選出最需要解決的挑戰，再透過 分類整理 (Affinity Mapping) 歸納團隊碎片化的點子，將需求結構化，找出設計痛點。最後再針對 避免生成失敗 與 主動優化指令 等痛點，制定具體的設計應對方案。
簡單來說，選擇 HMW 的目的是讓問題先收斂到 使用者視角，確保後續 Affinity Mapping 和設計應對方案是在對的問題上展開，而非追著技術可行性跑。
由於產品處於草創期、沒有開發主軸，且 NLP 能力與資料庫串接的需求邊界模糊，容易讓每次討論都從不同切入點重複發散。
為了讓設計方向能更聚焦，設計團隊一起腦力激盪。我們用 HMW 將問題聚焦在 如何讓使用者理解 NLP 能力 等問題。選出最需要解決的挑戰，再透過 分類整理 (Affinity Mapping) 歸納團隊碎片化的點子，將需求結構化，找出設計痛點。最後再針對 避免生成失敗 與 主動優化指令 等痛點，制定具體的設計應對方案。
簡單來說，選擇 HMW 的目的是讓問題先收斂到 使用者視角，確保後續 Affinity Mapping 和設計應對方案是在對的問題上展開，而非追著技術可行性跑。
定義功能地圖與交互邏輯
定義功能地圖與交互邏輯
在確認產品核心方向後，我們與開發團隊進一步將複雜的需求轉化為 具體的邏輯流程（Flowchart）。這份圖表初步定義了從資料庫串接、AI 語意分析（NLP）到圖表生成與管理的每一個節點。透過梳理這套結構，不僅能預先排除了可能存在的操作衝突，更為雙方團隊提供了清晰的設計指南。
在確認產品核心方向後，我們與開發團隊進一步將複雜的需求轉化為 具體的邏輯流程（Flowchart）。這份圖表初步定義了從資料庫串接、AI 語意分析（NLP）到圖表生成與管理的每一個節點。透過梳理這套結構，不僅能預先排除了可能存在的操作衝突，更為雙方團隊提供了清晰的設計指南。
設計快速對焦
設計快速對焦
在確認了產品底層邏輯與功能流程後，我們進入了草圖繪製階段。這個步驟的重點著重於 空間佈局 與 交互成本 的初步評估。透過紙筆草圖，我能快速發想 Dashboard 的多種配置，並實驗 AI 聊天窗口與數據圖表之間的交互操作。
在確認了產品底層邏輯與功能流程後，我們進入了草圖繪製階段。這個步驟的重點著重於 空間佈局 與 交互成本 的初步評估。透過紙筆草圖，我能快速發想 Dashboard 的多種配置，並實驗 AI 聊天窗口與數據圖表之間的交互操作。
低保真原型與快速驗證
低保真原型與快速驗證
由於開發初期走高速 Sprint ，在極短的時間內我們繪製了大量功能雛形。為了驗證這些設計是否符合開發邏輯與使用者直覺，我們計畫安排使用者進行初步訪談。
鑑於產品前期涉及多項實驗性功能與保密介面，在保密優先的前提下，我們決定進行內部訪談。這讓我們能在視覺定調前，能 即時調整功能架構 與 操作流程，除了讓設計師在投入視覺規劃前，先確認核心邏輯是否可行，也能確保設計與開發團隊資訊確實對齊。產品前期的內部訪談大幅降低了資訊外洩風險，也幫公司在資源有限的草創期，省下了很多找外部受測者的時間和成本。
由於開發初期走高速 Sprint ，在極短的時間內我們繪製了大量功能雛形。為了驗證這些設計是否符合開發邏輯與使用者直覺，我們計畫安排使用者進行初步訪談。
鑑於產品前期涉及多項實驗性功能與保密介面，在保密優先的前提下，我們決定進行內部訪談。這讓我們能在視覺定調前，能即時調整功能架構與操作流程，除了讓設計師在投入視覺規劃前，先確認核心邏輯是否可行，也能確保設計與開發團隊資訊確實對齊。產品前期的內部訪談大幅降低了資訊外洩風險，也幫公司在資源有限的草創期，省下了很多找外部受測者的時間和成本。
Before
After
Before
After
訪談資料準備
訪談資料準備
在正式訪談前，我們準備了三樣文件 :
在正式訪談前，我們準備了三樣文件 :
•
保密協議書（NDA）
除了確保未上市的原型設計與核心 AI 邏輯等資產不外洩以防止競品模仿外，也聲明我們極致重視受訪者的隱私與資料權益。
•
保密協議書（NDA）
除了確保未上市的原型設計與核心 AI 邏輯等資產不外洩以防止競品模仿外，也聲明我們極致重視受訪者的隱私與資料權益。
•
訪談大綱與流程
為了確保訪談數據的一致性，同時聚焦產品的核心問題，我們擬定了訪談流程，確保每位受訪者都在相同基準下操作，確保能比對訪談結果。
•
訪談大綱與流程
為了確保訪談數據的一致性，同時聚焦產品的核心問題，我們擬定了訪談流程，確保每位受訪者都在相同基準下操作，確保能比對訪談結果。
•
階段任務規劃
考慮到產品功能較多且複雜，我們選擇任務導向測試 (Task-based Testing) 的策略，針對核心功能設計流程。 如此，我們能確保每個頁面都能被驗收，且同時清楚看見受訪者在每個關鍵環節是否感到困惑。
•
階段任務規劃
考慮到產品功能較多且複雜，我們選擇任務導向測試 (Task-based Testing) 的策略，針對核心功能設計流程。 如此，我們能確保每個頁面都能被驗收，且同時清楚看見受訪者在每個關鍵環節是否感到困惑。
訪談資料分析
訪談資料分析
此次訪談我透過 Teams 進行錄製並結合 Notion AI 即時轉錄，如此能協助我專注於觀察受訪者的情緒與反應。訪談後，我透過交叉比對影片與 AI 文本，確保資訊的準確性並過濾掉雜訊。
最後，我將碎片化的資訊整合為 使用者旅程地圖 與 系統化洞察表格，將原本 50分鐘 的影音資料濃縮成 5 分鐘即可吸收的視覺圖表，清楚標示流程中 每個階段的痛點 與 使用者預期心理，有效加速了跨部門溝通的決策效率。
此次訪談我透過 Teams 進行錄製並結合 Notion AI 即時轉錄，如此能協助我專注於觀察受訪者的情緒與反應。訪談後，我透過交叉比對影片與 AI 文本，確保資訊的準確性並過濾掉雜訊。
最後，我將碎片化的資訊整合為 使用者旅程地圖 與 系統化洞察表格，將原本 50分鐘 的影音資料濃縮成 5 分鐘即可吸收的視覺圖表，清楚標示流程中 每個階段的痛點 與 使用者預期心理，加速跨部門溝通的決策效率。
Interview Process
Turning Data Into Visual Charts
Before
After
Before
After
痛點收斂與優先級判定
痛點收斂與優先級判定
訪談結束後，除了將資訊視覺化之外，我建立了一套 優先級數矩陣圖。目的是為了幫助開發與設計團隊能快速決策 什麼該先做。
訪談結束後，除了將資訊視覺化之外，我建立了一套 優先級數矩陣圖。目的是為了幫助開發與設計團隊能快速決策 什麼該先做。
核心痛點 (L)
標記出那些會造成任務中斷、嚴重困擾使用者的功能阻礙。
共識收斂 (紅色便籤)
特別標出不同受訪者（User A/B）共同遇到的紅燈區，這通常是產品改版的最優先切入點。
層級化分類
透過這套模型，我將反饋量化為『核心痛點』、『功能缺失』與『介面優化』三個層級，協助團隊能更快速做出精準決策。
核心痛點 (L)
標記出那些會造成任務中斷、嚴重困擾使用者的功能阻礙。
共識收斂 (紅色便籤)
特別標出不同受訪者（User A/B）共同遇到的紅燈區，這通常是產品改版的最優先切入點。
層級化分類
透過這套模型，我將反饋量化為『核心痛點』、『功能缺失』與『介面優化』三個層級，協助團隊能更快速做出精準決策。
Exploratory Research
規劃品牌根基
規劃品牌根基
定調產品主視覺與設計系統建立
定調產品主視覺與設計
系統建立
待功能介面確認後，我們著手進行產品的主視覺定位。
在初期的產品視覺定位中，不單純僅追求視覺美學，更深度考量了 系統架構的整合度 與 前端開發的實作效能。我們選擇優先參考市面上成熟的設計規範 (Design Tokens) 為基礎架構作為後續系統開發的延伸，確保從色彩、間距到元件狀態 (States) ，都能在 3D 模擬環境下達到高度一致性，從而大幅降低後端開發的溝通成本與視覺還原的落差。
待功能介面確認後，我們著手進行產品的主視覺定位。
在初期的產品視覺定位中，不單純僅追求視覺美學，更深度考量了 系統架構的整合度 與 前端開發的實作效能。我們選擇優先參考市面上成熟的設計規範 (Design Tokens) 為基礎架構作為後續系統開發的延伸，確保從色彩、間距到元件狀態 (States) ，都能在 3D 模擬環境下達到高度一致性，從而大幅降低後端開發的溝通成本與視覺還原的落差。
設計定位前的研究
設計定位前的研究
Agaruda 平台的主要交互位置在 NVIDIA Omniverse 的 3D 場景中。為了在不遮蔽複雜數位資產的前提下維持操作直覺，我們定義 UI 不再是流於表面的 2D 圖層，而是 立體空間中的組成元素。不同於傳統 B2B 產品的平面維度，3D 場景為高度動態且變化頻繁的光影環境，極度考驗介面安排的資訊易讀性。為此，我們歸納了以下核心設計痛點：
Agaruda 平台的主要交互位置在 NVIDIA Omniverse 的 3D 場景中。為了在不遮蔽複雜數位資產的前提下維持操作直覺，我們定義 UI 不再是流於表面的 2D 圖層，而是 立體空間中的組成元素。不同於傳統 B2B 產品的平面維度，3D 場景為高度動態且變化頻繁的光影環境，極度考驗介面安排的資訊易讀性。為此，我們歸納了以下核心設計痛點：
•
視覺噪音與資訊屏蔽
傳統扁平化（Flat Design）的 UI 在複雜背景下會「消失」或產生嚴重的視覺競爭。如何在不遮蔽後方關鍵 3D 資產（如設備零件、路徑模擬）的前提下，確保操作面板的邊界感？
# 視覺負載
# 空間分層
# 背景模糊
•
視覺噪音與資訊屏蔽
傳統扁平化的 UI 在複雜背景下會 "消失" 或產生嚴重的視覺衝突。如何在不遮蔽後方關鍵 3D 資產 (如設備零件、路徑模擬) 的前提下，確保操作面板的邊界感?
# 視覺負載
# 空間分層
# 背景模糊
•
動態環境下的色彩與對比度失真
缺乏物理深度的 UI 會讓使用者分不清元件是在資產前方、後方還是內部。如何透過陰影、透視（Perspective）與 Z 軸位移，建立明確的空間層級（Spatial Hierarchy）？
# 動態對比
# 景深感知
#視差系統
# 光源適應
•
動態環境下的色彩與對比度失真
缺乏物理深度的 UI 會讓使用者分不清元件是在資產前方、後方還是內部。如何透過陰影、透視與 Z 軸位移，建立明確的空間層級？
# 動態對比
# 景深感知
#視差系統
# 光源適應
•
開發還原度與渲染效能
複雜的 CSS 濾鏡若未經優化，會導致 3D 場景卡頓。如何將 VisionOS 的視覺感性，轉化為高效的 Design Tokens，讓前端開發能在維持 60 FPS 的前提下還原設計細節？
# 設計規範
# 開發一致性
# 效能指標
•
開發還原度與渲染效能
複雜的 CSS 濾鏡若未經優化，會導致 3D 場景卡頓。如何將 VisionOS 的優勢，轉為易於開發使用的 Design Tokens，讓前端開發能在維持 60 FPS 的前提下呈現設計？
# 設計規範
# 開發一致性
# 效能指標
定義介面 : 2D 過渡至 3D場景
定義介面 : 2D 過渡至 3D場景
我們借鑒 VisionOS 26 專為沉浸式環境定義的 "與現實共存" 核心理念，透過 流體玻璃 (Fluid Glass) 與 倒角 (Deep Radius) 設計，克服了 3D 動態背景下的資訊易讀性挑戰。
同時，為了確保設計能順利與開發團隊協作並落實，我們進一步整合 Untitled UI 與 Shadcn 的數據架構，透過系統化的工程語言，將設計系統整理為具備成熟 Design Token 規範的工程語言，提升開發協作的還原度，加速產品的迭代效率。
我們借鑒 VisionOS 專為沉浸式環境定義的 "與現實共存" 核心理念，透過 流體玻璃 (Fluid Glass) 與 倒角 (Deep Radius) 設計，克服了 3D 動態背景下的資訊易讀性挑戰。
同時，為了確保設計能順利與開發團隊協作並落實，我們進一步整合 Untitled UI 與 Shadcn 的數據架構，透過系統化的工程語言，將設計系統整理為具備成熟 Design Token 規範的工程語言，提升開發協作的還原度，加速產品的迭代效率。
Legibility Strategies For Immersion
Legibility Strategies For Immersion
我們選擇 VisionOS 26，並非單純追求其磨砂玻璃的流行感，而是研究它如何處理 "數位物件與物理環境的遮蔽關係"。在 Omniverse 的高動態背景下，傳統 UI 會導致嚴重的視覺疲勞。透過研究 VisionOS，我們提取了光影過濾與景深層次的邏輯，確保 UI 懸浮於 3D 資產時，能維持一種 自然不突兀的介入感，而非生硬的覆蓋。
我們選擇 VisionOS 26，並非單純追求其磨砂玻璃的流行感，而是研究它如何處理 "數位物件與物理環境的遮蔽關係"。在 Omniverse 的高動態背景下，傳統 UI 會導致嚴重的視覺疲勞。透過研究 VisionOS，我們提取了光影過濾與景深層次的邏輯，確保 UI 懸浮於 3D 資產時，能維持一種 自然不突兀的介入感，而非生硬的覆蓋。
1
視覺降噪
3D 場景中充滿了繁雜的線條 (網格、零件邊緣)。流體玻璃能像濾鏡一樣，將背景的雜訊 "柔化"，使前方的文字與數據從複雜的環境中凸顯出來，維持資訊的對比度。
2
上下文感知
流體玻璃能讓使用者隱約看見後方的 3D 資產。這在 Omniverse 的環境中非常重要，因為使用者需要同時看到 UI 參數，並監控後方資產的空間位置，確保操作的正確性。
3
動態適應性
流體玻璃會隨著後方場景的光影變化而改變色調 (例如從明亮的戶外空間移動到光線難以進入的深山隧道) ，這種 "色彩共生" 能減少 UI 對視覺的突兀感，讓介面更加輕盈。
1
視覺降噪
3D 場景中充滿了繁雜的線條 (網格、零件邊緣)。流體玻璃能像濾鏡一樣，將背景的雜訊 "柔化"，使前方的文字與數據從複雜的環境中凸顯出來，維持資訊的對比度。
2
上下文感知
流體玻璃能讓使用者隱約看見後方的 3D 資產。這在 Omniverse 的環境中非常重要，因為使用者需要同時看到 UI 參數，並監控後方資產的空間位置，確保操作的正確性。
3
動態適應性
流體玻璃會隨著後方場景的光影變化而改變色調 (例如從明亮的戶外空間移動到光線難以進入的深山隧道) ，這種 "色彩共生" 能減少 UI 對視覺的突兀感，讓介面更加輕盈。
1
視覺降噪
3D 場景中充滿了繁雜的線條 (網格、零件邊緣)。流體玻璃能像濾鏡一樣，將背景的雜訊 "柔化"，使前方的文字與數據從複雜的環境中凸顯出來，維持資訊的對比度。
3
動態適應性
流體玻璃會隨著後方場景的光影變化而改變色調 (例如從明亮的戶外空間移動到光線難以進入的深山隧道) ，這種 "色彩共生" 能減少 UI 對視覺的突兀感，讓介面更加輕盈。
2
上下文感知
流體玻璃能讓使用者隱約看見後方的 3D 資產。這在 Omniverse 的環境中非常重要，因為使用者需要同時看到 UI 參數，並監控後方資產的空間位置，確保操作的正確性。
Distinguishing Between Interfaces And 3D Assets
UI vs. 3D
在 3D 的工業模擬場景中，存在大量直角與硬質結構。我們刻意採用大半徑的倒角，是為了呈現 非自然界/非結構性 的視覺差異。這能幫助使用者的大腦在極短的時間下區分：哪些是場景中的 3D 資產、哪些是可點擊的操作視窗，大幅降低認知負荷。
在 3D 的工業模擬場景中，存在大量直角與硬質結構。我們刻意採用大半徑的倒角，是為了呈現 非自然界/非結構性 的視覺差異。這能幫助使用者的大腦在極短的時間下區分：哪些是場景中的 3D 資產、哪些是可點擊的操作視窗，大幅降低認知負荷。
1
聚焦效應
根據視覺心理學，圓角能引導視線向中心收縮，幫助使用者在資訊密集的 Dashboard 中更快速地捕捉核心數據。
2
直角與圓角的差異
在 3D 空間中，呈現直角的物件多數為堅硬的建築結構或邊界, 而柔和的大倒角能呈現 "懸浮物件" 的識別性。這能幫助使用者的大腦快速區分：什麼是固定的 3D 場景，什麼是可互動的浮動視窗。
1
聚焦效應
根據視覺心理學，圓角能引導視線向中心收縮，幫助使用者在資訊密集的 Dashboard 中更快速地捕捉核心數據。
2
直角與圓角的差異
在 3D 空間中，呈現直角的物件多數為堅硬的建築結構或邊界, 而柔和的大倒角能呈現 "懸浮物件" 的識別性。這能幫助使用者的大腦快速區分：什麼是固定的 3D 場景，什麼是可互動的浮動視窗。
1
聚焦效應
根據視覺心理學，圓角能引導視線向中心收縮，幫助使用者在資訊密集的 Dashboard 中更快速地捕捉核心數據。
2
直角與圓角的差異
在 3D 空間中，呈現直角的物件多數為堅硬的建築結構或邊界, 而柔和的大倒角能呈現 "懸浮物件" 的識別性。這能幫助使用者的大腦快速區分：什麼是固定的 3D 場景，什麼是可互動的浮動視窗。
Foundations Of Architecture
Foundations Of Architecture
從靈感到實踐
從靈感到實踐
建構與 3D 場景共生的介面元素
建構與 3D 場景共生的
介面元素
元件的層級管理
元件的層級管理
前期的產品視覺定調之後，我們開始著手建置設計系統。針對 Agaruda 平台高度依賴 3D 模擬的操作情境，介面不應是覆蓋在場景上的貼紙，而應是環境的一部分。我規劃了 四層垂直架構 的交互原則。為了讓 2D 數據能以自然不厚重的方式懸浮於 3D 資產前，我將介面解構為四個物理屬性不同的層級，從底層的環境感知到頂層的陰影視覺權重。透過這種垂直化的架構規劃，我維持 VisionOS 視覺的同時，整合了 M3 海拔高度的層級管理。
前期的產品視覺定調之後，我們開始著手建置設計系統。針對 Agaruda 平台高度依賴 3D 模擬的操作情境，介面不應是覆蓋在場景上的貼紙，而應是環境的一部分。我規劃了 四層垂直架構 的交互原則。為了讓 2D 數據能以自然不厚重的方式懸浮於 3D 資產前，我將介面解構為四個物理屬性不同的層級，從底層的環境感知到頂層的陰影視覺權重。透過這種垂直化的架構規劃，我維持 VisionOS 視覺的同時，整合了 M3 海拔高度的層級管理。
•
Layer 1 & 2：建立環境感與識別度
最底層我們採用了半透明毛玻璃。這層的目的是為了 "與現實共存"，讓使用者在操作時，依然能些微看見後方 3D 資產的位置。接著，我們加上了 VisionOS 風格的流體倒角，這不只是為了設計美感，同時也需考量在充滿硬體的工業場景中，利用圓弧輪廓建立視覺錨點，讓使用者能快速區分這是可以操作的介面。
# 空間層級
# 毛玻璃材質
•
Layer 1 & 2：建立環境感與識別度
最底層我們採用了半透明毛玻璃。這層的目的是為了 "與現實共存"，讓使用者在操作時，依然能些微看見後方 3D 資產的位置。接著，我們加上了 VisionOS 風格的流體倒角，這不只是為了設計美感，同時也需考量在充滿硬體的工業場景中，利用圓弧輪廓建立視覺錨點，讓使用者能快速區分這是可以操作的介面。
# 空間層級
# 毛玻璃材質
•
Layer 3：解決易讀性痛點
中間這層 內模糊 (Inner Blur) 是元件關鍵設計。就像是一個濾波器，會模擬玻璃的折射來柔化背景雜訊。這解決了 3D 場景中背景資產複雜而導致文字看不清的問題，確保了資訊的對比度。
# 光學折射
# 視覺降噪
# 動態對比度
•
Layer 3：解決易讀性痛點
中間這層 內模糊 (Inner Blur) 是元件關鍵設計。就像是一個濾波器，會模擬玻璃的折射來柔化背景雜訊。這解決了 3D 場景中背景資產複雜而導致文字看不清的問題，確保了資訊的對比度。
# 光學折射
# 視覺降噪
# 動態對比度
•
Layer 4：定義元件優先級
在最頂層的處理上，我參考了 Material Design 3 的Elevation (海拔高度) 邏輯。在 3D 空間中，使用者需要明確知道哪個視窗離他更近。我將 M3 的海拔高度轉化為空間中的 Z 軸數值，讓陰影的深淺直接反應資訊的緊急程度。開發團隊只需要調用相對應的 Elevation Token，就能在開發軟體中完整呈現出這種具備物理邏輯的深度感。
# M3 海拔系統
# 視覺權重
# 物理層級認知
•
Layer 4：定義元件優先級
在最頂層的處理上，我參考了 Material Design 3 的Elevation (海拔高度) 邏輯。在 3D 空間中，使用者需要明確知道哪個視窗離他更近。我將 M3 的海拔高度轉化為空間中的 Z 軸數值，讓陰影的深淺直接反應資訊的緊急程度。開發團隊只需要調用相對應的 Elevation Token，就能在開發軟體中完整呈現出這種具備物理邏輯的深度感。
# M3 海拔系統
# 視覺權重
# 物理層級認知
高度 與 深度層級定義
M3 海拔高度
內模糊
流體玻璃
Implementing Dark Mode
Implementing Dark Mode
多場景模擬
多場景模擬
深色模式下的動態視覺平衡
深色模式下的動態視覺
平衡
實際應用
實際應用
在設計 3D 場景的深色模式時，Darkmode 不是單純的顏色反轉，為了在低光源場景下維持資訊的準確性，我們需要顧慮到文字與背景對比度過高時，會產生光暈色散跟視覺刺激，這會導致內容過多時產生字體在晃動刺眼的不適感，Lightmode 的陰影以及元件的層次感，在Darkomode其實效果不彰，且在使用場景中，使用者也有機率在昏暗工廠或強光戶外等極端場景使用該產品。
基於上述考量，我參考了Material Design的最新規範，引用 M3 的海拔高度系統 調整了陰影層級，並導入了 VisionOS 的液態玻璃邊界 來強化輪廓識別，維持 3D 模型與 UI 操作層之間的視覺平衡。
在設計 3D 場景的深色模式時，Darkmode 不是單純的顏色反轉，為了在低光源場景下維持資訊的準確性，我們需要顧慮到文字與背景對比度過高時，會產生光暈色散跟視覺刺激，這會導致內容過多時產生字體在晃動刺眼的不適感，Lightmode 的陰影以及元件的層次感，在Darkomode其實效果不彰，且在使用場景中，使用者也有機率在昏暗工廠或強光戶外等極端場景使用該產品。
基於上述考量，我參考了Material Design的最新規範，引用 M3 的海拔高度系統 調整了陰影層級，並導入了 VisionOS 的液態玻璃邊界 來強化輪廓識別，維持 3D 模型與 UI 操作層之間的視覺平衡。
•
Material 3 容器色彩語義
在M3系統中，Container 顏色專門定義元件的背景底色 (如 Primary Container) ，而 On-Container 則定義與其搭配的前景資訊 (如 On Primary Container) 。這種配對確保了色彩在任何海拔高度下都具有穩定的輔助讀性與視覺平衡。
此次我遵循新版 M3 的建議，以 Primary Container 取代了過去 M2 高飽和的 Primary 色。讓懸浮元件能以更柔和、更具現代感的方式融入 3D 空間，減少長期操作的視覺疲勞。
•
Material 3 容器色彩語義
在M3系統中，Container 顏色專門定義元件的背景底色 (如 Primary Container) ，而 On-Container 則定義與其搭配的前景資訊 (如 On Primary Container) 。這種配對確保了色彩在任何海拔高度下都具有穩定的輔助讀性與視覺平衡。
此次我遵循新版 M3 的建議，以 Primary Container 取代了過去 M2 高飽和的 Primary 色。讓懸浮元件能以更柔和、更具現代感的方式融入 3D 空間，減少長期操作的視覺疲勞。
色彩即是層級
新的 M3 系統用不同的 "表面色调" 層級取代 M2 組件陰影層級、採用更鮮線的色彩與圖標配色。
色彩即是層級
新的 M3 系統用不同的 "表面色调" 層級取代 M2 組件陰影層級、採用更鮮線的色彩與圖標配色。
Establish Guidelines
Establish Guidelines
M3 海拔高度
語意化命名
整併入 Skill 規範
Colour Scales and Token Creation
Colour Scales and Token Creation
在 AI 的輔助下，Living Design System 已經不再是份靜態的設計文件，而是一套會隨著產品演進、技術更新和用戶需求變化而持續 "生長" 。透過 AI Skill 作為橋樑，開發團隊能與設計師共同訓練這份數位資產，讓規範在每一次的代碼生成與設計迭代中，自動完成對齊與校準，這能彌補設計與開發之間的差距，並確保跨團隊的所有參與者皆能使用到最新的設計系統文件，以下是我認為的關鍵要素:
在 AI 的輔助下，Living Design System 已經不再是份靜態的設計文件，而是一套會隨著產品演進、技術更新和用戶需求變化而持續 "生長" 。透過 AI Skill 作為橋樑，開發團隊能與設計師共同訓練這份數位資產，讓規範在每一次的代碼生成與設計迭代中，自動完成對齊與校準，這能彌補設計與開發之間的差距，並確保跨團隊的所有參與者皆能使用到最新的設計系統文件，以下是我認為的關鍵要素:
關鍵要素
關鍵要素
•
自動化規範對齊
設計師在 Figma 中的任何改動 (例如調整 Token 或元件樣式) ，能透過 AI 協助彙整更新內容，提交報告給開發者，並由開發者確認內容後迭代更新。
•
自動化規範對齊
設計師在 Figma 中的任何改動 (例如調整 Token 或元件樣式) ，能透過 AI 協助彙整更新內容，提交報告給開發者，並由開發者確認內容後迭代更新。
•
Living Doc 共創與維護
設計師維護的內容不再是 "文字描述"，而是 Prompt 指令集。開發者與設計師將共同維護元件的 "條件定義" 與 "互動邏輯"。設計師安排 AI 彙整最新的 GitHub 提交與 Figma 改動，並由設計師確認是否符合品牌規格與UI相關規範，最終整理為 AI Skill 文檔，與所有團隊共同使用最新設計規範。
•
Living Doc 共創與維護
設計師維護的內容不再是 "文字描述"，而是 Prompt 指令集。開發者與設計師將共同維護元件的 "條件定義" 與 "互動邏輯"。設計師安排 AI 彙整最新的 GitHub 提交與 Figma 改動，並由設計師確認是否符合品牌規格與UI相關規範，最終整理為 AI Skill 文檔，與所有團隊共同使用最新設計規範。
•
多方協同持續維護
當開發團隊在實作組件時，產生了現有 UI Kit 未涵蓋的新元件，AI 能協助偵測並主動標註這項 "非標準組件"。並即時彙整開發端的實作反饋與設計稿上的差異，協助團隊討論是否針對此組件 "標準化" 入系統，還是保持例外。
•
多方協同持續維護
當開發團隊在實作組件時，產生了現有 UI Kit 未涵蓋的新元件，AI 能協助偵測並主動標註這項 "非標準組件"。並即時彙整開發端的實作反饋與設計稿上的差異，協助團隊討論是否針對此組件 "標準化" 入系統，還是保持例外。
為了讓 AI 能更好且有效率的理解設計系統，我建置了一套完整的 UI Kit 設計規範，涵蓋從基礎 Token 到複雜元件的互動細節。為了解決設計與開發間的溝通斷層，我詳細定義了元件 使用時機 與 互動標準。
接著，我透過 Claude Code 將這些設計規範整理為一套 "AI Skill"，將靜態的設計規範整理為具備 "設計邏輯" 數位資產，讓系統能自動生成符合品牌規範的代碼，使之成為與開發團隊加速溝通的工具，消除設計與開發間的認知斷層。我認為新的AI技能，讓設計師能將精力集中在 解決用戶體驗問題 而非前期的調整像素，以下是我的流程:
為了讓 AI 能更好且有效率的理解設計系統，我建置了一套完整的 UI Kit 設計規範，涵蓋從基礎 Token 到複雜元件的互動細節。為了解決設計與開發間的溝通斷層，我詳細定義了元件 使用時機 與 互動標準。
接著，我透過 Claude Code 將這些設計規範整理為一套 "AI Skill"，將靜態的設計規範整理為具備 "設計邏輯" 數位資產，讓系統能自動生成符合品牌規範的代碼，使之成為與開發團隊加速溝通的工具，消除設計與開發間的認知斷層。我認為新的AI技能，讓設計師能將精力集中在 解決用戶體驗問題 而非前期的調整像素，以下是我的流程:
建立基礎元件設置
建立基礎元件設置
在最新的設計流程中，Figma轉換角色，為產品建立基礎的品牌色彩及設計規範來源。建置的規範中，我沿用了上一份專案的命名方式，使用具擴展性的 語義化命名架構。針對國際化需求，特別引用了原先官網內建置的 i18n 排版規範，處理跨語系文字長度對 UI 佈局的影響。同時為了更有效率的使 Claude Code 讀取 Figma 並整併至 Storybook，所有 Token 皆採用與開發團隊一致的 大駝峰命名 (PascalCase)，減少設計與程式的開發成本。
在最新的設計流程中，Figma轉換角色，為產品建立基礎的品牌色彩及設計規範來源。建置的規範中，我沿用了上一份專案的命名方式，使用具擴展性的 語義化命名架構。針對國際化需求，特別引用了原先官網內建置的 i18n 排版規範，處理跨語系文字長度對 UI 佈局的影響。同時為了更有效率的使 Claude Code 讀取 Figma 並整併至 Storybook，所有 Token 皆採用與開發團隊一致的 大駝峰命名 (PascalCase)，減少設計與程式的開發成本。
語義化色彩令牌
字體 與 空間變量
多語系內容變量 (i18n)
Semantic Naming
Component (頂層)
與開發團隊整合 語義化 (Semantic) 與 大駝峰 (PascalCase) 命名規範，成功建立了具備高度擴展性的色彩體系
Semantic
將顏色與層級掛鉤，標示此色號功能
Primitives (底層)
定義基礎的系統色譜，作為系統基底色值來源
Color Values
定義系統最底層的 Hex Code，確保所有平台共享同一套原始數據
Component (頂層)
與開發團隊整合 語義化 (Semantic) 與 大駝峰 (PascalCase) 命名規範，成功建立了具備高度擴展性的色彩體系
Semantic
將顏色與層級掛鉤，標示此色號功能
Primitives (底層)
定義基礎的系統色譜，作為系統基底色值來源
Color Values
定義系統最底層的 Hex Code，確保所有平台共享同一套原始數據
Component Anatomy
Component Anatomy
視覺化元件解剖
為了深化設計與工程的對接，我參考了 uSpec 標準，為系統中的核心組件建立了 Anatomy (解剖圖) 示意
視覺化元件解剖
為了深化設計與工程的對接，我參考了 uSpec 標準，為系統中的核心組件建立了 Anatomy (解剖圖) 示意
建置設計系統規範書 (Claude Skill)
建置設計系統規範書 (Claude Skill)
建置設計系統的過程中，我們已經清楚地討論第一版本的色彩與佈局規範，此時我們著手建置Claude Skill文件，這麼作能夠減少設計師在建立新元件的開發時間。而在整理 Skills 之前，必須先釐清 Skill 的運作邏輯，其本質是 讓 Claude 在未來對話中不需要重新推導已知的設計決策。 所以整理的標準只有一個：
▍Claude 在接到任務時，能不能用最少的讀取次數，拿到足夠精確的規範，直接產出正確的程式碼？
為了讓 AI 讀取資料時能精準到位，且未來這些資料也需能有高度的擴張性，我請 Claude 讀取設計系統後，將色彩、字型、間距、玻璃效果、版型與互動規格各自萃取成獨立的 Foundation Skill，作為整個專案的基礎數值來源，詳細的流程如下 :
在整理 Skills 之前，先釐清 Skill 的運作邏輯，其本質是 讓 Claude 在未來對話中不需要重新推導已知的設計決策。所以整理的標準只有一個：
▎ Claude 在接到任務時，能不能用最少的讀取次數，拿到足夠精確的規範，直接產出正確的程式碼？
為了讓 AI 讀取資料時能精準到位，且未來這些資料也需能有高度的擴張性，我請 Claude 讀取設計系統後，將色彩、字型、間距、玻璃效果、版型與互動規格各自萃取成獨立的 Foundation Skill，作為整個專案的基礎數值來源，詳細的流程如下 :
在整理 Skills 之前，先釐清 Skill 的運作邏輯，其本質是 讓 Claude 在未來對話中不需要重新推導已知的設計決策。所以整理的標準只有一個：
▎ Claude 在接到任務時，能不能用最少的讀取次數，拿到足夠精確的規範，直接產出正確的程式碼？
為了讓 AI 讀取資料時能精準到位，且未來這些資料也需能有高度的擴張性，我請 Claude 讀取設計系統後，將色彩、字型、間距、玻璃效果、版型與互動規格各自萃取成獨立的 Foundation Skill，作為整個專案的基礎數值來源，詳細的流程如下 :
單一事實數值來源
最上方為 Figma 的設計系統，請 AI Agent 透過萃取動作向下流入六個 Foundation Skills (色彩、字型、間距、玻璃、版型、互動) ，這層是整個系統的單一事實來源，數值只在這裡定義一次
原子設計分層
中間層是依原子設計分層的 Component Skills，每個元件內部聲明依賴，按需引用對應的 Foundation，不重複撰寫任何數值
觸發場景示例
下方的三條觸發路徑為實際操作情境：實作元件時走 Component 入口再搜尋 Foundation，查詢 Token 或建立頁面時則直接取用 Foundation 層，不需額外花費時間與 Token，且能減少資訊錯誤
單一事實數值來源
最上方為 Figma 的設計系統，請 AI Agent 透過萃取動作向下流入六個 Foundation Skills (色彩、字型、間距、玻璃、版型、互動) ，這層是整個系統的單一事實來源，數值只在這裡定義一次
原子設計分層
中間層是依原子設計分層的 Component Skills，每個元件內部聲明依賴，按需引用對應的 Foundation，不重複撰寫任何數值
觸發場景示例
下方的三條觸發路徑為實際操作情境：實作元件時走 Component 入口再搜尋 Foundation，查詢 Token 或建立頁面時則直接取用 Foundation 層，不需額外花費時間與 Token，且能減少資訊錯誤
Integration of Design and Development
Integration of Design and Development
自動化工作流
自動化工作流
從元件庫到開發文件的串聯
從元件庫到開發文件
的串聯
從單一專案到系統化生態
從單一專案到系統化生態
這次的 AI 整合，我們建立了一套 高擴充性的設計系統。讓專案從單一的資源，提升為團隊的 共享基礎設施，未來不管是哪個團隊、哪個新專案，都能直接拿來修改使用，同時我也部屬了 Storybook 與 Github 做版本控制，為後續的 AI 流程加速開發時程。
透過將基礎元件標準化，設計師終於能從重複的視覺整理中解放。我們現在能更專注在判斷 什麼該做、什麼不該做，把力氣花在提升產品的 核心價值。
這次的 AI 整合，我們建立了一套 高擴充性的設計系統。讓專案從單一的資源，提升為團隊的 共享基礎設施，未來不管是哪個團隊、哪個新專案，都能直接拿來修改使用，同時我也部屬了 Storybook 與 Github 做版本控制，為後續的 AI 流程加速開發時程。
透過將基礎元件標準化，設計師終於能從重複的視覺整理中解放。我們現在能更專注在判斷 什麼該做、什麼不該做，把力氣花在提升產品的 核心價值。
Design Assets
Design Assets
Design System 基礎
Skill 規範
Storybook & Github 部屬
Component Integration Storybook
Component Integration Storybook
AI-Driven Design System 流程
AI-Driven Design System
在多次的優化 Skill 規範之後，我開始嘗試整合第三方MCP工具 (Pencil、Cursor、Lovable…等) 引用並繪製，最終選擇以 Pencil 做為主要工具，並搭配 Figma 建立完整的設計系統，再以Storybook做審查，並推到 Github 上做版本紀錄，未來的合作夥伴也能確實取得最新設計。以下是我的流程:
在多次的優化 Skill 規範之後，我開始嘗試整合第三方MCP工具 (Pencil、Cursor、Lovable…等) 引用並繪製，最終選擇以 Pencil 做為主要工具，並搭配 Figma 建立完整的設計系統，再以Storybook做審查，並推到 Github 上做版本紀錄，未來的合作夥伴也能確實取得最新設計。以下是我的流程:
From Concept To Development
From Concept To Development
Marketing Collateral
Marketing Collateral
線下展場視覺設計
線下展場視覺設計
NVIDIA GTC & Computex 國際展
NVIDIA GTC & Computex 國際展
除產品設計外，同時參與製作 產品主 Logo、國際展覽動態影片（NVIDIA GTC & Computex 2026），以及展場視覺文宣品，延伸品牌線上與線下的視覺形塑。
除產品設計外，同時參與製作 產品主 Logo、國際展覽動態影片（NVIDIA GTC & Computex 2026），以及展場視覺文宣品，延伸品牌線上與線下的視覺形塑。
Cinta Logo Design
Cinta Logo Design
Exhibition Promotional Material
Exhibition Promotional Material
Business Cards
Exhibition Badge
Roll-up Banner
GTC & Computex Related Videos
GTC & Computex Related Videos
COPYRIGHT © CHIEN-YI CHU ALL RIGHTS RESERVED