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.

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

Picostrap 5 - WordPress Bootstrap 5 Theme

Figma Design System for Bootstrap 5

Photopea - Online Photo Editor



FontJoy - Generate Font combinations