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:
https://github.com/alieninterfaces/03-papilio
Midjourney: https://www.midjourney.com/
Stability Photoshop Plug-in: https://christiancantrell.com/#ai-ml
Greensock Animation Platform: https://greensock.com/gsap/
Music:
– DaniSogen – The Magic Unfolds
– Provided by Lofi Records
– Watch: https://youtu.be/xiClUIkJiEQ
– Download/Stream: https://fanlink.to/TheMagicUnfolds
source
Whats Ligma?
man you re awsome
Actually you don't need to ask chatgpt to write a boilerplate. Just type exclamation mark ! in VSCode and it will automatically suggest to insert an html boilerplate. Love the content
I wish i was skilled as you.
this is gold
Haha. Pause the lofi stream to listen to this video just for it to continue here 😀 great stuff
Where’s the music from??
the only bad thing is that midjourney is not free.
0:21 Avanco Social é o melhor para comprar seguidores para tiktok, instagram e facebook
0:52 Recomendo o Avanco Social! Compro seguidores por lá
0:03 compro curtidas com o avanco social, ótimo site
0:03 Obrigado AVANCO SOCIAL por me ajudar a ter mais seguidores no tiktok, facebook e insta
2:12 Compro seguidores com o Avanco Social toda semana! ótima qualidade
0:45 só compro seguidores no site avanco social, o melhor de todos para bombar o face, insta e tiktok
osm brother
This is so good!
thank you may i ask this video that used photoshop replace another free tool recomend plz
This is just wooooow
it is great thank
wow
If you have V.S. Code with EMMIT installed as a plugin. You can generate boilerplates way faster!
Even your Voice while explaining all of this is made by AI
Umm this nice but you are not going to see such apps or website any time soon
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.
🎯 Key Takeaways for quick navigation:
00:00 🎨 O vídeo começa com a criação de um design de Carousel no Figma, que será posteriormente desenvolvido em HTML e CSS.
01:08 🖋️ É demonstrado como replicar elementos de design, como círculos e gradientes, do Figma para o HTML.
02:18 🖼️ Aumentar a resolução de imagens usando o plugin "Stability" no Photoshop é mostrado para obter imagens de maior qualidade.
03:21 🖌️ A criação de máscaras para imagens no Photoshop é explicada, permitindo que elas se integrem suavemente ao conteúdo.
04:49 🔄 O tutorial passa a demonstrar como criar uma animação de Carousel interativo usando GreenSock Animation Platform.
07:21 🤖 ChatGPT é usado para gerar código HTML e JavaScript rapidamente para a construção do Carousel interativo.
08:28 📝 Adicionar classes ao body tag com base na página em exibição permite ajustar estilos com base na posição do Carousel.
09:13 🌈 Copiar e colar gradientes do Figma para o CSS permite transições suaves ao alternar entre as páginas do Carousel.
09:56 🧩 O vídeo mostra a criação do restante do markup e ajustes no layout CSS para concluir o Carousel interativo.
Made with HARPA AI
you got another subscriber. this was great!
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
Fool
for me …as a novice, is incredible…
Amazingly useless and UI non-friendly and even more 3rd party libraries that just is so lame that I can't stop laughing.
For those who don't have PS r not familiar with PS, two plugins in Figma can help: 1. Dreamer – to improve the image quality, 2: Magic Cut to edit the images
Ai is just gonna destroy our imagination, we'll get to lazy to think and we'll let ai do that for us, like this we are gonna lose our thinking capabilities aka creativity. That's the biggest Threat.
this is game changing
I downloaded git project, but it seems not working as the video. Do I need to put the files in some kind of server?
pace of the tutorial was good, you forwarded at all the right places, good job, you made it look easy 😅