Best AI Web Design Generator - Revealing My Secret No-Code Tool

you're happy with that you can go into wireframes and it's going to generate basically seconds and move the sections right so right I can just copy and I can paste that have you ever thought that you could go from a blank page to a fully functional beautifully designed website in minutes well guess what now it's not just possible it's actually easy and I'll show you exactly how to do that stick around and I'll unveil the Game Changer in web design that's making this a reality something that I've personally been using for quite some time and I really want to share this one with you so today we are diving into rant a tool that's redefining the standards of web design so I've been using this tool and library for quite some time now uh and actually kept it a bit secret but since I'm close to reaching 1,000 subscribers on my channel I really want you to know about it and also this video isn't sponsored and I'm just sharing it from my personal experience with you so this is the website of Rel as you can see directly uh while you're here you can see what they say about it that website design and build faster with AI uh we have here an example of how that might look like with a prompt and what it really does so you get from side maps to ux wireframes just by using a text prompt and I'll give you an example very shortly on how you can use it um I see something that's new is coming on the road map is the UI style guide so that means probably you'll be able to risking the components that they give you uh maybe with some kind of preset so you can choose your colors maybe you can choose the fonts that you want uh and I'm not saying that's still available uh right now you can do that right now but what I think they will want to do is make it just a bit faster directly built in in their platform so if we scroll down a little bit we can see that there are a couple of Brands here that have been using it I can even see Nike uh I can see Jasper finu uh I saw another one big name headspace that probably using Rel which I think it's quite amazing to be honest here's the example that I mentioned about side map so in this example that you see here the user is describing the uh business or what they want to generate and it's automatically going to give that side map you know you could spend hours brainstorming ideas and thinking about what to do but what reu managed to do here is you're able to move you know all the elements around if you want to move a section to another page or copy and baste it you can do that directly um and you can also say things like I want this in hero header section to describe the product or the business so maybe a call to action or something like that so you can specify that in the side map uh and as soon as you move into the next step into wireframes you will be it will generate automatically for you all the sections so the way it does it they have a pre-built selection of components uh you know multiple Herer section with different layouts uh and maybe different feature section or maybe uh multiple navigation bars right so depending on Case by case it will generate what it thinks it fits best for your business needs uh based on your prom and your and your sit map which I think is quite amazing I've never seen another tool to do it this great plus it also has AI copywriting so you can it also gives you the text right so in this example uh on this website the way I did it I used the wireframe thing um and then you know I specified that it's going to be a travel website and also generated this copy for me like discover the world through lens uh some tag lines and maybe you know some things for the for the buttons maybe this one inspiring travel Adventures around the globe so it was all AI generated so that's nice thing with the PRS right keeps that uh I say in memory and it's going to give you copy specific to your needs might not be great right you'll still have to do some changes but I think it's get you a step closer and giv you some inspiration so it saves you some time with that as well um and yeah and then after that you can also copy to figma right so you I'll show you exactly that in a second and also you can copy directed to webflow so the website I show you here um you know I play around I basically figma but also I just put it directly in webflow and then in webflow you can customize the stying I'll show you uh here you have a couple of great examples of websites built uh using relevant you might say right this is Library so you might think that everything looks the same but because it gives you all the customization option uh from webflow um so by the way yeah this is part of web flow but also it gives you react code now personally I haven't used the react code as much I know they're still developing it it's kind of in beta and it's using Tailwind but the big part here is web flow and how you can customize it so for example let's have a look at this one uh you see how it looks it has the hero but there's nothing really that it will tell you this was built with r right if I go and select another one from the list you'll see there is actually you know a big difference between them maybe if I select this one right it looks something like that so nothing that you know is going to scream oh this is R it's another templatized website no it's not it's nothing like that it's completely different gives you that power which I really really love um and even if you customize website you're still able to use your components I think is is quite great this video is not sponsored so real is not you know uh paying to make this video I'm just doing it because um I'm yeah said I'm reaching a th000 subscribers really really soon and I appreciate everyone for that and I think you should know all my my Biggest Secrets because you're following me and I want to share that with you so this is my my you know secret power that I've been using for some time to build website and I think yeah it's just just amazing we got the webflow library and we also have figma Library you know if you are a figma person and you prefer to do that directly in figma uh before you move it into web flow you can totally do that do the design figma see how it looks and then you'll move into building it in webflow in my case I have here a couple of projects that I've been designing so you can go and say new project um you can go and say start building uh so you can give it kind of a prompt right we can we can you know try here a couple of examples if we are not inspired you can also give it a name so you can say top I'm not that inspired today so top bang will do uh you can give it the number of pages so let's say 5 to 10 should be fine the language um we can also choose a language like I'm just going to go with English for now that's that's fine and say generate and it does take couple of seconds I think which is again pretty fast right so it gives you that kind of side map right here uh and we can you know we can zoom in we can see that's going to be a header section you can you know make it Global if you want like this navigation bar it's already Global and we can generate the rest of the sections so if you are happy with this structure you can move ahead and generate the rest of the pages you might just simply delete them if you don't need something and again you can you know move them around if you want something different right also gives you here a description of what it's going to be included in that feature section you can change it again every section works like a prompt so you can say top three features of my website so it kind of works as a prom for the next step right and once you're happy with that you can go into wireframes and it's going to generate basically seconds is going to take to get what you need I think uh we are pretty much done I think it's just this part that's also generating the copy on the go so you're not um just you know getting the design tool but you're also getting a copyrighting Tool uh so you can you know Skip things like um jper AI or Char for this part or you might actually use them to improve the actual copy uh like you see you see here I have jper ai I'm not sure actually if you can see it or not but I I'm able to edit this copy with my copyrighting tool if if I need to um yeah I was saying you can do your wireframes directly here so you can toally skip F my f you don't want that uh because you can move the sections right so it works kind of like Auto layout very very responsive and from here you can go to export and you can export all the pages to webflow um it tells you here how it works you need to clone the style guide install the web flow up in your website um and then you can import your side Builder pages into web FL directly from from here uh that's how I build this one and you'll see I have this plugin into into webflow and let's say I copy one of the hero header sections like let's say let's say this one right I can just copy and you'll notice it does keep uh let's make this slightly smaller open up the layers and you can see this is the global St that was mentioning there you need that for this for real St to function properly um and I can paste that section and uh yeah you can notice here that it does keep the style right so anything you copy from that from there even you know if it here looks like it's plain when you copy and paste into your website it's going to keep your font it's going to keep your colors your buttons and so on plus once you copy the style guide you'll be able to uh modify that right here so you can see all the different styles that R provides like text white text weight um text Styles and you know the color palettes there's an option where you can copy the colors uh background colors you can apply that with a class so if you want something you can you can just apply the class to your text or background you also have shadows all the buttons you know you get the point uh and everything you change in here you can let's say update the where is the button you can update the button to I don't know something else let's say I want I want the button to be to be green doesn't look great but for uh just for for the sake of it I'm going to show you how it looks looks on the homepage now you see all the buttons are automatically green so you can kind of use that style guide as a as say design system right so it works I want to show you one more thing so I mentioned before we have the react Builder so now Rel allows you to view well not view but you can actually copy and paste either the HTML code or the react code it's actually based on Tailwind version 3.4 at this you know the time of recording I'm sure they will improve this um in the time to come because I can see it's in beta so I'm pretty sure they're going to develop this even further uh for me personally a web flow is the main reason why I I have this subscription so that's you know that's been pretty much it what I wanted to show you um R I think it's been great and I want to you know end the video with a AI is is here to stay you are either you know a designer that's going to use it and keep up to speed with the Ever Changing needs of the clients and the everchanging technology or you're actually going to be left behind so AI is not something that will uh make your job you know less relevant let's say you might be able to uh you know produce more websites in a shorter period of time obviously that's kind of maybe reduce some of your cost automatically you not be able to charge as much to your clients for now I don't think that's the case still keeping the balance quite well but you will need to use AI to keep up with the trends with the competition so you might you know start embracing and learn as much as you can that's why in this channel I'm going to try and bring more AI tools for you and show you how exactly you can use them keep us relevant in this industry uh another thing I wanted to mention is that I'm going to publish really really soon a medium article about Ai and Design Systems and I want you to be the first to read it so as soon as it's going to be published uh is I'm going to place the link in the description of this video so have read I've been you know working on this article for the the past two months or so have a look at it and keep up to speed with AI because it's here to stay if you enjoy this video and this type of content as always make sure to subscribe to this channel like this video and share with your other creative friends I'll see you into the next video

Channel: UxDan

Views: 788

Keywords: relume, wireframes, relume ai, ai, site builder, ai site builder, relume ai site builder, ui, ux, website wireframe, wireframe ai, ai wireframe, relume sitemap, relume wireframe, wireframes ai, ui wireframes, ux wireframes, ui ux, graphics design, web design, website design, web design wireframe, wireframe tutorial, how to wireframe, fast wireframes, how to make wireframe, how wireframe, user interface, web design generator, ai website builder, react, ai web design

Id: tBXxTAT48kg

Length: 15min 18sec (918 seconds)

Published: Sun Apr 21 2024