UX/UI In The AI Era - Simplest Design Process!

[@marcpuls4798]

Thanks!

[@AI.Tooltip]

Thank you!!

[@developersdiary1995]

As a Back-End Heavy FullStack Engineer: This video is PURE gold! I dont have to pay for designers anymore. Thanks a lot bro!

[@AI.Tooltip]

Awesome!!

[@PaulZimba-xw3od]

I share the same sentiments. Design is always a pain for me. Thanks @AI.Tooltip

[@AI.Tooltip]

Stay tuned for the new video on Saturday. It will help devs even more!

[@heavenstarhilary2817]

Haha we don't need a front end dev.

[@developersdiary1995]

@@heavenstarhilary2817 thats for sure hahaha

[@cuios]

I appreciate how you deliver useful information in a clear, straightforward manner, unlike others who tend to be overly dramatic. Keep up the excellent content!

[@AI.Tooltip]

Great to hear! I appreciate the feedback!

[@RyanStephenAlldridge]

I second this!

[@jameshunt4603]

I appreciate that this comment was written by AI.

[@cuios]

​@@jameshunt4603 yes... we are all agents of some intelligence ! aren't we? some of us are living in datacenters others in tiny apartments. 😂

[@jameshunt4603]

@@cuios I don’t believe you are ‘living’ at all.

[@witoldlitwin5722]

While I've been working with AI tools to generate code for a while I have never thought about telling AI to apply a specific theme. Thanks, that was cool!

[@AI.Tooltip]

I'm glad it was helpful! Thanks for letting me know!

[@AnahatNaad]

This video was published at a very important time as I’m building a dashboard and was frustrated with Bolt. But by combining Bolt and Claude, the process was smooth. Thank you thank you thank you far too kind ❤

[@AI.Tooltip]

Amazing! i’m so glad the video helped you! let me know if you have any questions.

[@ChijiokeObi]

This is actually one of the best I have seen unlike all the useless todo apps that don't reflect day to day development. Please can you share prompts and step by step guide on how this was achieved. Thanks

[@AI.Tooltip]

Awesome! I will upload more detailed videos in long-form. stay tuned!

[@duckspencer9345]

@@AI.TooltipWould love to see a more detailed video. There are plenty of ai and no code Channels from programming guys so i really love to see someone approaching this more from the designing background. 🎉

[@eganfuego]

I'm actually so sick and tired of AI tutorials, mostly because they overpromise and oversimplify things, but this was actually refreshing. Liked and subbed dawg. Keep it up ✌️

[@AI.Tooltip]

Awesome! thanks for the feedback and support!

[@RayanneJaroudy]

I’m not a designer, but I genuinely enjoy every one of your videos. You’re inspiring me to get creative with everything I’m learning from you! Also you're cute ☺️

[@AI.Tooltip]

Owww so glad to hear that!! thanks ❤️

[@klesk0s]

So great! Right now I am getting into Frontend Development, still learning. I also always wanted to create really user-friendly experiences and thus, needing a handy approach for grasping visual understanding of what I want to create. Helps 1000x! Looking forward to trying this myself :).

[@AI.Tooltip]

Nice! Good luck with your journey!

[@Hayden.1234]

You've knocked it out of the park, once again. Thank you 🙏

[@AI.Tooltip]

Awesome! Thank you!!

[@SHEMBOBKIPRUTO]

Wow ,that's Awesome tutorial. Much Love from Africa's biggest tech hub, Nairobi KE❤. The cats are cool as well 😻, had to sub

[@AI.Tooltip]

Thank you for the nice words! Awesome to have you on board. Cheers and love to your community!

[@Ason_Project]

I'm definitely going to copy your new work flow. Genius dev model...

[@salehbahiral-ulloom589]

Wonderful guide and tips !! Thank you immensely for your videos, I look forward !

[@rolajaroudi5247]

"Absolutely loved this video! 🎥 Your vision and creativity shine through every frame. The attention to detail and unique storytelling truly sets your work apart. Can't wait to see what you come up with next!"

[@AI.Tooltip]

Thank you for this amazing feedback! ❤️

[@baturedesign]

Missy helpful video I've watched in a while!.. Thanks for this! 🔥🔥👏🏽👏🏽

[@AI.Tooltip]

Awesome! thanks for the feedback!!

[@breschio]

Love this!! I gotta learn more about refining the design workflow. Thanks for posting❤

[@AI.Tooltip]

