AI-Powered Web Design: from MidJourney to LiveCanvas

In this video, we will learn how to use AI tools like midjourney and chatgpt, to generate an inspirational model for a website.
We’ll then create a web design system accordingly. Finally, we’ll see how to implement it with Bootstrap and WordPress using Picostrap5, a high performance starter theme, and the LiveCanvas page builder.

The goal is not only to replicate the AI-generated initial mockup, but to be left with a setup that will allow to build other webpages that will easily follow the visual style you’ve chosen.

************************************************
Chapters:
00:00 Intro about AI
01:33 Create A Website Design Using Midjourney
03:32 Export the Midjourney Inspirational Design
03:50 Figma
05:17 Build Color palette in Figma
07:27 Download Picostrap WordPress theme
08:07 Figma - Generate SCSS color variable
09:01 Import Color Variable in WordPress
10:41 Photopea, extract assets from midjourney
14:33 Font pairing
18:20 Coding the Midjouney Design
26:31 Coding the second section
28:26 Final result

************************************************
Tools used in this tutorial:-

LiveCanvas Page Builder
https://livecanvas.com/

Picostrap 5 - WordPress Bootstrap 5 Theme
https://picostrap.com/

Figma Design System for Bootstrap 5
https://www.figma.com/community/file/1109479469956494930

Photopea - Online Photo Editor
https://www.photopea.com/

ChatGPT
https://openai.com/blog/chatgpt/

Midjourney
https://midjourney.com/

FontJoy - Generate Font combinations
https://fontjoy.com/

______