🚀 Build Professional Websites in RECORD TIME with AI

How to build a funnel from scratch, how to build a website from scratch, and to do that in record time. So just a little bit of background story. We had Mr. Evan join the team. One of the things that I gave him as a quick get up to speed thing was create a website for make more marbles that that reflected the current offerings and products of the company. We've been around for 15 years now. I'm crazy excited to say, help thousands of entrepreneurs to launch masterminds and businesses and scale them up and implement AI and automations. And you know, the website just didn't really reflect anymore what we were currently up to with Optimus, Mastermind and AI and automation. So that was the first thing I gave him. And you know, I gave him 90 days, which I thought was a really reasonable amount of time. And about 60 days in he had some wireframes and some stuff built out. But he needed some extra help and luckily JJ is always trying out really cool stuff. He found a amazing tool called Reloom that we're going to show you today with, which helped Evan get all the rest of the work together in about a week. And now he's ready to demo what he's created. We did push him a little bit harder. He was supposed to show it to us tomorrow, but he's going to show it to us today. So I'm going to kick it over to JJ who actually found the tool. He's going to give us a quick overview of exactly what it does, give you some of the feature sets, and then we'll kick it over to Evan and show you exactly what it looks like so that you can use Reloom to build your website in record time. And I'm not talking some little landing page, I'm talking like a fully fleshed out and SEO ready, ready to launch website. So very excited. Jj, take it away.

Hey guys. All right, so the tool we're talking about today is called Reloom and Reloom. As Brad said, we needed a quick way to get wireframes. I've used tools like UX Pilot, I've used Claude straight to HTML the whole nine yards and trying to get things inside figma has really always been the challenge to truly be able to take that entire design, get the Figma output and things like that. And that's where we found Reloom. So I'm going to let Evan go over the rest of this. But Reloom by itself, there's a process to truly get a great prompt here. And using Claude was the Best tool that I found for this. Having Claude research exactly the niche that I'm looking into. Telling Claude to get me the best structure and design and conversion flow for that website and then teaching Claude about Reloom and then having it give me the prompt to put into Reloom. And that's what we're going to be going through here. Evan, you just let me know when you're ready and we'll get you rocking and rolling.

Sounds good. Yeah, we can, we can dive in. The cool thing about this is that it is. It's. It's so quick. Even when you go through the videos of Reloom itself, when you go through their own train videos, their first one is if you look on YouTube, it's like how to do this and 30 minutes or less. So it's a pretty cool tool. So for this project specifically, what we had, which was kind of unique, is that we had a website already set up. So where we weren't technically going like from scratch from scratch, although you'll see how you can do that too. But we were able to use the Make More Marbles website that was already up, even though we're updating it. And one thing you do, when you start, you can. And I'll do a screen share here so we can, we can take a look and I can kind of show you the tools here we've got right there. Let's set this up. All right. So you'll see here we've got. We've logged in. You'll see you can do this option right here because. Import from URL. So what's great about that is you can click Import from URL. When you do that, you give them the URL and then it will go through and it will crawl that URL. It will crawl all of the pages there and it will go ahead and give you a help. You start a site map, which is great. So get you a jump start on your site map so you then kind of can reorganize, move content around. Once that happens, we'll click through into the project and we'll see it spits out the gains of a site map. So this is a. This is zoomed way out because we had a lot of pages to work with. But what's great about this is it helps you organize and set up in a hierarchy. For those of you that have had to do this by hand or use other tools for this. This by far was the easiest one that I've ever come across, which is fantastic. We'll zoom in Here a little bit. So you guys can see how this works. Let's go through here. So we can see we can break it down into all different sections, make more marbles. Has a lot of different business lines. So we've got, you know, everything from books to blogs or terms and everything there. And then within the site maps, we see it breaks down into the different sections of that page. Now we can easily add sections here. We can see with different types, they've got them kind of programmed out this way. We can remove sections, we can move orders around, and it automatically is saving in real time, which is pretty amazing. From there you can go through and then after you're set with your sitemap, then you can have it go through your wireframe. And one quick note, what's really cool about this is let's say you're bouncing between the two. Once you're going through the wireframe and you're like, I didn't like how that's organized, you can go back to your site map, make your changes, and it will go back and automatically update and change how your wireframe is laid out too, as far the organization goes. So let's zoom in here to, to a few pages. So, for example, so we can zoom in here and then this will put out our wireframe for our page, which is pretty cool. Now again, what has done now from the sections, now it's generated into the wireframe. We've got these laid out this way and it's a lot of freedom. So where some other tools in the past are pretty rigid, you can go through and easily add sections. We can save components, we can create custom components that we want to use throughout the site. And then it's got kind of some different best practices set up here. So we can easily go through and I'll go through and edit this afterwards to clean it up. But we can easily go through and browse different layouts. You can see it gives you a preview in real time, so you can kind of see how it's looking, which I think is kind of fantastic. I'm a very visual person. This is very helpful. And you can go through and add these sections. You can save these sections and they're added to your save section if you really like them and, and do this for each page and kind of go through and zoom back out, see how it applies to the, the overall design and in real time. Next step.

