AI Landing Page Design Tutorial | Build Without Coding
1.1K views · 2026-07-13
UI Design
In this video, I will be telling you the step by step process to create an AI website landing page design for FREE 🚀 using several free tools such as Figma, Chatgpt, Gemini and Antigravity. I am also going to provide you all the resources which you can download from the description link under "Resources". I hope you are going to enjoy and learn a lot from this tutorial 💫
Course Link: ⭐
https://www.udemy.com/course/become-web-design-pro-with-figma/?referralCode=75A96A7E9541F367B6AD&couponCode=MT250915G2
Discord Server
https://discord.gg/kGyq9EfSfq
Telegram Group
https://t.me/dvxuicommunity
AI Resources -
https://www.figma.com/design/0E9x8qzI5GXpZUEZNqDsfZ/YT-Resources?node-id=136116-15&t=L9emyAbj2YJ2Mdfe-1
Timestamps -
00:00 Intro
00:55 Prompt Guide
01:15 How to get inspiration for design
03:24 Generate image using ChatGPT
04:20 Create AI video using Gemini Omni
05:06 Installing Antigravity
06:23 Creating the web project
14:56 Project Planning with AI
16:36 Hero Section & Navbar
19:00 Company Logo Animation
22:40 Features Section
24:28 FAQs Section
27:22 CTA Section
30:00 Footer
31:51 Recap
33:01 Animating the website
35:25 Outro
Thank you for watching ✨
Tags
figma, figma design ui design ui ux tutorial ui design tutorial figma tutorial app design website design web development app development app making app ui design web ui design ux design learn ui design learn ux design learn figma figma elements ui ux design tutorial tutorials instagram redesign website redesigning DVxUI dvxui dribbble designs behance designs UI design
UX design Figma tutorial Figma basics
Figma for beginners Figma tips and tricks Figma workflow
User experience design Design process Design thinking Design tools
Course Link: ⭐
https://www.udemy.com/course/become-web-design-pro-with-figma/?referralCode=75A96A7E9541F367B6AD&couponCode=MT250915G2
Discord Server
https://discord.gg/kGyq9EfSfq
Telegram Group
https://t.me/dvxuicommunity
AI Resources -
https://www.figma.com/design/0E9x8qzI5GXpZUEZNqDsfZ/YT-Resources?node-id=136116-15&t=L9emyAbj2YJ2Mdfe-1
Timestamps -
00:00 Intro
00:55 Prompt Guide
01:15 How to get inspiration for design
03:24 Generate image using ChatGPT
04:20 Create AI video using Gemini Omni
05:06 Installing Antigravity
06:23 Creating the web project
14:56 Project Planning with AI
16:36 Hero Section & Navbar
19:00 Company Logo Animation
22:40 Features Section
24:28 FAQs Section
27:22 CTA Section
30:00 Footer
31:51 Recap
33:01 Animating the website
35:25 Outro
Thank you for watching ✨
Tags
figma, figma design ui design ui ux tutorial ui design tutorial figma tutorial app design website design web development app development app making app ui design web ui design ux design learn ui design learn ux design learn figma figma elements ui ux design tutorial tutorials instagram redesign website redesigning DVxUI dvxui dribbble designs behance designs UI design
UX design Figma tutorial Figma basics
Figma for beginners Figma tips and tricks Figma workflow
User experience design Design process Design thinking Design tools