AI03: Build a Website with Midjourney, Figma & ChatGPT

alieninterfaces.com/
Alien Interfaces Episode 03
In this episode we create a web application design in midjourney. Then we create the assets and prototype in figma. Finally we use ChatGPT to help us generate the HTML, CSS and Javascript.
Prompt: UI UX interface design side by side Behance Dribbble, beautiful colorful creative app marketplace --q 2 --stylize 1000 --v 4
Source Code:
github.com/alieninterfaces/03...
Midjourney: www.midjourney.com/
Stability Photoshop Plug-in: christiancantrell.com/#ai-ml
Greensock Animation Platform: greensock.com/gsap/
Music:
- DaniSogen - The Magic Unfolds
- Provided by Lofi Records
- Watch: • DaniSogen - The Magic ...
- Download/Stream: fanlink.to/TheMagicUnfolds

[@oladapoogidan8543]

The mistake we are all making is that AI is here to take our job, but it’s a big lie. AI is here to save more time just like the computer does, anyone without solid knowledge can never do what you just did even if he or she knows all the AI tool in the universe. I am a data analyst and I can say AI has helped me finish project much more faster and professionally, clients are really loving the delivery speed nowadays.

[@iciest.icy.n.icy.rice.1]

but this is just the beginning tho? The whole AI revolution thing started with Chatgpt and it hasn't been much since it came out, yet the increase in AI capabilities is better than anything in the past decades. Of course people can't do much even if they have AI help right now... but in the future, we might just get AIs that can take simple text as input and create entire project by itself.

[@lorgerdat]

It will take the jobs of those who fail to adapt to it, which will be alot of people especially those late in their careers, and also companies who focus on niche products that are now easily replaced by AI.

[@LuismaLorca]

@@iciest.icy.n.icy.rice.1 "its just the beginning bro!" I swear you AI bros all sound like crypto bros.

[@dipanjanghosal1662]

Stop the copium

[@iciest.icy.n.icy.rice.1]

@@LuismaLorca It literally is the beginning tho? How long do you think it's been since chatgpt came out? it was good as is but now we have gpt 4 which can generate 3 times more text compared to its predecessor, can scan images and solve any problem in it, pass the hardest of tests with flying colors, scan and write entire documents by itself as well. And now we have plugins for gpt 4 which can connect it to the internet. This is the start of a new era, dude. Github copilot, VS code copilot, Microsoft copilot 365, microsoft bing copilot, etc., these are all crazy in terms of funtionality. The you have image generators, stable diffusion, novelAI, midjournry, anything v3, automatic 1111, adobe firefly etc etc that can literally materialize your imagination within seconds. It is on par with professional artists. The whole "bad hands" thing has been fixed with midjourney v5 and poses and other things are fixed by controlnet in stable diffusion. Now you have slides ai, voice ai, tome ai, code ai, etc etc that can easily do what people would take weeks or even months for. Think about the first smartphone and look at how far humanity has come within the past two decades in terms of the capabilities of smartphones. It's the same for AI, except the advancements are happening on a much more rapid scale.

[@alejandrosauqueperez931]

I think the speed in which you manage this tutorial is great! It is neither rushing nor dragging.

[@ado011235]

Nieman?

[@elroroces]

Nice tempo

[@Freshlygrazed]

For the last father @%#$-ing time!!!!

[@stephaniealbert6448]

Bro this is crazy. I'm on a caffeine buzz and I just came across your account, jumping and buzzing around from the excitement of how amazing this is, thank you for showcasing the possibilities of AI for creatives. So cool!!!!

[@TejasHullur]

This was one of the best tutorials I've seen on KZbin.

[@tcortega]

what the fuck have you been watching

[@kamgdy89]

you've seen very little

[@dontsubscribepleaseibeg]

Upcoming websites will be visually beautiful.

[@allcaps4141]

websites will never be like that, it's a pain to develop and the ai tool sucks because it's a rasterized image

[@trapido0296]

@@allcaps4141 there will probably be ai generating vector graphics very soon

[@allcaps4141]

@@trapido0296 hmmmmm not sure about that

[@briannaalejo9226]

