Here's How I Build Small Business Websites in 1 Hour and (Sell Them for $200/Month)

0:00Hey guys, it's been a minute. Sorry about that. But I'm back with a video that has been heavily requested. It's essentially how I build a website for a client from start to finish. So, I'm not going to go through the sales process, but I'll basically show you the design questionnaire that I use to build out the websites, my design process using code stitch, and then how I actually build these websites using mainly AI, but I do a lot of auditing, and I also help with the content through SEO. So basically once I've sold a site, how do I go through a design questionnaire with the client? How do I present them with

0:31the Figma file and the design process that I go through in that regard? And then how do I actually build the sites in an effective manner? I'm going to take you through the whole process. We'll probably knock this site out today. Um it's a really quick process and hopefully it can shed some light onto how you can scale your agency

0:46faster. All right. So the first thing you're going to do is you need to present them with a design questionnaire. So, the first thing you do after you sign a client is you need to understand their business, but you also need to understand kind of generally how they want their site to look. I've developed this design questionnaire that I think works really well. It gets all the basic information that I need without overwhelming them. And to be honest, if you send them something that's too long, they're not going to do it. So, it's a it's a balancing act of getting what you need without overburdening them. I'll

1:14link to the one that I use in the description. It touches on their services, their service areas, their products, if they sell products, and then their aesthetics. So, do they have branding already? If so, here's where I need you to put it. If not, what kind of colors do you like? What kind of fonts do you like? And I always ask for at least three examples of websites that they really like. And that's kind of my non-negotiable. I've done sites where people just give me three website examples, and they're not the best ones

1:40that I've ever done, but it's possible. If someone can't give me websites that they like, then I'm not even going to start with them. So, that's the first step. Use the link in the description. That'll get you a good jumping off point. You can either send it to them on a Google doc and have them fill out sections and that's kind of like a nice they can do it as they go. Um, I only do that for people that seem like they're like motivated and self-starters and they'll actually do it. Otherwise, a good option could be even on the sales call, you can just say, "Okay, I'm just

2:07going to need your card on file. That'll get started." And then you can just do the questionnaire right on the call. So walk through, have some sort of AI notetaker going, ask them all the questions, and then you have everything. That's kind of the method that I've been leaning towards just because that way as soon as you get off the sales call, you can get going on the site. That's the

2:25tip number one. All right, part two. You need to go to code stitch and figure out which kit you're going to use. I've used the intermediate less kit. I've also used the Astro kit. I've been liking the Astro kit a lot lately because the image optimization is kind of more builtin and you can get faster sites right out the box. So, that's personally what I'm going to recommend today. We're going to clone the GitHub repository for the Astro Kit. Um, I'll show you how to do that in a Loom video in a minute, but basically go to GitHub, copy the HTTPS code on GitHub, go to VS Code, clone

2:59that repository in, you're going to change the name of the repository, you're going to remove the original origin, so you're not pushing to their project, add your own GitHub repository, and you'll be off to the races. I'm not going to go into detail how like exactly what I just said means, but I am going to show you in a screen recording, so you'll have all the steps needed in order to do that. Okay. Now that you have your questionnaire filled out and you've collected the first month deposit, what you're going to do is or what I would suggest you do is design the Figma file using code stitching

3:28components. So you can either hire a designer, which that's what I did in this case. I'll show you how to get the Figma file previews from code stitch, but I'm not going to go through the whole design process because one, I'm not a Figma expert, and two, I've already hired out a designer to help me with this design. It cost me like I don't know 200 bucks to do it and it saved me a lot of work because I'm not the best with Figma. But I will show you how to go in and get the Figma files components. But basically what you do is based on all the information that they

3:57gave you on the design questionnaire. What colors they like? What fonts they like? What pages do you think you need in order to make them a successful website based on what you know about their business? You flesh out one page per unique page type. So what do I mean by that? I mean, one homepage, one about page, one contact page, and then let's

