Wenn 2026 noch jemand eine Website ohne KI baut, kann ich auch nicht helfen. In diesem Tutorial zeige ich dir Schritt für Schritt, wie du in 60 Minuten eine komplette, professionelle Website erstellst. Von Null bis online. Mit echtem Design, Impressum, Datenschutz und interaktiven Elementen.
Was du am Ende hast
- Eine moderne, responsive Website im professionellen Design
- Impressum und Datenschutzerklärung (rechtlich notwendig)
- Light Mode und Dark Mode
- Interaktive Elemente (Quiz, Terminal, Animationen)
- SEO-Grundeinstellungen
- Eigene Domain möglich
Phase 1: Designsprache definieren (10 Min)
Bevor du Code generierst, brauchst du Klarheit über drei Dinge:
1. Deine Werte. Was macht dich aus? Konkretheit, Proaktivität, Authentizität? Deine Werte bestimmen den Designstil. Wer direkt und stark kommuniziert, braucht ein anderes Design als jemand, der beratend und ruhig auftritt.
2. Deine Produkte. Was verkaufst du? Schreib für jedes Produkt: Was ist es, was ist der USP, wer ist die Zielgruppe, was kostet es. Die KI braucht diesen Kontext.
3. Dein Stil. Schau dir Inspiration an. SaasPo zeigt moderne SaaS-Websites. Webdesign Trends 2026 googlen. Entscheide dich für einen Stil: Brutalism, Minimalistisch, Technologie-affin, Clean.
Phase 2: Website generieren mit Claude (20 Min)
Gib Claude alle Informationen: Werte, Produkte, Stil, Ziel der Website. Der Trick: Lass zuerst nur den Hero-Bereich in drei verschiedenen Stilen generieren. So siehst du schnell, welche Richtung passt, ohne den ganzen Code neu zu bauen.
Profi-Tipp: Lade ein YouTube-Transkript eines guten Webdesign-Videos hoch und sag der KI: "Optimiere den Aufbau gemäß dieses Transkripts." Die KI extrahiert die wichtigsten Design-Prinzipien automatisch.
Wenn dir ein Stil gefällt, sag: "Erstelle die komplette Website im Stil V1." Claude kennt jetzt den Stil, die Texte und das Layout.
Phase 3: Mit Claude Code verfeinern (15 Min)
Hier wird es spannend. Claude Code kann direkt in deiner Website-Datei arbeiten. Du sagst:
- "Entferne den Download-Bereich"
- "Baue ein Quiz ein, das den Kunden zum Erstgespräch führt"
- "Füge Light Mode und Dark Mode Switcher hinzu"
- "Mach das Terminal-Element interaktiv mit Easter Eggs"
Claude Code ändert nicht die ganze Datei, sondern nur die betroffenen Stellen. Das ist der Vorteil gegenüber Claude im Browser.
Phase 4: Online bringen mit Spotlight (10 Min)
Spotlight ist unser CMS, das speziell für KI-generierte Websites gebaut ist. So geht's:
- Code kopieren und in Spotlight unter "Startseite" einfügen
- Impressum und Datenschutz als eigene Seiten anlegen (auch von der KI generiert)
- Domain verbinden (eigene Domain oder Subdomain)
- SEO-Einstellungen setzen: Metatitel, Beschreibung, Focus Keyword
- Speichern und live
Spotlight kostet 17 Euro im Monat. Unbegrenzte Seiten, eigene Domain, SSL, Cookie-Banner, alles inklusive.
Was im Video passiert
Im Video baue ich live eine komplette Agentur-Website für Scheurer Technologies. Inklusive:
- Drei verschiedene Design-Varianten im Vergleich
- Interaktives Terminal mit Easter-Egg-Befehlen (help, about, stack, matrix)
- Quiz das zum kostenlosen Erstgespräch führt
- Dark Mode / Light Mode Toggle
- Mobil-optimiertes Layout
- Impressum und Datenschutz
Alles in einem Take, 60 Minuten, von Null auf fertige Website.
Die Tools
- Claude (ab 15 Euro/Monat) für Design und Texte
- Claude Code für Code-Anpassungen
- Spotlight (17 Euro/Monat) für Hosting und CMS
- Cloudflare für günstige Domains
Es gibt kein Argument mehr, eine schlechte Website zu haben. In einer Stunde steht alles.