Thanks for the feedback! Glad it was helpful!

[@gustavo5320]

This was a really amazing tutorial! Thank you so much!

[@AI.Tooltip]

Glad it was helpful!

[@codingWearingPants]

C'est franchement chouette. Well done ! Makes me embrace the AI shift

[@DesignXstream]

Quite interesting! So we need to start rethinking the whole 'Design Process' 👀

[@userj-s2000]

You gave me the idea where i was stuck its a bit unrelated to this but rather to use cases i need to write

[@AI.Tooltip]

Awesome! Good luck!

[@karthik947]

Another banger. Thank you.

[@scottlefoll2672]

Thank you very much for this excellent content. Something that would make this and other videos even more instructive would be a transcript of the exact prompts that you used on the video(s) to get your results.

[@AI.Tooltip]

Thank you for the support and the suggestion. I'll keep that in mind. Here are the prompts in order: "I want to create a website for sharing experiences in any city, the goal is to let users explore experiences, add their own experience or rate experiences. the home page should start with the city closest to the user's location and show popular experiences. you can search for something specific using filters. to add an experience you can add photos, links, location, plain text and rating for multiple criteria. the user also has the option to save experiences. please give me a structure for this web app" "now give me a technical requirements document in a beautiful html format" "create a user flow chart" "now give me the contents of the home page in a wireframe"

[@scottlefoll2672]

@@AI.Tooltip Lol - ok, thanks! I thought that they were some of these very complex prompts.

[@javadbacker481]

Thanks for the video. I started using bolt. One tip is that don't upload csv files with lots of rows, i think i used lot of tokens because the file was soo huge. i had 4 million tokens consumed in about half a day. i think this was due to the large file size being part of the chat / conversation.

[@AI.Tooltip]

Oh thanks for the tip!

[@desireco]

I didn't know Claude does as much... cool.

[@AI.Tooltip]

Yeah Claude is amazing! I have two videos just on Claude if you wanna know more.

[@NeuralDev]

this was absolute gold

[@futuristicstoic]

Excellent video breakdown. I have been using a similar proces. There's a button to have AI rewrite your prompt in a more optimized way. It can translate your prompt from multiple languages and really improve it so really try that out.

[@AI.Tooltip]

Thanks for the tip!

[@jgproductdesign]

Very cool! 👏 Would love to see this on a real project, working with devs, PMs and so on.

[@rolobuilds]

Would be amazing if there was a way to keep track of variations all in one place. Similar to how when you design you try a few options in layout, colors, contrasts and end up landing on a specific one.

[@OctavChelaru]

Went to the same transformation. Crazy days. ❤

[@joshua0x]

Great video! Thanks for sharing

[@Classic_Hank]

this is awesome you explain the details very well especially for someone who has zero coding skills and seeing bolt as a great tool but there is alot of unanswered questions for newbies. maybe you can show the difference between the paid and free and how to host the application after its created just a thought? Keep making these great videos you just got me as a subscriber keep up the great work and thanks in advance.

[@AI.Tooltip]

Thank you for the sub and the great feedback! I'm working on more detailed videos. I will keep your suggestions in mind. Cheers!

[@CoreyLansdell]

This is actually insane!

[@____2080_____]

You, sir, are on the cutting edge. Unfortunately, there are millions of current designers stuck in businesses who are not only doing it. The old way, they are doing it the ancient way, a process that involves upwards to 12 people to do with you and AI can do today at 5X the amount of efficiency and speed.

[@thevikingsock8527]

It deletes the human component, which sucks

[@AI.Tooltip]

Honestly I don’t think you need the human component if you’re creating a product for its functionality. there’s no reason to do things less efficiently just to have a “human component” unless you’re creating art or media.

[@richardadonnell]

