Тёмный

AI03: Build a Website with Midjourney, Figma & ChatGPT 

CJ Gammon
Подписаться 37 тыс.
Просмотров 884 тыс.
0% 0

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

Наука

Опубликовано:

 

19 фев 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 279   
@oladapoogidan8543
@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
@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
@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
@LuismaLorca Год назад
@@iciest.icy.n.icy.rice.1 "its just the beginning bro!" I swear you AI bros all sound like crypto bros.
@dipanjanghosal1662
@dipanjanghosal1662 Год назад
Stop the copium
@iciest.icy.n.icy.rice.1
@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
@alejandrosauqueperez931 Год назад
I think the speed in which you manage this tutorial is great! It is neither rushing nor dragging.
@ado011235
@ado011235 Год назад
Nieman?
@elroroces
@elroroces Год назад
Nice tempo
@Freshlygrazed
@Freshlygrazed 4 месяца назад
For the last father @%#$-ing time!!!!
@stephaniealbert6448
@stephaniealbert6448 4 месяца назад
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!!!!
@dontsubscribepleaseibeg
@dontsubscribepleaseibeg Год назад
Upcoming websites will be visually beautiful.
@allcaps4141
@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
@trapido0296 Год назад
@@allcaps4141 there will probably be ai generating vector graphics very soon
@allcaps4141
@allcaps4141 Год назад
@@trapido0296 hmmmmm not sure about that
@briannaalejo9226
@briannaalejo9226 Год назад
@@allcaps4141 adobe firefly is coming out soon. It’s just a matter of time and def doable
@dinoscheidt
@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
@borazan Год назад
this was stunning, well done!
@TejasHullur
@TejasHullur Год назад
This was one of the best tutorials I've seen on RU-vid.
@tcortega
@tcortega Год назад
what the fuck have you been watching
@kamgdy89
@kamgdy89 Год назад
you've seen very little
@Syphronix
@Syphronix Год назад
Excellent video, thank you!
@CJGammon
@CJGammon Год назад
You are welcome!
@foreverandever261
@foreverandever261 Год назад
Exactly what I needed! Thank you, you have a new subscriber 😊
@wecharri
@wecharri Год назад
Awesome! Thanks for sharing it!
@CJGammon
@CJGammon Год назад
Glad you liked it!
@paulTimothyk
@paulTimothyk Год назад
This is bloody amazing
@VaibhavShewale
@VaibhavShewale Год назад
looks amazing!
@maxgoette
@maxgoette Год назад
that video is really dope :O I really like your approach :)
@Hector.levelup
@Hector.levelup 3 месяца назад
Very clear and concise. Thank you!
@CJGammon
@CJGammon 3 месяца назад
Thanks for watching!
@SomeOne-mc7ev
@SomeOne-mc7ev Год назад
Bravo This video is really helpful to learn new way to design and develop website. Love it
@iUmerFarooq
@iUmerFarooq Год назад
Wow, Amazing Brother. The idea is amazing 😃
@CJGammon
@CJGammon Год назад
Thank you!
@BantuNiLo
@BantuNiLo 3 месяца назад
I dont know why am watching this. You hypnotized me😂😂
@OboseUwadiale
@OboseUwadiale Год назад
YOURE GETTING VERY GOOD AT THIS \
@ardjunas1229
@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.
@hashieb8765
@hashieb8765 5 месяцев назад
Haha. Pause the lofi stream to listen to this video just for it to continue here :D great stuff
@dismal368
@dismal368 Год назад
amazing. i think the AI only brings more capability to you to do better things, of fullfill
@zingnolan
@zingnolan Год назад
OMG YOU ARE AWESOMEBRO
@yjtheartist2711
@yjtheartist2711 10 месяцев назад
pace of the tutorial was good, you forwarded at all the right places, good job, you made it look easy 😅
@junedshaikh5162
@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
@alecule 8 месяцев назад
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
@MidnightLux 5 месяцев назад
Devs are just lazy af
@orestesjaviermonteagudo601
@orestesjaviermonteagudo601 8 месяцев назад
you got another subscriber. this was great!
@CJGammon
@CJGammon 8 месяцев назад
Awesome, thank you!
@szalailaci3722
@szalailaci3722 Год назад
I love these colors
@Waladhoolin
@Waladhoolin Год назад
THIS IS LIT ❤‍🔥🔥
@TheGreatUk
@TheGreatUk 10 месяцев назад
That was great. Keep it up :)
@CJGammon
@CJGammon 10 месяцев назад
Thanks a lot!
@fanart139
@fanart139 3 месяца назад
You’re amazing ❤
@sale7680
@sale7680 Год назад
Awesome ❤
@Way_Of_The_Light
@Way_Of_The_Light Год назад
So cool man 👏👏
@apolloapostolos5127
@apolloapostolos5127 Год назад
A video that delivered on its title. 🙏🙏🙏
@whonayem01
@whonayem01 Год назад
Incredible
@OboseUwadiale
@OboseUwadiale Год назад
I REALLY LIKE IT
@gunnarautterson2838
@gunnarautterson2838 Год назад
so cool!!
@MACH_SDQ
@MACH_SDQ Год назад
Very gooooooood
@user-gt5ks3bq6w
@user-gt5ks3bq6w 10 месяцев назад
this is game changing
@Andy-bz9cb
@Andy-bz9cb Год назад
pretty cool ui
@alexandrudeac9791
@alexandrudeac9791 Год назад
If only apps would work like that
@w0mblemania
@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
@ryosuwito331 Год назад
agree, it just take more time for development which can achieve the same functionality as the good old list and button.
@aqema
@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 😂
@textgb125mb
@textgb125mb Год назад
this is a useful video ❤
@tonyeneh8194
@tonyeneh8194 7 месяцев назад
This is just wooooow
@ahmadichsanbaihaqi
@ahmadichsanbaihaqi Год назад
great!!
@imago_deon
@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
@yesiam6758 Год назад
This is not UX, this is graphic design + UI territory
@benfrese3573
@benfrese3573 Год назад
the problem is to make this consistent throughout an app. This is not functional design, it just looks pretty.
@mohammedjoubba318
@mohammedjoubba318 Год назад
awesome
@anonymous_basics
@anonymous_basics Год назад
that's very clever .
@austinastray4444
@austinastray4444 Год назад
Dude... whoa.
@adrianomg94
@adrianomg94 5 месяцев назад
this is gold
@pranavanilkumar1246
@pranavanilkumar1246 Год назад
hardworking developers left the chat
@BobbyBundlez
@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
@kaosang6754
@kaosang6754 6 месяцев назад
This is so good!
@abrahamouattara8757
@abrahamouattara8757 7 месяцев назад
it is great thank
@lga9046
@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
@allisonking4274 5 месяцев назад
LOL yeah def need to the creative juices flowing
@SilviuIT-tn3dn
@SilviuIT-tn3dn 9 месяцев назад
for me ...as a novice, is incredible...
@affiliateme7414
@affiliateme7414 Год назад
Magic images and colours
@UnlockWave
@UnlockWave 6 месяцев назад
osm brother
@_storm_8_
@_storm_8_ Год назад
I'm liking this video just for bgm
@veshua_j
@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)
@yitangcui1165
@yitangcui1165 4 месяца назад
man you re awsome
@ammarmuhammadirfansyah4633
@ammarmuhammadirfansyah4633 Год назад
mantap betul
@sonoftroy8572
@sonoftroy8572 8 месяцев назад
If you have V.S. Code with EMMIT installed as a plugin. You can generate boilerplates way faster!
@ojasvisingh786
@ojasvisingh786 Год назад
🎉🎉
@MohanaKumar-xy5xm
@MohanaKumar-xy5xm 5 месяцев назад
I wish i was skilled as you.
@chychywoohoo
@chychywoohoo Год назад
The midjourney result was blended better
@ericsnguyen4649
@ericsnguyen4649 Год назад
cool, really cool, but i wonder how to create the bottom border of the images, it looks like 3d model ...
@JohnThomas20340
@JohnThomas20340 10 месяцев назад
Nice Video
@CJGammon
@CJGammon 10 месяцев назад
Thanks!
@otaibi3084
@otaibi3084 Год назад
designers in danger , nice tutorials bro liked and subed
@samuelBohren
@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
@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.
@theweirdos7405
@theweirdos7405 Год назад
awsomme bro it will help me to earn a bit more
@bhadawang
@bhadawang 7 месяцев назад
wow
@TheEnterthedreaming
@TheEnterthedreaming Год назад
This doesn't work the same in v5 so be sure to use the --v 4 prompt.
@TheAILab67
@TheAILab67 8 месяцев назад
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.
@RajatRangdal
@RajatRangdal Год назад
How did you add stable diffusion on Photoshop?
@CJGammon
@CJGammon Год назад
exchange.adobe.com/apps/cc/114117da/stable-diffusion
@workemail4460
@workemail4460 Год назад
Hello, can you make an example with 1 ecommerce?
@r2in360
@r2in360 Год назад
Hmm now I want to try and make something similar in react native
@LukeJT22
@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
@nickzubrik Год назад
Figma and Webflow are both great tools for web design and development.Hope you’ll achieve your goals. ✌️
@LukeJT22
@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
@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
@LoveDsgn 8 месяцев назад
Even your Voice while explaining all of this is made by AI
@tryphenepower6652
@tryphenepower6652 Год назад
So Photoshop will never die no matter what AI is coming with , but it still need somehow the photoshop...
@TylertheHypnotist
@TylertheHypnotist Год назад
Photoshop will integrate AI so it doesn’t die
@lipin007
@lipin007 Год назад
Adobe has introduced Firefly!
@CJGammon
@CJGammon Год назад
@@lipin007 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Zu1igUhbnbY.html
@Aimodellookbook
@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
@EPmessi9800 Год назад
@@lipin007 I’m excited for that!
@nikolaykolev5143
@nikolaykolev5143 Год назад
Question to the author of this video: how much time you used to do all this, start to finish? Just curious…
@user-ny1kn7uv1p
@user-ny1kn7uv1p Год назад
Awesome workflow, can you show how to install those AI plugins on Photoshop? Thanks
@dav5844
@dav5844 Год назад
They ... Are not plugins. Have you watched the video
@zehfred
@zehfred Год назад
It's the Stability plugin
@CJGammon
@CJGammon Год назад
exchange.adobe.com/apps/cc/114117da/stable-diffusion
@norzillian9867
@norzillian9867 Год назад
​@@dav5844 check 2:34
@BenjiiBee
@BenjiiBee Год назад
Just curious as to why you're using figma and not Adobe XD since you're already working with photoshop?
@johiny
@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
@mehrshad.h6919
@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
@lasangagamers Год назад
its good to know some html and css and javascript
@dontpanicalreadyhappened
@dontpanicalreadyhappened Год назад
Please provide the prompt image (one can't get it now without subscription)
@comebackcs
@comebackcs Год назад
As a beginner, it seems very difficult to me, the coding part.
@AdeelTariq0
@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.
@MicahBratt
@MicahBratt Год назад
Soon AI will just create the design, turn it into html, style it with css based on design all behind the scenes.
@atomauro
@atomauro Год назад
goood !! and how you deal with react?
@BobbyBundlez
@BobbyBundlez Год назад
lol
@ahmadmokhtar8175
@ahmadmokhtar8175 Год назад
😮😮😮😮😮😮
@QuickTuts
@QuickTuts Год назад
Always save your images as svg
@BobbyBundlez
@BobbyBundlez Год назад
uh.. no. only monochromatic photos. others should be jpeg, png, or webp lol
@QuickTuts
@QuickTuts Год назад
Until one day a client calls you at 1 am complaining that one of the images is blurry on some device lol
@voodazz
@voodazz Год назад
Oh well.. if you can't beat em', join em'
@sw-ln1hh
@sw-ln1hh 6 месяцев назад
thank you may i ask this video that used photoshop replace another free tool recomend plz
@mokkimheng2728
@mokkimheng2728 5 месяцев назад
1. Photopea 2. GIMP
@kedarlondhe3995
@kedarlondhe3995 8 месяцев назад
<a href="#" class="seekto" data-time="78">1:18</a> 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
@TrunxKraft3000
@TrunxKraft3000 5 месяцев назад
Where’s the music from??
@sujeetv3442
@sujeetv3442 24 дня назад
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
@joegrant413
@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.
@user-jx3yo9iu6v
@user-jx3yo9iu6v Год назад
how long did this take ( real time ) ?
@claudiodavidmartinez2591
@claudiodavidmartinez2591 Год назад
sorry, but.. what kind of system coud support it?
@shakibhossen1970
@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
@christianfigueroa
@christianfigueroa Год назад
I’m just confused how to bring from figma into code 😢
@sitaro8
@sitaro8 11 месяцев назад
So, where is the website :X Loved the video but the title seems to be a bit misleading.
@twanab12
@twanab12 Год назад
thanks i dont know happy or sad
@axetroll
@axetroll 10 месяцев назад
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
@CJGammon 10 месяцев назад
I'd make sure it's on a mobile browser dimensions. You can also see a working version here: codepen.io/cjgammon/pen/vYzLjae
@francistopherinc9084
@francistopherinc9084 Год назад
how about skip figma
Далее
Figma Tutorial: 3D Carousel Slider (+ free files 🎁)
18:18
How To Build a $20,000 3D Website (No Code + AI)
8:12
Просмотров 139 тыс.
world's shortest Figma course
6:54
Просмотров 239 тыс.
Claude 3.5 Deep Dive: This new AI destroys GPT
36:28
Просмотров 186 тыс.
world's shortest UI/UX design course
6:53
Просмотров 1,1 млн
Mind-maps and Flowcharts in ChatGPT! (Insane Results)
13:05
How to Create Entire Website with ChatGPT (No Coding)
15:15
26 Incredible Use Cases for the New GPT-4o
21:58
Просмотров 746 тыс.
iPhone 16 - КРУТЕЙШИЕ ИННОВАЦИИ
4:50
Gizli Apple Watch Özelliği😱
0:14
Просмотров 4,3 млн