還在為了 UI 還原度跟工程師相愛相殺？ 「為什麼 Auto Layout 設好了，切出來還是歪的？」 「Design Tokens 到底怎麼過給工程端才專業？」
別再只會畫圖，2026 設計師的必備技能是 「用程式碼思維對齊品質」！這場工作坊不教你轉職寫程式，而是教你利用 Cursor AI 快速產出符合工程邏輯的組件，徹底精準校正 UI 誤差。
你將學會的即戰力：
邏輯轉譯： 把 Auto Layout 變 Flexbox，掌握 Design Tokens 變數系統。
Cursor 實戰： 透過 AI 映射 tokens.json，一鍵生成高品質元件庫。
工程除錯： 活用 Chrome Inspector 現場改 Code，溝通不再雞同鴨講。
運用 Design Tokens 建立標準語言，讓 AI 成為你與工程師協作的最強翻譯官。
雙棲設計師養成：用 AI 掌握 HTML/CSS 核心知識
📅 工作坊時間
2026 / 2 / 26 (四) 20:00-22:00 (19:55 開始入場）
📌 工作坊形式
此為跨職能技能培訓系列/中文講解工作坊
- 課程安排： 觀念講解 50% ＋ 實作練習 50%
- 課程形式： 線上 Google Meet
- 課程人數： 滿 10 人開班
🤩 工作坊亮點
- 實機演示 (Live Demo)： 打開知名網站（例如 Airbnb 或 Apple），用 Chrome Inspector 修改它的標題顏色或間距「程式碼也沒那麼難」。
- 「對齊」而非「寫程式碼」： 這堂課是為了「用工程師聽得懂的話去要求 UI 品質」。
- 準備一份「對照表」清單： 課後提供一份 PDF，列出 Figma 功能與對應的 CSS 屬性名稱。
🛎 活動流程
- 觀念建立 - 如何描述需求、Design Tokens 介紹
- 為什麼設計師了解基礎 CSS 能減少與工程師的來回溝通？
- 了解 Design Token 如何有效與工程師合作
- 邏輯轉譯：從 Figma 到 HTML/CSS
- Frame / Group → <div> / <section> → 容器的概念，就像是畫布上的區塊。
- Auto Layout → Flexbox → 對齊、間距、分佈。
- Styles (Text/Color) → CSS Variables / Design Tokens → 統一管理的變數系統。
- Cursor 實戰：Vibe 出你的第一個組件
- 讓 Cursor 協助規劃 Design Tokens 並產出一個元件
- 將 Figma 設計稿 使用 MCP 的方式串接給 Cursor，並要求它產出對應的 HTML/CSS。
- 工程除錯：Chrome Inspector 除錯好幫手
- 檢查元素： 教設計師如何直接在瀏覽器修改顏色、間距，並即時看到效果。
- 開源工具與插件推薦
- Figma Plugin: CSS Variables Generator / Figma Naming / Figma Linker
- Shadcn/ui： 高品質開源組件庫。
- Q&A 與 結語
👉🏻 在這場工作坊中，你將帶走：
- 使用 AI 自動化產出完整的 Design Tokens，並透過 Design Tokens 來協助開發元件。
- 溝通術語對照清單： 「間距調大一點。」Token 化的溝通： 「把這個元件的 Gap 從 spacing-sm 改成 spacing-lg。」
👩🏻💻 適合什麼樣的人參加
- 想了解如何上手 Cursor 進行 Vibe Coding 的設計師。
- 想了解 Design Token 如何成為設計與開發設定橋樑的設計師。
🤝 報名須知（門檻限制）
「不需要」任何程式基礎，但請具備：
💻 設備與軟體準備： 本次工作坊採實機操作，請預先安裝好 Cursor 與 Figma。
💡 溫馨提醒： 為了確保你在 90 分鐘實戰環節中不因額度受限（Cursor 免費版有每日/每月限制），建議預留足夠的 AI 使用額度，或評估加購一個月專業版（Pro），享受更流暢的開發快感！
📣 參加方式
非會員請由 Accupass 完成購票報名，UXY 會員經認證後可享有報名折扣
🎫 購票資訊
- 早鳥 $850
- 一般票 $900
- UXY 會員免費報名
‼️ 提醒事項
- 🎥 工作坊會錄影，上課後 30 天內看回播複習。
- 本活動委託 ACCUPASS 代為處理退款，詳見平台 FAQ
關於講者
Harry Chuang
曾任職於 TutorMing 學習平台、Shopmatic 電商平台； 亦受邀擔任 KKDay 設計顧問，主導首款 App 設計。
- 【設計系統培訓與顧問】
- AAPD 線上課程講師：開發設計系統課程，涵蓋 Design Tokens、元件規範與實戰建置 • QNAP 企業內訓：以「AI × 設計系統」切角，協助團隊加速規劃與落地 • UXY / IxDA 工作坊講師：以設計師 + 工程師雙視角，帶領學員理解設計系統如何提升團隊效率 • Codrops 特邀撰稿：分享如何用設計系統規範駕馭 AI 輔助開發，打造網站平台
- 【Shopmatic — 設計系統元件庫】
- 為新加坡設計團隊與印度工程團隊打造共用元件庫（Storybook） • 減少跨國協作的溝通成本，大幅提升產品交付效率
關於 UXY
UXY 是一個設計職涯加速器，專注於幫助轉職的自學設計師建立 UX 設計思維，並為軟體新創公司提供彈性的遠端設計支援服務。我們提供線上學習工作坊，並與業界設計導師和企業合作夥伴共同協作，協助設計師成長、創造科技職涯和理想生活，同時也幫助新創企業在設計上解決挑戰並加速發展。
加入成為 UXY 會員方案「探險家 & 深修者」兩種方案給想要持續學習的你
會員專享每月業師交流、季度技能工作坊、線上讀書會等等，歡迎加入 了解 UXY 會員方案！
你有在接案嗎？歡迎至 UXY Linkedin 了解更多！
有任何問題請加入 UXY Discord 社群，我們會盡快回覆你。
追蹤最新動態：Instagram｜Linkedin｜Facebook｜Medium
