這次工作坊將帶你體驗 AI 工具 Claude AI + Cursor 如何重新定義設計流程：
從「設計原則 → 設計元素 → Design Token → HTML 元件」的完整實踐
許多設計師正在面臨：
😕 抽象設計原則難以落實為具體規範
😨 與工程師溝通色彩、字級、間距時總是對不上頻
🥲 設計變更時無法即時同步產品開發的 UI 樣式
在這個工作坊中，你將學會如何建立設計決策的可追溯性，再運用生成式 AI 快速產出配色、字體、排版等視覺元素。透過 Figma Variables 與 Variables 外掛輸出 tokens.json / tokens.css，讓設計意圖能夠無縫轉譯。
接著在提供的 HTML+CSS 元件庫基礎上，透過修改 Token 即能即時看到按鈕、輸入框、標籤等元件同步變化，使用 Design Token 與工程師進行更高效的協作。最後示範運用 SourceTree 完成版本提交，讓 Token 與元件變更可追蹤、可回溯，確保心力放在系統化思考與視覺決策上。
📅［工作坊時間］2025 / 06 / 24 (二) 19:00-22:00 台灣時間 (18:50 開始入場）
📌［工作坊形式］此為跨領域技能培訓系列/中文講解工作坊
- 課程安排： 觀念講解 50% (60 mins) + 實戰案例討論 50% (90 mins) + QA 回饋 (30 mins)
- 課程形式： 線上 Google Meet
- 課程人數： 滿８人開班
🛎［活動流程］
1. 觀念講解：(約 60 分鐘)
設計系統基礎架構
- 設計系統三層結構：原則 → 元素 → 元件
- 使用 AI 工具 Claude AI、Cursor 精煉並命名產品設計原則
- Prompt 技巧：原則轉換為色彩／字體／間距規範
2. 實戰案例討論 (約 90 分鐘)
Token 建立與程式碼轉換
- Figma Variables 與外掛建立 Design Tokens
- Token 命名規範與層級結構實作
- tokens.json → tokens.css 映射與匯出流程
- HTML+CSS 元件庫實作：button、input、tag 等元件
進階應用技巧
- 即時修改 Token 觀察元件樣式同步效果
- 多主題設計：深色模式 Token Modes 生成
- SourceTree 圖形化 Git 操作：Clone → Commit → Push
3. 講師回饋及QA (約 30 分鐘)
- 作品展示與討論
- 講師個別回饋
- Q&A 問題解答
🎁［課程產出］
- 以 AI 工具 Claude AI、Cursor 精煉並定義產品的設計原則
- 透過 Figma Variables 與 Figma Tokens 外掛，輸出／匯入的 Design Token（tokens.json ＋ tokens.css）
- 一套由 Design Token 驅動、可即時預覽的 HTML 元件庫（Button、Input、Tag 等）
- 協作示範：將 tokens.css 與元件樣式交付工程師，展示改動後 UI 同步流程
- 使用 SourceTree 完成一次 Clone → Commit → Push，保留初版 Token 與元件的 Git 版本紀錄
👩🏻💻［適合什麼樣的人參加］
- 希望以系統化思維建立產品 UI 的 UI/UX 設計師
- 想用 Design Token 提升與工程師協作效率的設計團隊
- 想了解如何透過 AI 工具 Claude AI、Cursor 加速設計系統的規劃
- 適合已經會用 Cursor AI 工具的設計師（如果對 Cursor AI 工具不熟， ➡️ 成為UXY深修者會員 可以觀看 從設計思維到工程邏輯，學習用 AI 幫助設計 回放學習 Cursor AI 唷！）
- 適合要準備設計系統的同學，對設計系統還沒有概念的同學會較吃力（ ➡️ 成為UXY深修者會員 可以觀看 設計系統的設計心法 回放學習基礎設計系統知識）
📣［參加方式］非會員請由 Accupass 完成購票報名，UXY 會員經認證後可享有報名折扣
🎫［購票資訊］
- 早鳥票(5/24-5/31) 及 UXY會員 2000元
- 一般票 2400元
- UXY 會員享有折扣 5 位，最少 8 人開班
- 🔗成為UXY會員或升級會員
‼️［提醒事項］
- 工作坊前可以先安裝 Cursor
- 🎥 工作坊會錄影，上課後 30 天內看回播複習。
- 本活動委託 ACCUPASS 代為處理退款，詳見平台 FAQ
關於講者
Harry Chuang
- awwrated 創辦人
- 前 Shopmatic 資深設計與前端工程師
2017 年開始前往新加坡海外工作，協助產品團隊研究以及開發設計系統及元件庫平台，為公司大幅減少產品團隊之間的溝通問題與開發人力成本。並於 2019 年設計開發 awwrated 影劇避雷平台，幫助使用者更快找到好評影劇，目前是台灣最大的串流影音資訊平台。
教學經歷:
- IxDA 互動快板：Design System 的設計心法 - 建立、彈性到加速成長” 課程講師
- AAPD 線上課程”給設計師的設計系統必修課”講師
關於 UXY
UXY 是一個設計職涯加速器，專注於幫助轉職的自學設計師建立 UX 設計思維，並為軟體新創公司提供彈性的遠端設計支援服務。我們提供線上學習工作坊，並與業界設計導師和企業合作夥伴共同協作，協助設計師成長、創造科技職涯和理想生活，同時也幫助新創企業在設計上解決挑戰並加速發展。
加入成為 UXY 會員方案「探險家 & 深修者」兩種方案給想要持續學習的你
會員專享每月業師交流、季度技能工作坊、線上讀書會等等，歡迎加入 了解 UXY 會員方案！
你有在接案嗎？也歡迎加入成為 UXY Studio 合作設計師 或至 UXY Linkedin 了解更多！
有任何問題請加入 UXY Discord 社群，我們會盡快回覆你。
追蹤最新動態：Instagram｜Linkedin｜Facebook｜Medium
本活動委託 ACCUPASS 代為處理退款，詳見平台 FAQ
