My Simple AI Workflow for UI/UX Design
21.1K views · 2026-09-22
Interaction & UXUI Design
Get $100 off any Designlab course: https://designlab.s.gy/eiPvhu
👉🏼 My AI for Designers guide (FREE): https://griffinwooldridge.com/ai-for-designers
Here’s my simple AI workflow for UI/UX design—from defining a problem and researching users to creating an interactive prototype, testing it, and refining it in Figma. Follow along as I design an event-planning app using ChatGPT, Claude Code, Notion, and Figma, then explain how to move from a prototype toward a working product. I’ll show you where AI helps, which steps are optional, and why the process matters more than the tools.
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.griffinwooldridge.com/
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.x.com/GriffinWDesigns
🔥 My top tools (some are affiliate links – thank you!):
Mobbin – https://mobbin.com/griffin
Claude Code: https://claude.ai/referral/QKgwnTDdgw
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
Anything – https://anything.link/griffin-wooldridge
0:00 Intro
0:44 Workflow Overview
1:07 Define the Problem
2:26 Designlab (Sponsor)
3:36 Research & Requirements
7:14 Wireframing (Optional)
7:38 Prototype
9:51 Test & Iterate
11:18 Refine in Figma (Optional)
13:15 Build
15:26 Recap
#aidesign #webdesign #aitools #vibecoding
👉🏼 My AI for Designers guide (FREE): https://griffinwooldridge.com/ai-for-designers
Here’s my simple AI workflow for UI/UX design—from defining a problem and researching users to creating an interactive prototype, testing it, and refining it in Figma. Follow along as I design an event-planning app using ChatGPT, Claude Code, Notion, and Figma, then explain how to move from a prototype toward a working product. I’ll show you where AI helps, which steps are optional, and why the process matters more than the tools.
📩 Business:
griffin@griffinwooldridge.com
🌐 Connect with me!
https://www.griffinwooldridge.com/
https://www.instagram.com/griffinwooldridge1
https://www.tiktok.com/@griffin.wooldridge1
https://www.facebook.com/griffinwooldridge1
https://www.linkedin.com/in/griffinwooldridge/
https://www.x.com/GriffinWDesigns
🔥 My top tools (some are affiliate links – thank you!):
Mobbin – https://mobbin.com/griffin
Claude Code: https://claude.ai/referral/QKgwnTDdgw
Framer – https://framer.link/griffin-wooldridge
Granola – https://go.granola.ai/griffin-wooldridge
Anything – https://anything.link/griffin-wooldridge
0:00 Intro
0:44 Workflow Overview
1:07 Define the Problem
2:26 Designlab (Sponsor)
3:36 Research & Requirements
7:14 Wireframing (Optional)
7:38 Prototype
9:51 Test & Iterate
11:18 Refine in Figma (Optional)
13:15 Build
15:26 Recap
#aidesign #webdesign #aitools #vibecoding