@@allcaps4141 adobe firefly is coming out soon. It’s just a matter of time and def doable

[@dinoscheidt]

Lacks too much context for UX. Great for inspiration, but for users your app is a tool - and these users are different for every product. So there needs to be collaboration between designers and AI to get the context in; because pixels don’t make money, low friction features do. Like dribbble: Great for inspiration

[@borazan]

this was stunning, well done!

[@Syphronix]

Excellent video, thank you!

[@CJGammon]

You are welcome!

[@foreverandever261]

Exactly what I needed! Thank you, you have a new subscriber 😊

[@wecharri]

Awesome! Thanks for sharing it!

[@CJGammon]

Glad you liked it!

[@paulTimothyk]

This is bloody amazing

[@maxgoette]

that video is really dope :O I really like your approach :)

[@SomeOne-mc7ev]

Bravo This video is really helpful to learn new way to design and develop website. Love it

[@VaibhavShewale]

looks amazing!

[@ardjunas1229]

I have been trying to figure out a way to pull out high res versions of the midjourney generated images, little did I know it was right under my nose with stable diffusion and photoshop. thank you, this was very helpful.

[@iUmerFarooq]

Wow, Amazing Brother. The idea is amazing 😃

[@CJGammon]

Thank you!

[@yjtheartist2711]

pace of the tutorial was good, you forwarded at all the right places, good job, you made it look easy 😅

[@dismal368]

amazing. i think the AI only brings more capability to you to do better things, of fullfill

[@Hector.levelup]

Very clear and concise. Thank you!

[@CJGammon]

Thanks for watching!

[@Waladhoolin]

THIS IS LIT ❤‍🔥🔥

[@junedshaikh5162]

I have been making html development for years and I realize that it's real tough to convert a complicated designs from figma I use to fight alot with the designers but now seems like there is possibilities to achieve...things easier

[@alecule]

how is it making easier for the developer if the whole thing still needs to be implemented in html without the use of AI :) it helps only the designer

[@MidnightLux]

Devs are just lazy af

[@zingnolan]

OMG YOU ARE AWESOMEBRO

[@sale7680]

Awesome ❤

[@Way_Of_The_Light]

So cool man 👏👏

[@BantuNiLo]

I dont know why am watching this. You hypnotized me😂😂

[@hashieb8765]

Haha. Pause the lofi stream to listen to this video just for it to continue here :D great stuff

[@OboseUwadiale]

YOURE GETTING VERY GOOD AT THIS \

[@gunnarautterson2838]

so cool!!

[@szalailaci3722]

I love these colors

[@alexandrudeac9791]

If only apps would work like that

[@w0mblemania]

Apps don't work like this because it's vastly harder to put together an app that works like this, than it is to mock one up in Figma. Like so many Dribbble concepts, these designs are effectively unusable in the real world. They don't take in to account real users, real devices, real data.

[@ryosuwito331]

agree, it just take more time for development which can achieve the same functionality as the good old list and button.

[@aqema]

I am a UX and UI designer and I feel your pain 😂 Usually I put together a beautiful design that works in theory but as soon as a user or client sees it, it's getting listified 😂

[@OboseUwadiale]

I REALLY LIKE IT

[@whonayem01]

Incredible

[@fanart139]

You’re amazing ❤

[@orestesjaviermonteagudo601]

you got another subscriber. this was great!

[@CJGammon]

Awesome, thank you!

[@MACH_SDQ]

Very gooooooood

[@TheGreatUk]

That was great. Keep it up :)

[@CJGammon]

Thanks a lot!

[@textgb125mb]

this is a useful video ❤

[@imago_deon]

I was never into this level of web design nor do I have the chops to create UX, but now it seems it's easier to get into more than ever. Thank you for this!

[@yesiam6758]

This is not UX, this is graphic design + UI territory

[@benfrese3573]

the problem is to make this consistent throughout an app. This is not functional design, it just looks pretty.

[@user-gt5ks3bq6w]

this is game changing

[@Andy-bz9cb]

pretty cool ui

[@tonyeneh8194]

This is just wooooow

[@ahmadichsanbaihaqi]

great!!

[@apolloapostolos5127]

A video that delivered on its title. 🙏🙏🙏