🎯 Key points for quick navigation: 00:00 *🚀 Introduction to AI-Driven Design Process* - The speaker shares a shift to an AI-based workflow, moving away from traditional design processes, - AI has reshaped their approach, focusing on efficiency and creating a functional web application from scratch with only two AI tools. 00:35 *👤 Introduction and Purpose* - Introducing the speaker and explaining the challenge of replacing traditional tools with AI while maintaining efficiency, - Traditional workflows, such as prototyping and handing off to developers, are considered outdated in the face of AI capabilities. 01:01 *⚙️ Transition to Functional Design Process with AI* - The new AI-enabled process allows creating coded, functional prototypes instead of traditional clickable prototypes, - Emphasizes that designers or developers can now handle both design and development seamlessly. 02:23 *🔄 Adaptable Process with AI Tools* - AI-based workflow is flexible, with tools and steps that may vary depending on team dynamics or project needs, - Two main tools highlighted: Claude (for structure) and Bolt (for coding and functionality). 02:49 *🌆 Using AI to Define Structure and Technical Needs* - Detailed product structure is defined using Claude, with emphasis on including features like filtering and saving experience data, - User flowcharts and technical requirements are prepared for development handoff or self-completion. 04:14 *🎨 Functional Prototyping with Bolt* - The process starts with Bolt to generate a functional prototype based on design specifications, - UI elements and overall design are prioritized, omitting initial technical aspects like authentication for early design focus. 05:09 *🌈 Designing the Theme with MidJourney* - MidJourney is used to create a theme by generating images that inspire UI design elements, - Resulting themes are integrated into the UI, making it visually consistent and aligned with the design vision. 06:32 *🧩 Finalizing UI Elements and Pages* - Bolt is iteratively prompted to refine layout and page structure, focusing on aspects like grid layouts and filtering options, - Completes key pages like details and experience addition, resulting in a fully responsive, functional prototype. 07:29 *🌐 Deploying and Extending the Prototype* - The functional prototype can be deployed for live testing and shared with others, - Further functionalities like authentication and API integration can be added later through Bolt’s natural language prompts. 07:56 *📐 Creating a Style Guide with Bolt* - Screenshots of the design are used in Bolt to generate an interactive style guide for team collaboration, - Style guides facilitate consistency when working with other designers or developers. 08:21 *⚠️ Tips for Using Bolt Effectively* - Advises on handling multiple prompt requests, suggesting limiting each to two specific requests to avoid processing issues, - Recommends using Bolt’s revert feature to restore previous versions if the system encounters errors during iterative changes. 09:42 *💰 Bolt’s Token System and Project Cost Efficiency* - Describes token usage for Bolt, noting that the project required 1 million tokens and discussing free versus paid options, - For extensive projects, the daily free token limit may require a phased approach to completion. 10:10 *📢 Closing and Invitation to Engage* - Encourages viewers to ask questions and share feedback about the AI-driven design process, - Invites subscriptions to stay informed on new AI tools for design and development. Made with HARPA AI

[@rolajaroudi5247]

Thank you 🙏🏻 extremely helpful 👍🏻

[@Basepilot]

interesting, I use a similar workflow as a developer. I start with a broad draft from a large LLM like Claude or ChatGPT, then refine it. After that, I have ChatGPT generate the initial prompt for a tool like v0

[@AI.Tooltip]

Yea perfect! that’s exactly what i’m trying to deliver in this video. All you need is an LLM to guide your project and a coding tool to make it 😊

[@darushimo]

cool video. not gonna lie, it'd be nice to see a slowed down version too. like the whole process end to end with some "directors commentary" over it all. Just like I learn when I watch other designers use figma, i'm sure there are things that I'd learn. like an hour long video? I am game!

[@AI.Tooltip]

Thank for that! Working on longer videos!

[@joMojojojo]

Dude, you shine

[@ai.aspirations]

Thanks for sharing ❤

[@AI.Tooltip]

Thanks for watching!

[@ableabelly702]

Thats sick though, nice workflow, i would copy that too

[@pengouin]

Great video my friend

[@orelhassid]

This is Crazy! OMG

[@RyanStephenAlldridge]

Fantastic!

[@madhoundes]

يعطيك العافية جاد بدنا دروس اكتر حبيب

[@AI.Tooltip]

Eh akid, no problem!

[@viveks4899]

Looks cool

[@EmileModesitt]

Nice video, thank you!

[@AI.Tooltip]

Awesome!

[@rafael_tg]

Nice video man. Thanks. Do you mind in sharing the prompts for Claude in the beginning?

[@AI.Tooltip]

Here are the prompts in order: "I want to create a website for sharing experiences in any city, the goal is to let users explore experiences, add their own experience or rate experiences. the home page should start with the city closest to the user's location and show popular experiences. you can search for something specific using filters. to add an experience you can add photos, links, location, plain text and rating for multiple criteria. the user also has the option to save experiences. please give me a structure for this web app" "now give me a technical requirements document in a beautiful html format" "create a user flow chart" "now give me the contents of the home page in a wireframe"

[@Andrew-q8d6w]

