2025 UXUI設計師必修

AI Prototyping 互動設計心法

AI Prototyping 互動設計心法

20 個經典動態案例實戰

20 個經典動態案例實戰

20 個經典動態案例實戰

26D 21H 02M 14S

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 實戰

design pic
design pic

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帶你手把手成爲互動設計專家

學員諮詢心得

學員諮詢心得

學員諮詢心得

  • 完全超出預期,以為免費的應該很佛系,結果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產品設計師-面試全攻略

client pic

導師1

Rice Tseng

Rice Tseng

Rice Tseng

現任OKX - Web3 資深設計主管,曾任Grab首席設計師,帶領 Grab 消費者端體驗設計,目前專注Web3、設計賦能與產品策略。

現任OKX - Web3 資深設計主管,曾任Grab首席設計師,帶領 Grab 消費者端體驗設計,目前專注Web3、設計賦能與產品策略。

client pic

導師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 (付款通知)

觀看次數

無限次數!無有效期限!

FAQ

FAQ

9月10日前購買打折 10%

從0開始成為互動設計大師,即便是初階設計師一樣可以在4.5小時學到互動設計的十大心法。使用 AI Prototyping 不需要寫程式也能達到頂尖動態效果!

IG: Productdesign1on1

Product Design 1 on 1

All rights reserved, ©2025

9月10日前購買打折 10%

從0開始成為互動設計大師,即便是初階設計師一樣可以在4.5小時學到互動設計的十大心法。使用 AI Prototyping 不需要寫程式也能達到頂尖動態效果!

IG: Productdesign1on1

Product Design 1 on 1

All rights reserved, ©2025

9月10日前購買打折 10%

從0開始成為互動設計大師,即便是初階設計師一樣可以在4.5小時學到互動設計的十大心法。使用 AI Prototyping 不需要寫程式也能達到頂尖動態效果!

IG: Productdesign1on1

Product Design 1 on 1

All rights reserved, ©2025