Vielleicht hast du eines dieser Videos gesehen. Jemand tippt zwei Sätze in ein Terminal und vierzig Minuten später steht eine fertige Webseite im Netz. Kein Designer, keine Agentur, keine einzige Zeile Code von Hand. Das ist kein Trick. So baue ich bei Grabosch fast jeden Tag und so ist auch die Seite entstanden, auf der du gerade liest.
Was die Videos weglassen: schnell live und richtig gut sind zwei verschiedene Dinge. Eine Seite, die nach einer Stunde online ist, sieht modern aus. Ob sie dir auch Anfragen bringt, entscheidet sich woanders. Genau darum geht es hier. Ich zeige dir den kompletten Weg, von der leeren Idee bis zur eigenen Domain. Und an den Stellen, an denen die meisten Anleitungen aufhören, machen wir weiter.
Du brauchst keine Programmierkenntnisse. Du brauchst eine klare Vorstellung davon, was deine Seite leisten soll. Und etwa einen Nachmittag Zeit.
Was du dafür brauchst
Die Liste ist kürzer, als du denkst.
- Ein Claude-Abo. Claude Code, das Werkzeug, mit dem wir bauen, ist schon im Pro-Abo enthalten (rund 20 Dollar im Monat). Wer den ganzen Tag damit arbeitet, nimmt einen der Max-Pläne, aber für deine erste Webseite reicht Pro locker.
- Ein Terminal oder die Desktop-App. Claude Code läuft im Terminal deines Rechners. Wenn dich das Wort schon nervös macht: Es gibt Claude Code auch als Desktop-App und im Browser unter claude.ai/code. Dasselbe Werkzeug, nur mit Fenster statt schwarzem Bildschirm.
- Einen kostenlosen GitHub-Account. Hier liegt dein Code sicher und versioniert. Mehr dazu weiter unten.
- Einen Vercel-Account. Vercel schaltet deine Seite live und vergibt eine echte Adresse.
- Eine Domain. Deinen Wunschnamen, etwa über die übliche Registrierung. Das kostet ein paar Euro im Jahr.
Das Einzige, was wirklich zählt und auf keiner Einkaufsliste steht: Klarheit. Du musst wissen, für wen die Seite ist und was ein Besucher danach tun soll. Claude übernimmt das Tippen. Die Richtung gibst du vor.
Schritt 1: Claude Code installieren und starten
Auf dem Mac, unter Linux oder im Windows-Subsystem reicht eine Zeile im Terminal:
curl -fsSL https://claude.ai/install.sh | bash
Wer lieber den klassischen Weg über Node.js geht (Node 18 oder neuer vorausgesetzt), nutzt:
npm install -g @anthropic-ai/claude-code
Danach wechselst du in einen leeren Ordner für dein Projekt und startest mit dem Befehl claude. Beim ersten Mal meldest du dich über den Browser bei deinem Konto an. Das war die ganze Einrichtung.
Ab jetzt redest du einfach mit Claude. In normalem Deutsch. Es liest und schreibt die Dateien in diesem Ordner, führt Befehle aus und erklärt dir, was es tut. Du musst nichts davon selbst können. Du musst nur sagen, was du willst.
Schritt 2: Das Briefing, das über gut oder mittelmäßig entscheidet
Hier trennt sich die Spreu vom Weizen. Und es hat nichts mit Technik zu tun.
Wenn du Claude bittest, „eine moderne Webseite für mein Unternehmen" zu bauen, bekommst du genau das: irgendeine moderne Webseite. Hübsch, aber austauschbar. Sie weiß ja nicht, für wen sie spricht.
Ein gutes Briefing hat vier Teile. Was, für wen, wie und womit.
- Was ist es für eine Seite? Eine Landingpage für einen Service, eine Seite mit mehreren Unterseiten, ein Portfolio.
- Für wen? Deine Zielgruppe in einem Satz. Je konkreter, desto besser. „Geschäftsführer von Personaldienstleistern, die mehr Anfragen wollen" schlägt „Unternehmen" um Längen.
- Wie soll sie wirken? Ruhig und seriös, verspielt, technisch. Nenne ein, zwei Seiten, die du gut findest, als Anker.
- Womit? Welche Abschnitte brauchst du konkret. Ein Hero mit klarer Aussage, drei Leistungsblöcke, Referenzen, ein Kontaktbereich.
Ein Beispiel, wie das in der Praxis klingt:
Bau mir eine Landingpage für meine Personalberatung. Zielgruppe sind Geschäftsführer mittelständischer Pflegeeinrichtungen, die offene Stellen seit Monaten nicht besetzt bekommen. Der Ton soll ruhig und vertrauenswürdig sein, nicht marktschreierisch. Ich brauche einen Hero mit einem klaren Nutzenversprechen und einem Button, einen Abschnitt mit drei typischen Problemen, einen Ablauf in drei Schritten und einen Kontaktbereich. Nutze sauberes, modernes Design und achte auf mobile Darstellung.
Wenn du diese vier Punkte gleich am Anfang mitgibst, sparst du dir drei bis fünf Korrekturrunden. Und das Ergebnis trifft beim ersten Wurf schon ziemlich genau.
Schritt 3: Lokal bauen und in kleinen Schritten nachschärfen
Sobald Claude losgelegt hat, legt es die Dateien an und startet auf Wunsch eine Vorschau auf deinem eigenen Rechner. Du öffnest eine Adresse wie localhost:3000 im Browser und siehst die echte, klickbare Seite. Noch sieht das niemand außer dir.
Jetzt kommt der Teil, der überraschend viel Spaß macht. Du schaust dir die Seite an und sagst Claude in ganz normalen Worten, was anders soll.
Der Hero wirkt auf dem Handy zu eng. Gib ihm oben und unten mehr Luft.
Die drei Problempunkte sollen konkreter klingen. Schreib sie als kurze, bildhafte Sätze.
Mach den Button auffälliger und schreib „Kostenloses Erstgespräch" rein.
Claude ändert die richtige Datei und der Browser aktualisiert sich. Arbeite in kleinen Schritten und nimm jede Änderung im Browser ab, bevor du die nächste anstößt. So behältst du den Überblick und merkst sofort, wenn etwas in die falsche Richtung läuft.
Schritt 4: Was eine gute Webseite von einer schnellen unterscheidet
Bis hierhin hast du, was die meisten Anleitungen liefern: eine schicke Seite. Ob sie auch arbeitet, hängt an vier Dingen, die du aktiv einfordern musst. Claude baut nämlich erst mal nur das, was du anfragst. Bittest du nur um Optik, bekommst du Optik.
Eine Aussage, die in fünf Sekunden sitzt. Ein Besucher entscheidet in wenigen Augenblicken, ob er bleibt. Wenn dein Hero nicht sofort sagt, was du für wen tust, ist er weg. Verlang von Claude eine Headline, die das Ergebnis benennt, nicht deine Branche.
Ein einziger klarer nächster Schritt. Eine Seite, die fünf Dinge gleichzeitig will, bekommt nichts. Entscheide dich für die eine Handlung, die zählt, also das Erstgespräch, die Anfrage oder den Download. Bau dann alles darauf hin. Wenn der Traffic stimmt und trotzdem keine Anfragen kommen, liegt es fast immer an genau diesen Punkten und nicht an der Technik.
Vertrauen, das man sieht. Logos von Kunden, echte Zahlen, ein Gesicht statt eines Stockfotos. Sag Claude, wo das hin soll.
Auffindbarkeit von Anfang an. Eine schöne Seite, die niemand findet, ist eine teure Visitenkarte. Bitte Claude ausdrücklich um sauberes, semantisches HTML, sinnvolle Seitentitel und Meta-Beschreibungen, ein Vorschaubild für soziale Netzwerke und schnelle Ladezeiten. Das macht es zuverlässig, wenn du es benennst. Wie du dabei nicht nur an Google denkst, sondern auch daran, ob KI-Systeme dich überhaupt zitieren, habe ich in Findet ChatGPT dein Unternehmen? ausführlicher beschrieben.
Diese vier Punkte sind der eigentliche Unterschied zwischen „sieht nach was aus" und „bringt was".
Schritt 5: Deinen Code auf GitHub sichern
Bis jetzt liegt alles nur auf deinem Rechner. Geht der Laptop kaputt, ist die Arbeit weg. Deshalb sicherst du deinen Code auf GitHub. Stell es dir wie eine Versionsverwaltung mit Backup vor: Jeder Stand wird festgehalten, du kannst jederzeit zu einer früheren Version zurück und nichts geht verloren.
Das Schöne ist: Du musst GitHub nicht selbst bedienen. Wenn das Kommandozeilen-Werkzeug von GitHub installiert ist, übernimmt Claude den ganzen Vorgang für dich. Du sagst einfach:
Leg ein neues GitHub-Repository an und lade das Projekt hoch.
Damit ist auch ein wichtiger Punkt erledigt, der bei Baukästen oft untergeht: Der Code gehört dir. Komplett. Du kannst ihn weitergeben, auf einen anderen Anbieter umziehen oder später einen Entwickler draufschauen lassen. Kein Anbieter sitzt zwischen dir und deiner Seite. Dieses Prinzip, deine Webseite wirklich zu besitzen statt sie zu mieten, ist einer der Gründe, warum wir bei Grabosch so arbeiten.
Schritt 6: Mit Vercel live schalten und die Domain verbinden
Jetzt geht deine Seite ins Netz. Vercel verbindet sich mit deinem GitHub-Repository, baut die Seite und stellt sie unter einer Adresse bereit. Du importierst dein Repository einmal. Ab da gilt eine angenehme Regel: Jedes Mal, wenn du etwas änderst und den neuen Stand hochlädst, geht das Update automatisch live. Du arbeitest also einfach weiter mit Claude und deine Seite aktualisiert sich von selbst.
Zum Schluss verbindest du deine eigene Domain. In den Projekteinstellungen bei Vercel trägst du deinen Domainnamen ein und folgst der Anleitung. Wenige Minuten später läuft deine Seite unter deiner echten Adresse, mit Verschlüsselung und allem, was dazugehört.
Ein ehrlicher Hinweis, den die meisten Tutorials unterschlagen: Der kostenlose Hobby-Plan von Vercel ist laut Nutzungsbedingungen ausdrücklich nur für private, nicht kommerzielle Projekte gedacht. Sobald deine Seite geschäftlich ist, also für dein Unternehmen wirbt oder Anfragen einsammelt, brauchst du den Pro-Plan für rund 20 Dollar im Monat. Das ist kein Beinbruch, aber du solltest es vorher wissen und nicht erst, wenn eine Mail von Vercel kommt.
Wo Claude an Grenzen stößt, ganz ehrlich
Ich baue jeden Tag mit Claude und ich liebe das Werkzeug. Trotzdem wäre es unehrlich, dir zu verschweigen, wo es eng wird.
Eine mit Claude gebaute Seite ist erst mal statischer Code. Es gibt kein Dashboard, in dem du mal eben einen Text änderst oder ein Bild austauschst. Jede Änderung läuft über einen neuen Dialog mit Claude. Für eine Seite, die du einmal baust und dann ein halbes Jahr stehen lässt, ist das völlig okay. Wenn du aber regelmäßig Beiträge veröffentlichst oder ständig Inhalte pflegst, willst du wahrscheinlich ein System, in dem du selbst einfach klicken kannst. Wann sich dafür eine Plattform wie Webflow lohnt, habe ich in Lohnt sich Webflow für deine Agentur? durchgerechnet.
Und dann ist da die Sache, die kein Werkzeug der Welt löst. Claude schreibt fehlerfreien Code in Sekunden. Aber es weiß nicht, was deine Kunden nachts wachhält, wie deine Branche tickt und mit welchem Satz im Hero du wirklich Vertrauen gewinnst. Eine Seite, die Kunden bringt, entsteht nicht aus einem guten Prompt allein. Sie entsteht aus einer klaren Positionierung, einer durchdachten Nutzerführung und der richtigen Reihenfolge der Argumente. Das ist Strategie und keine Technik. Und genau diese Schicht ist die eigentliche Arbeit. Sie verschwindet nicht, nur weil der Code jetzt in Sekunden steht.
Fazit: Das Werkzeug ist nicht mehr die Hürde
Vor zwei Jahren war eine eigene, sauber gebaute Webseite eine Frage von Budget und Wartezeit. Heute kann jeder, der einen klaren Kopf und einen Nachmittag mitbringt, eine richtig gute Seite bauen, ganz ohne zu programmieren. Die Technik ist nicht mehr die Hürde. Die Klarheit ist es.
Fang klein an. Bau eine einzelne Seite, gib dir Mühe beim Briefing und schau, wie weit du kommst. Du wirst überrascht sein. Die Technik steht dir längst nicht mehr im Weg. Was die Seite zum Vertriebskanal macht, ist die Klarheit, die du selbst mitbringst.