4:17say they're doing six service pages. I'll just build one service page template. I'll say, you know, this is your pressure washing page. All the other ones are going to look very similar to this with their own unique content and images, but I'm not going to build out every page here. That way, and this is a hugely important step. A lot of people would say it's not a worthwhile thing to do. For me, it's hugely hugely worthwhile because you're going to get less churn because people aren't going to be surprised what they're getting. It's going to feel like a super custom experience and ultimately you're going to make your client happier

4:48because they're going to feel like you brought them along in the process instead of just gave them an AI generated website 24 hours later that looks like everybody else's. So, this is a step that I would really emphasize doing whether you're hiring someone else to help you for a small cost or doing it yourself. This is going to make the entire process way more seamless and also it's going to make it way simpler to implement in claude as I'm about to show you in the next step. Okay, so now you have your questionnaire, you've been

5:14paid, we have the Figma file as well. The way that my designer goes about creating the Figma files is in every kind of section on the Figma file, you'll see there's like a three or four or sometimes twodigit code associated with that section. Those sections map directly to code stitch's component library. So what I do is I create a cloud code environment using the repository that I plan to work in and I give it Figma file access through the MCP server and I say I want you to look at this Figma design and I want you to find all the unique components based on the you know the not prefix but you know

5:52the opposite of prefix the end of the kind of section's name. I want you to get those numbers. Tell me how many unique components there are and then which stitch numbers they are because some stitches are going to be used on every page. So if you went through every page and pulled the code, you'd be doing it multiple times. So I say how many individual sections do you need? I go pull those. I put them into a Google doc. So I get the HTML, I get the CSS, and I get the JavaScript. Copy and paste it into a Google doc. Once I have all the sections, I download that as a

6:23markdown file. And then I give it the following prompt which you can also find in the description below. Basically I ask codes or ask claude to look at my Figma file and the section numbers and then to look at this Google doc and build out all the pages with the necessary sections downloading the assets as it goes. So if there's an image in the Figma file, it's going to download that and plug it into the right section. If there's a custom SVG file, it's going to download it and plug it into the right section. It doesn't do this perfectly, but it gets it about 85 to 90% correct. And then it requires a

6:58little bit of coaching or a little bit of manual editing from there. But you'll see I'm going to literally start this process and then probably go grab a coffee. And then by the time I get back, it'll be mostly done. On to the next. All right, guys. Uh, I had a little bit of a break. Sorry for the delay. I just had a sales call and I closed them,

7:15which is an awesome feeling on a Monday. But back into the video. Um, so so far we have gone through like cloning the repository, getting the environment set up. What I'm now going to show you is now I have my repository set up. I have my Figma file design on my computer. And what I'm going to do is get the components for the code stitch. So I start off with giving my claude uh cloud code project MCP access to my Figma file. So go to your Figma file, copy the link. So, just to show you everything,

7:50link copied. That's going to give Claude access to this file. So, I go here and I'm going to just talk into this. Hey, I'm about to build an Astro Intermediate Code Stitch project and I'm going to give you access to the Figma file that I've used to design the pages. Right now, there's a homepage, there's an about page, and then there's a service pages. All of these pages have individual components that are unique to those pages, but also

8:17components that are shared across them. Every section on the Figma file has a code, a numerical code at the end of it. So the navbar is 2318, the page banner is 1106. I want you to look at all of the different sections in the Figma file and give me a unique list of all the section ID numbers that appear in this design. Copy and paste the link in

8:42there. Now it's starting Cloud Code. It's waiting. It's going to find the Figma file, go in, take a look at everything, and let me know what I need to download. All right, so that took about a minute or two, and you can see it outlined all of the sections on Code Stitch that I need to download. So, I'm going to um basically start downloading those or, you know, as I explained, I'm going to use a Google doc. I'm going to get the HTML, the CSS, and JavaScript if needed. I'm going to throw it all into a Google doc, download that as a markdown file, and then I will give it back to

9:18Claude, and based on the code that it has, the assets in the Figma file, and the overarching Figma file design, it's literally going to build everything for me. Time lapse. Cue the time lapse of me doing all the boring work that hopefully the code switch MCP will eventually remove. All right, guys. So, now I have all of the files in the markdown file. I

