- 30
- 110 319
AI Tooltip
Canada
Приєднався 12 кві 2024
Hi, my name is Jad.
I'm a UX/UI Designer, and on this channel I curate the best tools and tips to leverage AI, and revolutionize design workflows.
I'm a UX/UI Designer, and on this channel I curate the best tools and tips to leverage AI, and revolutionize design workflows.
Embracing AI for UI/UX - Full Creative Control!
I’m sharing my full UI/UX Process with AI to create a fully functional app.
Flesh out your requirements and convert them into wireframes then create a functional UI prototype with the best user experience process. & develop your app with AI coding #nocode
Sign up to UX Pilot → uxpilot.ai//?ref=aitooltip
In-depth details on UX Pilot → ua-cam.com/video/4kk-5daPibo/v-deo.html
bolt.new @StackBlitzOfficial
Create a database and user accounts with Bolt → ua-cam.com/video/yRlVtXkDSp0/v-deo.html
Product Design with Claude → ua-cam.com/video/z8cGL_RuufE/v-deo.html
Claude tips & tricks → ua-cam.com/video/F1QSDekQ7jM/v-deo.html
✉️ Sign up to my newsletter for my curated tools and tips to improve your design workflow with the power of AI → www.aitooltip.io/subscribe
00:00 Overview
02:00 Requirements & Ideation
05:20 Wireframe
12:30 Prototype
15:00 Database & User Accounts
15:49 Final Thoughts
#aitools #uiux #aidesign
Flesh out your requirements and convert them into wireframes then create a functional UI prototype with the best user experience process. & develop your app with AI coding #nocode
Sign up to UX Pilot → uxpilot.ai//?ref=aitooltip
In-depth details on UX Pilot → ua-cam.com/video/4kk-5daPibo/v-deo.html
bolt.new @StackBlitzOfficial
Create a database and user accounts with Bolt → ua-cam.com/video/yRlVtXkDSp0/v-deo.html
Product Design with Claude → ua-cam.com/video/z8cGL_RuufE/v-deo.html
Claude tips & tricks → ua-cam.com/video/F1QSDekQ7jM/v-deo.html
✉️ Sign up to my newsletter for my curated tools and tips to improve your design workflow with the power of AI → www.aitooltip.io/subscribe
00:00 Overview
02:00 Requirements & Ideation
05:20 Wireframe
12:30 Prototype
15:00 Database & User Accounts
15:49 Final Thoughts
#aitools #uiux #aidesign
Переглядів: 3 712
Відео
UX/UI In The AI Era - Simplest Design Process!
Переглядів 40 тис.14 днів тому
In this video I am sharing my revamped UX/UI process that leverages the power of AI. No more dumb prototypes! Sign up for my curated tools and tips to improve your design workflow with the power of AI → www.aitooltip.io/subscribe For detailed Bolt tutorials check out their channel → @StackBlitzOfficial Easy AI UI Design: ua-cam.com/video/t1oB10lgxII/v-deo.html 00:00 The Current State Of AI Desi...
Convert Design To Live App, For Free! - With Bolt AI
Переглядів 3,1 тис.Місяць тому
We're taking our design to the next level! Turning those designs into functional code without any coding skills with Bolt! bolt.new @StackBlitzOfficial Subscribe for AI tools and tips to boost your workflow! → www.aitooltip.io/subscribe 00:00 Overview 01:44 Convert designs to code 07:00 Fixing problems 08:43 Complete app 09:00 Deploying the app 09:40 Final thoughts #nocode #aitools #aicoding
UI Design With AI For Free! (No Design Skills Required)
Переглядів 14 тис.Місяць тому
For non-designers! I’m giving you the easiest possible process to create ui with AI, and convert it into an interactive prototype. We will be using Galileo AI for analyzing requirements and generating ui, then we will jump into Figma, and i’ll show you exactly how to create a prototype in a few easy steps. Sign up for my curated tools and tips to improve your design workflow with the power of A...
FREE - UI Design Process With AI
Переглядів 15 тис.Місяць тому
Join me as I demonstrate designing an app using AI tools: Claude for requirements and ideation, UX Pilot for user flow and wireframes, and Visily for UI and prototyping. uxpilot.ai/?ref=aitooltip Sign up for my curated tools and tips to improve your design workflow with the power of AI → www.aitooltip.io/subscribe UX Pilot Figma Plugin: www.figma.com/community/plugin/1257688030051249633/ux-pilo...
6 Creative Claude Tips - Interactive Documents
Переглядів 804Місяць тому
Discover 6 new and creative Claude tips that boost productivity across all industries. These lesser-known tricks will revolutionize your workflow. Learn how Claude's versatility can replace multiple tools and maximize your efficiency. Get a copy of Claude Projects for product research → www.aitooltip.io/subscribe Claude Projects video → ua-cam.com/video/z8cGL_RuufE/v-deo.html 00:00 Overview 00:...
Boost Your Product Research Process With Claude Projects
Переглядів 1,2 тис.2 місяці тому
Supercharge your product design workflow! This video is all about leveraging AI to breeze through the UX research and discovery phase of your product design process using Claude Projects. Get your copy of the full instructions→ www.aitooltip.io/subscribe 00:00 Overview 02:22 Claude Projects 03:00 Market Research 05:20 Competitive Analysis 05:51 Trends Analysis 06:18 User Interviews 07:45 Stakeh...
Boost Your UX Process With AI - UX Pilot Breakdown
Переглядів 3,9 тис.2 місяці тому
Discover the ultimate AI tool that simplifies your entire product design process-UI and UX! 🌟 Meet UX Pilot: from discovery to UI design, this Figma-compatible powerhouse covers it all. Harness the power of AI to elevate your design game-whether you’re a Figma pro or just getting started. uxpilot.ai/?ref=aitooltip Sign up to my newsletter for my weekly selection of AI Tools and Updates! → www.a...
The Best AI UI Tools In 2024 - Uizard Vs Visily
Переглядів 5 тис.3 місяці тому
Talking about UI UX AI tools and how they compare. Uizard and Visily are the most popular AI UI tools out there at the moment! Which one is better? This video is a detailed comparison for you to know what to expect when you are looking for an AI tool to generate UI with AI, and which tool you can implement in your design workflow. Uizard Review: ua-cam.com/video/V6XWrcrihY4/v-deo.htmlsi=KjNSN8n...
The Truth About Uizard - Figma Killer??
Переглядів 2,2 тис.3 місяці тому
Uizard has been gaining traction in the AI design community, so it's time to dive deep and reveal the truth. In this video I break down Uizard’s features, highlight what’s missing, and give you my honest take on whether it can truly replace Figma. Watch this if you're looking for a design tool with AI features → ua-cam.com/video/l_omG-GOxm0/v-deo.html Sign up to my newsletter for my weekly sele...
Super Easy Figma Replacement: Visily AI For UI Design
Переглядів 6 тис.3 місяці тому
In this video, I'll be diving into Visily AI, a user-friendly UI design tool perfect for beginners or anyone looking to skip the learning curve of more complex platforms like Figma. I'll walk you through the process of designing an app from scratch, highlighting Visily's AI-powered features like text-to-design, theme generation, and smart components. Watch as I create a home automation app, exp...
Galileo AI: Your Junior UI Designer
Переглядів 3,9 тис.4 місяці тому
If you're looking for a good Figma replacement that is extremely easy to use, I recommend this video ua-cam.com/video/l_omG-GOxm0/v-deo.html Sign up to my newsletter for my weekly selection of AI Tools and Updates! → www.aitooltip.io In this video, we discuss the current state of AI in design, emphasizing that AI is not yet capable of replacing human designers, especially when it comes to creat...
The Ultimate AI Video Test | Runway Gen-3 Alpha
Переглядів 1 тис.4 місяці тому
The Ultimate AI Video Test | Runway Gen-3 Alpha
AI Video Is So Much Fun! | Dream Machine
Переглядів 1934 місяці тому
AI Video Is So Much Fun! | Dream Machine
Motiff Breakdown - Figma Replacement?
Переглядів 2,8 тис.5 місяців тому
Motiff Breakdown - Figma Replacement?
Creatie Breakdown - Can This AI Tool Replace Figma?
Переглядів 1,5 тис.5 місяців тому
Creatie Breakdown - Can This AI Tool Replace Figma?
Massive AI Updates! - Create mockups with Recraft | Updates Roundup
Переглядів 1685 місяців тому
Massive AI Updates! - Create mockups with Recraft | Updates Roundup
Unlimited AI Vectors, For Free! Logos, Icons And Design Elements
Переглядів 2,7 тис.6 місяців тому
Unlimited AI Vectors, For Free! Logos, Icons And Design Elements
Midjourney On The Web - All You Need To Know | Midjourney Alpha
Переглядів 3116 місяців тому
Midjourney On The Web - All You Need To Know | Midjourney Alpha
The Most Accurate Text-To-Image AI Tool - Ideogram Vs Midjourney
Переглядів 986 місяців тому
The Most Accurate Text-To-Image AI Tool - Ideogram Vs Midjourney
How Advanced Can You Get With Free AI Images?
Переглядів 656 місяців тому
How Advanced Can You Get With Free AI Images?
Thank you so much for this. I feel you should create a full course using these three Apps together on Udemy or Linkedin Learn, it would go a long way compared to the condensed video
Thank you, I love your suggestion! Working on it 😊
Bolt ai works like magic better than V0
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 :).
Nice! Good luck with your journey!
Thank you for occupying this niche and giving top quality tutorials ❤. Thank you so much
Thank you for the appreciation!
Hey man, thanks for the informative tutorial! I appreciate you taking the time to show us your workflow. I just wanted to let you know that Claude and Bolt are actually using the same AI model, which is 3.5 sonnet New. This means that they're essentially the same tool, just with different interfaces. So, if you copy the code from Claude to Bolt, it should work smoothly. What I'm saying is, you can cut out a step from your workflow (whether you're using UX Copilot or Claude) and get the same results faster and cheaper.
Thank you for the feedback and the tip! Yes, great point, that should work seamlessly if you know what you're doing, but it's not easy for someone without coding experience to know what code to generate with Claude, and how to copy it to the right files in Bolt. My goal here to present the easiest process and let bolt take care of everything in the background.
عالمي ❤
Wow! So was the figma work just to have some more detail to give to the developer?
To keep your wireframe organized and manually make any necessary edits before giving it to Bolt.
🔥
Can you do one about design prompts and eliciting requirements please? Ĺike say I have a dude who runs a roofing company and wants a website how do I figure out what he wants from a design perspective
Ask Claude to give you client questions to gather requirements for a website. and ask your client to answer the questions.
I have watched all your video what if we add a new feature within the designed web interface then how do we edit it or do we do all process from beginning
if you know exactly what you need to add you can just ask bolt to do it
9:07 you can ask for clause or in another chat to remove your styling (give thwm examples) and then for each generarion it will remove it. Since you are scanning now the text. Do the same with the response of the chat when remove the styling if he kept something you could update your remove styling prompt
You’re right, i did that for the rest of the pages but i didn’t explain it.
Jad you’re my new favorite channel man! You are really clear and tactical, it’s fantastic. I’ll be sharing among my friends!
Thank you so much for the support! much appreciated!
Awesome workflow! I've been testing Bolt myself since our last convo and I think it's great for prototyping, static sites and mvps that don't require much complexity. I tried some more advanced use cases that I have with client webapp projects and it requires a lot of prompting because code breaks all the time as the ai rewrites/hallucinates. It's not faster than building in low-code (yet). I think these two will start to merge together so that you get visual development platforms in which you can design yourself, get direct access to the code and extend it with ai. Flutterflow is moving in that direction already. But the fact that we can already do this gets me super excited for whats coming next!
Absolutely! The tech is still in its early stage!
Nicely done, focused. Thanks for clear tut-like video.
Super nice workflow. Signed up for UXPilot 🚀
Awesome! Let me know if you have any questions!
Thanks!
Wow! Thank you so much for the contribution! It means a lot ☺️
nothing about your content but please putting 5 min. add with not a chance to skip, do you really think that's a good idea, I can live with 20sec even 1min add but this is the first time i see someone putting 5 min. add with no skip option, but i guess there is a start for everything
I’ve never seen an unskippable 5 min. ad. i agree that’s too much but i can’t control the ads from my side. Are you sure though? thanks for letting me know!
I don’t know much abt design. Just learning how to sketch ui like low fidelity, I’m not even done. But the Ai tools you have shined light on in your videos has really helped me a lot with the manual work. Especially Visily. I’m trying out creatie too. Now the barrier to entry for coding a and design is prompt engineering
Watching this video has me smiling from ear to ear. Who would’ve thought that something that took months to build could one day be done in just an evening after your 9-to-5? Truly amazing! Thank you for sharing such priceless and valuable tips honestly, if you ever decide to make a 5-hour video, count me in without hesitation! Haha.
Wow! your comment is so heartwarming and motivating to me! Thank you!!
Love your videos!!!! Very insightful!!!! Keep them coming.
Thank you!!! Will do!
Absolutely loved the way you explained the various steps of the work flow 🌟 it is both engaging and informative. It's amazing to see how these tools can boost our productivity and creativity. Can't wait to try out some of the tools you mentioned 🙌 Thanks for sharing 🙏🏻👌🏻
Thanks for the feedback! ❤️
Amazing video as always, thanks for sharing your knowledge and experience ! Nice to learn about new tools. And Yes! I would love to see a "bolt.new" dedicated video.
Awesome! thanks for coming back ❤️ I’ll def. work on longer videos
Impressive tips. Super helpful! Oh and yes keep posting even more elaborated videos. You’re a catch!
Ohh thank you! ☺️
Beautiful video !! As you said, what took months now takes hours ! Thank you for the tips and tricks, very helpful for my coming project! Perfect guidance keep it up please 🙏🏼
Glad it was helpful! Good luck with your project! Always here to help.
Thank you very much Jad for your research efforts and sharing tips and tricks. I will try to format the Claude part into Claude projects (echo to your video on this subject) and see what that will give. I discovered your channel today and I learn a lot of things. Thanks again.
Oh thanks for the feedback! and welcome to the channel! good idea to use projects for requirements and ui description. 👍🏼
I literally watched your previous video like 5 times. It was so insightful. And when I noticed your new video I jumped on it right away. I’m going to refer to your videos a lot.
Awesome! That’s the goal! I’m so glad the videos are helpful. just out of curiosity, what do you do?
@@AI.TooltipI’m backend software developer based in Toronto. Used to do fronted, but stopped a while. Developing my own project as well. I’m surprised you did specify any of your business contacts. Are you interested in partnering or looking for some projects?
Valuable tips and tricks😎😉
Excellent as usual ! 👌🏼 Incredible Claude…Is it the pro version ? Claude is still better than ChatGPT with « code » ?
Awesome! thanks for coming back! Yea i’m using the pro plan but the free plan works as well. i haven’t tried chatgpt in the past 2 months. but before it wasn’t giving me the results i want. i found that claude is so much better with creating code and displaying it. much more versatile.
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.
Oh thanks for the tip!
This is actually insane!
Are you Brazilian?
No I'm Lebanese. Cheers to Brazil!
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.
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"
@@AI.Tooltip Lol - ok, thanks! I thought that they were some of these very complex prompts.
God bless you!
Thank you so much!! I really appreciate your contribution and motivation ❤️
Bro bro bro … u just made me 100x more productive … THANK U THANK U SO MUCH
Amazing! Thanks for the feedback!
Hi Jed, Ive been working on a project (USQuail Cooperative) to develop a directory of US Quail business owners using the Brilliant Directories (BD) platform. The problem is the homepage design tool is basically a collection of bootstrap widgets that you can add in up to 14 sections from the list of generic widgets for various markets (such as a real estate directory may have a "property" widget). Since there are no "quail business widgets" (ex a calculator tool for visitors to determine how many hatching eggs to buy to get X# of egg laying females, or how many chicks to buy if only half will be hens). I've been trying to find a tool without trying to communicate with affirdable developers on upworks with a communication barrier that I could create these widgets that I could save the code in the widget maker and place the widgets on the homepage or elsewhere. I feel like I'm trying to use many square pegs to fit into the round BD hole I've committed to using. Can Claude/Bolt create these for me so I can more easily design sections of my website, such as prompting it to " create a widget that works with the BD bootstrap theme to be used within the Tools section of the homepage design?" (BD widget maker allows for html, css and JavaScript code boxes). But I run into problems on more complex widgets where I may need to add a file to the database listing an array. Ex We have 10 "programs" a member can participate in to offer to customers. I have icons for each program and would like the program(s) that a member selects appear in the members profile similar to a member's social media link icon string. It's tough finding a developer familiar enough with the BD platform to work effectively. I also need an affiliate management program so I'm not having to buy one on a monthly basis and have to be concerned about integration of the two platforms using Pabbly. Would you be interested in helping us as a project manager, or at least giving me some ideas on if bolt will allow me to save code that functions as micro-stack widgets, or creates code for functional sidebars with embedded widgets. I even think creating an AI sidebar app for BD users would be profitable for you if you wanted to help and I could promote it for you in exchange for your services on my site? USQC at USQuail dot com for direct reply.
Claude😍
Alternatively, you could just use Lovable (GPT engineer)
Did u have to subscribe Claude and Bolt as Professional?
Yes because I use them a lot, but you can get by with the free plans
C'est franchement chouette. Well done ! Makes me embrace the AI shift
I didn't know Claude does as much... cool.
Yeah Claude is amazing! I have two videos just on Claude if you wanna know more.
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.
Dude, you shine
This galileo what happens when your credit finishes
You will have to pay for a plan. Or use a different account.
this is a gold mine
Great video! Thanks for sharing
I have not made a prototype for a web app in over a decade.. So I don't now about that. Seems to be a lot of wasted time and money to still do it like that. I mean his so called 'old' method. I think that many of these AI coding examples you see on YT are very generic apps and sites and really lack any depth or tech challenges. The other issue is of course: what company wants a website that was completely made with AI by some early adopter? When your dev/designer walks you are stuck with a technical black box. On top of that the entire web dev and ecommerce and CMS space is tried and true. If there is something worthwhile coming for freelance devs it is going to come from these bigger corps. Like squarespace, shopify, WP or what have you. For this to grow big clients need to have certain assurances. I did enjoy the video. It was pretty cool.
Agreed. This tech is still early though.
What do you prompt midjourney to get those ui elements and like prototype
I mentioned the keywords 5:33, you can also check my prompts on the screen.
As a Back-End Heavy FullStack Engineer: This video is PURE gold! I dont have to pay for designers anymore. Thanks a lot bro!
Awesome!!
I share the same sentiments. Design is always a pain for me. Thanks @AI.Tooltip
Stay tuned for the new video on Saturday. It will help devs even more!
Haha we don't need a front end dev.
@@heavenstarhilary2817 thats for sure hahaha
this was absolute gold
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!
Thank for that! Working on longer videos!
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.