45 分
▶
設計原則:層級與構成
視覺層級、Gestalt 原則與排版基礎,做出清楚、有條理的畫面。
01
UX 與 UI 基礎
打好底子。先把介面與體驗的基本功做對,後面才走得遠。
02
Figma 與介面實作
從入門到進階。把 Figma 練到順手,並理解設計如何對應到程式。
4 小時
▶
Figma 入門到上手
從零開始的完整導覽,短而聚焦,含一個動手做的課程專案。
1.5 小時
▶
Figma 交付給 AI 代理
AI 能讀你的 Figma 並建構。學會設計如何轉成程式、怎麼為交付做準備。
1 小時
▶
深入:變數與樣式
從 primitive 到 semantic 的變數結構、與程式碼對齊的命名,以及 modes。
2 小時
▶
深入:元件與 Variants
從基本元件到含 variants、slot 與 properties 的元件集,並理解其對應程式。
1.5 小時
▶
深入:Auto Layout 與響應式
掌握一維與二維排版,從元件到整頁,並理解其如何轉為程式。
2.5 小時
▶
深入:原型設計
用 smart animate、可互動元件與變數,讓你的設計真正動起來。
03
用 AI 動手做
走出設計檔,把想法變成真的。不需要寫過程式,只要願意試。
30 分
▶
認識當前 AI 工具地圖
看懂 AI 的全貌,哪些工具做什麼、哪裡真的幫得上設計師、哪裡還不行。
1 小時
▶
Claude:打造你的 AI 代理團隊
用 MD 檔、技能與 MCP 連接 Figma,建立懂你品牌的工作流。零基礎可上手。
1 小時
▶
用 AI builder 出貨 Web App
把想法變成成品,不必迷失在程式裡。學會用 AI builder 建構、整理與出貨。
1 小時
▶
用 Cursor AI 把設計變成程式
想把設計檔變成真的 UI?用 Cursor 帶你把畫面化為可運作的程式。
04
設計系統與前端
從畫面到系統,從系統到真的能跑的程式。讓設計站得住、撐得久。
2.5 小時
▶
設計系統,不只畫面
從漂亮的 mockup 走到可規模化的系統:token、元件與站得住的交付。
2 小時
▶
前端基礎:HTML 與 CSS
看懂並寫出基本的 HTML / CSS,讓你和工程師、AI 代理都能順暢協作。
2 小時
▶
用 Figma Sites 上線網站
留在你熟悉的設計工具裡,用 Figma Sites 把版面變成真的網站,快速、免寫程式。