[@abrahamouattara8757]

it is great thank

[@kaosang6754]

This is so good!

[@mohammedjoubba318]

awesome

[@adrianomg94]

this is gold

[@anonymous_basics]

that's very clever .

[@veshua_j]

I watch and admire you! Now I have to think about how much time I spend on completely unnecessary and meaningless things. I envy you with white envy). Thanks for the video)

[@UnlockWave]

osm brother

[@austinastray4444]

Dude... whoa.

[@yitangcui1165]

man you re awsome

[@pranavanilkumar1246]

hardworking developers left the chat

[@BobbyBundlez]

still quite a bit of work in this... maybe it looks simple to you as a dev. but I am a dev and i know there is still a lottttt of work in this entire process lol

[@lga9046]

AI is here to make it possible to make every website and design look exactly the same in a fraction of the time

[@allisonking4274]

LOL yeah def need to the creative juices flowing

[@affiliateme7414]

Magic images and colours

[@sonoftroy8572]

If you have V.S. Code with EMMIT installed as a plugin. You can generate boilerplates way faster!

[@SilviuIT-tn3dn]

for me ...as a novice, is incredible...

[@_storm_8_]

I'm liking this video just for bgm

[@ammarmuhammadirfansyah4633]

mantap betul

[@MohanaKumar-xy5xm]

I wish i was skilled as you.

[@TheAILab67]

19k+...Thanks CJ. Can you create a slow, step-by-step please on Figma next time. Im trying to apply Figma to an Android application I'm planning to create.

[@ojasvisingh786]

🎉🎉

[@theweirdos7405]

awsomme bro it will help me to earn a bit more

[@samuelBohren]

I'm not very experienced in web development - I mainly work on developing games. I'm curious why Figma doesn't generate all the necessary CSS and HTML code. I understand that JavaScript still needs to be coded separately. With Unreal Engine, there's a user interface editor that automatically generates all the required code. Shouldn't something similar be possible for web development?

[@lordseidon9]

There are tools like that but it will not be as responsive as a website built by a human. There are also drag and drop website builders but they fail a lot too.

[@otaibi3084]

designers in danger , nice tutorials bro liked and subed

[@JohnThomas20340]

Nice Video

[@CJGammon]

Thanks!

[@chychywoohoo]

The midjourney result was blended better

[@ericsnguyen4649]

cool, really cool, but i wonder how to create the bottom border of the images, it looks like 3d model ...

[@mehrshad.h6919]

but do we need to work with html and css as a ui ux designer? or we just have to design it?

[@lasangagamers]

its good to know some html and css and javascript

[@bhadawang]

wow

[@tryphenepower6652]

So Photoshop will never die no matter what AI is coming with , but it still need somehow the photoshop...

[@TylertheHypnotist]

Photoshop will integrate AI so it doesn’t die

[@lipin007]

Adobe has introduced Firefly!

[@CJGammon]

@@lipin007 kzbin.info/www/bejne/kKaUmpqLncehmLs

[@Aimodellookbook]

big companies find there way to create something new so they don't die in market the worse come they just Buy the competitor if they are new and competitive

[@EPmessi9800]

@@lipin007 I’m excited for that!

[@r2in360]

Hmm now I want to try and make something similar in react native

[@BenjiiBee]

Just curious as to why you're using figma and not Adobe XD since you're already working with photoshop?

[@RajatRangdal]

How did you add stable diffusion on Photoshop?

[@CJGammon]

exchange.adobe.com/apps/cc/114117da/stable-diffusion

[@LukeJT22]

Do you have any tutorials or anything about learning Figma? I've been spending time learning Webflow. I recently discovered Figma and have plans to learn it and use the 2 together to hopefully make money freelancing.

[@nickzubrik]

Figma and Webflow are both great tools for web design and development.Hope you’ll achieve your goals. ✌️

[@LukeJT22]

Yeah I love Webflow. They upgraded their "University" and I read they have plans to integrate AI tech into their software. Its gonna be so awesome. I built an online portfolio to go with my resume to try and make a career change from 50 hrs/week in a shop to building businesses online.

[@nickzubrik]

