Wie diese Website entstanden ist

Ursprünglich sollte es nur ein kleiner Test sein - ich wollte herausfinden, ob Claude eine funktionierende Website nach einem bestimmten Vorbild bauen kann. Es stellte sich heraus, dass es dabei ziemlich gut war, also habe ich weitergemacht, bis daraus diese ganze Website entstanden ist.

Das Gesamterscheinungsbild und die Struktur sind von der Website michalvojtyla.sk inspiriert - übernommen habe ich nur die allgemeine Design-Richtung, nicht den konkreten Inhalt, die Texte oder den Code. Michal hat mir die schriftliche Zustimmung gegeben, seine Website als Vorbild zu verwenden.

Anstatt Code zu schreiben, habe ich Claude im Chat nach und nach vorgegeben, was die Website enthalten und wie sie sich verhalten soll. Claude hat den Code direkt generiert und angepasst - HTML, CSS und JavaScript - und ich konnte mir jede Version sofort ansehen und testen.

Jede weitere Anpassung - einen neuen Text, einen neuen Abschnitt, eine Fehlerkorrektur, eine rechtliche Änderung - habe ich als Nachricht im Chat geschickt, und Claude hat die entsprechenden Dateien direkt bearbeitet. Vor größeren Änderungen führte Claude eine automatisierte Prüfung durch (HTML-Struktur, defekte Links, doppelte IDs), um Fehler zu vermeiden.

Ohne Backend. Statisches HTML, CSS und JavaScript - kein CMS, keine Datenbank.

Fünf Sprachen (SK/EN/CS/DE/PL) mit einem Umschalter, der sich beim Wechsel die aktuelle Seite und den gewählten Farbmodus merkt. Jede Sprache hat ihre eigene URL (z. B. /en, /de) über eine serverseitige Weiterleitung, nicht nur einen Parameter in der Adresse.

Dunkler/heller Modus, synchronisiert über die gesamte Website und alle Sprachen hinweg.

Volltextsuche über die gesamte Website hinweg, separat für jede Sprache, die direkt im Browser ohne Server funktioniert.

SEO- und GEO-Optimierung. Sprachalternativen (hreflang) auf jeder Seite, eine sitemap.xml, strukturierte Daten (JSON-LD) für Suchmaschinen und KI-Assistenten, eine eigene llms.txt-Datei sowie gebrandete Vorschaubilder zum Teilen in sozialen Netzwerken für jede Sprache.

Kontaktformular über FormSubmit.co - versendet E-Mails, ohne dass ein eigenes Backend nötig ist.

Barrierefreiheit. Skip-Link, semantisches HTML, aria-Labels an Bedienelementen, Tastaturnavigation in den Suchergebnissen, sichtbare Fokuszustände, beschreibende Alt-Texte.

Datenschutz und Recht. Cookie-Banner, AGB, DSGVO-Klauseln, ausdrückliche Einwilligung vor der Aufzeichnung und KI-Transkription von Gesprächen (Fireflies), keine externen Schriftarten und kein CDN - die Website lädt keine Schriftdateien von fremden Servern, sodass der Browser des Besuchers seine IP-Adresse nirgendwohin sendet.

Performance. Caching statischer Dateien und Komprimierung (gzip/deflate) direkt auf dem Server konfiguriert, keine externen Bibliotheken oder Frameworks, die das Laden verlangsamen.

Die Website läuft bei Websupport.sk, dem größten slowakischen Anbieter für Domains und Hosting (Teil der Loopia Group, die dem nordischen Investmentfonds Axcel gehört). Da es sich um rein statische Dateien handelt, würde sie auch auf jedem anderen Hosting funktionieren, einschließlich kostenloser Optionen wie GitHub Pages oder Netlify.

Die Website umfasst 110 HTML-Seiten - 22 einzigartige Seiten in 5 Sprachversionen (SK/EN/CS/DE/PL). Die Gesamtgröße beträgt knapp 4,4 MB, inklusive Foto, zwei PDF-Verträgen, gebrandeten Vorschaubildern für jede Sprache und dem Suchindex (fast 1 MB) für alle fünf Sprachversionen.

Ich würde mir mehrere Websites aussuchen, die mir gefallen, und Claude mehrere Entwürfe generieren lassen. Aus diesen würde ich dann einen auswählen.

Ein paar Stunden. Realistisch gesehen hätte es auch viel schneller gehen können, aber es steckt auch die Zeit darin, in der ich Texte ergänzt und verfeinert, Kleinigkeiten eingestellt und mich damit beschäftigt habe, was alles nötig ist, damit es richtig funktioniert.

Die Website ist nicht ein für alle Mal fertig - ich feile laufend daran: neue Abschnitte, Texte, rechtliche Details und kleinere Design-Anpassungen. Alles auf die gleiche Weise - über ein Gespräch mit Claude, ohne manuelles Programmieren. Die gesamte Änderungshistorie finden Sie im öffentlichen Changelog.

Das Vorgehen, mit dem ich diese Website baue, habe ich auch in einen herunterladbaren Claude Skill gepackt - damit lässt sich Schritt für Schritt eine ähnliche Website von Grund auf erstellen. Wenn ich auf der Live-Website einen echten Fehler finde und behebe (zum Beispiel in der Ausrichtung der Kopfzeile), übertrage ich dieselbe Korrektur auch in diesen Skill, damit sie sich in keiner weiteren mit seiner Hilfe erstellten Website wiederholt.

Das Vorgehen und den technischen Ansatz können Sie sich gerne als Inspiration nehmen - das ist keine exklusive Idee von mir. Den konkreten Inhalt (meinen Namen, das Foto, die Referenzen, die Preise) können Sie natürlich nicht kopieren, das gehört mir. Und wenn Sie sich vom Design einer bestimmten Website inspirieren lassen, prüfen Sie, ob es sich nicht um eine direkte Kopie fremder Arbeit handelt - bei mir geschah das mit Michals schriftlicher Zustimmung, bei Ihnen sollte es ähnlich sein.