In letzter Zeit werde ich immer häufiger gefragt: „Du, wie sieht das eigentlich aktuell aus mit KI-Tools zur Erstellung von Websites? Kann ich damit als Anfänger überhaupt noch Fuß fassen oder direkt eigene Projekte umsetzen?“
Die kurze Antwort: Ja, aber 😉 Die technologische Einstiegshürde war noch nie so niedrig. Vor allem ein Tool hat in der Entwickler- und Design-Szene für extremes Aufsehen gesorgt: Claude Code von Anthropic.
Weil mich so viele Nachrichten dazu erreicht haben, dachte ich mir, ich schreibe dir hier mal einen knackigen, ehrlichen Leitfaden zusammen. Wir schauen uns an, wie du die offizielle Desktop-App nutzt, um extrem schnell funktionierende Webseiten direkt auf deinem Rechner zu bauen – aber vor allem auch, warum KI eben kein Freifahrtschein für blindes Klicken ist, wenn du als Webdesigner oder Online-Unternehmer Ergebnisse auf Agentur-Niveau liefern willst.
Was ist Claude Code überhaupt?
Die meisten kennen Claude als klassischen Chat im Browser, wo man Code-Schnipsel hin und her kopiert. Das ist auf Dauer extrem fehleranfällig und unpraktisch.
Claude Code ist anders. Es ist eine spezialisierte Umgebung, die direkt Zugriff auf ein lokales Verzeichnis auf deinem Computer hat. Anstatt im Browser zu chatten, arbeitet die KI wie ein virtueller Assistent direkt auf deiner Festplatte: Sie liest deine Projektdateien, schreibt sauberen Code, korrigiert Bugs und kann das Projekt sogar testweise für dich ausführen. Das Ganze läuft komplett isoliert in dem Ordner, den du freigibst – dein restliches System bleibt also absolut sicher.
Schritt-für-Schritt: Deine erste Website mit Claude Code
Der gesamte Prozess ist erstaunlich geradlinig und lässt sich auch ohne Programmier-Vorkenntnisse meistern. So legst du los:
Schritt 1: Claude Desktop installieren
Zuerst brauchst du das richtige Werkzeug. Gehe auf die offizielle Website von Anthropic und lade dir die Claude Desktop App (verfügbar für Mac und Windows) herunter. Melde dich dort mit deinem Claude Account an.
Schritt 2: Den „Code“-Reiter öffnen & Projektordner wählen
Wenn du die Desktop-App öffnest, siehst du das gewohnte Chat-Fenster. Für Programmierprojekte wechselst du links in der Seitenleiste oder im Menü auf den Reiter „Code“.
Klicke auf den Button „Select Folder“ (Ordner auswählen). Erstelle auf deiner Festplatte einen neuen, leeren Ordner für dein Projekt (z.B. meine-erste-website) und wähle ihn aus. Ab jetzt weiß Claude genau, wo die Dateien landen sollen.
Schritt 3: Den ersten Prompt schreiben
Du musst kein HTML oder CSS beherrschen. Sprich mit Claude wie mit einem menschlichen Junior-Entwickler. Tippe einfach in das Textfeld:
„Erstelle mir eine moderne, cleane und responsive Portfolio-Website für ein Coaching-Business. Ich brauche eine Hero-Section mit einer starken Headline, ein Grid mit drei Leistungs-Boxen und ein Kontaktformular im Footer. Nutze dafür bitte Tailwind CSS über ein CDN, damit das Design direkt professionell aussieht.“
Klicke auf Enter. Du wirst sehen, wie Claude automatisch die Dateien (wie eine index.html) in deinem lokalen Ordner anlegt und mit Code befüllt.
Schritt 4: Die Live-Vorschau starten
Sobald Claude fertig ist, siehst du oben im Interface den Button „Preview“ (Vorschau). Klicke darauf. Claude startet im Hintergrund einen kleinen lokalen Server und öffnet die Website direkt in deinem Webbrowser. Du siehst sofort das echte, interaktive Ergebnis.
Schritt 5: Anpassungen per Chat diktieren
Dir gefällt die Schriftart noch nicht oder du möchtest eine zusätzliche Sektion? Du musst den Code nicht selbst anfassen. Schreib einfach zurück in den Chat:
„Das sieht super aus. Füge bitte noch einen flüssigen Dark Mode hinzu und mach den Hintergrund der Hero-Section dunkelgrau.“ Claude editiert die bestehenden Dateien in Sekundenschnelle und dein Browser-Fenster aktualisiert sich automatisch.
Schritt 6: Die Website live schalten (Deployment)
Wenn alles perfekt ist, bittest du Claude: „Bereite das Projekt für den Upload vor und verbinde es mit meinem GitHub-Account.“ Sobald der Code auf GitHub liegt, kannst du ihn mit kostenlosen Hosting-Plattformen wie Vercel oder Cloudflare Pages verknüpfen. Aber achte auf die Nutzungsrichtlinien! Bei den meisten Anbietern darfst du im kostenlosen Plan keine kommerziellen Websites hosten. Aber zum Testen und probieren reicht der kostenlose Plan erstmal. Deine Website ist innerhalb einer Minute weltweit unter einer echten URL erreichbar. Jedes Mal, wenn du Claude künftig eine Änderung diktierst und den Code aktualisierst, geht das Update vollautomatisch live.
PRO Tipp:
Du kannst deine erstellte websites auch z.B. bei Hostinger* in deinem Webhosting Paket uploaden. Hostinger bietet auch node.js Uploads an, so dass die Website automatisch hochgeladen und veröffentlicht wird, wenn du deinen geänderten Code bei Github pushst.
Der Profi-Hintertür: Ergebnisse maximieren mit Custom Skills
Wenn du Claude Code out-of-the-box nutzt, sind die Ergebnisse solide. Als Webdesigner oder Agenturinhaber reicht „solide“ aber meistens nicht aus. Hier kommen Custom Skills ins Spiel.
Du kannst Claude Code mit spezifischen Befehlen und wiederverwendbaren Workflows ausstatten. Damit bringst du der KI quasi bei, sich an exakte Design-Systeme zu halten, automatisierte SEO-Audits beim Erstellen des Codes durchzuführen oder fertige Seiten direkt fehlerfrei zu deployen.
Wichtiger Hinweis: Wenn du wissen willst, wie du das Maximum aus der KI herausholst: Eine genaue Liste und Anleitung, wie du solche erweiterten Skills installierst und konfigurierst, habe ich dir in einem separaten Beitrag zusammengefasst. Schau unbedingt mal rein: 8 Top Skills für Claude Code
Die nackte Wahrheit: Warum zwei Prompts keine Top-Website machen
Jetzt kommt der Punkt, der mir als Unternehmer und Geschäftsführer einer Agentur extrem wichtig ist. Wenn du Social-Media-Videos siehst, in denen behauptet wird, dass du mit zwei einfachen Sätzen eine High-End-Website ausspuckst, mit der du sofort fünfstellige Kundenaufträge abschließt: Vergiss es. Das ist Wunschdenken.
Die KI ist ein unfassbar mächtiges, beschleunigendes Werkzeug – aber sie bleibt ein Werkzeug. Der beste Hammer baut auch kein Haus von allein, wenn der Architekt dahinter keinen Plan hat.
Welche Skills du heute als Webdesigner wirklich brauchst
Wenn das Schreiben des reinen Codes durch Tools wie Claude Code demokratisiert wird, verschiebt sich dein Wert als Webdesigner auf eine völlig neue Ebene. Du musst die Fäden im Hintergrund strategisch in der Hand halten. Das bedeutet konkret:
- Technisches Grundwissen & Code-Verständnis: Du musst im Kern verstehen, was die KI da eigentlich baut. Wenn du die Basics von Web-Architekturen, sauberer Semantik, Hosting und Performance nicht kennst, wirst du den generierten Code weder effektiv kontrollieren noch bei komplexeren Kundenwünschen debuggen können.
- Branchen- und Zielgruppen-Know-how: Eine Website bringt einem Business rein gar nichts, wenn sie zwar nett aussieht, aber komplett am Kunden vorbeigeht. Du musst verstehen, wie die Branche deines Kunden funktioniert und was deren Zielgruppe psychologisch triggert.
- User Experience (UX) & Conversion-Design: Wo muss der Call-to-Action platziert werden? Wie lang darf das Formular sein, damit der Nutzer nicht abbricht? Wie lenke ich den Blick des Besuchers? Das sind rein strategische Entscheidungen, die du im Kopf treffen und der KI gezielt vorgeben musst.
- Konzepterstellung & Branding: Du bist der kreative Kopf, der die Markenidentität des Kunden erfasst und strukturiert übersetzt. Die KI füllt das Gerüst – aber das Fundament gießt du.
Qualität erfordert immer noch Detailarbeit
Claude Code nimmt uns die lästige, repetitive Arbeit des Tippens ab. Es sorgt dafür, dass wir Projekte in Rekordzeit prototypisieren und aufsetzen können – egal von wo aus wir arbeiten.
Aber das feine Tuning, die strategische Ausrichtung, das tiefere Markenverständnis und die Liebe zum Detail – das ist es, wofür Kunden am Ende des Tages gutes Geld bezahlen. Nutze die KI, um deine PS auf die Straße zu bringen, aber bleibe immer der Dirigent deines Projekts.
Wie stehst du zu dem Thema? Siehst du die KI als Chance für deinen Einstieg im Webdesign oder hast du Bedenken wegen der Qualität? Lass uns unten in den Kommentaren darüber diskutieren!