Quick question before you move on from that, Evan. So this blew out a pretty big thing. So did you import it from WordPress first and then create this from that.

That's a great question. No, I have, I needed no access to WordPress to do this. So this was actually from a combination of using the web crawler. So that very first phase, when we went back to import the URL, then it crawled the website, then from there imported in the overall URL structure or the site map, and then from there we went through and put in the headings and the sections and everything like that too. Um, so that's a nice thing is you can actually start this design. Let's say you're building, maybe you're more of an agency model, you're working with clients, you can actually, you don't need access to their initial website to get started on this, which is kind of a great for, for a time time saving tool there.

I noticed also when you were kind of in the beginning page, there was access to webflow, access to React library, access to Figma. So if you're designing, let's say a desktop app like we're doing with Optimus os, you could pull directly from the React library to create stylistic elements right here and kind of wireframe those as well.

So we can do that. And it's actually works the other way around too where you can, you can import back to those things too. So we'll kind of go. And that's a good segue into the style guide. So then as we're, as you're, you know, messing with your, your layout, updating your wireframe and kind of the overall user flow, then we can click over here and go to our style guide. And this is a really cool tool, so it's really cool as well. So just like, you know, as normal with most web editors, we can go here and put in the different colors that we want. For instance, to make more marbles, I set this up by, you know, going right here, pulling the, the color blue from the Make More Marbles logo. Got the color code for that, Got the color code for that. And then put that right here kind of as the base and then start building colors out from around that. But what's great, again, I'm a very visual person, so I really appreciate kind of being able to see these updates in real time. As we're looking at this, it's going to AI to give us some complementary colors. I put in this one and this one from the existing website to carry some brand consistency, but then it recommended these as complementary colors. We can also set the neutrals and gradients for these colors and then it's Going to give you a little example of how these different colors can look on the page. And. And it can give you the ability to kind of swap out and start building your style guide a little bit before applying to the rest of the site. What's nice about this, too, Again, we can do the same thing with fonts. We can look at different button styles and kind of see how we want those to go through here. Let's say we want to get a little more. A little flashier with it. We can kind of pull in this button, which is going to pull in one of our secondary colors, and we can try these out in real time. And then we can also just use the shuffle. I don't necessarily want to do this right now because I'm already kind of in the process on this one, but you can do AI shuffle, and it will dynamically shuffle all these colors around and give you some other options. And then you can save these other options under multiple concepts. So we can do this. We can duplicate this concept. Now, concept two. So now let's hit shuffle and let's see. So now it's going to kind of just, you know, hit the shuffle button. It's going to show us some different ideas. So let's say you're in a situation where you're not trying to replicate the brand and you really just want to see what's out there. Here's a really easy way to do that and kind of give you some different ideas for your different brands, colors, and for your different fonts and things like that, too. So it can kind of show you in real time how that might look. And you can save these as other concepts. If you have a team that you're working with, you can then share these other concepts with the team. So you can say, hey, guys, we've got three variations of style. Let's take a look at them. And again, I'm doing this in real time right now. So that's. It's pretty fantastic. So last step here. Again, this is a pretty straightforward tool. Now, this is still in. In beta, so they're still working on this, but this is going to get better and better. But then we go to design. So this is where it's going to take some of those concepts that we were just working with. You can see that last design that I was just working with, this is not the actual design that we'll be using, but it's going to go through here, and it's going to start applying that to the pages here. So we can start to Kind of see how some of these colors will look, you know, how that, how the buttons will look, how the different backgrounds are going to look. And then you can go in as you add sections to this. Again, let's say if you want to do it here, it'll retroactively update it on the wireframes, which is amazing. We can also zoom in a little bit and this is where we can start even swapping out. It'll provide some images just to kind of help get things moving. But this is where, this is where you can actually start putting in your images right here. So again, this is all in the tool before you put on your server, before you put it onto, onto figma. So it's, it gives you a lot of flexibility, especially if you want to be creative with things.

