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

[@marcpuls4798]

Thanks!

[@AI.Tooltip]

Thank you!!

[@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.

[@m4tim4ti]

What I love the most. Finally someone talking about TOKENS and cost of using AI. Those are rare things not - everyne is overhyping AI as selling ferrari without telling about fuel consumption and costs of maintnance.

[@TheJonathanLugo]

Hi Jad, excellent non nonsense approach. With this new paradigm you are changing the game - and helping us in the process. Thanks!!!

[@AI.Tooltip]

Thank you for the awesome feedback!

[@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. 🎉

[@ahdbjs]

Just mind blowing 🤯 For this you've earn a new subscriber ❤️ Need more Masterclass like these

[@PatrickWillcox]

Wow! Great video. Time to start the business I have been noodling on for 2 years. I now know enough to get started. You just saved me about 2 years of procrastination!

[@AI.Tooltip]

Amazing! So happy to hear that! Enjoy the process, and good luck!

[@innercitadelskies]

dude: nicely explained. Makes perfect sense and have now signed up. thanks!

[@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 !

[@DanieleManca1983]

Wow this was an amazing clip, it changes things considerably, I am more of a developer than a designer, and this process changes the game big time.

[@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!

[@Hayden.1234]

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

[@AI.Tooltip]

Awesome! Thank you!!

[@rijaul-sk]

Man you are a gem to the internet, I can see you in 1 million subscribers soon. You got a sub...

[@solmillin]

Brilliant! Today I started the process of learning Figma on youtube, watched a movie for fun and then your video came up. Call it 'happenstance'! I call it a Blessing. Woo hoo! Gonna try your amazing process. Wish me luck! :) 💕

[@AI.Tooltip]

Wonderful! good luck!

[@AI.Tooltip]

Enjoy the process!

[@solmillin]

@@AI.Tooltip I'm new to these processes. Do you have a printout of all that you present in this video, so I can copy the structures and details, replacing text with my design and requirements? This would be very helpful :) 💕

[@AI.Tooltip]

Check out my newest video, I have all the prompt details there: kzbin.info/www/bejne/rX6zqpqehJyGbJI

[@solmillin]

@@AI.Tooltip I've spent 4 hours of this. Bolt just does not have the capacity to produce working code. It has failed and continues to fail endlessly. Maybe you can only build extremely simple applications at present before Bolt debug their product for real complex jobs. Very frustrating.

[@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 ❤️

[@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! ❤️

[@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!

[@brenttauromusic]

When you said “use this theme” I was BLOWN AWAY! 😮

[@karthik947]

Another banger. Thank you.

[@gustavo5320]

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

[@AI.Tooltip]

Glad it was helpful!

[@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 👍🏻

[@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!

[@baturedesign]

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

[@AI.Tooltip]

Awesome! thanks for the feedback!!

[@goldenglowitsolutions]

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.

[@goldenglowitsolutions]

@@heavenstarhilary2817 thats for sure hahaha

[@joaopearaujo]

That’s amazing mate! This kind of tool will open many doors.

[@黃雨晴-y6s]

Thanks for sharing this amazing process of creating UI🎉 it helps a lot!!

[@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!

[@codingWearingPants]

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

[@DonaldYeo]

Thanks for the tutorial, something i'd use in my workflow.

[@DesignXstream]

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

[@subrotodatta3396]

Hey, Can we get a demo for Cursor ?

[@NeuralDev]

this was absolute gold

[@animatex]

What you do here is a quite familiar software development process i think. Youre dividing the project in frontend and backend, so that makes alot sense for me since ai models are still to chaotic to handle many parrallel tasks. Still wondering if the ai agent will remember all places correctly when adding backend dependencies

[@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!

[@CoreyLansdell]

This is actually insane!

[@marpla78]

Thanks for this, super useful and clear. Mini request if there any chance to share the claude prompt so we can go over and check the steps in detail?

[@AI.Tooltip]

Sure! 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"

[@ai.aspirations]

Thanks for sharing ❤

[@AI.Tooltip]

Thanks for watching!

[@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"

[@joshua0x]

Great video! Thanks for sharing

[@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.

[@HistoryViper]

Thank you that is a genius for me to use a workflow and then feed that to the AI to be able to build the app because I've had bolt just completely destroy all the controls for my app when asking to add a new control. Also there's a lot of things that I want both to do but I can't really explain it to him but you use animations that can be used with different objects. It'll try to animate each object individually with a new animation.

[@Harharharris]

Great Video. What is the database of your choice for storing information? I see Supabase and Firebase as the most common databases being paired with bolt.

[@AI.Tooltip]

Thank you! I use Supabase. I included it in my other video right after this one.

[@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!

[@adnangobeljic7900]

God bless you!

[@AI.Tooltip]

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

[@jgproductdesign]

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

[@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!

[@NguyenHung-do7gc]

Great content! Thanks!

[@Imakemvps]

How did you post the project to bolt? Did you combine the entire conversation?

[@AI.Tooltip]

I just attached the requirements and the wireframe that I generated with Claude

[@joMojojojo]

Dude, you shine

[@EmileModesitt]

Nice video, thank you!

[@AI.Tooltip]

Awesome!

[@OctavChelaru]

Went to the same transformation. Crazy days. ❤

[@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.

[@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.

[@RyanStephenAlldridge]

Fantastic!

[@ReciclajeLGC]

I experimented with ChatGPT and the Replit AI agent, but I encountered issues completing the project as the code kept crashing. While these tools work well for simpler designs, they tend to become problematic with more complex projects. any tips please let me know

[@faridullahkhan1]

Loved it, thank you 🙏

[@AI.Tooltip]

Awesome!

[@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.

[@orelhassid]

This is Crazy! OMG

[@photofusionart]

Good job. 🎉

[@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 😊

[@tamgaming9861]

I noticed a lot that it stops when it loads things that wants funds ... that makes huge problems i cant fix it.

[@ableabelly702]

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

[@TheCebulon]

That is awesome. Easy results in a few steps. One hint to improve your videos: your voice is very monotone. No variation in tonality. It is hard to listen to you. You have such a great channel and content, make your voice match the other parts, would elevate everything. Thank you.

[@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!

[@____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.

[@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

[@pengouin]

Great video my friend

[@viveks4899]

Looks cool

[@RK-lq2ud]

Good tools, can be used for inspirations, using it entirely results in lifeless product. There's a reason some designers still do pen & paper wireframes. Maybe useful for freelancers that churns out mid similar looking designs everyday, or small projects.

[@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.

[@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

[@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.

[@jasondesmond1895]

how did the gray cat turned black tho ?

[@AI.Tooltip]

😂 yeah i have multiple cats

[@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.

[@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

[@YuriLucio]

Sensacional, meus parabéns 🎉

[@madhoundes]

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

[@AI.Tooltip]

Eh akid, no problem!

[@princemudzengi]

Claude😍

[@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

[@huangjiawutw]

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

[@igorshingelevich7627]

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

[@AI.Tooltip]

All the links are in the description

[@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

[@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

[@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!

[@empresaplatinum2141]

Magnifico!!

[@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

[@imrankalathingal6444]

Is it possible to create mobile apps?

[@AI.Tooltip]

With bolt you can create native apps using NativeScript.

[@imrankalathingal6444]

@AI.Tooltip Thanks man.

[@jakobkristensen2390]

This is great

[@Andrew-q8d6w]

Alternatively, you could just use Lovable (GPT engineer)

[@RobertDacian]

Yep, that's the future, i'm a UX/UI Designer with some development skills too and i'm already doing this, i still don't get it why LinkedIn UX/UI jobs are still looking for the traditional way of doing shit, i mean i'm not against the traditional way of doing it in Figma and what not but besides the fact that you go trough the tedious design thinking process that already for some companies is to long, you get to spend weeks designing shit that mostly makes you fight with the dev team :) Anyway, good video, im sure in 2-3 years from now we will all do the AI thing, will no longer be or exist junior developers and with a bit of visual creativity and extensive copy skills, everyone will be a designer :)

[@AI.Tooltip]

100% well said

[@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.

[@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

[@andrea.dg-dev]

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

[@abdulkadirsaloum1449]

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

[@NishanthaU]

Dude would love to interview you for my channel

[@AI.Tooltip]

Sure!

[@zhanezar]

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