How to design a website with AI (step-by-step tutorial)
🪄 Vibe code your next site with Replit: https://replit.com/refer/alienacai
📄 AI web design guide, checklist, and sample script (free): https://alienacai.gumroad.com/l/landingpageai
📄 2026 UX Career Guide (Free): https://alienacai.gumroad.com/l/uxroadmap
📖 My UX Course: https://fasttrackux.com
☕️ My Email List (Free): https://trillionscafe.substack.com/
Learn how to design and launch a responsive landing page with AI. In this video, I walk you through a brand new workflow using a multi purpose AI assistant and a vibe coding tool like Replit to turn an idea into a real website 🪄
Comment “Product Design” if you’d like to see more videos like this.
Chapters:
0:00 - What is a multi-purpose AI assistant and why to use one
0:40 - What is a vibe coding tool and why to use one
1:33 - How to choose the right CTA for your landing page
4:07 - How to write a strong PRD for a landing page
5:45 - How to write a strong first prompt for a vibe coding tool
6:54 - Prompt engineering in a nutshell
7:50 - How to improve your website after the first prompt
8:20 - My five-part model for evaluating digital products
10:16 - How to decide the order of landing page design iterations
10:54 - How to use Plan mode in Replit
10:11 - How to roll back to a previous design version in Replit
11:27 - How to use the Select tool in Replit to edit one element
11:50 - How to change your site’s design theme in Replit
12:06 - How to design for responsiveness and accessibility
13:44 - How to make your website functional in Replit
14:20 - How to set up page title, meta description, favicon, and social banner
15:11 - How to publish your site on a free Replit domain
15:29 - How to connect a custom domain to Replit
16:00 - Does using AI make you less of a designer?
📄 AI web design guide, checklist, and sample script (free): https://alienacai.gumroad.com/l/landingpageai
📄 2026 UX Career Guide (Free): https://alienacai.gumroad.com/l/uxroadmap
📖 My UX Course: https://fasttrackux.com
☕️ My Email List (Free): https://trillionscafe.substack.com/
Learn how to design and launch a responsive landing page with AI. In this video, I walk you through a brand new workflow using a multi purpose AI assistant and a vibe coding tool like Replit to turn an idea into a real website 🪄
Comment “Product Design” if you’d like to see more videos like this.
Chapters:
0:00 - What is a multi-purpose AI assistant and why to use one
0:40 - What is a vibe coding tool and why to use one
1:33 - How to choose the right CTA for your landing page
4:07 - How to write a strong PRD for a landing page
5:45 - How to write a strong first prompt for a vibe coding tool
6:54 - Prompt engineering in a nutshell
7:50 - How to improve your website after the first prompt
8:20 - My five-part model for evaluating digital products
10:16 - How to decide the order of landing page design iterations
10:54 - How to use Plan mode in Replit
10:11 - How to roll back to a previous design version in Replit
11:27 - How to use the Select tool in Replit to edit one element
11:50 - How to change your site’s design theme in Replit
12:06 - How to design for responsiveness and accessibility
13:44 - How to make your website functional in Replit
14:20 - How to set up page title, meta description, favicon, and social banner
15:11 - How to publish your site on a free Replit domain
15:29 - How to connect a custom domain to Replit
16:00 - Does using AI make you less of a designer?