Yeah. So typically every website generator, like Squarespace and all these are going to have their own particular version of this. But this one allows you to go ahead and do everything from any one of these four, you know, from the sitemap, from the wireframe, the style guide and the design. It makes changes across the board. And then you can essentially upload it into Figma or whatever you want to use and then you're ready to deploy it into whatever WordPress or whatever the end result is that you want it to be on, go high level, so on and so forth. Or am I missing something there?

No, you're perfect for it. Yeah. And then again, right here we can connect to Figma Library, web library, react library. Again, as you're saying to kind of pull some of those things from the library into here. Then they also have tools to export to figma webflow. JJ has, has some great process on how to import it into forms or funnels for high level as well too, so.

Perfect.

Yeah. So it's super versatile. This is. We can kind of zoom back up from the AI standpoint. I mean, as someone who worked in traditional agency with really large clients doing, you know, $50,000, $100,000 website projects, this is going to save so much time and is going to be changing so many things that this is where they are now with it, as opposed to where it's going to be another six months, another 12 months. This is something that's going to be a game changer for a lot of people in the space.

Awesome. And then what's the, the pricing and the referral structure look like?

You know what, that's a great question. I'll have to go back when I signed up for it. They do offer a 14 day free trial, which is fantastic to kind of get you going. And it's really sticky. We'll have to pull up the pricing really quick. Let me see right here. It's super affordable. I think it was 59amonth, if I want to remember correctly, to start off with. Yeah.

So if you make a lot of websites, this is definitely something.

Yeah, yeah. I mean, if you're paying $20 a month for ChatGPT, I don't see why you wouldn't pay $59 or even $69 a month for this if you have a larger team too. There's, there's tiers. But again, from my experience, depending on how you're, you're using this, if you've got any kind of regularity building websites, I would personally in an agency setting, I would easily pay a couple hundred dollars a month for this.

Cool. And then the referral, click that invite and learn and see what they got down there. Bottom left.

Yep.

50% off their first credit and $10 credit for every paying signup. So that's kind of low really for SaaS. Typically they do ongoing percentage, but hey, I mean, that's fine. But yeah, that's where we're at on that, so we won't bother with that. But if you wanted to sign up, you certainly can and it's a pretty good deal. So yeah, the goal here is obviously not to make a few bucks on affiliate commissions to show you guys new cool tools. Jj, do you have anything else to add to what we're doing here and how this could be useful for people? Any other use cases or features that we didn't cover?

Yeah, there's actually a couple and one of them being landing pages. A lot of people look at these tools and they really, you know, are using for full stack designs. And I've actually found that creating landing pages in here is just as easy as that full stack design and in some ways can get you that, that quick mvp. So you can get your offer product out there on the web right away. And when you're creating a landing page, it's just a little bit changes in the prompt. You want to, you know, of course have Claude go over that and we're not going to go too much in the prompting. I just got cloud open so you can see what we use. But you prompt Claude to create the landing page and then you have it create the prompt for reloom. And when you go in here and you create that. Oops, not Team jj and you create that new project. Excuse me, you can tell It I need a landing page for my new teddy bear offer. You can get really simple on that. And you, this is the part that's important. If you're creating that full website, you want it between 5, 10, 10, 15. But for a landing page, don't go above that 1 to 5. Otherwise you're going to get a full website. And it's got this little.

