Can AI Code a Complete Website With ChatGPT & Figma? | Full Tutorial
Design With Hannah Design With Hannah
1.14K subscribers
2,216 views
0

 Published On Feb 1, 2024

►►🎥🍿 Want to learn more about using Figma for design mockups? Watch more here: https://www.youtube.com/playlist?list... 🚀

In this ChatGPT web design tutorial, you'll learn how to create a website using AI prompts, based on a Figma design file which is used as a reference. Watch as I try to generate a website using Chat GPT to generate code (HTML and CSS) based on prompts. This works for websites and landing pages and then all you'll need is a hosting provider to upload the code it generates to the web.

Overall, it's still early days and while web design using AI is far from perfect, I think this can be a decent starting point for simple and minimalist projects as long as nothing too advanced is needed (at least in its current state). It could be helpful if you don't know much about code or if you're just starting out and you want to create a nice website without much complex functionality (for example a portfolio site, marketing landing page, etc).
-----------------------------------------------------
💻 Want a simpler website builder solution? Check out Framer - it's a lot of fun and a simple no code site builder. It's a drag-and-drop and you can choose to try it for free or upgrade for a custom domain. When you use my partner link, it in turn helps support my channel (thanks!) ►► https://www.framer.com?via=hannahdesigndeal
-----------------------------------------------------
🎓 Learn how to design prototypes in Figma as a complete beginner with my FREE Figma e-course here: https://www.figmatraining.com/pages/f...
-----------------------------------------------------
Music:
🎵 Intro music by Electric Mantis: https://open.spotify.com/artist/4oEju...

Remainder of the music is by Dj Quads - Blushes - free for use on YouTube. Music provided by BreakingCopyright:    • [No Copyright Music] Dj Quads - Blush...  

I hope this helps you! Occasionally on the links and resources provided in this description, I may earn a small commission when you make a purchase, and if so, thanks very much for supporting the channel! I only link to things that I personally enjoy and find useful.
-----------------------------------------------------

Timecodes:
0:00 Intro
2:17 ChatGPT website tutorial based on Figma design
9:41 Boilerplate header (before customization)
13:55 Customizing the header
17:00 Social proof section
19:37 Adding the "Services" section with cards
29:31 Adding placeholder images

#chatgpt #webdesign #ai #ui #nocode

show more

Share/Embed