@@LukeJT22 Yeah, Webflow University is awesome. I also would like to see their AI tool. I'm doing a very similar career change as you described but I go from radiologist to Webflow developer 😄. Good luck to us

[@LoveDsgn]

Even your Voice while explaining all of this is made by AI

[@johiny]

AI will give developers super powers to complete normal things like them was nothing and make things that look almost impossible in normal things

[@TheEnterthedreaming]

This doesn't work the same in v5 so be sure to use the --v 4 prompt.

[@nikolaykolev5143]

Question to the author of this video: how much time you used to do all this, start to finish? Just curious…

[@user-jx3yo9iu6v]

how long did this take ( real time ) ?

[@ahmadmokhtar8175]

😮😮😮😮😮😮

[@MicahBratt]

Soon AI will just create the design, turn it into html, style it with css based on design all behind the scenes.

[@workemail4460]

Hello, can you make an example with 1 ecommerce?

[@user-ny1kn7uv1p]

Awesome workflow, can you show how to install those AI plugins on Photoshop? Thanks

[@dav5844]

They ... Are not plugins. Have you watched the video

[@zehfred]

It's the Stability plugin

[@CJGammon]

exchange.adobe.com/apps/cc/114117da/stable-diffusion

[@norzillian9867]

​@@dav5844 check 2:34

[@sujeetv3442]

As a ux ui designer do i have to learn home to code as well? Im not particularly fond of coding , have learnt java and its not fun at all for me

[@atomauro]

goood !! and how you deal with react?

[@BobbyBundlez]

lol

[@kedarlondhe3995]

1:18 can we get these manual steps done by any AI tool ? People like Product Manager(not UI/UI designer) takes lot time in these steps.. TIA

[@joegrant413]

Not saying I have great svg chops, but wouldn't it have made sense to edit the MidJourney images as SVG in Figma? It looks like you jumped instead to tracing over them.

[@dontpanicalreadyhappened]

Please provide the prompt image (one can't get it now without subscription)

[@shakibhossen1970]

Sir can you please show us slower thats why we learn and do coding step by step with you, as well as ui design . please

[@voodazz]

Oh well.. if you can't beat em', join em'

[@QuickTuts]

Always save your images as svg

[@BobbyBundlez]

uh.. no. only monochromatic photos. others should be jpeg, png, or webp lol

[@QuickTuts]

Until one day a client calls you at 1 am complaining that one of the images is blurry on some device lol

[@claudiodavidmartinez2591]

sorry, but.. what kind of system coud support it?

[@GGGamingYoutube]

imagine asking ai to make boilerplate when you can just type ! and press enter alsdjflksdjflskjdflkjsdfjlk

[@BobbyBundlez]

i know... thought the same thing lmfao. kind of funny how this is all unfolding

[@sw-ln1hh]

thank you may i ask this video that used photoshop replace another free tool recomend plz

[@mokkimheng2728]

1. Photopea 2. GIMP

[@comebackcs]

As a beginner, it seems very difficult to me, the coding part.

[@AdeelTariq0]

You shouldn't be watching this as a beginner. Get your basics right first. Then after a few years of work you can think about incorporating AI into your process.

[@sitaro8]

So, where is the website :X Loved the video but the title seems to be a bit misleading.

[@axetroll]

I downloaded git project, but it seems not working as the video. Do I need to put the files in some kind of server?

[@CJGammon]

I'd make sure it's on a mobile browser dimensions. You can also see a working version here: codepen.io/cjgammon/pen/vYzLjae

[@Rundik]

Was asking how to include css and javascript files really neccessary?

[@jadson_]

hello, I really liked it but I found it too fast, I'm a beginner, do the same with a focus more for those who are starting, thank you very much

[@aixizu]

i was loving it but then you asked chatgpt to make a html boilerplate and my mind went numb

[@susfacewithinternetaccess1296]

Lmao same

[@susfacewithinternetaccess1296]

1. He could've used emmet for that 2. Who tf needs external helf for a goddamn html boilerplate?!

[@benfrese3573]

@@susfacewithinternetaccess1296 of course he can, but this is about AI and the current state. Soon this all will be a short prompt and much quicker than emmet ever was