Build web apps in minutes with Replit Design Mode!

Transcript

In this video, I'm going to show you how you can quickly design web applications without writing a line of code. Will that be great? I'm a terrible UI developer and I started experimenting a little while ago with an application I'm sure you're familiar with called Replit. And Replit, using just natural language and prompting, makes it very easy to build very, very good looking apps in minutes. And that's what we're going to do in this demo. In fact, we're going to build a website for a street art gallery. You can see some of paintings over there. I'm a big fan of street art. So why not? Okay, let's get started and let's do some cool vibe coding. I'm pretty sure you heard about vibe coding before, but in case this is the first time you hear about it, let me explain. So vibe coding, as the name implies, means we create code based on natural language and intent and I guess feelings, right? Instead of thinking for days or weeks about how to build an app, we just go and build it. So this is a great way even for technical people to quickly prototype applications. And again, I couldn't write UI code to save my life. So for me, this is really a great way to build a first version. Hopefully maybe the last version I'll ever need. And I'm sure a lot of you out there can relate. And if you're not technical at all, then this is even better because within minutes, you can just start building apps and you're on your way to building your first website, your first product. Who knows? So let's take a quick look at the Replyt UI and then we'll start building. If you use Chatbot before, you'll be right at home. You see here the Rep. Interface, a chatbot window where we can simply describe what we want to build in plain language, right? And for the record, you can try different languages. I tried building in French and it worked very well. So we'll use English here. As we can see, we have two modes. We have a build mode, which will build the full application, the code, the database, if you need one. Etc., etc. But today we're going to focus on design mode, which will build the prototype, the user interface, the styling, generate images, et cetera, without all the backend stuff. So this is actually a great way to get started. When you have an ID in mind, you want to quickly see how it would look. You want to maybe show it to potential users or potential customers. And you don't need all the actual code and all the backend stuff. So you just want to look at the website, the navigation flow, etc. So for quick design and quick iteration, this is the best way to get started. So really quickly on the left-hand side, we have a menu with a list of apps we've built, the list of apps we've published on the internet to share them with friends and users and customers. We have integrations if we want to build and add external and authentication and third-party services, so we're not going to do that. We have usage metrics and we have, of course, documentation. And if you have existing code, if you have an existing website or an existing design, you could import it here and start from there. But we're going to start from scratch. All right, now let's enter the first prompt and see what the Replit AI models will do with that. From there. I'm the owner of Urban Vives, a street art gallery in Paris. No, I'm not. Okay, I'm making this up. Build a website to showcase the gallery and its artists. I cover all styles of street art from stencils to graffiti. And that's all you say, right? So now the AI models are going to analyze this and they're going to start building a first version of the UI. It's going to take a couple of minutes and we can see it's setting up a first basic development environment. We don't need to worry about all the details for now. And it's thinking about billing assets, the layout of the page, etc. Okay? So I'll post the video. Let's give it a couple of minutes and then I'll show you what Replet came up with. Okay, so within seconds, I'm seeing some first graphical assets. Very cool looking street art mural in Paris. Another one. Some cool neon style graffiti, stencil, a concrete texture. And now apparently it's building some of the code assets, the navarre. A gallery grid. Oh, there we go. Wow, that was really fast. I mean, it was, yeah, it was under two minutes for sure. Okay. So just this one prompt. And I'm getting that website already. Okay, so let's maybe look at this in more detail. So urban vibes. Okay, that's the name. We have a nice little hero page. It's got some flashy color. Oh, see, we've got animations already. We have the current collection. We can see some of those images. And they're obviously placed all their images. I mean, if I was really the owner of the gallery, I would then replace them. But yeah, this is pretty cool, right? So we're able to enter emails. And we have the address. That's actually a very good address. It's next in the Bastille area, which does have a lot of street art galleries. So yeah, this is a good first version, right? So on the left-hand side, we see a summary of what Replit did, right? The design highlights, typography, the hero element. The animations, etc., etc. Okay, that's not too bad, right? Okay, now let's think about a follow-up prompt. See if we can expand on this design. Okay, now let's ask a replica to maybe generate an artist page. Okay, so build a sample artist page describing their biography, their work, their expos, etc. Okay, let's see. Let's see what happens now. Trying to flesh out that design a little more. And once again, you can see all you have to do is just enter a prompt. No coding, no complexity here. So it's planning. So now it's planning the artist page. Let's give it a minute and see what that looks like. Okay, so after a minute or so, we have an update. Here's an artist profile page for Ghost. Okay, you can click on the first artwork, Red Rebel on their homepage to view the artist page. Okay, let's take a look. Okay, so this one. And yeah, we see kind of a gallery. We see some very clear banksy references here. Exhibition history. Yeah, that's pretty cool. Biography, we could have the picture in here. Yeah, this is quite nice. This is quite nice. Okay, let me come up with a last prompt maybe to keep tweaking the website and we'll see how that goes. So here's my idea. I don't like that street soul typography so much. And I like to see if we can update this to more. Of a graffiti vibe. Let's see if we can implement the wild style graffiti typography. Let's see if replicas do this. Maybe not exactly what I had in mind, but yeah, this is definitely creative. And of course, I could go and iterate some more. And as you can see, I'm not writing a line of code. I'm just experimenting and tweaking. And this is a really, really easy way to start building pages and designs and generate some more IDs, iterate quickly. And of course, you know, you get your files and if you want to tweak the code, you could do that. If you want to build a full app now, we could do that. Today we're just looking at design mode, but we could easily convert this and ask Replit to actually generate the app. And we could go and publish it. So why don't we do that and click on the publish button. And now if you want to look at it, we'll just need to go home. So now we have the app. We just built, we've published it. And here it is. Just go and open this. And as we say, voila. Okay, and honestly, for me, this kind of thing is a dream come true. Building web pages in minutes, just using natural language, not a line of coding, no CSS, no JavaScript, none of that. And then being able to iterate on that and refine. The design is awesome, I have to say. So I think this is a really, really good tool. And I'm sure I'm going to keep using it to build maybe my personal website, who knows? It would probably look better than the one I have right now. So anyway, this is what I wanted to show you today, a quick tour through the design mode of Replit. And as you can see, within a few minutes, with zero technical skills. Of that, you can build cool-looking websites with rich graphical assets, dynamic experiences, JavaScript, etc. And then publish it and build from there. Thank you very much for watching. I hope you liked it. I'll see you soon with more content. As usual, keep rocking.