Build Apps Now Without Coding Skills (Copy Me)

0:00I uploaded my photo. Let's just hit generate. Oh my god, that is hilarious. Wow. So, if you want to actually figure out how we built this app in under 15 minutes, you're going to want to watch all the way through the video. We go over the tools that we use, how to build the landing page, and how to put the pieces of this puzzle together. Wow. All right, so the tools that we're going to be using to build out this hair stylist app is going to be Idea Browser and as well as Google AI Studio. I'm going to be walking you through step by step how we put this together. Why I'm building this app out is because it solves a major problem in the hair industry. So, basically, being able to come up with a few different hairstyles when you want to go get your hair cut has been a bit difficult. But now, with Nano Banana Pro, we can basically upload

0:47a headshot and get nine variations of hairstyles that we can then go to directly to a salon and sell this as a service. The goal is to go B2B here, not B2C, because it has much more of a growth and higher MRR potential, and B2C can be a little bit difficult on the marketing side. So, that's what we're going to be walking through here. This is the idea that I actually went into the Idea Builder and built out. It basically takes your idea and then does research based on, you know, what the idea is and then validating that idea through Reddit posts and then just broad web search just to see if this idea is even worth building. So, you can see, most salon consultations are basically awkward guesswork. The client brings in

1:32a photo that doesn't match their face shape. The stylist describes what they're thinking in words that don't translate well visually, and then everyone leaves hoping it turns out okay. And the reason why I'm building this is because my wife just got her haircut, and we basically did this same thing, and the salon was blown away that we had nine different hairstyles that actually fit my wife's face structure. So, that's why I was like, "Wow, that's a great proof of concept. Let's build this idea out, even if it's just something that we use when we get our haircuts." But, then it kind of clicked like, "Well, this could be a huge add-on for salons in general." So, that's why we're building it. I won't go through this whole paragraph, but you can see hairstyle generator is trending. It's in a great upward trajectory, and this is

2:18something that we can build out within 30 minutes using Google AI Studio. So, it goes over the offer. The lead magnet will be a virtual hairstyle guide. It's just a free PDF guide showcasing the app's capabilities and tips on using the hairstyle tech in salons. And then the front-end actual package will just be a starter pack. Basically, you know, access to hairstyle generation for up to 50 customers per month. And then there's a pro package for 29 for 199, which is unlimited style generations. And it integrates with their booking systems and enhanced support. Why now? The hairstyle simulation market is poised for rapid growth driven increasing personalization demands in salons with robust AI technologies and favorable market conditions. So, this is just

3:04something that's been on trend growing in general. I mean, you see it with any type of stylist, hair stylist, they're using AI more and more in their workflows. And you could target high-end salons with this, you know, whether it's cold calling or email marketing or just walking straight in there and showing off the app. So, that's why I chose this. It's going to be really easy to build out. So, when you go into idea browser, there is a button here when you find the idea that you like. There's over a thousand ideas, by the way, on this site. You'll be able to either validate your own idea or find one that's already been validated and go from there. You're literally just going to click build this idea, and then you could either do it into the idea builder or you could do the AI workspace. We're going to use the AI workspace cuz we'll

3:49be able to just implement this entire project into Google AI studio via MCP. It'll be able to pull over all of the contacts needed to build this idea out. So, we're already connected here and Idea Browser gives you an API key that you can plug into your Google AI studio. So, you can see we're already connected and we're ready to go. So, we're just going to hit get started. So, actually just going to click build this idea and we're going to go into AI. Actually, we're going to we're going to click this little button on the top right-hand corner and you're just going to click build this idea and we're going to go into the Idea Builder, which is going to connect directly to Google AI studio via MCP. We'll be able to build this out in just like 30 minutes we'll have a 80% of

4:35the MVP done. It's pretty amazing. So, you could also connect it to other tools, but our main focus here is Google AI studio. You're just going to click that button and it connects through MCP, which you do also have an integrated API key when you sign up for Idea Browser. It gives you an API key that you can then plug and play with any of your building tools, which is really nice. So, we're going to go ahead and get this going. We're actually going to start with the product requirements document first because this is the vision and the road map for basically the entire app and without it it's going to be a lot harder to build any part of it. So, it's going to give the LLM a much more context. So, you're going to click Google AI studio. It's going to pull in the PRD and we're just going to copy and paste it in there. I'm going to take one extra step