Alternatively, you could just use Lovable (GPT engineer)

[@photofusionart]

Good job. 🎉

[@huangjiawutw]

not replacement but open a new door, can’t agree more 🎉

[@sahilkhalifa6782]

Hy mate nice video please make detail video how we can Deploy full style with database and login authentication in detail make full live project make this videl its help a lots for us. Thanks for your video nice ❤

[@AI.Tooltip]

Okay sure! Thanks for the feedback!

[@sahilkhalifa6782]

@@AI.Tooltip yes am waiting for it

[@princemudzengi]

Claude😍

[@faridullahkhan1]

Loved it, thank you 🙏

[@AI.Tooltip]

Awesome!

[@empresaplatinum2141]

Magnifico!!

[@YuriLucio]

Sensacional, meus parabéns 🎉

[@tharpegeo]

Really interesting workflow! Do you have a coding background? Have you or an expert you know reviewed the quality of the code that's generated?

[@AI.Tooltip]

I'm not a developer but I watched countless videos on KZbin of experts commenting on the quality of the generated code in Bolt, and overall it seems surprisingly good and clean.

[@tharpegeo]

@AI.Tooltip interesting. I'll give it a shot

[@abdulkadirsaloum1449]

I’m a web dev I really need a specialist designer

[@jakobkristensen2390]

This is great

[@adnangobeljic7900]

God bless you!

[@AI.Tooltip]

Thank you so much!! I really appreciate your contribution and motivation ❤️

[@Kesodhya]

Did u have to subscribe Claude and Bolt as Professional?

[@AI.Tooltip]

Yes because I use them a lot, but you can get by with the free plans

[@KarlMichaelDelaCruz]

Would you offer office hours or online classes? Would love to join one day.

[@AI.Tooltip]

Awesome! i’m planning something like that soon. thanks!

[@naycook2]

Can you do the same thing for mobile apps? I’m not sure if bolt works with mobile but I’d imagine that workflow can stay the same?

[@AI.Tooltip]

Yes it works for mobile. It automatically installs all the necessary tools and packages.

[@HimanshuChanda]

Please make the video more detailed and also provide all prompts pleaseeeeeeeeeee !!!

[@AI.Tooltip]

Sure no problem!

[@HimanshuChanda]

@ if possible can you share the prompts of this video

[@owusukenneth1392]

Been using Cursor for a while now. Will you recommend I switch to Bolt?

[@AI.Tooltip]

If you have no coding skills then yes, Bolt is easier to use. Cursor is better if you want to do some manual coding. And in general I found that Bolt creates better looking UIs.

[@gl897]

What do you prompt midjourney to get those ui elements and like prototype

[@AI.Tooltip]

I mentioned the keywords 5:33, you can also check my prompts on the screen.

[@kangfatah]

i love this toturial, but can y give ai tools like bolt but for html, css, js and php support ?

[@AI.Tooltip]

Yes but no PHP support in bolt

[@andrea.dg-dev]

Problem: the developer will not see design issues. The designer will not see coding issue. The highway to hell is ready 😂

[@MountainWebStudio-pw1ve]

Can you tell how many tokens was used for this prototype ? I've been trying the free version, 2 prompts literally use 150 000 tokens (the free daily limit).

[@MountainWebStudio-pw1ve]

Nevermind I just had to watch the video entirely.

[@rameezahmed6272]

What about the UX research process? How can automate with AI

[@AI.Tooltip]

I have some videos on UX research. Check this out: kzbin.info/www/bejne/sGnGeH-Vh9qonKc

[@zhanezar]

wow i would love if a tool could take my figma design and give me a website

[@jasondesmond1895]

how did the gray cat turned black tho ?

[@AI.Tooltip]

😂 yeah i have multiple cats

[@tredixidert]

Hi which program did u use for the flowchart and wireframe and how? 😅

[@AI.Tooltip]

Claude. I explained in the video. tell claude to generate them based on your requirements

[@NishanthaU]

Dude would love to interview you for my channel

[@AI.Tooltip]

Sure!

[@igorshingelevich7627]

Where is da link of a product you are speaking about.

[@AI.Tooltip]

All the links are in the description

[@adoraduca]

It looks like Figma is no longer involved; it seems there is no future for Figma.

[@AI.Tooltip]

Precisely! this is what i’m finding out the more i use ai design tools. The established process is not good enough anymore!

[@adoraduca]

​@@AI.Tooltip we will live in interesting times

