How to Build a Hair Loss Tracker App with Google AI Studio (No Coding)
Prefer to watch? Watch on YouTube · Subscribe for new builds · Read the transcript
In this video I build an AI hair loss tracker from start to finish. You upload a selfie, the app analyzes it and gives you back a report. I found the idea on Idea Browser, built it in Google AI Studio, and made a before and after hero video with Nano Banana and Gemini Omni. It's for non-technical builders who want to see the whole process, from checking an idea to a working MVP with a landing page that grabs attention.
What I cover in this video
- 0:00: Testing the finished hair analysis and reading the report it generates
- 0:45: Why a treatment tracker for the $50 billion hair loss market is worth building
- 3:50: Planning a before and after hero section with Gemini Omni
- 4:35: Starting with the PRD and feature spec, with the prompts exported as a JSON file
- 6:51: Uploading my own photo, hitting an error, and pasting it back in to fix it
- 9:07: Turning two Nano Banana images into a hair regrowth video with Gemini Omni
- 12:55: Fixing a hero video that looks right in the preview but gets cut off in a real browser
- 15:58: Why distribution is the hard part
Validate the idea first
I found this idea on Idea Browser. It's a treatment outcome platform for the hair loss market, which is a $50 billion global market and still growing. The keyword research shows search volume for hair loss treatment going up. The pain is severe, and the idea checks several validation boxes. The execution plan suggests longitudinal tracking with AI selfie analysis, using Reddit and YouTube to get early users, and refining the product with input from dermatologists.
The idea itself is simple. You take a front or side photo with the camera on your phone or laptop, and the app tells you whether you're losing hair and suggests options like red light therapy, medications, or transplants, so you can catch it early. I always check that people actually want something before I build it. You don't want to build apps nobody wants.
Build the hero feature first in Google AI Studio
From Idea Browser, you click the button to build with Google AI Studio, and it carries over the prompts and context. I also exported all the prompts as a JSON file and attached it, so AI Studio had the full picture from the first prompt.
I start with the product requirements document because it's the roadmap and the vision for the app. Next comes the feature spec, and only after that the landing page. The AI needs those details before it builds anything. My goal was to work only on the hero feature and get 80 to 90% of the MVP done, then add extras later. Here's my opening prompt:
I have attached an idea for hair loss and I want to build this into a web app. I want to use AI to help people learn when they're losing hair and how they can fix it by simple suggestions and details and medications and treatments that people can use to get their hair regrowing. So, I've attached the JSON file. Let's specifically start with the product requirements document and then move to the feature spec and then move to building out the landing page. Let's build out a plan step by step so we can start integrating it.
A few minutes later it had written the PRD and the feature spec. It also built a single-screen app with an upload component, an AI analysis that uses a Gemini model, and a medical disclaimer. It added a free demo too, so people can try the product right away without starting a trial or paying.
Fixing the first error
I uploaded a screenshot of myself, and it failed on the first try. That's a normal part of building. I copied the error, pasted it back into AI Studio, and said I got an error when uploading a photo and asked it to look into it and fix it. It found an "unexpected token" error caused by large images, since modern phone cameras can produce files bigger than 10 megabytes. After the fix, the analysis worked. It told me I'm losing some hair, which hurt a little since I'm turning 37, but the feedback was useful.
Make a before and after hero video with Nano Banana and Gemini Omni
Once the core feature worked, I asked AI Studio to redesign the hero section with a video background and overlay text, where the video shows a before and after transition from balding to regrowth. AI Studio rebuilt the landing page while I worked on the video.
- Generate the stills. In Nano Banana I made a photo of a man with balding hair, then an "after" photo of the same man with hair, keeping his likeness the same.
- Animate the transition. In Gemini Omni I attached both photos, labeled before and after, and asked for a seamless video where the hair slowly grows in until it matches the after photo.
- Iterate once. The first 10-second video was a bit slow, so I asked it to make the hair grow faster at the start and add some sparkly effects. The second version had more action, which is what you want when you're trying to stop the scroll.
- Drop it into the hero. I attached the video file, which was around two to three megabytes, and asked AI Studio to add it to the hero section underneath the text.
The landing page then had the hair regrowth video, one free analysis on a basic plan, unlimited analysis for $12 a month, and email capture.
Check the real browser, not just the preview
In the AI Studio preview the video looked fine, but when I opened the site in its own tab, the top of the video was cut off. When I asked for the full video to show, it fixed the cropping but added black bars on the sides. My last prompt asked it to make the video fit so nothing is cut off at the top or bottom, and so it aligns and scales on any screen size. That fixed it. Always check the live site in a real browser before you call it done.
Back in Idea Browser, the market gap analysis points to more opportunities. Those include women with diffuse thinning, people on GLP-1 medications dealing with hair loss, and clinic partnerships for post-transplant care. You could also go B2B with salons or hair stylists. For marketing, Gemini Omni can make a lot of the short-form content. But building is the easy part now. Without distribution, the app goes nowhere.
Key takeaways
- Validate demand before you build. Search trends and proof signals tell you whether an idea is worth your time.
- Give AI Studio the PRD and feature spec before the landing page, and attach all your prompts as a JSON file so it has full context.
- When something breaks, paste the exact error back into the agent and ask it to fix it.
- Two Nano Banana stills plus Gemini Omni make a before and after hero video that stops the scroll. If you're new to this style of building, start with building an app with AI.
- Test the live site in a real browser tab, because the preview can look different.
FAQ
Can you build a hair loss analysis app without coding?
Yes. I built one in Google AI Studio using prompts from Idea Browser. It analyzes an uploaded selfie and returns a report on signs of hair loss along with suggestions. The MVP took about 15 minutes.
How do you make a before and after video for a landing page hero?
I made a before and an after photo of the same person in Nano Banana. Then I gave both to Gemini Omni and asked for a seamless transition where the hair slowly grows in. I attached the finished video in Google AI Studio and asked it to place the video under the hero text.
Why start with a PRD instead of the landing page?
The product requirements document is the roadmap and vision for the app, and the feature spec tells the AI exactly what to build. Giving it both first means it has the details it needs before building the features and landing page.
Why does my Google AI Studio app look different outside the preview?
In my build, the hero video showed fully in the AI Studio preview but was cut off when I opened the site in a separate tab. I described the problem and asked it to make the video align and scale on any screen size, and that fixed it.
Chapters
- 0:00Testing the hair analysis
- 0:18A full report in 15 seconds
- 0:47The whole build in under 30 minutes
- 1:01A $50 billion market
- 1:23Why now, and the proof signals
- 2:43Longitudinal tracking with Reddit and YouTube signal
- 3:28Moving into Google AI Studio
- 3:38Trying the Google Omni model
- 3:58Planning a before and after hero
- 4:22Hero feature first, 80 to 90% of the MVP
- 4:37Copying the product requirements document over
- 4:50Exporting the prompts as a JSON file
- 5:06Building the feature spec before the landing page
- 6:59Uploading my own photo
- 7:22Hitting an error and pasting it back in to fix
- 8:21Prompting a video background hero
- 8:36Generating the before and after in Nano Banana
- 9:15Animating the transition with Gemini Omni
- 10:13The overhauled landing page
- 12:03Dropping the video into the hero
- 12:16Pricing at $12 a month
- 13:06Preview looks different from the real browser
- 13:20Catching the sidebar bug
- 14:09The finished flow, photo in, report out
- 14:25Capturing the email for a free trial
- 14:44Reading the market gap analysis
- 16:26Why distribution is the hard part
Transcript
Read the full transcript
0:00Let's see if this hair analysis works. Nice. Let's go. Identification. Potential signs of hair loss. Temporal recession. There appears to be mild to moderate recession in the temples. Frontal hairline elevation. Oh my goodness. Just the fact that we're able to generate a report and it just took 15 minutes to build this MVP out. Again, we used idea browser for the ideation. We used Google AI Studio to build it out. If you want to actually learn how do we build this out from A all the way to Z from designing the landing page and actually building the MVP out, watch to the end of the video. Let's get right into it. We're going to be using idea browser to find the idea and then we're going to be using Google AI Studio to
0:45build the idea. This is going to take no more than 30 minutes and I'm going to show you the step-by-step process. And you know what? The idea of the day just hit home. I think that this is going to be an amazing app to build. It is a treatment outcome platform for the $50 billion hair loss market. You can see this is obviously in demand from basically the keyword research that idea to browser does. You can see hair loss treatment is growing in volume and in searches. You can see the opportunity here is exceptional. So you could see severe pain and this is going to be something that's going to be fairly easy to build. You know it says why now? It's a $50 billion global market and is growing. And then the proof signals, a hair loss tracker in general with AI
1:31enhanced meets several validation criteria suggestions. A strong potential market opportunity. And how I kind of think through these ideas before I even build them is I'm just making sure that this is something worth building. So obviously it is in demand. People are worried about hair loss. Not just men and women, but every day people are like, you know, losing their hair. And this is something that can actually be helpful as a tool to help people with treatment plans. my whole idea of using like your camera on your phone or on your laptop to just snap a photo, you know, whether it's like a front photo, a side photo, and it gives you an analysis on, you know, if you're losing hair, maybe some treatments, some red light therapy, some, you know, medications that you can take or what you can do, hair transplants to be able to catch it
2:17early to be able to solve this hair loss crisis. So, that's kind of how I'm thinking through this idea and I'm going to show you what tools we're going to be putting together to actually build the MVP out. Okay. So, this is exactly what I was referring to as far as the exe execution plan. You could see here launch hair loss tracker with AIdriven selfie analysis. So, this offers users accurate longitudinal hair loss tracking, integrates Reddit and YouTube strategies for rapid user acquisition, and then refine these with dermatologist insights. I love it. All right, so the cool part here is once you find an idea that you like, and by the way, there's over a thousand ideas in the database here on idea browser. So, if you just
3:03click on find ideas, it has a idea database. If you just wanted to do some market research and maybe come across an idea when you're out jogging or whatever and you're like, I wonder if this is even worth building, you might need to search for it and look it up because validation before you start building is the main thing you need. You don't want to be building apps that nobody wants. I'm sorry. Okay. So, you can build with AI Studio right here. Just you click the button. It's going to pull over a lot of the prompts and the context from Idea Builder into Google AI Studio. This is going to be amazing. We're also going to be trying something a little bit different with the Google Omni model. This is their create anything from anything when it comes to video generation. And it's it's similar to like the nano banana model with photos,
3:50but now they have it for video. And I have tested it out. It is really cool. Specifically wanting to use it for the hero section. So, I'm wanting to maybe visualize something like a before and after where, you know, the before photo is a person that's balding and then the after photo is a person with hair regrowth and making it some type of like cool transition in the hero section I thought would be sweet. Um, just to be able to stop the scroll. Our whole goal here is not to just create another vibecoded website that features don't work. We want it to be solid. We want to work on the hero feature only. make sure we can get 80 to 90% of the MVP finished in this video and then, you know, add some bells and whistles down the road. So, like I said, we build with AI Studio. We copy a lot of the prompts
4:35over. The first prompt that we're going to copy over is the product requirements document. So, let's copy that over and I'll explain why that's important. Okay, so I'm in Google AI Studio and I'm just going to attach a lot of the prompts here that I exported as a JSON file. You can do that within idea browser. That way it has full context when we kick off this initial prompt. Why we're starting to focus on the product requirements document is because this is kind of the road map and the vision for your idea. Really important to start there and then also building out the feature spec before we even start with the landing page and building out the features. It needs to know this detail before we even start. So I'm going to kick it off with this initial prompt. I have attached an idea for hair loss and I want to build
5:20this into a web app. I want to use AI to help people learn when they're losing hair and how they can fix it by simple suggestions and details and medications and treatments that people can use to get their hair regrowing. So, I've attached the JSON file. Let's specifically start with the product requirements document and then move to the feature spec and then move to building out the landing page. Let's build out a plan step by step so we can start integrating it. All right. So just a few minutes later it says I have successfully implemented your request building out the foundational plan in the initial web application for follicare. So I do like I will say and this was what I was envisioning is having a free demo where people can just
6:05use the product right away you know not have to find out to do a free trial or paid right away you know having them just use it and test it to be able to give them like a sneak peek on how it works. So, it built out the PRD. It drafted a clear overview of the app's target audience and core objectives and users journeys focusing on accessibility and educational guidelines. And then it did the feature spec. It outlined the core feature, the modules including the landing page UI and the image upload mechanics. I love that. And it designed and built the single stream screen application with a high clean contrast modern uh architecture. So the upload component, the AI analysis, uses the Gemini AI model to gather the data, and then the medical disclaimer. Very cool. So the app is fully compiled and
6:51running. We could test it right now and see if it works. So let's do that. All right. So let's take a screenshot of myself and let's upload a picture just to see how I'm doing. I don't know. All right. Upload the photo. There I am. If this works on the first try, I'll be impressed. Analyzing image patterns. It didn't work on the first shot, but that's okay. This is part of the building process. Let's go back and tell the agent in Google AI Studio to fix this so we can at least get this MVP working and then we can start working on the actual landing page. So, I copied the error and then I pasted it in here and it said I got an error when trying to upload a photo and get the analysis. Please look into it and fix it. Okay, so it says the unexpected token error was happening because modern phone cameras
7:36often generate structural images larger than 10 megabytes. Okay, interesting. So we will rerun this again. Okay, so now that we have confirmation um that it actually worked, if you go back in here, I ran the analysis and uh depressingly it said that I am, you know, losing hair, but I am, you know, turning 37. So um I guess I don't know. I I guess I need to start, you know, using some uh treatment to not lose my hair. But nonetheless, anyway, but it gives you some good feedback here on what to do. So, it works. The the initial analysis works, which is really cool. So, I gave it this prompt here to kind of take the next step as to completing this app. And, you know, I told the LLM it worked, but I said that I want to completely
8:21redesign the hero section. And I said, please create a new hero section with a video background and add an overlay text on top. The video should be the before and after transition. So, someone with really bad balding hair and then followed by the same person with the hair regrowing. So, I'm going to use Nano Banana to just generate a default photo of a person that has balding hair. And then I'll create a after photo of a p that same person with hair. And then I'm going to use Gemini uh Gemini Omni to actually pull that transition together in a seamless way. And then I'll give it back to AI Studio to kind of use that as the background video. I hope that all makes sense. But that's what I'm going to be doing while Google AI Studio is working in the background. Okay, so it basically worked in the background and built out the complete
9:07landing page. I now have the two photos that I'm going to use as the before and after to create that video inside of Gemini Omni, which I've been playing around with. And it's pretty nice. I mean, to be able to just take two photos and turn it into a video, it's also very fast. So basically the prompt is going to be take the before photo and turn it into the after photo using some type of transition that is seamless. So I want a beautifully made video that takes the before photo of the man with no hair and transforms it into the after photo with the same man with hair. So as the video plays, the hair slowly grows into the end after photo. And now I'm going to
9:53attach those photos. The photos are labeled before and after. Make sure you use the right ones. So, here's the photos I generated in Nano Banana. Um, basically just a man with balding hair with a man with hair, keeping the likeness the same. So, let's send that off. Well, that works in the background. We can check on what it did. So, I have completely overhauled the landing page. Uh, left a spot for the video, which is going to be awesome. I think that's going to look great. Try your free analysis. This is going to be amazing. This is really, really gonna be nice. I mean, like I said, 15 minutes from idea to MVP is pretty cool with these tools. And nowadays, I don't know what you're doing if you're not building apps. To be able to at least build that shipping muscle, that is a skill that is in demand right now. And there's no reason
10:39why not to use idea browser to at least give you the templates and the prompts to be able to pull into Google AI Studio to build this out. I mean, it's an amazing time to be alive, to be building. So, yeah, that's going to keep going uh in the background. The omni video, it shouldn't take more than a few minutes to generate. And I'll check right back when it's done. Okay, it did a pretty decent job. I wanted it pretty simple. So, check this out. It's just a 10-second video. Little bit on the slow side, but you can see it growing, which is cool. Awesome. I'm going to see if it can add some effects. Okay, that's great. Can you make the hair grow a little bit faster in the beginning? and can you add some sparkly fancy effects and just see what it gives us after that. But that is a pretty good first uh
11:25iteration. I'll download that and [clears throat] then I'm going to pull it into Google AI Studio to apply it to the hero section. Okay, after that prompt, let's see what it says. I have not seen this video before. I think that's better. I think I'm going to go with that. Just more action, less boring. Remember, we're trying to sc stop the scroll here. So, these videos are usually like two to three megabytes long. You can always, you know, upgrade them to have a higher output, but this is going to work for at least the first version, right? So, let's add this video to the prompt that we're going to send in Google AI Studio to implement that to our hero section. I have attached the video I want to use in my hero section. Can you add this video that is attached to the hero section? Keep it underneath the text. All right. Well, here it is.
12:10Look at that. Beautiful. Stops the scroll. They can upload and test the app. If they want more uh unlimited AI analysis, they could pay $12 a month free. One free analysis basic. We can at least capture the email, which is awesome. So, very cool. Um, let's see. I want to do one last prompt cuz on the website, it actually is cut off on top. So, when I open the website in another page, the top part of the hair is cut off in the hero section. But when I'm in Google AI Studio, I could see the full video. Can you help me fix this or see what's going on? All right, now we're cooking. So, it looks better. I'm little small adjustment. I would make it so you can actually see the full video. Let's
12:55go into Google AI Studio and tell the LLM to do that. So, I just in the website, I don't see the full video. I see the full video in Google AI Studio Preview, but when I open it up in another tab and open up the website, half of the guy's mouth is cut off. I could see the hair. Is there any way we could see the whole full video? Okay, let's see if it actually listened to me and did what I had asked better, but now we see the sidebars. Okay, trick. Because we see it beautifully in Google AI Studio, but now we see the black bars on each side. We need to make this fit. So it looks good but not the top cut off or the bottom cut off. So make it so it aligns perfectly and scales no matter
13:40the screen size. Okay, this is way better. Jeez, those black bars were killing me. So let's refresh this. Make sure it looks good. So just pretty incredible on the tools that you could use to build something that actually serves a purpose and brings value and you don't really need to overthink it. Obviously, we can go in and do some touch-up details, redesign the landing page, but we have this little video here of the guy's hair growing, the MVP works. You could drop in a a photo, get one free analysis. You know, I like this. I was obviously go in here, maybe provide some more detail down below. Um, contact, also provide, um, you know, have people log in and be able to at least capture the email for, you know,
14:25the free trial so we can upsell this paid plan for $12 a month. And this is something you could possibly go B2B with with partnering with um, salons or hair stylists. Um if you go back into idea browser and just check out the actual idea as far as um like the market gap is the biggest opportunity lies in providing a doctor ready AI enhanced tracking tool for hair loss treatments addressing a critical need for object uh efficacy proof. So if you click on understanding the market uh gap analysis it goes into greater detail which is pretty cool. um underserved cons uh customer segments, women with diffuse thinning communities show high interest in tracking but lack targeted tools.
15:11Tapping into this unmet demand can unlock significant engagement. And again, this app isn't just made for men. It can serve women as well. So postgp1 users with no dedicated monitoring tool for GLP-1 related hair loss, this segment remains untapped. So also geographic opportunities, integration opportunities, uh direct consumer platform partnerships, clinic partnerships for post-transplant cl uh care. So pretty cool. Um a lot more detail here that we could get into on why this just works, but yeah, I mean it's really simple as far as like you don't need to overthink it. You really do need to make sure that the demand is validated. Like you could see rogue gain for women. You could see saw palmetto for hair loss. That's a popular treatment. balding treatment. All of
15:58these are proof signals that this app is in demand. Also too, I always try to think about how does the marketing strategy look. Marketing this would be fairly easy because you could use Omni, you know, Gemini Omni to create a lot of the short form content. Maybe you overlay a voice over and you create, you know, some value on like how you can actually sell this app with organic content because that's the next thing is like we could build apps all day, but if we don't have distribution, that's the hard part. So that's where my mind goes when building this out. So obviously using these tools by Google are very powerful. Also using a tool like idea browser to validate your idea. Again, you don't have to do hair loss. There's over a thousand uh ideas in their database and they have an idea of the
16:44day that comes out into your email. Um but if you do sign up, you could check out the other thousand ideas. Um they also have a builder too where you can store ideas. Maybe you have an idea of yourself, but you just don't know whether it's worth building. You could create a new project in here and start it from scratch. So that's pretty cool. Um, so yeah, that's kind of my thoughts on building an app, thinking about building an app, and how fast we can build an app. And you just saw it right here. So if you're interested in using Idea Browser or Google AI Studio, the links are down in the description below, and you need to check it out. You need to start building and you need to start developing those skills if you want to be relevant in this AI space. We'll see you in the next one. Have a blessed day.
Ready to start building with AI?
Join Shipping Skool free — 4 live build sessions a week, courses, and a community that ships.
Join Shipping SkoolKeep reading
How to Build an App with Google AI Studio in 22 Minutes (No Coding)
I used Idea Browser to pick a validated idea and Google AI Studio to build Before You List, an app that scans real estate listing photos for AI edits and writes the required state disclosure. It took about 22 minutes and no coding.
How to Build a Wedding Planning App with Google AI Studio (No Coding)
I built Tiny Knot, a micro wedding planning SaaS, in about 17 minutes. I validated the idea in Idea Browser, built the app in Google AI Studio from three prompts, added Firebase for the database and login, made a hero video in Google Omni, and connected Google Maps to pull in real local vendors.
Build a Homeschool Science App with Google AI Studio and Gemini Omni
I build a DIY homeschool science project app with Idea Browser and Google AI Studio. To get past generic AI design, I attach screenshots, the saved HTML and the link of a site I like. Then I make an animated hero video with Gemini Omni and lay it over the landing page.