5:20and go to the actual idea itself and pull in as much context as possible. So, easier way to do this is just copy paste the entire front of the idea and we're going to paste it in there and we're going to hit build. And we're going to let it cook. Okay, within just a few minutes we have at least landing page up and running. It says I fully developed the landing page for style preview based on exactly on what your business blueprint is instead of just creating wireframes, I went ahead and built the actual interactive page for you, so it's ready to use and demo right away. Premium salon aesthetic hero shot social proof. Okay, so I just created a very basic, you know, one shot, which is pretty nice, you know, to at least get the the ball rolling, but we're going to take it

6:06a step further and I am going to introduce this markdown file, which is very powerful. It's called awesome design. And it basically is a template of over 55 websites with their colors, their typography to be able to give a little bit more structure to the landing page just to be able to, you know, not have that vibe coded design. You know, we want to stick out, we want our website to stick out and we want it to look, you know, not vibe coded, right? And that's the key. With the ease of everyone being able to build nowadays, taking this extra step is huge. So, you can see here they pulls um style designs from very popular websites, Binance, Starbucks, Kraken, SpaceX. So, I'm going to basically just drop this in and let's

6:52see how much better we can make it. I also want to come up with a different name. Style preview is pretty generic, pretty boring. I think we need to fix that as well. So, please pick a different name for this web app and also make sure to use this Vault Agent Awesome Design markdown file. I want you to completely redesign the way the landing page to fit a more modern look and a more modern aesthetic. Also, include tons of motion. Okay, so I completely redesigned it to a little bit more of a professional look. I like that it's just really simplistic. It conveys the actual product and you know, I know it's can be, you know, a lot fancier with a lot of movement. I want to remain and retain that professional look to it. So, you know, not a lot of colors, no purple

7:37gradients. We don't want to that vibe coded look. So, So, looks a lot more professional, which is really nice And we can always change that up and play around with it. I wanted to test out this new feature. You know, let's say I don't like this photo, which I really don't. Uh maybe we can add something that's basically a little bit more color. So, you could click on this little edit button right here. Basically, you're going to click and you're going to be able to edit any part of your landing page from the buttons, from the copy. Rather than going back and forth with your LLM, you could basically just go in here and change what you want. So, let's see, you know, if we can redesign this image to something just a little bit more that pops. You know, the black and white is good, but let's see what it can generate and see, you know, how it can work. So, since we're on the Google platform, we can have access to Nano Banana, which

8:24is a very powerful image generation tool, really good for designing dashboards, hero sections of landing pages, and just overall images in general. So, let's see. Make changes with Nano Banana. Let's see. Let's update this image. So, we can give it a different look. So, give me a hair salon full of people, full of color, panoramic view. And let that generate. And let's see. Let's see it the actual hero section. Visual certainty for high-end salons. Process a single consultation photo and into nine photo-realistic style variations. Secure high-ticket services by allowing clients to verify the result before the execution. That is awesome. I'll probably remove this watch demo

9:09button because we don't have an actual demo. You can go in through here and just annotate any part. Annotate mode. Start with annotate mode. Add a comment. Remove button. Submit. Acknowledge. This is still processing. As you can see here, it's running here in the left pane, applying the edit shown to the screenshot. So, that is working in the background. Cool. Within just a few seconds, it had removed the button. I would probably go back in there and actual actually film a demo, um but just for the sake of this recording, we won't do that. Um like I said, we're trying to go from zero to 80% in like 30 minutes, and those are kind of like the fine details that I would work on in that final 20%. So, it's still working on the

9:56photo. Let's see. Okay, it did generate one. Ooh, okay. So, just a little bit more more color. It just looks better. And obviously, you can play around with this, but let's submit that. I like that. Then just reviewing the rest of the landing page, you see cons- consultation infrastructure, remove the friction from high-ticket salon services, connect client expectations directly with execution, structured computation, our models compute precise structural variations based on length, texture, and color parameters, returning at nine visual options in seconds. Upsell mechanics, visualize complex color treatments, dramatically increase conversion rates all on premium bookings. I mean, I don't know if you guys have noticed lately, but a woman's color and cut costs like $200, which is