Your photo is blocking some of the features on the left hand side. So project. Yeah, yeah, no worries. I just want to make sure we're highlighting the thing you're looking at.

There we go. Perfect. Let's put me in the middle. And then, you know, you just hit generate site map. And then like Evan was showing, we come in here and we just adjust this site map. Right. So it still gave us a couple pages. The really the only pages we're looking for is this, this home and you know, the product page itself. But it's all in the prompting. When you're using any tool like this, you want it to. And I used a very basic prompt. So it's going to use, you know, standard web design to create this. But with that, even with that simple prompt, if you look at what it created. Oh my God. It's just insane.

Yeah. So basically you could go back to the. What's the first one? Not wireframe, the other one to the site map. Yeah. So if you go to the site map and just basically pull in the elements you want on the single page to the first page and then cut the other pages, you'd probably be in good shape. Right. You don't need all these other pages.

Exactly. So you just adjust it in that sitemap, have it redo the wireframe, then go through the rest of the process. That would be the thing I would, you know, do the most is play with it, get some good ideas, get some good designs, make sure you're prompting it correctly. That's the only thing I would add to this is it's all in the prompt. And they have an amazing course on this. Evan, I don't know if you went through the course, but when you sign up, this is like a college level course that they give you on how to use their software.

That's cool.

Yeah.

So I have a quick question. If you wanted to build AI tools, right, because that's what a lot of our people are wanting. What would you kind of, as a developer looking at this, say, how did they create it? What are the tools they're using? What AIs LLMs are they plugging into the back End what did they build? Or what did they build on top of, I guess is a better question.

Rephrase the question for Reloom specifically.

If you were to rebuild this from scratch, how would you expect the team to have built this? I just want to take like two seconds and think about, like, okay, how did they actually make this app what it is now? Because I've been in the deep end on development for the last little while here and I'm kind of looking at everything with a new lens. So I think that's an interesting side note to talk about, like what LLMs are they using? What open source are they using? What do they custom build themselves to build something like this? A platform like this.

So a platform like this, Believe it or not, if you look at the way that Reloom itself is creating your website, that's exactly how it develops. Developer project manager will start. They're going to start with a site map. And if you're using AI to help you vibe code, it all comes down to the questioning. It. It's not about, hey, Claude, I want an app that, you know, can automatically give me taco recipes by, you know, on a daily basis. No, it's. You are a project manager for a new software. Ask me the questions about what the software will do to get started with that project development and Claude or any other code, which most likely these developers probably use Claude because they actually use it as their base Inside realm. I took a look at that.

So they're actually using Claude as the intelligent layer to process and create the copy and all that good stuff.

Yeah, exactly.

How can you tell that? Just out of curiosity. You're just used to seeing it or.

It'S all in the source code and seeing the out how the outputs made. Everything has its own fingerprint. But a lot of times when you're looking at a software source code, if they're not protected correctly, you're going to be looking at what's called an MD file, which is a markdown file. And a lot of these Vibe coding softwares have that markdown file. So if you're not a developer and you go and commit to your your software, to GitHub or something like that, it's automatically putting that Claude MD file or that Replit MD file or whatever software you're using has that MD file in there and you can usually find that. I don't think they were hiding that this was built on Claude because I was able to find that Claude MD file.

And these are some of the telltale signs. So yeah, and I don't, I don't want to on vibe coding, I think it's great. It's just not my vibe. My, my vibe is like I got woken up at 3am and speed metal coded my way to perfection. But all these tools make you more productive until they become a velociraptor that eats something that you already built that is less productive. But even really season developers will come around to the fact that they can just be much faster by editing and proofreading code. Just like a copywriter can be much faster by having ChatGPT take the first draft and then you go from there. And it's like finding that balance that works for you, that allows you to go faster but still create great code.

