Team collaboration
VORTEX · AI TEAM

AI Team 中的
UX 工作流程分享

以產品設計師的視角，分享加入 AI Team 五個月以來的協作模式、工具實踐，以及對設計師角色轉變的觀察。

Amy Tang · 產品設計師 2026
WORKFLOW

目前在 AI Team 的工作流程

PM 開出需求
Open Spec 產出 Specs
持續迭代期
PM · UX · RD
三方討論
UX 更新
Prototype
Open Spec
持續更新 Specs
三方討論期間，Specs 與 Prototype 持續同步迭代，直到需求收斂
需求與功能收斂
PM 定版 Specs
UX 定版 Prototype
High Level Spec

專案初期的挑戰

三方需花大量時間對齊需求與規格，缺乏具體視覺化內容時容易反覆討論、難以聚焦。

UX 的關鍵介入點

在會議中即時產出 Prototype，讓討論圍繞具體畫面展開——向 PM 確認操作邏輯與使用者旅程是否符合專案目標，同步協助團隊收斂需求。

PROTOTYPE-DRIVEN

用 Prototype 驅動需求收斂

會議中即時產出 Prototype

直接將需求視覺化，讓討論不再抽象，加速共識形成。

持續迭代更新

根據三方回饋不斷更新 Prototype，逐步收斂功能範圍與優先序。

PM 更新 Specs

方向達成共識後，PM 更新 Open Spec 產出的 Specs，做為後續 High Level Spec 的基礎。

「這次專案 UX 提供了好幾版 Prototype，我個人覺得很有效！」

— AI Team 成員反饋

實作案例：Sites 專案

將 VORTEX 新版 Design System（LUMIXIS）透過 Figma MCP 匯入 Claude Code，產出 vortex-lumixis-design-system：

component-specs.md lumixis-token-reference.md SKILL.md

以此做出符合 VORTEX 2.0 風格的 Prototype。

PAIN POINT

目前最大的開發痛點

今年同時維護 VORTEX 1.0 與開發 2.0，但兩套系統在 AI 協作能力上有本質差異。

VORTEX 1.0

設計稿的製圖方式 AI 無法讀取，所有畫面必須手動產出，耗費大量時間與人力。

無法 AI 協作 純手動產出
vs

VORTEX 2.0

透過 LUMIXIS Design System + Figma MCP，AI 可讀取元件規格，快速產出符合設計規範的 Prototype。

AI 可讀取 快速產出

關鍵洞察

「AI-ready」的設計資產是一切的前提。不只是 Design System，Spec 的撰寫方式、命名規範、檔案結構，都應考慮「AI 能不能讀」——這決定了 AI 能幫上多少忙。

DELIVERY

Prototype 定版後的交付流程

01

Spec 交叉比對

請 Claude 比對 Spec 與 Prototype，盤點缺失項目並修正，確保設計完整涵蓋所有需求。

02

Error Handling 盤點

產出 error-handling-inventory.md，系統性列舉所有例外情境，避免遺漏邊界狀況。

03

Key Screens 分析

透過 Claude 分析 Key Screens 的數量與內容，做為提供給前端 RD 的設計交付檔案。

Prototype 定版
Spec 交叉比對
Error Handling
Key Screens → 交付前端

為什麼 Error Handling 盤點特別有價值？

大部分設計師容易遺漏邊界情境，靠 AI 系統性地從 Spec 中抓出例外狀況，比人工 Review 更全面。

OVERVIEW NEEDS

User Story Flow 與產品全貌

Design Manager 和 Project Manager 的需求

需要一份以 User Story 為主軸、逐步展開的畫面流程圖，同時能看出產品的 IA 層級關係——兼具「流程」與「結構」的視覺化文件，快速掌握產品全貌。

目前的做法

透過 Claude 搭配 Pencil MCP，從 Prototype 截圖並排版為圖文搭配版本，產出 User Story Flow 的 PDF。

未來展望

  • 待 Claude 寫入 Figma 功能完善，可直接在 Figma 產出流程圖
  • 用互動式 .html 取代靜態 PDF，管理者可展開 / 收合 IA 層級、點擊查看畫面細節
  • 從靜態設計稿 → 可互動的 Prototype → 可直接驗證體驗的產品預覽

這類產出是設計師的高時間成本項目——它不是設計過程的自然產物，而是需額外整理、截圖、排版的「再加工文件」。用 AI 自動化這個環節，是非常值得投資的方向。

PERSPECTIVE

設計師要捨棄 Figma 嗎？

短期觀點：未必

設計系統的元素與元件仍需持續更新，Figma 做為快速產出的畫布依然好用。重點不是取代工具，而是擴展能力邊界。

面對 AI 帶來的改變，產品設計師不再只能在靜態設計稿上驗證產出是否符合預期。

設計師角色的轉變

PAST
產出設計規格
NOW
參與 Coding
驗收最終產品

設計師不需要成為工程師，但需要具備「與 AI 協作寫程式」的能力——重點是懂得如何下指令、驗收產出、迭代修正，而非從零手寫程式碼。

INSIGHTS

洞察與未來方向

Prototype 角色正在升級

AI 可將 Prototype 與 Spec 交叉比對，未來可直接成為 E2E 測試基準，甚至自動生成測試案例。

Design QA 自動化

當 AI 能同時讀取 Design Token 與前端程式碼，即可自動比對設計稿與實際產出的差異，取代人工逐頁驗收。

設計交付物的轉變

Prototype 即 .html——可互動、可分享、可版控。交付物從「圖片＋標注」變成「可運行的程式碼」。

CRITICAL

建立 AI-ready 的設計資產

LUMIXIS 已驗證：結構化、AI 可解析的設計資產，能帶來指數級的效率提升。Spec 撰寫方式、命名規範、檔案結構都必須以「AI 可讀」為前提。

基礎建設的回報是非線性的，一旦建立，每個專案、每位成員都將持續受益。越晚啟動，技術債越大。

下一步：將 Design System 延伸為 codebase 層級的結構化資產（Design Tokens、Component Specs as Code），讓 AI 零摩擦地讀取與引用。

BONUS

VORTEX Voice & Tone 文案工具

最近由 Mike 發起，我們訪談了 PM / Marketing / CS 部門，再與設計團隊的 UX Writer 討論整合後，產出了一份 VORTEX Voice & Tone 文案工具。

PM Marketing CS 部門訪談
UX Writer 內部討論整合
VORTEX Voice & Tone

產出內容

guidelines.md SKILL.md

用於確保 VORTEX 產品中所有文案風格的一致性。

目前狀態

驗測階段，後續會再跟大家分享

TOOLBOX

工具使用一覽

AI 助理
Claude CodeGemini
規格文件
Open Spec
開發工具
Superpowers
繪圖工具
FigmaPencil
檔案管理
GitHub

MCP 串接

Figma MCP 將設計系統元件匯入 AI，Pencil MCP 用於產出 User Story Flow PDF。

LUMIXIS Design System

VORTEX 2.0 的設計系統，透過 AI 工具鏈實現設計到開發的無縫銜接。

THANK YOU

Thanks for listening!

AI 正在重新定義產品設計師的工作方式，
讓我們一起探索更多可能。

Q & A

歡迎提問與討論