[@edengate1]

I must've missed something. The website UI was made only with Claude and then "pasted" on Bolt? This is insanity

[@AI.Tooltip]

Yeah exactly!

[@edengate1]

@@AI.Tooltip Can you do the same on ChatGPT? Damn its crazy the era we're entering. thanks

[@AI.Tooltip]

Chatgpt works just as well for creating a structure and refining requirements. But I prefer Claude because I can generate html documents and diagrams and save them. I wasn't able to do the same with Chatgpt.

[@chetan5080]

Cat ❤

[@PriyaSharma-sz1fj]

so there is no need to design manaually ?

[@AI.Tooltip]

Only when you’re designing unusual components. but for 99% of scenarios you’re good with generating the ui.

[@guntodd]

Does this apply to mobile app like flutter?

[@AI.Tooltip]

No it doesn't support flutter, alternatively you can use react and ionic, or nativescript for mobile apps in Bolt

[@marcpuls4798]

Hey, over the last few weeks I've been watching your videos. They are super useful to me because as a backend software engineer I'm handicapped in the design area 😅 On this video I wanted to give you a Super Thanks, but the button isn't there. Could you please activate it for your YT account? 🙏

[@AI.Tooltip]

Thank you for the nice words! i’m so happy that you found value in my videos! I still don’t have that feature on my channel. I think it will be unlocked in a few days when i reach the required views. but i appreciate the intention anyway 😊 cheers!

[@marcpuls4798]

@@AI.Tooltip I'll wait until YT has unlocked your channel :)

[@AI.Tooltip]

Oh thanks! ☺️

[@AI.Tooltip]

Hey Marc! my channel just got approved by KZbin! And you're my first fan! The feature is now enabled. Thank you!! 🤩

[@marcpuls4798]

That's awesome man! I just tipped you. Keep up the good work 🙏

[@harshith_eth]

Let's collaborate on a video

[@marilynlucas5128]

Man, you should have left the project on github. I wanted to go through the design doc. Good job tho

[@VivaLasVegusNervana]

Is Disney paying you royalties for using your likeness in their animated film Wish as King Magnifico?

[@AI.Tooltip]

Wow that is spot on! Amazing! 😂

[@kbarreto]

Are you Brazilian?

[@AI.Tooltip]

No I'm Lebanese. Cheers to Brazil!

[@thevikingsock8527]

I liked Prototyping. I hate AI

[@AI.Tooltip]

I love Banshee!

[@TheSourMaple]

Rip

[@thevikingsock8527]

@@AI.Tooltip antony's first big role :-)

[@Musclevita]

🫡💪🏾

[@PouyaAtaei]

Yea sure, as soon as you go above these trivial, almost non applicable examples, you will find yourself constantly prompting and not getting what you want or with the quality that you want.

[@Drungor]

Dev point of you here. No I would not like to receive that more than a "dumb clicable prototype". when you take out a project from someone else code you need to understand how it as been coded. This take time, we all don t code the same way and we don t all use the same technology to arrive to the same result. I can t tell you never code in your life because you are thinking that code is just something you can give me an I will be happy with it. Nop, It doesn t work this way. What will happen is: I will need time to read what is written, proabbly check if everything is working and after that see if i am able to modify it to actually make it work. also you are saying that you throw away all the spec that actually matter (you just kept the design) then I am sorry to let you know but you just lost your time. Also you say Neon cyber-punk design man, respect your job and at least try to use the correct name for the design pattern you are looking for. design style got name for a reason.

[@AI.Tooltip]

i’m just providing a better way to hand off a design than a prototype. it’s up to the developer to start it from scratch or take whatever they want from it. The goal here is to have all the scenarios included in the design just like a prototype but easier and more detailed. nothing wrong with that.

[@antonym00]

I was thinking the same thing - I’d guess that code would be panicky to start from. But yeah, if only to be used as a starting point instead of Figma it could work.

[@Drungor]

@@AI.Tooltip First of all, I am sorry for my agrresivity. Second of all if you use this as a base for creating a design it actually a good starting point. People who doesn't know much about tech think that AI is good to write code the actual answer is yes it is for junior entry level of production. anything complexe would need to be rewrite by a human behind. at least until now it as always as been the case. Have a nice day

[@AI.Tooltip]

Thank you for taking the time to reply back. cheers!

[@angiecdk]

Cheers man! This was very clear and to the point! :D

[@AI.Tooltip]

Awesome! thank you!