10:41insane to me. Um but if you were to basically sell this to high-end salons, they would no doubt add this, you know, we're charging at $200 a month for unlimited clients. How much money can they make off of this type of technology if they're serving each client at $200 per cut. So, that's pretty good. Um I think that this will definitely fit in perfectly, and I haven't really even seen anyone build something like this. So, um that's why we're going business to business. Obviously, you can go to you know, business to consumer. Um I just think getting customers might be a little bit more difficult and time-consuming, and probably you'd be able to charge a lot less. So, we're sticking with that photo. It turned out great. It doesn't look like anything is

11:27No one's missing fingers or feet, so it looks It's good. Okay, just adds a little more color to the actual landing page. I do want to see another variation of the landing page though. Let's keep all the copy and photos and elements on the landing page, but I would like to see it in a different style completely. Use the awesome design markdown file to generate a completely different design. In the meantime, while it's doing that, there's a really simple button here. You just hit share to be able to pull it up into a full screen. So, you hit share, go default to full screen, and we're going to go to public. Anyone with the URL can access it. We're going to copy that link and open it up in a new tab so we can just look at the changes as if it were going to be on an actual website

12:12rather than working in with the ID. Oh, I like this so much better. And just 3 minutes went by and this looks so much better. I love it. Let's take a look at this. Visual certainty for high-end salons. Process a single consultation photo into nine photo-realistic style variations. Just looks better. Just looks amazing. Great job. Great job. Let's see if we can get it to swap that photo out. I just think having a little bit of color is going to look better. So, let's go back into that edit button. So, I'm just going to click on this image and then update it with our new one. We're going to hit submit. While it's updating that photo, I want to jump back into Idea Browser. There's another prompt that's super important to get your app actually working. Like there's

12:57a ton of them here. Landing page, brand packaging, ad creatives, but the two that are the most important, we already did one of them which is the product requirements document. The next one is the feature spec. This basically is going to generate a comprehensive feature specification guide that provides clear direction for the development team, which is Google AI Studio. And this should include a detailed user stories, acceptance criteria, technical requirements, and implementation guidelines. So, we're going to go go and copy this, go back into Google AI Studio and implement that. This is basically going to connect the back end and generate much more technical specifications as far as how the app is actually going to work. And my whole idea was like a person should just come in take a photo either with their phone or on their laptop just like

13:43this upload the head shot and be able to get out nine variations of a haircut. Basically, that is how the salon is going to present this. So, they can bring out their iPad or bring out the person's phone take a snapshot upload it to their web app through our subscription and be able to get nine different variations according to their face structure and how they look not just generic haircuts because that's going to look pretty funny. We want it to be actually be good and we're going to use Nano Banana Pro to be able to build this entire snapshot out. All right, cool. So, it updated the photo in the meantime. This looks better has color and just makes it pop. Looks better in my opinion. Awesome. This looks great. So, going back into Google AI Studio, I'm going to give it that feature spec and let it cook.

14:28All right. So, I have generated it the comprehensive feature spec document and then saved it to the feature specs markdown file in the root of our project folder. The document strictly follows the provided template structure and fills in and fills it in using the specific business context of the Prism AI hairstyle consultation app. It provides detailed direction for development covering everything from Corey's stories focused on the stylist and client experience to the technical requirements for the async AI generation pipeline. So, this is very cool. I love that. So, the next step is actually making sure all the buttons work, making sure the user which is going to be a hair salon to can log in get access to a

15:14dashboard and actually get this working. So, let's build that out next. I would like to now start making sure all the buttons work. I want to make sure that a customer can now sign up, log in, get access to the dashboard, and being able to upload a headshot, and then getting a photo back with nine different hairstyles on a grid layout using Nano Banana to generate the different head hairstyles. So, to be able to get this to actually work, we need a database. Without a database, you can't have users. So, generally it connects to a Firebase, which is free, it just uses your Gmail account. So, you just click enable Firebase, and that's going to allow users to sign up, and we can keep track

15:59and authenticate them as we get more users. All right, says it is good to go now. We can log in and get started. New with Google, that is awesome. Look at that. We can upload the photo. Now, it's generating the nine variations. Oh my god, that is hilarious. Wow. Building apps just got so much easier. Like, it used to take years to build an app. Now, we can literally go from zero to MVP in just under 15 to 20 minutes. Pretty remarkable. I'll put links to the tools down below. You really need to check them out.