Right? One thing for vibe coding, and I'm absolutely loving all this vibe coding because it's making people who never thought about being coders become coders. It's making coding fun again. It's kind of like back when I started in this industry, we used to make MIRC bots. And what made MIRC bots fun is making like the Banhammer texts and things like that, you know, or creating mini games inside of those MIRC chat rooms, right? That brought in a whole new level of coders just because they were able to learn, you know.net or C to develop these kinds of bots. And now we're in that era again. I think of that late 90s, early 2000 of here's a brand new way to bring a bunch of new people into our industry that's going to bring more innovation, it's going to bring more ideas, it's going to bring that camaraderie that we, I think we've lost in the past 15 years in the coding and development world. The one thing I would tell people to be very careful of when using tools like Reloom or Claude code is if you don't have a basic understanding of security, you're opening up your clients to a world of hurt. And that's the thing that I'm seeing right now in vibe coding. Because it's so popular and because it's so easy and we can all access it, people are coming out with these micro SaaS, technologies that are given right access to your Gmail, giving write access to your GHL backend that, you know, somebody can go in, you know, with ill intention and delete your entire contact and user base. These are the kind of scopes that you need to be careful of when you're creating Your, your micro SaaS or your website, like, what kind of access does this have to my server? Do I understand how this access is done in my server? And do I understand how to plug that hole if that hole is found? Those are things that, you know, if you're going to vibe code, just learn the simple security processes inside there and that's all.

We're going deep on this.

There's.

There's some great tools out there, like Sentry or some great tools out there, like, and not to go too far down a rabbit hole here, but I think it's interesting is because a lot of these apps, as JJ mentioned, are being whacked together by people that haven't developed anything at scale or they're not security experts. So having a tool, what's the other one better? Auth is another one that's pretty good, where it makes it really simple to be like, okay, who can do what in this system and how can I control that at a level that I can understand as a. As an end user versus needing to dig through every line of JavaScript or Python and understand? So, yeah, that's. I think we'll end it there. I just wanted to touch on that really quickly because we're going to see a lot of these apps coming out. You know, I think Reloom is probably a hybrid of traditional coding, you know, and. And some of this vibe coding stuff. Again, nothing against any of it. Just talking about tools and how they're built, and I think that's a good nuance because there's people out there that want to build these tools and they want to know, you know, how they got done. And if you're looking to be a part of that and you want to check out Optimus, we're building some pretty cool stuff. We're going to be implementing kind of like Jarvis for Small Business, which is Optimus OS pretty soon here. I'm very excited. We just debuted it last week, so you can come check us out@buildwithoptimus.com and apply to be a part of that. We have our next meeting here in Phoenix in about three weeks. So if you're watching this and you want to come join us, go ahead and apply@buildwithoptimus.com. jJ, do you have any plugs? Evan, do you have any plugs before we wrap this up?

No, my. My only plug right now is come and join us in Optimus. It's not. A lot of the tools that we've built have come from the interaction and the everything between all of us. We don't know the problems that you're facing and you don't know the problems that you're facing. And when you bring a room of amazing, intelligent people together, you can solve those problems even if you don't know you have them.

Yep. And if you're looking to scale up, you're looking to get more leads, you're looking for better ops. This is typically for businesses you know that have they have an offer at selling, and they're either looking for better quality, consistency or scale for leads or just better operations. That means getting more done in less time and less cost. So if that's what you are doing with your SMB, then we should definitely have a chat. But yeah, we have some spots open and it's a great group. We got some cool stuff and we're going to be implementing in your business a very basic version of Jarvis that we've been kind of teasing for a while. So we're excited for you to be able to use AI to talk to your business. That's talking to Lead gen, that's talking to your CRM, and that's sending and receiving messages, emails, texts, and all that good stuff locally on your computer to avoid any security issues, because that's obviously a concern as well that J.J. brought up before. All right, I guess we'll wrap this sucker up. Thank you. Thank you to Evan. Thank you to jj. Another great tool for the books. We'll keep sharing them and we'll catch you on the next one.