Zum Hauptinhalt springen
3. November 202610:25

Ich habe 20 Jahre gebraucht, um diese „AI Slop“-Website aufzubauen.

Von Samuel Gregory

Über dieses Video

Ihre brandneue KI-Website ist für Google und ChatGPT wahrscheinlich eine Geisterstadt. In diesem Video verrate ich Ihnen, warum das „Vibe-Coding“ Ihrer Website zwar toll aussehen mag, für die Bots, auf die es wirklich ankommt, jedoch unsichtbar sein könnte. Ich gehe meinen Prozess durch, wie ich mit Claude in nur zwei Tagen eine professionelle Website erstelle, und hebe dabei die enormen Unterschiede zwischen einem „One-Prompt-Wunder“ und einem echten Designsystem hervor. Die wichtigsten Erkenntnisse: – Der 10-Sekunden-Test, um festzustellen, ob Ihre Website für KI-Crawler unsichtbar ist. – Warum generische KI-Texte wie „digitale Erlebnisse transformieren“ Ihre Konversionsrate ruinieren. – Wie Sie eine überraschende Rechnung über 1.000 Dollar für „coole“ KI-Funktionen vermeiden. - Die 4 Fragen, die jede Website beantworten muss: Was Sie tun, was es kostet, wer Sie sind und was Sie bisher geleistet haben. - Warum serverseitiges Rendering der unverzichtbare Schritt für 2024 ist.

Warum Ihre brandneue KI-Website für Google und ChatGPT wahrscheinlich eine Geisterstadt ist

Die meisten Gründer erstellen derzeit digitale Fassaden, die zwar schön aussehen, aber wie leere Hüllen funktionieren. Ich habe kürzlich mit Claude eine Website erstellt: Ich habe am Freitag um 9:00 Uhr angefangen und am Samstagnachmittag war sie bereits online. Dazu waren 31 Commits und 270 Dateien erforderlich. Auch wenn die Geschwindigkeit der KI unglaublich ist, gibt es eine riesige Falle, in die die meisten Menschen tappen.

Die Illusion von „Fertig“

Wenn man eine Website programmiert, kommt irgendwann der Punkt, an dem sie fertig aussieht. Die Schaltflächen sind da, die Farben leuchten, und das Layout ist ansprechend. Doch „fertig aussehen“ ist nicht dasselbe wie „fertig sein“. Einer auf die Schnelle erstellten Website fehlt oft die unverzichtbare Infrastruktur, die ein echtes Unternehmen benötigt:

  1. Infrastruktur: Mein Build nutzt Vercel als Hosting-Anbieter, Payload CMS für die Inhaltsverwaltung und eine Postgres-Datenbank.
  2. Designsysteme: Anstelle von willkürlich gewählten Schriftarten haben wir mit Claude ein einheitliches Designsystem entwickelt, bei dem auf jeder Seite einheitliche Abstände und eine einheitliche Typografie zum Einsatz kommen.
  3. Die menschliche Note: Von KI verfasste Texte sind oft sehr allgemein gehalten. Sie enthalten Formulierungen wie „Kundenbeziehungen neu gestalten“, die absolut nichts darüber aussagen, was Sie tatsächlich tun.

Der 10-Sekunden-Unsichtbarkeitstest

Hier liegt das größte Problem: Viele KI-generierte Websites sind mit React so aufgebaut, dass JavaScript erforderlich ist, um die Inhalte überhaupt anzuzeigen. Das ist eine Katastrophe für SEO und die Erfassung durch KI.

Wenn Sie mit der rechten Maustaste klicken, den Quellcode anzeigen und JavaScript auf Ihrer Website deaktivieren, verschwindet diese dann? Falls ja, können die Crawler hinter ChatGPT und Claude Ihre Website nicht auslesen. Sie führen kein JavaScript aus. Für sie ist Ihre Website eine leere Seite.

Die wahren Kosten von „coolen“ Funktionen

Jeder möchte einen KI-Chatbot auf seiner Website haben. Ich habe einen entwickelt, der Fragen auf der Grundlage meiner Website-Inhalte beantwortet, dabei habe ich mich jedoch an strenge Grenzen gehalten. Ohne Bot-Prüfungen und Nachrichtenbeschränkungen könnte ein einziger Bot über Nacht 10.000 Fragen stellen – auf Ihre Kosten.

Ich habe 125,65 Dollar für API-Token ausgegeben, um diese Website zu erstellen. Das ist günstig für eine professionelle Umsetzung, aber ein vager Auftrag kostet Sie viel mehr in Form von verschwendeten Token und Überarbeitungen nach dem Motto „Nein, so nicht“.

Erfahrung zählt

Ich habe 20 Jahre gebraucht, um genau zu wissen, was ich Claude fragen muss. Zu wissen, wie man serverseitiges Rendering anfordert oder wie man eine Datenbank strukturiert, macht den Unterschied zwischen einem Spielzeug und einem Werkzeug aus.

Wenn Sie ein Unternehmen gründen, legen Sie ruhig los und programmieren Sie Ihre erste Website nach Gefühl. Bevor Sie sie jedoch an Kunden weitergeben, sollten Sie sicherstellen, dass jemand, der sich damit auskennt, einen Blick unter die Haube wirft.

Bleib weiter in Stimmung.

Transkript▾

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.