Skip to main content
November 3, 202610:25

It took me 20 years to build this AI Slop site

By Samuel Gregory

About this video

Your brand new AI website is probably a ghost town to Google and ChatGPT. In this video, I reveal why 'vibe coding' your site might look great but could be invisible to the bots that matter most. I walk through my process of building a professional-grade site with Claude in just 2 days, highlighting the massive differences between a one-prompt wonder and a real design system. Key takeaways: - The 10 second test to see if your site is invisible to AI crawlers. - Why generic AI copy like 'transforming digital experiences' is killing your conversion. - How to avoid a surprise $1,000 bill from 'cool' AI features. - The 4 questions every website must answer: What you do, what it costs, who you are, and what you have done. - Why server-side rendering is the non-negotiable switch for 2024.

Why your brand new AI website is probably a ghost town to Google and ChatGPT

Most founders are currently building digital facades that look beautiful but function like empty shells. I recently built a website using Claude: starting at 9:00 on Friday and going live by Saturday afternoon. It took 31 commits and 270 files. Whilst the speed of AI is incredible, there is a massive trap that most people are falling into.

The illusion of 'Done'

When you vibe code a website, there is a point where it looks finished. The buttons are there, the colours are vibrant, and the layout is sleek. However, looking done is not the same as being done. A one prompt build often lacks the vital infrastructure that a real business needs:

  1. Infrastructure: My build uses Vercel for hosting, Payload CMS for content management, and a Postgres database.
  2. Design Systems: Instead of random fonts, we used Claude to build a proper design system where every page follows consistent spacing and typography.
  3. The Human Touch: AI copy is often generic. It uses phrases like 'transforming customer connections' which say absolutely nothing about what you actually do.

The 10 second invisibility test

Here is the biggest gotcha: many AI-generated sites are built with React in a way that requires JavaScript to even display the content. This is a disaster for SEO and AI discovery.

If you right click, inspect, and disable JavaScript on your site, does it disappear? If it does, the crawlers behind ChatGPT and Claude cannot read your site. They do not run JavaScript. To them, your business is an empty page.

The real cost of 'Cool' features

Everyone wants an AI chatbot on their site. I built one that answers questions based on my site content, but I did it with strict limits. Without bot checks and message caps, a single bot could ask 10,000 questions overnight on your bill.

I spent $125.65 on API tokens to build this site. That is cheap for a professional build, but a vague brief will cost you much more in wasted tokens and 'no, not like that' revisions.

Experience matters

It took me 20 years to know exactly what to ask Claude. Knowing how to request server-side rendering or how to structure a database is the difference between a toy and a tool.

If you are starting a company, go ahead and vibe code your first site. But before you send it to customers, make sure someone who understands the craft looks under the hood.

Keep on vibing.

Transcript▾