9:37just downloaded it from Google Drive. What we're going to do is I'm going to give Claude the prompt and it has access to my Figma file. Now, it is going to have access to the markdown file. And here is exactly what I tell it to do next. While it's working, I say, "Why don't we grab a coffee or something?"

9:55Hey, Claude, I need your help, buddy. We're starting to build Courier Park Dental's website. I went through, I gave you access to the Figma file. You told me all the code stitch components that we needed. I'm going to give you a markdown file that has all the HTML, the less CSS or less, some JavaScript here

10:14and there, mainly for the navigation. Um, and then what I want you to do is take that markdown file, look at the section tags with the number ids, which we talked about before, and then correspond those to the existing pages in the Figma file. For each page, I want you to look at what sections it needs based on the Figma file, what photos are in that section, what SVG elements are in that section, and then take the HTML and CSS components and build them out into the corresponding pages. There's going to be a bunch of placeholder

10:47content in this um repository already. You don't have to do anything with the blog, but we want to start from scratch without the pages that are already built in the site and only build the ones that are in our Figma file. I will give you the HTML for the contact page later on. Just build out the three pages that are

11:05already in there. Does that make sense? All right. Now, I need to attach the markdown file. So, again, I'll leave a description to the prompt that I typically give it. Um, but I don't give it the same prompt every time. I just kind of I literally like talk to Claude as if it's a co-orker and then um it implements things from there and it'll ask me questions. So if it's not clear, it'll be like, "Oh, what do you want to do about X, Y, or Z situation?" And then I provide a context. Sometimes if like like I said, I'm about to go get coffee with you guys. Um I'm going to tell them

11:37like, "Hey, I'm not going to be around. Just keep working without me." And it will do that. But for the meantime, let's see if it has any questions. All right, it's reading the markdown file. I should have been recording that. All right. Now I'm recording the screen as well. Sorry guys, I am not the best at documenting this, but I do hope that it helps you at least a little bit. And if it does, please like, comment, and subscribe the video. Um, these are a lot of work and uh it's nice to see them

12:02appreciated, which often times they are. So, thank you very much for that. Ooh, nothing better than this feeling, guys. Got to lead while filming a YouTube video. Let's go. Okay, you can see now the rest of the home about in services. It's working on this. Um, and I think it's time we hit the road and go get some food. So, I'll grab my

12:27phone. Um, I think that's everything I need. Yeah, let's hit it. This is kind of cool. I don't think I've ever showed anyone this, but I actually work in Let me turn this camera around. I work in an airport hanger. So, the person that owns this has a bunch of cool stuff. It's got

12:49boats. He actually does coffee roasting over in there. Um, there's a whole bunch of cool in here. Thought about filming some Instagram reels in front of this plane and pretending that I am rich and successful even though I'm just a meager small business owner. But pretty cool. Pretty cool, I think. And then way up yonder is me. I did it so I could um get a physical address for my Google business profile, but I've had such issues with suspensions in the past that

13:26I'm actually too scared to update it. So, but it's been really cool to not have my uh work so close to home. Have a little bit of separation between those two things. Has been nice, for sure. All right. I didn't bring ND filters, so I guess this is where the coffee break stops, but I'll let you know when the website's done. [music]

13:44All right. Whoa, super bright. Coffee. Coffee time. All right, let's go see how the site did. I have been gone for probably hour or so. Sometimes it gets stalled doing something dumb, so hopefully that didn't happen. Okay, so I left, like I said, for about an hour. Um, you guys have seen the Figma file, so you know generally what it looked like. And let's see where Claude left off. So basically, it's telling me I built all three pages. Each Figma code

14:14became a component, pulled the assets. So I can guarantee you, and this is the thing, don't be lazy and don't just like expect AI to do everything for you. It's a useful tool and I use it a lot in what I do, but I'm going to show you what the site actually looks like and compare it to the Figma file and you're going to see some of the reasons that you can't just depend on AI fully. So, let's look

