AI03: Build a Website with Midjourney, Figma & ChatGPT
Вставка
- Опубліковано 19 лют 2023
- 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 - Наука та технологія
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
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!!!!
I think the speed in which you manage this tutorial is great! It is neither rushing nor dragging.
Nieman?
Nice tempo
For the last father @%#$-ing time!!!!
Upcoming websites will be visually beautiful.
websites will never be like that, it's a pain to develop and the ai tool sucks because it's a rasterized image
@@allcaps4141 there will probably be ai generating vector graphics very soon
@@trapido0296 hmmmmm not sure about that
@@allcaps4141 adobe firefly is coming out soon. It’s just a matter of time and def doable
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
This was one of the best tutorials I've seen on UA-cam.
what the fuck have you been watching
you've seen very little
this was stunning, well done!
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.
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.
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.
@@iciest.icy.n.icy.rice.1 "its just the beginning bro!" I swear you AI bros all sound like crypto bros.
Stop the copium
@@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.
Exactly what I needed! Thank you, you have a new subscriber 😊
Excellent video, thank you!
You are welcome!
Awesome! Thanks for sharing it!
Glad you liked it!
Bravo
This video is really helpful to learn new way to design and develop website.
Love it
This is bloody amazing
that video is really dope :O
I really like your approach :)
looks amazing!
Wow, Amazing Brother. The idea is amazing 😃
Thank you!
pace of the tutorial was good, you forwarded at all the right places, good job, you made it look easy 😅
Haha. Pause the lofi stream to listen to this video just for it to continue here :D great stuff
Very clear and concise. Thank you!
Thanks for watching!
I dont know why am watching this. You hypnotized me😂😂
OMG YOU ARE AWESOMEBRO
YOURE GETTING VERY GOOD AT THIS
\
THIS IS LIT ❤🔥🔥
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.
Awesome ❤
So cool man 👏👏
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
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
Devs are just lazy af
I love these colors
Incredible
amazing. i think the AI only brings more capability to you to do better things, of fullfill
You’re amazing ❤
so cool!!
you got another subscriber. this was great!
Awesome, thank you!
Very gooooooood
pretty cool ui
I REALLY LIKE IT
This is so good!
That was great. Keep it up :)
Thanks a lot!
this is a useful video ❤
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!
This is not UX, this is graphic design + UI territory
the problem is to make this consistent throughout an app. This is not functional design, it just looks pretty.
this is game changing
If only apps would work like that
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.
agree, it just take more time for development which can achieve the same functionality as the good old list and button.
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 😂
great!!
awesome
This is just wooooow
A video that delivered on its title. 🙏🙏🙏
osm brother
that's very clever .
it is great thank
hardworking developers left the chat
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
Dude... whoa.
man you re awsome
this is gold
mantap betul
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)
Magic images and colours
AI is here to make it possible to make every website and design look exactly the same in a fraction of the time
LOL yeah def need to the creative juices flowing
I'm liking this video just for bgm
for me ...as a novice, is incredible...
I wish i was skilled as you.
🎉🎉
designers in danger , nice tutorials bro liked and subed
awsomme bro it will help me to earn a bit more
Nice Video
Thanks!
If you have V.S. Code with EMMIT installed as a plugin. You can generate boilerplates way faster!
cool, really cool, but i wonder how to create the bottom border of the images, it looks like 3d model ...
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.
The midjourney result was blended better
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?
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.
This doesn't work the same in v5 so be sure to use the --v 4 prompt.
How did you add stable diffusion on Photoshop?
exchange.adobe.com/apps/cc/114117da/stable-diffusion
wow
Hello, can you make an example with 1 ecommerce?
Please provide the prompt image (one can't get it now without subscription)
Hmm now I want to try and make something similar in react native
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.
Figma and Webflow are both great tools for web design and development.Hope you’ll achieve your goals. ✌️
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.
@@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
Question to the author of this video: how much time you used to do all this, start to finish? Just curious…
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
Just curious as to why you're using figma and not Adobe XD since you're already working with photoshop?
Even your Voice while explaining all of this is made by AI
but do we need to work with html and css as a ui ux designer? or we just have to design it?
its good to know some html and css and javascript
AI will give developers super powers to complete normal things like them was nothing and make things that look almost impossible in normal things
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
Awesome workflow, can you show how to install those AI plugins on Photoshop? Thanks
They ... Are not plugins. Have you watched the video
It's the Stability plugin
exchange.adobe.com/apps/cc/114117da/stable-diffusion
@@dav5844 check 2:34
sorry, but.. what kind of system coud support it?
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.
😮😮😮😮😮😮
Where’s the music from??
I’m just confused how to bring from figma into code 😢
how long did this take ( real time ) ?
Soon AI will just create the design, turn it into html, style it with css based on design all behind the scenes.
So Photoshop will never die no matter what AI is coming with , but it still need somehow the photoshop...
Photoshop will integrate AI so it doesn’t die
Adobe has introduced Firefly!
@@lipin007 ua-cam.com/video/Zu1igUhbnbY/v-deo.html
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
@@lipin007 I’m excited for that!
As a beginner, it seems very difficult to me, the coding part.
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.
thank you may i ask this video that used photoshop replace another free tool recomend plz
1. Photopea
2. GIMP
Oh well.. if you can't beat em', join em'
goood !! and how you deal with react?
lol
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
imagine asking ai to make boilerplate when you can just type ! and press enter alsdjflksdjflskjdflkjsdfjlk
i know... thought the same thing lmfao. kind of funny how this is all unfolding
I downloaded git project, but it seems not working as the video. Do I need to put the files in some kind of server?
I'd make sure it's on a mobile browser dimensions. You can also see a working version here: codepen.io/cjgammon/pen/vYzLjae
Was asking how to include css and javascript files really neccessary?
So, where is the website :X Loved the video but the title seems to be a bit misleading.
Can you not speed up and make a realtime version?