# How to vibe code a real website, and the slide app I built on the same stack Source: https://aaronmakelky.com/blog/vibe-code-a-website Last updated: 2026-11-07 Ryan Doser rebuilt a local tire shop's website live on AI Rabbit Holes from a one-sentence prompt. The stack in plain terms, when to make a skill, why you don't need an agency or a CMS, and the slide app I built for a talk. November 7, 2026 · 13 min read AI Rabbit Holes · Vibe Coding · Claude Code · Cloudflare · GitHub · Astro · Claude Skills [All my AI Rabbit Holes episodes](/ai-rabbit-holes) ![](https://i.ytimg.com/vi/r_fLK0b9Dro/hqdefault.jpg) Ryan Doser and me on AI Rabbit Holes: a real website, vibe coded live. My most prompted entry is ship it. Ninety percent of what I do now, something comes up and I say do it. It gives me a draft to review, and I just say ship it. My Claude knows that means merge the PR and make the change. My prompting has become one one-hundredth of the detail, because it's all about context. [Download the clip.](/videos/vibe-code-a-website/clip-01-ship-it.mp4) My most-used prompt is ship it. Ryan Doser vibe coded a real website live on [AI Rabbit Holes](https://www.youtube.com/watch?v=r_fLK0b9Dro), recorded November 5, 2026. Our episodes go up on [Ryan's YouTube channel](https://www.youtube.com/@RyanDoserAI). [Ryan](https://ryandoser.com/) rebuilt the homepage for Tire Heroes, a mobile tire shop in Des Moines owned by a friend of his, and I showed the slide app I built on the same stack. It picks up from our episode on [the Lovable tax and the website stack we use instead](/blog/lovable-alternative). ## Build along with this one [Watch this part of the episode (9:04)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=544s) If you haven't put your device aside, or you're doing the dishes while you listen, this is the episode you have to build along with. It's not for entertainment. Clear your schedule or bookmark it for when you have 30 or 40 minutes. If you don't have a website for someone you know or a business you've used, buy your name.com, or as close as you can get, and build it like a resume, a LinkedIn, or a portfolio to play around with. Otherwise pick a business like Ryan did, one where you know the owner. It's your uncle. Then follow along step by step. Ryan says the business's current site is bad, and the owner knows it and is overpaying for it. That's a template an agency sells to everybody. They change the name and the main color, and you pay a retainer of hundreds or thousands of dollars a month to keep it up. They're putting in ten minutes of work. [![The Tire Heroes homepage before the rebuild: a black header with the superhero logo, phone number and social icons, a red menu of eight links, and a dark photo behind the headline New Tires Delivered and Installed to You in Iowa, with Shop for Tires and View All Services buttons](/images/blog/vibe-code-a-website/tire-heroes-before.jpg)](/images/blog/vibe-code-a-website/tire-heroes-before.jpg) The [Tire Heroes](https://www.tireheroes.com/) homepage Ryan started from. ## The stack, if you're not a web developer [Watch this part of the episode (3:28)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=208s) People might think Ryan and I plan this behind the scenes and agree to say the same thing. We've independently arrived at about 95% of the same approach without talking ahead of time. Here's how I think of each piece when I'm not a web developer: [Download the clip.](/videos/vibe-code-a-website/clip-10-the-stack.mp4) The website stack, in plain English. [![The website stack in plain terms. Claude Code or Codex is the brain. Impeccable is a designer checking the output so it doesn't look like every other AI site. GitHub is the safety deposit box for your code. Astro is the framework the agent follows, like a WordPress theme for AI agents. Cloudflare puts the code on a server so people can see it, and the free plan covers most sites. The domain is seven to ten dollars for a .com.](/images/blog/vibe-code-a-website/stack.png)](/images/blog/vibe-code-a-website/stack.png) Each part of the stack, and what it does for you. - You need a brain, and that's Claude or Codex. They both work. Whatever you have access to is fine. - [Impeccable](https://impeccable.style/) is like having a designer check the model's output and clean it up so it doesn't look cliche and like every other generic AI site. I can't afford a designer for a consultation, and I don't have the terminology to tell Codex what I really want in design. It doesn't mean the site is amazing and perfect. It just won't look like everyone else's. - [GitHub](/blog/github-for-marketers) is the safety deposit box for your code. You can connect anything to it. If you ever want to change AI tools, the skills you use, or where you deploy, you want the code in GitHub, not in Lovable. - The domain is one of the biggest costs, and you can get a .com for seven to ten bucks. [![Impeccable's home page, headlined The missing design vocabulary for agents, beside a before and after card that labels common AI design tells: an AI kicker, an italic serif, a side-tab border and AI beige, with polish, distill and clarify commands underneath](/images/blog/vibe-code-a-website/impeccable.jpg)](/images/blog/vibe-code-a-website/impeccable.jpg) [Impeccable](https://impeccable.style/) names the design tells that make a site look like every other AI site. Ryan's version adds [DataForSEO](https://dataforseo.com/) for keyword research and checking that the site is optimized for Google and AI search. For [Astro](https://astro.build/), the one people have heard of the least, Ryan compares it to a WordPress theme, but a framework for AI agents to follow. Paste the Astro URL into Claude Code or Codex and say, use the Astro web framework to build this website. He builds all his sites on it now, and he says ryandoser.com passes Google's Core Web Vitals on desktop and mobile with hundreds of pages. Ryan says the bare-bones version of the stack runs about $20 to $40 a month. I bet anything website related you can do on Cloudflare's free plan, unless you have a huge site and you're optimizing speed and hosting at an enterprise level. Ryan and I both pay five bucks a month for the Workers plan, and you don't need it for this. Cloudflare works as well with AI tools as it does with humans. That's part of why I like the company. You and I don't want to look at the Cloudflare menu. It's a maze. Install [Wrangler](https://developers.cloudflare.com/workers/wrangler/), their CLI. If you don't know what that is, ask Claude and say, use this, don't make me click through a browser. ## One sentence and a slash command [Watch this part of the episode (12:03)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=723s) Ryan's whole prompt to redesign the site was one sentence with four links. I thought we all had to be prompt engineers, man. The magic lives in his local website builder slash command, a workflow built on several skills: a local website designer skill, a brand foundation builder, a local SEO strategist. He likes VS Code with the Claude Code and Codex extensions side by side. I asked if you need an IDE, and he said no: it's actually easier in the Claude or Codex desktop app. Ryan's links were the current website, the Google Business Profile, and the Facebook, Instagram, and LinkedIn pages, so it could pull the logo, colors, photos, services, and newest Google reviews. Then the command: 1. Scrapes the site and pulls the images and branding. 2. Stops at a checkpoint to approve a DataForSEO diagnostic, about a dollar. 3. Writes a brand guide. 4. Creates a private GitHub repo on its own. 5. Runs Impeccable on the design. 6. Has Codex review Claude Code's work as a manager critic and accuracy check before anything ships. 7. Deploys a no-index preview to a Cloudflare dev site with Wrangler. [![Ryan's rebuilt Tire Heroes homepage: a red panel headlined The Des Moines Tire Shop That Comes to You, Skip the waiting room, the 25 dollar on-site fee for a set of four new tires, Call or text and Shop tires online buttons, and a photo of a technician mounting a tire inside the van](/images/blog/vibe-code-a-website/tire-heroes-after.jpg)](/images/blog/vibe-code-a-website/tire-heroes-after.jpg) The rebuilt homepage on [Ryan's preview site](https://tire-heroes-site-staging.rdoser13.workers.dev/). The biggest takeaway: if you're not prompting like Ryan did, a one to two sentence do this with a slash command, and some context like a site to scrape, a document to use, or a framework to follow, you're stuck a year ago, crafting prompts with seven different parts of an acronym that are three paragraphs long. A slash command is like copying and pasting a prompt in an AI-friendly way, so you don't have to repeat it. Then you say, for this thing, here are three or four links, go. His had been cranking for 10 or 15 minutes from a two-sentence prompt, because it has step one, step two, step three, and it's working through your checklist. ## Do it three times, make it a skill [Watch this part of the episode (15:30)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=930s) If you don't know where to start with a skill, do a normal chat where you go from first prompt to finished product. If it's something you're ever going to do two more times, so a total of three, it should be a skill. Tell your coding agent to look back across the chat and turn it into a skill, so you can type /blogupdate, or /youtubethumbnail if you just spent an hour getting one and it's finally good. That's how I've made most of my skills. [Download the clip.](/videos/vibe-code-a-website/clip-03-make-it-a-skill.mp4) Doing it three times? Make it a skill. If you don't have a slash command of your own yet, start with somebody else's as an inspiration or a template. Ryan's skill, no matter how good it is for Ryan, isn't going to be exactly what you want. Run it and give it feedback: I like this, I don't like this, I needed this and it didn't have it. Then say, make a copy of his skill with these tweaks, and save it to your GitHub so all your tools, Claude, Codex, whatever, can see it in the future. Don't save your skills just in Claude or just in ChatGPT, because if you switch apps, the new one can't see them. More on that in [Your AI app should not own your work](/blog/your-ai-app-should-not-own-your-work). [Download the clip.](/videos/vibe-code-a-website/clip-04-dont-lock-your-skills.mp4) Don't lock your skills in one app. ## A ticket in some guy's inbox [Watch this part of the episode (27:51)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=1671s) Ryan's command was pulling the newest Google reviews, so let's use that. If you're the average business owner who's not tech savvy, you're paying a web agency to run this stuff. You'd be paying them, and probably waiting a week or two, to periodically grab your Google reviews and add a scrolling testimonial section midway down your homepage. With Claude, Cloudflare, and Astro, you could set up a webhook for when a new one shows up, or a cron job, like an alarm clock, that does it in the background once a week and keeps fifteen of them scrolling, with a responsive layout so it works on desktop or a phone. Why are you paying an agency $800 a month to take a week to do what will happen while you sleep for about a dollar's worth of tokens? When Ryan's build hit the review step, Codex checked Claude Code's work before he saw a preview. Imagine you worked with an agency and they said, before we even give you a preview, we had two different developers check each other's work. That's what you're getting, without paying and waiting. With an agency you're a ticket in some guy's inbox, waiting days or weeks for an answer. You can get that in five minutes if you set it up. It's also a good example of why Ryan uses an IDE. He didn't have to switch tabs or apps to bring models from different providers into one workspace. [Download the clip.](/videos/vibe-code-a-website/clip-09-ticket-in-some-guys-inbox.mp4) You're a ticket in some guy's inbox. [![An agency compared with your own setup for adding Google reviews to a homepage. Agency: about $800 a month, a week or two of waiting, and you're a ticket in some guy's inbox. Your setup: a cron job or webhook that runs while you sleep, about a dollar of tokens, and two models checking each other's work in about five minutes.](/images/blog/vibe-code-a-website/agency-vs-stack.png)](/images/blog/vibe-code-a-website/agency-vs-stack.png) The same request, two ways. ## Opus for the build, a second model for review [Watch this part of the episode (30:02)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=1802s) I asked Ryan how he decides what Claude does and what GPT does. He says it's years of experience: Opus 5.5 on high is his daily driver, and he thinks it's still the best model for cost and output together, with GPT 6.1 Soul as the gatekeeper. I'd add complex tasks where you're planning a whole build. And Opus 5.5 is hands down the best video editor. I tried an edit with some GPT models, and it was okay. They're doable. I tried one with Grok, and it was so bad I threw it away. I do side-by-side tests when something new comes out, and that one reminded me how good Opus is. More in [why Opus 5.5 is my daily driver](/blog/claude-opus-5-5-best-ai-model) and [AI video editing with Claude](/blog/ai-video-editing-with-claude). ## Your AI doesn't need a CMS [Watch this part of the episode (33:06)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=1986s) A CMS is a content management system, an easy way to update and edit a website behind the scenes. Ryan showed [EmDash](https://emdashcms.com/), Cloudflare's CMS built on Astro, which he says was rough when it launched. He doesn't use a CMS anymore, but thinks it makes sense for bigger teams or an owner who wants to edit things themselves. [![EmDash's home page, headlined The CMS for you and your agent, calling it the spiritual successor to WordPress for Astro, with a playground button, the npm create emdash command and a Copy prompt button, beside its post editor](/images/blog/vibe-code-a-website/emdash-cms.jpg)](/images/blog/vibe-code-a-website/emdash-cms.jpg) [EmDash](https://emdashcms.com/), the CMS Ryan showed. Here's how I think of it. If you're somebody who built websites by dragging a box, adding a widget, clicking new page, and using all the menus in that sidebar, use a CMS. If you type a slash command in Claude to add the page or the blog post, you don't really need one. It's an abstraction your AI tool doesn't need. Ryan also explained dev sites. His staging builds go to a pages.dev or workers.dev address that Google and Bing don't index, so he can look everything over and share it with a client before it replaces the real domain. ## I built my own slide app on the same stack [Watch this part of the episode (37:39)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=2259s) Besides a website, what else could you build on this stack? This might seem like a weird one, but I'm picky about slide deck apps. I won't touch Canva. I like one part of their app, but I hate designing in it. I really like designing in Figma, but I hate presenting in it. PowerPoint, I haven't touched in like 10 years. I had a talk to give. I wanted slides with a speaker view for me. I wanted a remote control on my phone so I could walk around, control my slides, and see a timer. And I wanted my audience to sync up with my screen and interact. You could go find a SaaS tool for presenters that's 50 to 60 bucks a month. Or you could say, hey Claude, put this in GitHub, deploy it on Cloudflare, here's the feature set I need, go. Then test it before your talk, and you'd get something good. [Download the clip.](/videos/vibe-code-a-website/clip-05-slide-app.mp4) I built my own slide app. The week we recorded this, I gave a 21-slide talk at a principals' conference on it. I wanted them voting on the big screen in the auditorium while I walked around away from my laptop. My phone showed 28 minutes left in my talk, how many minutes I'd been on the slide, and slide six of 21. I can go back, go forward, or zoom out to see all my slides. [![How Aaron's slide app works. The phone remote shows time left, minutes on the slide, and slide six of 21, with back, forward, and zoom out buttons. Tapping it changes one database row on Cloudflare. The big screen and the audience's phones read that row, and the audience's votes and feedback go into a Cloudflare database.](/images/blog/vibe-code-a-website/slide-app.png)](/images/blog/vibe-code-a-website/slide-app.png) The remote changes one database row, and every other screen reads it. That sounds like a really complicated app, like I'd have to go back to college to build it. I used the same stack Ryan did, minus a few tools: no Impeccable, no SEO, no Astro. My coding tool is mostly Claude Code. It saved the app in GitHub, and every time it made a change, it pushed a PR. If you hear PR, think of it as an update or a new version pushed to your GitHub repo. Cloudflare takes that code and puts it on a server so people can see it. I use Linear for project management, but use wherever you track your tasks. The app didn't need any AI to run, or any API keys. I just connected these things. Cloudflare also has databases and Workers, so when somebody votes, it updates in my presentation live. At one point seven people said they use ChatGPT the most and five said Gemini, and I was watching that on my phone. Canva has an amazing remote presentation feature, but I hate building in it. My last talk was in Figma, and I stood at my laptop hitting the arrow keys because Figma has no remote app. You guys are a billion-dollar company, and I can build this with Claude and deploy it on Cloudflare in like five minutes. [Download the clip.](/videos/vibe-code-a-website/clip-06-no-remote-app.mp4) Why I stopped clicking arrow keys. I also had feedback come in. Instead of a QR code at the end of my talk asking how I did or collecting leads, the last screen was the feedback form, and the answers went into a Cloudflare database. Before I even left the room I could see what I had. If you have an idea for software you want, you can get a really good version of it in less than 30 minutes on this stack. The talk's companion page is at [aaronmakelky.com/wassp](/wassp). ## If you're uncomfortable, that's good [Watch this part of the episode (44:07)](https://www.youtube.com/watch?v=r_fLK0b9Dro&t=2647s) The framework Ryan and I are giving you is a version you control, instead of a wrapper like Lovable or Bolt. You're going to be nudged to learn more of it this way. Those done-for-you tools build beautiful websites, but you don't see any of it. You don't know what a dev site is, or some of the terminology on the screen in front of you. If you're uncomfortable, that's a good thing, because you're learning, and that skill set is going to be as valuable as the site you're building. Pretty soon you'll have a slash command and spin these up yourself. [Download the clip.](/videos/vibe-code-a-website/clip-07-uncomfortable.mp4) If you're uncomfortable, that's good. My favorite example: a local service business owner told me he was busy and didn't even have a website. He knew he should get one. He swore it was going to take him three or four months to get it up. I laughed out loud, and he asked what I meant. I said, you and I in thirty minutes could go from buying the domain to deploying it on a .com, and it would be very usable. He just didn't know that world existed. [Download the clip.](/videos/vibe-code-a-website/clip-08-thirty-minutes.mp4) Three or four months? Try 30 minutes. If you want help picking a first project for this stack, [book a 30-minute call](https://cal.com/aaron-makelky/intro), or follow me on X at [@theaaron](https://x.com/theaaron). ## Related pages - [All field notes](/blog) - [The Lovable tax, and the $10 a year website stack I use instead](/blog/lovable-alternative) - [Our GitHub for marketers episode](/blog/github-for-marketers) - [Your AI app should not own your work](/blog/your-ai-app-should-not-own-your-work) - [Why Opus 5.5 is my daily driver](/blog/claude-opus-5-5-best-ai-model) - [AI video editing with Claude](/blog/ai-video-editing-with-claude) - [The WASSP talk page](/wassp) - [All AI Rabbit Holes episodes](/ai-rabbit-holes) ## Sources and references - [Ryan Doser](https://ryandoser.com/) - [Watch the episode on YouTube](https://www.youtube.com/watch?v=r_fLK0b9Dro) - [Ryan Doser on YouTube](https://www.youtube.com/@RyanDoserAI) - [Impeccable](https://impeccable.style/) - [Astro web framework](https://astro.build/) - [DataForSEO](https://dataforseo.com/) - [Cloudflare Wrangler](https://developers.cloudflare.com/workers/wrangler/) - [EmDash CMS](https://emdashcms.com/) - [Aaron on X (@theaaron)](https://x.com/theaaron) ## Common questions ### What stack do Aaron and Ryan use to vibe code a website? Claude Code or Codex as the brain, Impeccable to keep the design from looking like every other AI site, GitHub to store the code, Astro as the web framework, and Cloudflare to deploy it. Ryan adds DataForSEO for keyword research. Aaron says they arrived at about 95% of the same approach without planning it, and that a .com domain for seven to ten dollars is one of the biggest costs. ### Do you need an IDE like VS Code to do this? No. Ryan Doser says it's actually easier in the Claude or Codex desktop app. He prefers VS Code because he can see his skills, folders, and files, keep multiple tabs open, and run Claude Code and Codex in the same window. ### When should something become a skill? Aaron's rule: if you're going to do it two more times, for a total of three, it should be a skill. Do it once in a normal chat from first prompt to finished product, then tell your coding agent to look back across the chat and turn it into a skill. He saves skills in GitHub so Claude, Codex, or any other tool can see them. ### Does a small business website need a CMS? Aaron says if you build websites by dragging boxes, adding widgets, and clicking new page in a sidebar, use a CMS. If you add a page or a blog post with a slash command in Claude, you don't really need one, because a CMS is an abstraction your AI tool doesn't need. Ryan doesn't use one anymore but says it can make sense for bigger teams or an owner who wants to edit things themselves. ### What else can you build on this stack besides a website? Aaron built his own slide app for a 21-slide talk at a principals' conference: a speaker view, a phone remote with a timer, and audience screens that sync and take live votes. The phone remote changes one database row, and the other screens read it. It runs on GitHub and Cloudflare, with no AI or API keys needed to run it, instead of a presentation tool that costs 50 to 60 dollars a month.