AI WORKFLOWS & MORE:
Follow me on X:
Design with AI – Full Guide:
Build a client-ready Apple-style website in minutes using Claude Code and Google AI Image Gen, also known as Google Nano Banana. I’ll walk through the full AI design workflow, from generating polished product visuals to turning them into a high-end landing page with smooth scroll animations, premium layouts, and Apple-inspired motion.
🔗 OTHER VIDEOS TO WATCH
Build a Design System:
Complex Design System & Figma Variable Setup:
Claude Design Video:
🔗 MORE LINKS
↪️ Need a design system? (also included in the academy):
Let us build or fix your design system:
📣 Save 20% on the Annual Mobbin plan:
Claude Design:
Higgsfield:
kirkland@uicollective.co
Why Join UI Collective Academy? Get access to premium courses, premium downloads, and so much more on the way (I am largely building this solo…trying to make design education available for all, support goes a long way!)
0:00 An Introduction
1:01 Getting Started in Claude Design
2:25 Claude Design Output
3:18 Moving Into Claude Code
4:03 AI Image Gen with Google Nano Banana
6:42 Using Kling to Build a Video
9:09 Breaking the Video Out In Frames
9:54 Generating the Hover Effect
11:12 Previewing First Result
12:07 Focusing On the Second Interaction
13:07 Building the Second Interaction
14:19 AI Design Preview
14:58 Full Output
15:20 Prepping for Vercel
16:12 Deployed Website
16:25 Outro
コメント