Build a Restaurant Website with Claude

I built this taco shop restaurant website using Claude Code in only a few hours. I created the entire brand deck with just a logo, and you can create the exact same functionality as Chipotle's website without even knowing how to code. You can build an incredible website for your business using Claude Code without any designer and without the big agency bill. I'm going to show you every step on how to do it right now. At the end, I'll build a taco plate on my phone just like Chipotle's. Hey, my name is Sean. Welcome to AI builds. Today, I'm going to show you how to build an insane restaurant website that looks like a professional agency made it in only a few hours. I will give you my custom-made skill that turns any logo into a complete brand deck. Then, I'm going to show you how to take any cool-looking functionality from any website you visit and actually make tweaks to it and customize it and make it your own on your own website. Again, the whole build only took me a few hours. Let's start building. Phase one, setup. This is what you need. Uh first, we're going to need Claude Pro. So, it's $20 a month. If you do uh the annual plan, it's $17 per month. You can do a million things with it. I use it I use it all day. I'm on the $200 a month plan. Um but again, $20 a month, it is a ton of value. I highly recommend it. The only way you can use Claude Code is if you have a paid plan, and the pro plan starts at 20 a month. Uh I built this in the Claude desktop app uh in the code tab. So, make sure you download that if you don't have that already. And then next, you're going to need the three skills, uh the brand deck, the anti-slop, and the scroll hero skill. They're all free in my Skool community. Uh the link's in the description. You're going to need your logo and then photos of any food that you might have. Uh I made my logo in Chat GPT. Simple prompt. Again, it's I all the prompts and everything are going to be uh free in my Skool community. You can download all that. Again, it took one prompt. I don't own a taco I don't own a taco shop, so I had to make Claude make all my uh food photos inside of Higgsfield. But, if you have real food photos, I highly recommend it. They're always going to look better. You can also enhance existing food photos. I owned a restaurant, I had a sandwich shop for about a year, and we worked in like a community, like a warehouse type food setup. So, there was like 10 different restaurants in one building, and I noticed that every restaurant struggled with the technical side of the business. So, none of the photos were the same sizes, none of them were super high quality, and I had a technical background, like I was building websites and doing marketing for 15 years before that. So, I knew exactly what to do and what she needed. I found that almost every restaurant owner is just like a deer in the headlights when it comes to technologies. You can enhance their photos with AI. It still looks natural. It you can kind of recreate what they have really quickly. Next, you're going to need a Hicksfield account. Again, the link's in the description. I do get a small affiliate commission, but Hicksfield's is what it allows us to do the image generation for this project, as well as the video generation for the scroll hero. Then, you're going to need a free Netlify account. Netlify's awesome. You can basically just drag your site folder onto this Netlify app, and it's live. So, it's free. I use it all the freaking time. Anytime I'm doing a demo site or anytime I'm doing a project that doesn't need crazy database or anything like that, use Netlify, and it it makes your life your site live in seconds. It's absolutely awesome. And the last thing you're going to need is a screenshot of some website that you love. Anytime that I come across an awesome section of a website, any container that gets my eye, or any functionality that gets my eye, I always take a screenshot, and I want to rebuild it with Claude. Mine is the Chipotle ordering page. I eat Chipotle about two three times a week. I I think it's freaking awesome. So, I use their builder all the time. I thought, "What a great build. Let's use this builder and do the same thing for our taco shop." Phase two is the planning phase. This is a super important phase. The better you plan your project, the faster it's going to build. You're going to save a ton of time, and then save a lot of credits if you're doing video and image generation. So, first thing I did is made a project folder. This is Señor Gringos. That's the name of my new taco shop. So, make a project folder on your desktop of whatever your project name is, and then we're going to drag that into Claude Code, and that's where we're going to work out of inside of Claude. Uh put the logos, all the images, everything you have in that same folder, and we're going to put everything for this project in that one folder. And then you tell Claude everything about the the shop, right? The hours, the prices you want, the menu items, all that stuff. Where it is. Then I installed the the three skills from my Skool downloads. Next, we're going to connect the Higgsfield MCP. It's super easy. You just go on over to Higgsfield, go to the Claude Code tab, copy that copy that code, and then paste it into Claude. Claude's going to ask you a couple questions, and then you're going to be synced up. It was connected and signed in within a couple minutes. And then here's the part that most people skip, and that's finding the inspiration. We talked about this briefly before. Find sectionality on a website that you love, or find a design style that you love. Just take a screenshot, give it to Claude, we can rebuild it with the skills I've given you. So, again, the last time I skipped this, I gave Claude a list of rules and no examples, and that's how you get AI slop, right? So, I can create these incredible skills to find all these bad fonts and all these things that AI produces, but until you actually tell Claude what looks good and show Claude, like, "Hey, this is this is our standard of what looks good," you're always going to have trash, because it's the easiest way for AI to create websites is by doing it through templates. So, if you don't want your website to look the same as everybody else's, if you want to have something custom, you have to set a bar. You have to give Claude a bar of what looks good. So, again, you just show it what you like, grab the screenshot of Blaze ordering page. Uh showed it my Daybreak. Guys, if you haven't seen my video, I did a WordPress site um for uh Daybreak Coffee House, and it was like a local coffee shop demo site. And guys, I There's five skills in that project. It's on WordPress. It's lightning fast. It's an incredible build, so check it out if you haven't seen it. I I gave Claude that as my standard for this build. That will plus this Chipotle reference, that's what looks good. All you have to say is, like, "This is the layout and the feel I like, but keep the colors from our brand design." Then I asked Claude for a plan, no coding yet. And then Claude I planned the entire page. The play builder, the menu, the price, every price, the tortillas, the salsa is made fresh, our story, and the hours. It's all there. So, I read it back and I just said yes. And then now we just show Claude what looks great before it writes a single line of code. All right, guys, phase three, the build. We are doing the brand deck. First, I ran my my brand deck skill with the logo. You just put one logo in, you get an entire brand back out. All the colors, all the fonts, all the buttons, how the logo sits on dark and light backgrounds. And the whole brand deck took about 9 minutes. It's absolutely awesome, guys. I highly recommend you use this skill. Again, they're yours to use. You can customize it, make it your own. But, it's it's pretty incredible to get an entire brand deck just from a logo I got from ChatGPT. Next word is the food photos. So, I had Claude make one photo inside of Higgsfield first just to check the look. Then it made like the other 11 the exact same way. So, based on that first one coming out, Claude was able to have Higgsfield match the other 11. So, I have a full group of photos now that all have the same look and feel based on my branding. Two needed to be redone, so I just had it redesign those. The flour tortillas were a little off, and then so was one of the chicken images. Then the film. I wanted the cook making tacos and handed them to you. I thought it'd be so cool like in my again in that coffee that daybreak build that I did, the barista, you know, make the latte and then hand it to the customer and smile and it's like that's what you want as a customer like when you go to a website, you want to see what your experience is going to be like. So, I wanted to do the same thing with this taco build. So, basically I have the man making the taco like super fresh and then just handed it to you. So, for that we had to make two different videos and then we mashed them together using the scroll hero skill. Whenever I'm creating a video out of a person, I like to do a character sheet. It's super easy. And again, all the prompts and everything are in my free Skool community. But, if you want his face to stay the same and the look to be the same, just create a character sheet. It's super easy. So, again, he's not a real he's not a real person. I made this guy with AI. Here's the first frame. So, you can just see it's him cooking as you can see him from the counter as a customer. And then you do a cheap test video in 480p. It's something like 24 credits and you do that so that you don't waste a bunch of credits. I want to make sure the prompt works before I spend money on 1080p. And again, for a scrolling hero image like this or a scrolling hero video like this, you need a super high-quality video of at least 1080p. So, that's why uh you test it in 480, make sure the prompt works, and then we then we use 1080p. Then we generate in 1080p. It took three tries though on this one. So, he kept screwing up the tacos. I didn't say two tacos. So, sometimes it would add a third taco in there. So, you just have to be very specific in what you want. It didn't cost that much cuz it's it's 480p, but it's just something to keep in mind whenever you do an AI video generation. And at first, he also piled on a ton of onions. He put like two handfuls of onions on on these tacos. So, there was a couple of different errors in each time you do a video generation, you get a little bit better at prompting. Learn from my mistakes, see what went wrong, and just look at the little details. Whenever you have somebody grabbing something, say a pinch, don't say grab something. Say, "Grab a pinch of onions." Right? So, it's it's little things like that. Yeah, I get the second generation, a third taco showed up out of nowhere and like it just looked terrible. And again, you have to just expect that AI's going to make errors and just be super detailed in your prompts. And that's why we do this all in 480p before we spend the real money for 1080. And then each time I had an issue, I just fixed the first frame just to show two tacos. Like, you just want to make sure that we're not making the same error twice. And then another thing I did is I combined the cilantro with with the onions because it was just a lot easier for him to grab a pinch one time than it was to grab a pinch twice and put it on the tacos two different times. And then the third time it was right, so I just I made the same thing at 1080p. It was worth spending the credits once I knew it was right. Yeah, the on the last site build, like I forced the ending and then the coffee slid backwards. Whenever you're making these scroll videos, it's better to do two smaller clips than it is to do one full clip, especially if you're trying to get the character to do two two different things. For the coffee build, I had her make the latte or put the latte on the counter and then slide the latte to a customer. It's really hard for AI to get that right, so I made two different videos and then mashed them together. That's the easiest way to make this happen. So, again, the second clip starts where the last clip ended. All right, now we're going to build the page. So, I had Claude build the page from the plan and the brand deck first. The menu with the prices, the hours, where we are, our story, all that. The first version was it looked like a freaking template, it was terrible. Small small photos were floating all over the place, like it just was not a clean website at all. So, again, I gave it Daybreak the coffee shop as a reference. Said, "Hey, this is the bar that we're setting." And then Claude came back and had all the correct containers, everything looked smooth. The photos were bigger, the text was bigger, and then all the same scroll motion that I had. If you're building a website, you want to have some type of animation or some type of subtle draw. You don't want it just to be plain, right? So, you don't want a lot going on anyway, especially if you're trying to convert a customer, that's the whole point of building a website, but you want to have subtle animations. Those subtle movements are what make it look premium. That's those subtle movements are what separates you from other designers, right? Then on the laptop, the menu got cut off, so I sent Claude a screenshot, said, "Hey, like the menu's cut off. There was a scrolling error that was going on." And we just took a clip of it, sent it to Claude, had it fixed it. Just one quick prompt, and it fixed the menu and every screen size looked good after that. And then this is my favorite part. This is the the page builder, right? Or this is the plate builder. And Chipotle lets you build your bowl one tap at a time. That's the kind of thing you'd pay an agency for, right? There's a lot of functionality there. There's some development that goes on there. We were able to just to take that reference and rebuild it inside Claude. So again, just give Claude the screenshot as inspiration and I just said, "Build this for tacos with our food using our ingredients." So pick a tortilla, pick your meat, pick your salsa. The pics worked on the first try, but on the computer, the order for pickup did nothing. Again, this is a demo site. Nothing got added to an order. I needed to have that container come up that show your order on the side. I had it add an order window just like Chipotle's bag has. Then I had it build the plate right in front of you as you pick. It's just a more seamless experience doing it that way. The tortilla slide in, the meat drops in, then the salsa. It's just super smooth. Then I had it make the video for the hero scroll. The page opens on the cook and then the film plays as you scroll. So you scroll and it he makes the tacos and then hands them to you and it's all seamless. Then I went through the whole site and I just fixed what was off. I give Claude my rules files. It's one file with everything that I care about. It cut lines that Claude made up that weren't in my shop notes. So it just took those out and cut every long sentence down. Then I looked again and it and it still looked plain. So I had to add color, my phone number everywhere. I had to make all those those types of edits. I had I had to add a map cuz this is a local site and then a real menu board. Then I give it a footer and made it look the same as my coffee shop build as inspiration. I used my inspo skill to borrow the menu bar from my own website, the shawnrably.dev site. This is phase four, the launch. Before anything goes live, I'm going to run my anti-slop skill once on the whole project. It It checks for all the stuff that makes the site look AI made. It passed. It only flagged two things that I did on purpose. My rules file cut photos cut off to fit their boxes. Now every photo shows the whole picture. Here's a trick for those of you who don't know. You can check your site on a phone while you're still on your computer. So all you do is you open the site in Chrome, you press F12 or on Mac you can press command option I, and then you press control shift M or on Mac it's command shift M, and you pick a phone on the top. So, you can pick an iPhone 14 or iPhone 16 or iPhone 16 Max. You pick that phone and it'll show the screen of your web what your website's going to look like. So, on a phone the plate builds in a bar at the bottom of the screen. And then the order window slides up from the bottom. Then all you have to do is you drag the site folder from your project onto Netlify. That's it. It's super easy. You drag it on there. If you want to rename the URL you can whatever your project name is, and then you just click make public and it's on Netlify. Again, it's free. You can launch it like this. You can show this to a client. It's just awesome just to have. You can show it as a demo site. Netlify is incredible. It takes seconds and again it's absolutely free. So, anytime you don't need a database I highly recommend you use Netlify. Now, once you drag it, make it public, it's live. That's it. You can share that link. It is 100% live. And again, it's free. Uh last again to real test. Even though we tested this inside of Chrome, this is this is the actual scroll on my phone. Yeah, super smooth. Looks great. It looks looks just like it did in Chrome. So, guys here it is. The live site. Check it out. We got the scroll hero. You got the video, the plate builder, the menu, the story. I It's awesome. Again, here it is on our on our mobile phone. Everything works super smooth. It looks great. Build in a plate on the phone just like Chipotle. That's awesome. Corn tortillas, al pastor, salsa verde. Let's go. There's the plate ready to order. Add a second plate. Add chips. Guacamole just adds It adds up the entire order. All the functionality's there. This build itself was just under 4 hours. And again, I had a ton of issues uh regenerating images. It does or regenerating videos. If just one of those went smoothly it would be closer to 3 hours on this whole build. So, guys that was the build. Basically we In less than in less than 4 hours we were able to create a site that had a scroll hero a video. We were able to take Chipotle's ordering system, use it as inspiration, and then create our own and customize it on our website. We took a one logo and created an entire brand deck out of it. You get all three skills for free in my Skool community. Again, the link's in the description. All the prompts, all the skills, everything is in there for every YouTube video that I do. You can just build this for your business today. And again, guys, if this helped, please like the video and subscribe to the channel. I build with Claude every day and I post every week uh with projects like this. So again, guys, thanks for watching. I'll see you on the next one.