This is the website Claude built from one single prompt, and this is the one I built with Claude. I started at 9:00 on Friday morning, and it was live by Saturday afternoon. 31 commits and 270 files later. It took me 20 years to build this AI-generated site, and there is one switch in your browser that makes one of these sites vanish, and it isn't mine. There has been a lot of fear-mongering about AI taking jobs, and I am not part of it. I am a huge proponent of AI, and if you are starting a company, you should be using it. Things that used to cost thousands to make you can now build yourself. What people do not realise is that vibe coded website can look finished long before it is. A founder might vibe code their first website, but at some point they will move on to running a company, and someone else will look after that site. Whoever that is will do a lot better if they know how websites are built. By the end of this video, you will know what ask for and get a better website first time, and what to check before it goes anywhere near your customers. We will go through design, copy, why looking done isn't the same as being done, and what cool features really cost you. Everything we will be going over in the timestamps below. The last chapter is a 10 second test that makes a lot of vibe coded websites disappear, and you can run it on yours, so definitely stay tuned for that one. Thank you Weglot for sponsoring this video. More on them later. Let's get on with it. Let's take a look at the design first because that is the bit you can see. On the left is the one prompt version. Honestly, it looks a bit childish, and there are design errors if you look closely. On the contact page, the text it barely stands out from the background. That isn't a matter of taste. If you're reading on your phone in the sun or your eyesight is imperfect, you can't read it. It looks like a website, though, and for a lot of people, that is where they would stop. On the right is mine, and if we go into Claude design here, you can see that it it started as three directions side by side, Orbit Program and Run of the show, and I picked run of the show, and Claude rebuilt it inside the site as a proper design system, so every page uses the same colours, type, and spacing. When I couldn't decide on a font, we had Claude build a throwaway page to compare them in place. Here is Orbitron, and here is Archivo squeezed to 72% width. One prompt build picks a font for you and moves on. Then there is the stuff a designer notices and everyone else only feels. The header link started as fixed-width boxes. So, short words had big gaps around them, and long words were cramped. Now each one fits its text. Check out the front-end design skill by Claude Code. This should smooth out some of the rough edges and provide a little bit of taste. You might not like this design, and that is fair. I would like to know why. Slop doesn't tell me anything, and neither does soulless. They become words that people use when they haven't looked closely enough to say what is wrong. That is changed how you look at your own site. Leave a like and subscribe. Now, what I want to dig into here is the copy, because that is where One Prompt hurts most. The AI has to guess who you are. Here is the headline it wrote for us: 'Extraordinary digital experiences that transform customer connections.' Read that and tell me what we do. You cannot. It could be any agency in the country. A homepage should say who it is for and what you do in the first line, and this does neither. It got mine wrong, too. The first draft was written for the people we used to sell to, and it assumed you work in film. We do not. Nothing on the page would have told a visitor it was wrong. It read well, but it described a different company. An agent can only write about your business from what you give it. Before it writes a word, it needs to know who you are selling to now, what they are worried about, and how you sound when you talk to them. That last one is the brand voice, and if your site sounds like every other site, nobody remembers it. To smooth out some of those rough edges, check out the Unslop skill. There is a bunch of copywriting skills, but they really help out with that telltale AI copy. Then there is whether the site gets people to get in touch. That is conversion rate optimisation or CRO. In 2023, I built a website that was run entirely by AI. I firmly believe I was the first person to do this, and there is a video on it. Visitors asked it questions so I could see exactly what people wanted to know. I tracked those questions, went through the analytics, and looked where people went. What is really interesting is that it came down to 4 questions. What do you do? How much do you cost? Who are you? And what have you done? This site is built around those 4, and everything else is gone. One prompt would never do that. It gives you the pages every website has because it does not know which one yours needs. When you Vibe code a website, there is a point where it looks done. The pages look right, the buttons are there, and you happily show it to someone. Let's take a look at what is behind it. If I fill in this contact form and hit send, it opens up my email app. There is no form behind it at all. Most visitors will close that window and never get in touch. Now, look at the address bar. This is localhost. It only exists on my machine, and nobody else can open it. Getting a site live onto a server with a real address is a job of its own, and plenty of people do not realise it is there until they try and send someone the link. There is also nowhere to edit the content without going back to the agent, and nothing behind it is storing anything. Being done is everything underneath. My site is hosted on Vercel. There is a content management system called Payload so I can edit pages without touching the code, and a Postgres database behind it. None of that shows up in a screenshot, and a site that only looks done has none of it. Then there is what happens after launch when someone else starts adding pages. This file, agents.md, records every decision we made, and every new Claude session reads it first. On top of that, I built a design system skill so that any new page follows the same design whoever builds it. Remember that founder that moves on? This is how the site stays theirs once someone else is running it. A question I get asked all the time is how to put a site in other languages without undoing all that SEO work. That is what Weglot do. You set everything up from the dashboard with no code, and it translates your pages and you can edit any translation before it goes live. And once live, your content is always up-to-date and in every language. Each language gets its own URL, so every version could be indexed by search engines. Translate your website right now with Weglot. Links for everything will be down below in the description. Thanks again for sponsoring this video. Let's take a look at the feature that everybody asks about. There is a bar at the bottom of every page. Ask it a question and it answers from the site's own content with a link to the page it used. Everyone wants one of these. Here is what nobody tells you when you ask for one. Every question someone types costs you money. The search data has to live somewhere and then a bot finds it. It can ask you 10,000 questions overnight on your bill. I knew exactly how this was put together and what it would cost before I asked for it. Every model goes through one service, OpenRouter, so I can switch to a cheaper one with one setting. The search data sits in the database the site already uses, so there is no second service to pay for, and it gets re-scanned whenever the content changes. Questions only go to providers that do not keep them. There is a bot check and each conversation stops at 30 messages. So far, it has cost me nothing a month. Honestly, that is partly because not many people use it yet, but if it takes off, the bill goes up with it, which is why the limits were there from day one. If you think a feature sounds cool, ask for it and click accept on everything that AI agent suggests, you can end up with a monthly bill for something you didn't know cost anything at all. Building it costs money, too. The whole site used 274.45m tokens. At API rates, that is $125.65, so not too bad for a full website. A vague prompt gets you something generic, then an hour of no, not like that, and every round goes back through the model. A clear brief costs less because you go around fewer times. 20 years doesn't mean I type faster. It means I know what to say the first time. So, what is really the gotcha here? Everyone arguing about whether AI websites look like slop is arguing about the wrong thing. How it looks isn't the problem. Whether anything can read it is. Let's put both sides through a test that takes 10 seconds. Right click, choose inspect, press command shift P, and type JavaScript, and choose disable JavaScript. Now reload the page. It is gone. A lot of vibe coded sites are built with React in a way that sends your browser an empty page, then builds everything in it with JavaScript. Switch JavaScript off, and there is nothing left. Here is mine with JavaScript switched off. Everything is still there because the server still builds each page on top of it before it is sent. Why does that matter if everyone's browser runs JavaScript? Because not everything reading your website is a browser. Google can run JavaScript, so it gets there eventually. The crawlers behind ChatGPT and Claude cannot. We this site looked at hundreds of millions of their visits and found none of the major AI crawlers run JavaScript. When someone asks ChatGPT for a business like yours, your website is an empty page to it. If yours comes up blank, you're not careless. The agent built what you asked for, and nobody asked it this. Tell it you want every page rendered on the server, so that content is there before any JavaScript runs. It's these details, learnt through experience, that someone vibe coding a website won't have a clue about. And they could end up getting themselves into trouble once they scale. Knowing what to ask for gets you most of the way. You still have to go and look. This website took very little time at all. It took me 20 years of honing my craft to know what to say in my prompts, what bugs to look out for, and what to get right. Understanding what a website can do and how it's built is what stops you getting into trouble and running up huge bills, or deleting your database. My genuine honest recommendation is this. If you're starting a company, vibe code your first website. Before it goes in front of customers, get someone who knows how websites are built to look at it, or learn the things in this video for yourself. It took me 20 years to build this AI generated site. I am so thankful for Weglot for sponsoring this video. If you want to know how to get into a genetic coding coming from Webflow, that's in the next video. It's on screen now. Links to everything will be down below. Like, subscribe if you haven't already. Until next time, keep on vibing.

It took me 20 years to build this AI Slop site | Samuel Gregory