2025 UXUI設計師必修
AI Prototyping 互動設計心法
AI Prototyping 互動設計心法
20 個經典動態案例實戰
20 個經典動態案例實戰
20 個經典動態案例實戰
Scroll down
Scroll down
to see examples
to see examples
Lovable
Cursor
Figma
ProtoPie
After Effect
Spline
#進階Figma #VibeCoding #AI原型設計 #Cursor #Lovable
#ProtoPie #Spline #3D動畫#AfterEffect #UI motion
#進階Figma #VibeCoding
#AI原型設計 #Cursor #Lovable
#ProtoPie #Spline #AfterEffect
#進階Figma #VibeCoding #AI原型設計 #Cursor #Lovable
#ProtoPie #Spline #3D動畫#AfterEffect #UI motion
適合設計師、PM、創業者與學生 — 讓你的想法真正動起來
適合設計師、PM、創業者與學生 — 讓你的想法真正動起來
20
動態原型案例
20
動態原型案例
9
大章節
9
大章節
275
分鐘濃縮精華
275
分鐘濃縮精華
學習亮點
學習亮點
學習亮點
從 0 到 1 精通互動設計與 AI Prototyping，打造會「動」的設計，讓作品瞬間脫穎而出。
從 0 到 1 精通互動設計與 AI Prototyping，打造會「動」的設計，讓作品瞬間脫穎而出。
從 0 到 1 精通互動設計與 AI Prototyping，打造會「動」的設計，讓作品瞬間脫穎而出。
AI Prototyping 工具應用
高階互動-跨裝置傳輸體驗
高保真互動案例
設計到程式落地
Vibe Coding 實戰
AI Prototyping 工具應用
實戰 Figma、Cursor、ProtoPie、Lovable、Spline 等九大原型與 AI 工具，學會用 AI 以及各種 prototyping 工具讓設計即時動起來。
AI Prototyping 工具應用
實戰 Figma、Cursor、ProtoPie、Lovable、Spline 等九大原型與 AI 工具，學會用 AI 以及各種 prototyping 工具讓設計即時動起來。
跨裝置傳輸體驗
Figma 是無法做到傳輸體驗、手機三軸、感應以及其他進階互動，掌握各種進階的互動串聯，打造流暢無縫的多平台使用體驗。
跨裝置傳輸體驗
Figma 是無法做到傳輸體驗、手機三軸、感應以及其他進階互動，掌握各種進階的互動串聯，打造流暢無縫的多平台使用體驗。
高保真互動案例
20 個業界經典案例帶你練習動畫、互動設計，強化視覺與操作的吸引力。
高保真互動案例
20 個業界經典案例帶你練習動畫、互動設計，強化視覺與操作的吸引力。
設計到程式落地
從設計驗證到 Vibe Coding，讓設計師也能參與程式實作，縮短產品上線時間。
設計到程式落地
從設計驗證到 Vibe Coding，讓設計師也能參與程式實作，縮短產品上線時間。
20大互動案例
20大互動案例
9大原型與AI工具
9大原型與AI工具
9大原型與AI工具
Cursor
Spline
ProtoPie
Figma
After Effect
Lottie
Figma Make
Lovable
ProtoPie Connect
完整包
課程大綱
完整包
課程大綱
完整包
課程大綱
從0到1帶你手把手成爲互動設計專家
從0到1帶你手把手成爲互動設計專家
第一章: 概念與原型設計的價值
為什麼要做原型？ 原型在產品設計開發流程的角色 原型工具 Prototyping 的價值與觀念
第一章: 概念與原型設計的價值
為什麼要做原型？ 原型在產品設計開發流程的角色 原型工具 Prototyping 的價值與觀念
第二章: 應用場景與原型類型
早期策略應用 Pitch Decks 概念驗證 Concept testing 設計探索 Design Jams 使用者測試 User Testing (UT) 設計交付 Design handoff
第二章: 應用場景與原型類型
早期策略應用 Pitch Decks 概念驗證 Concept testing 設計探索 Design Jams 使用者測試 User Testing (UT) 設計交付 Design handoff
第三章: Basic prototyping 基礎原型的應用
Headspace 如何運用動畫提升冥想體驗 Airbnb經典案例 - 運用動畫提升互動體驗 Liquid Glass液態玻璃動態效果 音樂應用的動態展示效果 IOT 拖拉互動 液態模組與靈動島
第三章: Basic prototyping 基礎原型的應用
Headspace 如何運用動畫提升冥想體驗 Airbnb經典案例 - 運用動畫提升互動體驗 Liquid Glass液態玻璃動態效果 音樂應用的動態展示效果 IOT 拖拉互動 液態模組與靈動島
第四章: Animated Prototype 進階動態原型
經典Instagram & Thread 心形動畫設計 卡片Liquid Glass液態玻璃動態效果 Success state animation 按鈕 Morphing 3D 立體手機展示 - 3D crypto 成功頁面
第四章: Animated Prototype 進階動態原型
經典Instagram & Thread 心形動畫設計 卡片Liquid Glass液態玻璃動態效果 Success state animation 按鈕 Morphing 3D 立體手機展示 - 3D crypto 成功頁面
第五章: Interactive Prototype 進階互動原型的實作
3D 卡片翻動 手機三軸視差效果 跨裝置傳輸體驗 卡片拖拉進階互動 drag card & re-arrange order 3D 立體手機展示
第五章: Interactive Prototype 進階互動原型的實作
3D 卡片翻動 手機三軸視差效果 跨裝置傳輸體驗 卡片拖拉進階互動 drag card & re-arrange order 3D 立體手機展示
章節六: 設計驗證與使用者測試
為什麼要做設計驗證？ 設計驗證的流程階段 使用者研究的流程階段 設計驗證和原型概念 量化分析指標
章節六: 設計驗證與使用者測試
為什麼要做設計驗證？ 設計驗證的流程階段 使用者研究的流程階段 設計驗證和原型概念 量化分析指標
章節七: 設計交付與互動規範
與開發者的有效溝通：定義 Interaction Spec After Effect 中匯出 json
章節七: 設計交付與互動規範
與開發者的有效溝通：定義 Interaction Spec After Effect 中匯出 json
章節八: 探索 AI 工具在 Prototyping 中的應用
Prompt to prototype 傳統工作流與AI prototyping 的差異 Figma Make, Bolt, Lovable 使用 Figma make 產生“對話式冥想”app
章節八: 探索 AI 工具在 Prototyping 中的應用
Prompt to prototype 傳統工作流與AI prototyping 的差異 Figma Make, Bolt, Lovable 使用 Figma make 產生“對話式冥想”app
章節九: Vibe coding AI加速設計到程式的實踐
了解什麼是Vibe Coding 知道如何用自然語言生成程式碼 如何用Figma用MCP轉譯為程式碼 網站實作範例 Figma MCP & Cursor網站實作
章節九: Vibe coding AI加速設計到程式的實踐
了解什麼是Vibe Coding 知道如何用自然語言生成程式碼 如何用Figma用MCP轉譯為程式碼 網站實作範例 Figma MCP & Cursor網站實作
完整包
課程大綱
完整包
課程大綱
從0到1帶你手把手成爲互動設計專家
輕量包
課程大綱
輕量包
課程大綱
輕量包
課程大綱
從0到1帶你手把手成爲互動設計專家
從0到1帶你手把手成爲互動設計專家
第一章: 概念與原型設計的價值
為什麼要做原型？ 原型在產品設計開發流程的角色 原型工具 Prototyping 的價值與觀念
第一章: 概念與原型設計的價值
為什麼要做原型？ 原型在產品設計開發流程的角色 原型工具 Prototyping 的價值與觀念
第二章: 應用場景與原型類型
早期策略應用 Pitch Decks 概念驗證 Concept testing 設計探索 Design Jams 使用者測試 User Testing (UT) 設計交付 Design handoff
第二章: 應用場景與原型類型
早期策略應用 Pitch Decks 概念驗證 Concept testing 設計探索 Design Jams 使用者測試 User Testing (UT) 設計交付 Design handoff
第三章: Basic prototyping 基礎原型的應用
Headspace 如何運用動畫提升冥想體驗 液態模組與靈動島
第三章: Basic prototyping 基礎原型的應用
Headspace 如何運用動畫提升冥想體驗 液態模組與靈動島
第四章: Animated Prototype 進階動態原型
經典Instagram & Thread 心形動畫設計 3D 立體手機展示 - 3D crypto 成功頁面
第四章: Animated Prototype 進階動態原型
經典Instagram & Thread 心形動畫設計 3D 立體手機展示 - 3D crypto 成功頁面
第五章: Interactive Prototype 進階互動原型的實作
手機三軸視差效果 跨裝置傳輸體驗
第五章: Interactive Prototype 進階互動原型的實作
手機三軸視差效果 跨裝置傳輸體驗
章節六: 設計驗證與使用者測試
為什麼要做設計驗證？ 設計驗證的流程階段 使用者研究的流程階段 設計驗證和原型概念 量化分析指標
章節六: 設計驗證與使用者測試
為什麼要做設計驗證？ 設計驗證的流程階段 使用者研究的流程階段 設計驗證和原型概念 量化分析指標
章節七: 設計交付與互動規範
與開發者的有效溝通：定義 Interaction Spec After Effect 中匯出 json
章節七: 設計交付與互動規範
與開發者的有效溝通：定義 Interaction Spec After Effect 中匯出 json
章節八: 探索 AI 工具在 Prototyping 中的應用
Prompt to prototype 傳統工作流與AI prototyping 的差異 Figma Make, Bolt, Lovable 使用 Figma make 產生“對話式冥想”app
章節八: 探索 AI 工具在 Prototyping 中的應用
Prompt to prototype 傳統工作流與AI prototyping 的差異 Figma Make, Bolt, Lovable 使用 Figma make 產生“對話式冥想”app
章節九: Vibe coding AI加速設計到程式的實踐
了解什麼是Vibe Coding 知道如何用自然語言生成程式碼
章節九: Vibe coding AI加速設計到程式的實踐
了解什麼是Vibe Coding 知道如何用自然語言生成程式碼
輕量包
課程大綱
輕量包
課程大綱
從0到1帶你手把手成爲互動設計專家
方案比較
方案比較
第一章：概念與原型設計的價值
第一章：概念與原型設計的價值
第二章：應用場景與原型類型
第二章：應用場景與原型類型
第三章：Basic prototyping 基礎原型的應用
第三章：Basic prototyping 基礎原型的應用
第四章：Animated Prototype 進階動態原型
第四章：Animated Prototype 進階動態原型
第五章：Interactive Prototype 進階互動原型的實作
第五章：Interactive Prototype 進階互動原型的實作
章節六：設計驗證與使用者測試
章節六：設計驗證與使用者測試
章節七：設計交付與互動規範
章節七：設計交付與互動規範
章節八：探索 AI 工具在 Prototyping 中的應用
章節八：探索 AI 工具在 Prototyping 中的應用
章節九：Vibe coding AI加速設計到程式的實踐
章節九：Vibe coding AI加速設計到程式的實踐
輕量包
TWD 2350
輕量包
TWD 2350
⬤
⬤
2個案例
2個案例
2個案例
2個案例
2個案例
2個案例
⬤
⬤
⬤
1個案例
1個案例
完整包
TWD 5500
完整包
TWD 5500
⬤
⬤
6個案例
6個案例
5個案例
5個案例
5個案例
5個案例
⬤
⬤
⬤
4個案例
4個案例
學員諮詢心得
學員諮詢心得
學員諮詢心得
完全超出預期，以為免費的應該很佛系，結果Rice竟然在我們聊天前先把履歷看過了，在履歷健檢時馬上就有滿滿具體的回饋，從大架構到小細節都有，事後還有重點筆記！
設計諮詢
雖然只有短短的時間，但Rice迅速地了解我的問題點，並給予精準的建議！而且在IC和管理上都有豐富的經驗，所以給予的回饋相當全面。結束後也分享筆記給我，覺得收穫滿滿！謝謝妳們:)
設計諮詢
Rice和Liya為我的職業瓶頸和案例研究提供了可行的建議。在1對1諮詢結束後，他們還分享給我諮詢筆記和總結，非常感謝他們的幫助！
設計諮詢
很喜歡 Rice 跟 Liya 互相扮演角色的模擬方式，幫助學員帶入情境，也很謝謝兩位前輩不藏私的分享例如白板題的解題技巧、薪資談判技巧及職涯發展道路介紹，這些寶貴的資訊都是幾年前求職時獲取不到的，也是在設計團隊不是很健全的公司學不到的事情。
UX/UI產品設計師-面試全攻略
完全超出預期，以為免費的應該很佛系，結果Rice竟然在我們聊天前先把履歷看過了，在履歷健檢時馬上就有滿滿具體的回饋，從大架構到小細節都有，事後還有重點筆記！
設計諮詢
非常感謝Rica and Liya在30分鐘內可以快速針對我的作品集報告給予很有用的意見，意見都很有方向性，能知道下一次的版本要怎麼修改會更好！
設計諮詢
當初預約時以為只能跟Liya或Rice其中一位諮詢，沒想到是2:1可以跟兩位諮詢，可以聽到兩位不同的觀點和分享真的很高興，也很感謝Liya和Rice提供的建議! 如果朋友有需求也會想推薦給朋友!:)
設計諮詢
很感謝你們耐心聆聽，提供寶貴的作品集改善，以及就業方向思考的建議，過程中感覺自己的問題真的被理解了，有個很好的諮詢體驗！☺️
設計諮詢
我覺得只要是以Framework的方式呈現的教學，都能蠻清楚的快速進入情況，學生也能根據自己自身狀況，去做出適合自己的調整，當然也不是直接照抄。
UX/UI產品設計師-面試全攻略
導師1
Rice Tseng
Rice Tseng
Rice Tseng
現任OKX - Web3 資深設計主管，曾任Grab首席設計師，帶領 Grab 消費者端體驗設計，目前專注Web3、設計賦能與產品策略。
現任OKX - Web3 資深設計主管，曾任Grab首席設計師，帶領 Grab 消費者端體驗設計，目前專注Web3、設計賦能與產品策略。
導師2
Liya Li
Liya Li
Liya Li
Liya 目前任職於 Agoda 擔任 Sr. Product Design Manager，在 Agoda 約有七年的經驗，團隊目前有13位成員涵蓋整個 core accommodation範疇。
Liya 目前任職於 Agoda 擔任 Sr. Product Design Manager，在 Agoda 約有七年的經驗，團隊目前有13位成員涵蓋整個 core accommodation範疇。
FAQ
FAQ
FAQ
課程怎麼進行？
課程將於9/15在Gumroad平台上線，並以線上觀看的形式為主，搭配Discord線上社群。
🚀 線上活動工作坊
我們會舉辦線上活動工作坊，讓購買的學員有機會一起聽專家分享、討論跟學習。
購買後我會獲得?
觀看4.5小時影片 20個由淺入深案例初始模板和完成版 20個案例製作完整demo 專屬私人社群
誰適合上這門課程?
創業家與產品經理想用互動原型清楚展示產品概念，提升溝通效率、快速驗證想法。 資深設計師希望精進互動設計與動畫技能，提升團隊影響力與個人競爭力。 初階設計師想學會實用設計工具，讓作品更吸睛，強化職場競爭力。 自由接案設計師追求多元動態設計能力，提升專案品質與客戶滿意度。 產品設計團隊需要統一設計流程，提升團隊在互動原型與測試上的整體實力。 UX設計師想深入用戶行為，強化動態原型設計與使用者測試能力。 互動設計學生希望建立完整互動設計技能，增強未來就業競爭力。 技術型創作者想結合設計與技術，打造創新互動體驗與數位產品。
請問提供發票明細收據、統編嗎?
目前購買指南尚無法提供收據以及統編，但在購買信件中可以申請 Invoice (付款通知)
觀看次數
無限次數！無有效期限！
課程怎麼進行？
課程將於9/15在Gumroad平台上線，並以線上觀看的形式為主，搭配Discord線上社群。
🚀 線上活動工作坊
我們會舉辦線上活動工作坊，讓購買的學員有機會一起聽專家分享、討論跟學習。
購買後我會獲得?
觀看4.5小時影片 20個由淺入深案例初始模板和完成版 20個案例製作完整demo 專屬私人社群
誰適合上這門課程?
創業家與產品經理想用互動原型清楚展示產品概念，提升溝通效率、快速驗證想法。 資深設計師希望精進互動設計與動畫技能，提升團隊影響力與個人競爭力。 初階設計師想學會實用設計工具，讓作品更吸睛，強化職場競爭力。 自由接案設計師追求多元動態設計能力，提升專案品質與客戶滿意度。 產品設計團隊需要統一設計流程，提升團隊在互動原型與測試上的整體實力。 UX設計師想深入用戶行為，強化動態原型設計與使用者測試能力。 互動設計學生希望建立完整互動設計技能，增強未來就業競爭力。 技術型創作者想結合設計與技術，打造創新互動體驗與數位產品。
請問提供發票明細收據、統編嗎?
目前購買指南尚無法提供收據以及統編，但在購買信件中可以申請 Invoice (付款通知)
觀看次數
無限次數！無有效期限！