14:38at this first off. All right, let's go. There's the URL, temporary URL. So, you can generally speaking, it's looking pretty good right off the bat. The hero, the nav look really good. Then you go to this section, and the thing I want you to notice, it's the little details. So if you scroll down like I can already tell that border radius is rounded whereas the other one was square and like people first always it is rounded on the file but or on the preview but it's not rounded here. There's also none of these little bullet points. There's also this is missing from the side. So now our work is I'm going to go through

15:18each section and basically direct it. They're going to say, "Hey, Claude, in this section, you didn't do the SVG background overlay of those dental tools. You didn't add the bullet points um of the 45 plus years, third, third generation, lifelong patients, all of that. So, now you're coaching it. You're iterating getting it closer to what the actual design was. Hey, Claude. So, I have a couple edits. First of all, the hero section on load should be 100 VH like in the Figma file. And then there's a couple general edits that I have for you and some specific ones. Generally speaking, you didn't adopt the border radius in the design file. If you look

15:57at most components, the border or corner radius is actually zero, but you have a lot of them, the images and kind of cards rounded. Um, in section 1982, our story on the homepage, you didn't include the three bullet points before the learn more about us. All of the buttons have border radius and they shouldn't. And also the text in that 1980 section is kind of off center from the button. I'm not sure what's going on there. Um, and I don't know if you see, but there's actually like these um there's a vector SVG vector within the 1982 section that is a background overlay on the right positioned absolute to the

16:43right side of the screen. Um, moving on. section 2279 looks pretty good, but the SVGs um the reason for the different styling in that Figma file section is because that's a hover overlay. So the one that has the dark green background, restorative dentistry, is supposed to just be that color on hover, as are all the other ones. Um you put hover elements on all the text, so they disappear when you hover. That shouldn't be the case. the little SVG icon background should turn into the green color and the SVG path will turn white on hover as well if that

17:23makes sense. And again, the bullet point associated with each of those six cards should be that kind of uh burnt orange star shape instead of the square. I'll start off with that. But does that all make sense? And I'll paste the Figma file nodes in for your reference. So, that's what you have to do. I give it a decent amount of detail. I'm probably going to have to go through each section and give it some level of detail like that, but all in all, it's probably going to take me 30 minutes to iterate on the site and make

17:53it how I want it to be. All right, guys. So, basically, I've gone back and forth a little bit, did a little bit of editing, um, you know, just basically voice coaching. Um, a big issue that I encountered this time is sometimes it'll just get a snapshot, like a screenshot of the Figma file. you need to specify that you want to do you want it to use

18:12the design context from the Figma file. That basically means it will look at the CSS um and build it correctly. But it came out really good. Um here's a little preview. So if you remember the Figma file pretty much after a little bit of coaching exactly what the Figma file had. You can see the advanced CSS animations little arrow moving. We got multiple pages built out. Super fast

18:39loading. Sorry for the teeth, y'all. It's a rough one. Um, but this is what it cooked up. So, if you have questions in the comments, feel free to drop down below if this wasn't clear enough. Um, let me know what I can clarify. But basically, design in Figma. Give the Figma file access to Claude. It'll pick out what stitches you need. get the stitches, put them in a Google doc, download them as a markdown file, and then use the prompts and other resources down in the description to help build the site essentially. Um, I built this probably with I don't know how much hands-on time. It was probably an hour

19:16and a half of like actual work for me. Um, outside of writing the content and all of that. So, there was some like SEO work, but the actual build itself, I got the stitches, put them in the file, asked Claude to build it out for me. Had lunch, went on a walk with my dogs, came back and then put a little bit of time into editing it and that was it. So, this is a great method. It's worked really well for me and the clients love it, which is the important part. And the more important part, the websites perform really well, which gets my clients leads, which makes them happy,

19:49which makes me more money ultimately because they stay longer. So, it's a winwinwin. Anyway, guys, thank you so much for your time. I hope this has helped some of you at least a little bit. If you have any questions or ideas for videos in the future, let me know and I will do my best to accommodate