Eine Website mit AI erstellen
Werkstattbericht koniarora.ch: Claude Design, Claude Code, Designsystem und Google
Eine Website mit AI zu erstellen, geht heute schneller als je zuvor. Ich habe koniarora.ch mit Claude Design und Claude Code gebaut, ohne Programmierer und ohne Figma. Hier zeige ich, wie, und wo die AI an ihre Grenzen kommt.
Leitfaden Website mit AI5 Schritte, 18 Seiten mit Prompts und ChecklisteGratis anfordern 
Inhalt11 Min. Lesezeit
- AI baut schnell, aber nicht von allein. Gestaltung, Texte und die Prüfung am Schluss bleiben Handarbeit.
- Eine Website braucht drei Rollen: Design, Entwicklung und Google. AI ersetzt keine davon. Sie verkürzt die Wege dazwischen.
- Mit Claude Design und Claude Code habe ich weder Figma noch Adobe XD gebraucht.
Ein Designer baut eine Website
Diese Website hat kein Programmierer gebaut. Ich bin Designer und unterrichte digitales Marketing.
Früher lief es so: Ich zeichnete einen Entwurf und gab ihn an Entwickler weiter. Dann wartete ich. Jede kleine Änderung wurde zu einem Auftrag, und bis eine Seite stimmte, vergingen Wochen.
Bei koniarora.ch habe ich mit Claude von Anthropic gearbeitet, vom ersten Entwurf bis zur Anmeldung bei Google. Hier steht, wie das ging, welche Werkzeuge ich genutzt habe und wo ich eingreifen musste.
Eine Website braucht drei Rollen
Eine Website braucht Design, Entwicklung und die Anbindung an Google. Fehlt eines davon, merkt man es spätestens nach ein paar Monaten.
| Rolle | Aufgabe | Wenn sie fehlt |
|---|---|---|
| Design | Aufbau, Schriften, Farben, Bilder, Texte | Die Seite funktioniert, aber niemand erinnert sich an sie |
| Entwicklung | Code, Ladezeit, Formulare, Sicherheit | Die Seite sieht gut aus, lädt aber langsam |
| Search Console, Sitemap, Analytics, Tag Manager | Die Seite ist fertig, aber niemand findet sie |
Bei koniarora.ch habe ich die Gestaltung festgelegt und die Texte überarbeitet. Den Code hat Claude Code geschrieben. Ich habe jeden Schritt vorgegeben und jede Seite selbst geprüft. Die Anbindung an Google haben wir zusammen erledigt, Schritt für Schritt.
Klicken Sie auf eine Rolle und sehen Sie, wer auf der Startseite was gemacht hat.
- Design: Logo und Schriften: Changa One für Titel, Hanken Grotesk für Text, alles auf dem eigenen Server.
- Design: Sticker statt Aufzählung: Was sonst eine trockene Liste wäre, wird zum Bild.
- Entwicklung: Menü als echter Knopf, mit der Tastatur bedienbar, Tippflächen mindestens 44 Pixel.
- Entwicklung: Schnelltest Knopf: führt zu einem eigenen Werkzeug, das sechs AI Systeme abfragt.
- Entwicklung: Alle Texte stehen direkt im HTML. Die Seite lädt schnell, auch auf dem Handy.
- Google und Analytics: Titel und Beschreibung für Google, Daten für AI Systeme im Hintergrund.
- Google und Analytics: Google Analytics über den Tag Manager, erst nach Zustimmung im Cookie Banner.
Welches Tool für eine Website mit KI?
Wer «Website mit KI erstellen» googelt, landet zuerst bei Baukästen. Die Anbieter bezahlen dafür, genau dort zu stehen. Für eine einfache Firmenseite ist ein Baukasten auch eine gute Wahl.
Es gibt aber mehr als diesen einen Weg. Welcher passt, hängt davon ab, wie eigen Ihre Website aussehen soll und was sie können muss.
| Kriterium | BaukastenWix, Squarespace, Jimdo | AI App BuilderLovable, Bolt | Claude DesignEntwurf | Claude CodeBau |
|---|---|---|---|---|
| Was es macht | Fertige Seite aus Vorlagen | App aus einer Beschreibung | Entwürfe für jede Bildschirmgrösse | Echter Code nach Entwurf |
| Geeignet für | Einfache Firmenseite | Prototypen, kleine Apps | Eigene Gestaltung | Eigene Website und Werkzeuge |
| Gestaltung | Vorlagen | Eher ähnlich | Frei | Wie im Entwurf |
| Der Code gehört | Dem Anbieter | Ihnen | Ihnen | Ihnen |
| Sie brauchen | Etwas Zeit | Technikgefühl | Ein Auge für Gestaltung | Jemanden, der prüft |
Ich habe Claude Design und Claude Code zusammen genutzt. Mit dem einen entstehen die Entwürfe, mit dem anderen der Code.
Der Ablauf
In meiner Vorlesung zu Webdesign an der Kalaidos Fachhochschule zeige ich den klassischen Ablauf. Erst grobe Skizzen, dann detaillierte Entwürfe, dann Tests mit Nutzern, dann der Code, am Schluss der Livegang. Jede Stufe ist ein eigenes Projekt, oft mit eigenem Team.
Mit Claude fliessen diese Stufen ineinander. Das Briefing kommt einmal am Anfang. Danach dreht sich die Arbeit im Kreis, wie in der Grafik.
Eine Website ist darum nie fertig. Google Analytics zeigt, welche Seiten gelesen werden und wo Besucher abspringen. Das fliesst in den nächsten Entwurf, und der Kreis beginnt von vorn.
Entwurf in Claude Design
Der häufigste Fehler beim Bauen mit AI ist Ungeduld. Man tippt «Mach mir eine Website und löse alle meine Probleme» und bekommt etwas, das aussieht wie tausend andere.
Ich habe darum mit dem Entwurf begonnen. Claude Design ist das Werkzeug von Anthropic dafür. Es ist eine grosse Arbeitsfläche, auf der die AI nach meinen Angaben zeichnet. Ich kommentiere, vergleiche Varianten und gebe frei.
Über tausend Versionen
Der Zeichentisch von koniarora.ch zählt inzwischen über tausend Versionen. Von Hand in Figma hätte das ein Vielfaches der Zeit gekostet. Eine neue Variante entsteht in Claude Design in wenigen Minuten.
Jede Seite gibt es dort für Computer, Tablet und Handy. Ich sehe sofort, ob ein Titel auf dem Handy umbricht oder ob ein Knopf zu klein ist. Erst wenn alle drei Grössen stimmen, gebe ich frei.
Braucht es noch Figma oder Adobe XD?
Für diese Website nicht. Entwurf, Abstimmung und Übergabe liefen an einem Ort. Weil der Entwurf schon aus echtem HTML besteht, muss beim Bau niemand Pixel abmessen und nachbauen.
Adobe XD wird seit 2023 nicht mehr weiterentwickelt. Figma bleibt stark, vor allem für grosse Teams mit vielen Designerinnen und Designern. Für eine Firmenwebsite mit einer Person am Steuer reicht Claude Design.
Das Designsystem
Ein Designsystem ist das Regelwerk einer Website. Es legt fest, welche Schriften, Farben und Grössen gelten. Einmal sauber definiert, hält es alles zusammen, auch wenn später neue Seiten dazukommen.
#1F1F1F#F3D36B#4B6F98#B9D3B0#CFDCEB#F6F1E4In Claude Design lässt sich so ein System als eigene Vorlage speichern. Jeder neue Entwurf hält sich dann daran. Das spart Diskussionen und macht die Website über alle Seiten hinweg ruhig und einheitlich.
Schriften
Für koniarora.ch sind es drei: Changa One für Titel, Hanken Grotesk für Text und Covered By Your Grace für kleine Notizen in Handschrift. Mehr braucht es selten. Jede weitere Schrift macht eine Seite unruhiger.
Wichtig ist auch, wo die Schriften liegen. Bei koniarora.ch sind sie auf dem eigenen Server. So lädt die Seite schneller, und beim Besuch geht keine Anfrage an Google Fonts.
Schriftgrössen
Diese Faustregeln gebe ich auch in meiner Vorlesung mit.
| Kriterium | Computer | Handy |
|---|---|---|
| Fliesstext | 16 bis 18 Pixel | 14 bis 16 Pixel |
| Titel | Rund doppelt so gross wie der Text | Rund 1,3 Mal so gross |
| Zeilenlänge | 45 bis 80 Zeichen | 30 bis 40 Zeichen |
Farben und Kontrast
Bei Farben zählt vor allem der Kontrast. Ein Knopf muss sich von seiner Umgebung abheben, damit man ihn findet. Ob er rot oder grün ist, spielt dafür eine kleinere Rolle, als viele denken.
Bau mit Claude Code
Für den Bau habe ich Claude Code genutzt. Ich beschreibe in normalen Sätzen, was ich will. Die AI schreibt den Code, testet ihn und erklärt mir, was sie getan hat.
Ein Beispiel: «Auf dem Handy soll der Kontaktknopf oben neben dem Menü stehen.» Wenige Minuten später steht er dort, auf jeder Seite, gross genug für den Daumen.
Claude Code fragt nach, wenn etwas unklar ist, und prüft jede Seite in jeder Grösse: Links, Schriftgrössen, Tippflächen.
Was dabei herausgekommen ist
- Schnell und lesbar. Alle Texte stehen direkt in der Seite. Das mögen Menschen, Google und AI Systeme.
- Mit eigenem Werkzeug. Der gratis AI Schnelltest fragt sechs AI Systeme nach einer Firma. Auch er ist mit Claude entstanden.
- Verbunden. Anfragen aus dem Kontaktformular landen direkt in meinem Kundenverwaltungssystem.
GitHub, Cloudflare und Datensicherheit
Im Hintergrund arbeiten zwei Dienste, GitHub und Cloudflare. Für kleine Websites sind beide oft gratis.
Code und Änderungen auf GitHub
Auf GitHub liegt der ganze Code. Jede Änderung wird mit Datum und Beschreibung gespeichert. Geht etwas schief, hole ich den alten Stand mit einem Klick zurück.
Online über Cloudflare
Cloudflare holt jede neue Version bei GitHub ab und stellt sie in wenigen Minuten online. Die Seite liegt auf Servern in aller Welt und lädt darum auch in Zürich, Zug oder Solothurn schnell.
Weil die Website keine Datenbank und kein Login hat, gibt es auch keine Plugins, die laufend aktualisiert werden müssen.
Datensicherheit
- Formular: Anfragen laufen über eine Cloudflare Funktion direkt ins Postfach. Gegen Spam helfen Cloudflare Turnstile, ein unsichtbares Feld und eine Zeitprüfung.
- E-Mail Adresse: Sie steht nirgends im Klartext und entsteht erst beim Klick. Programme, die Adressen für Spam sammeln, finden sie nicht.
- Statistik: Google Analytics läuft erst nach Zustimmung im Cookie Banner.
- Recht: Die Datenschutzerklärung hat ein Anwalt geprüft.
Ich gebe hier keine rechtliche Auskunft. Was für Ihre Website gilt, klären Sie mit einer Fachperson für Datenschutzrecht.
Anmeldung bei Google und Bing
Vor dem Livegang habe ich jede Seite auf Computer, Tablet und Handy selbst durchgeklickt. Danach kam der Teil, den viele vergessen.
Die Website wurde in der Google Search Console und in den Bing Webmaster Tools angemeldet. Die Sitemap wurde eingereicht und die wichtigsten Seiten zur Indexierung beantragt. Google Analytics läuft über den Tag Manager.
Ohne diesen Schritt kann es lange dauern, bis Google die Website findet.
Was bei mir bleibt
So viel die AI kann, drei Dinge bleiben bei mir.
- Geschmack. Die AI zeichnet zehn Varianten in einer Minute. Welche nach mir aussieht, weiss nur ich. Zu grosse Schriften musste ich mehrmals korrigieren.
- Texte. Erste Entwürfe klingen oft allgemein. Ich habe jeden Satz gelesen, viele umgeschrieben und einige gestrichen.
- Die Abnahme. Was live geht, entscheide ich. Die AI baut, die Abnahme mache ich.
Aus der Praxis
Claude hat bereits festgelegte Entscheide manchmal wieder vergessen. Darum habe ich eine Datei mit festen Regeln angelegt und das Designsystem als Vorgabe hinterlegt. Kontrollieren musste ich trotzdem jede Änderung.
Ich bin kein Programmierer. Jeden technischen Schritt, den ich selbst machen musste, habe ich mir in Alltagssprache erklären lassen, zum Beispiel wo ich klicken und was ich eintippen muss. Erst dann habe ich ihn ausgeführt.
Prompts zum Kopieren
Diese Prompts passen zum Kreislauf oben und funktionieren mit Claude, ChatGPT oder einem anderen AI Tool. Grün markierte Stellen ersetzen Sie durch Ihre eigenen Angaben.
Lege für Firma ein Designsystem fest: höchstens drei Schriften, eine Farbpalette mit Hauptfarbe und Akzent, Schriftgrössen für Computer und Handy. Passend zu Branche und Zielgruppe.Entwirf die Startseite für Firma, Angebot in Ort. Zielgruppe: Zielgruppe. Zeige je eine Fassung für Computer, Tablet und Handy. Noch keinen Code.Baue diese Seite genau nach dem freigegebenen Entwurf. Texte, Farben und Abstände 1:1 übernehmen. Erkläre mir danach in einfachen Worten, was du gemacht hast.Erkläre mir Schritt für Schritt, wie ich meine Website Adresse in der Google Search Console anmelde, die Sitemap einreiche und die Startseite zur Indexierung beantrage. Sag mir genau, wo ich klicken muss.Dasselbe Prinzip, erst die Struktur und dann die Gestaltung, steckt auch im Artikel PowerPoint Präsentationen mit AI erstellen.
Häufige Fragen
Kann ChatGPT eine Homepage erstellen?
Ja. ChatGPT und Claude schreiben den Code für eine einfache Seite in wenigen Minuten. Damit sie online geht, braucht es zusätzlich Hosting, eine Domain und jemanden, der das Ergebnis prüft.
Kann ich eine Website mit KI ohne Programmierkenntnisse erstellen?
Für eine einfache Seite ja. Für eine Website mit Formularen, eigenen Werkzeugen und sauberem Datenschutz brauchen Sie jemanden, der versteht, was die AI tut, und das Ergebnis prüft.
Welche KI erstellt kostenlos eine Website?
Wix, Squarespace und andere Baukästen bieten eine Gratisversion mit Einschränkungen, etwa ohne eigene Domain. Für eine Firmenwebsite mit eigener Adresse, Formular und Datenschutz rechnen Sie mit laufenden Kosten für Werkzeuge und Hosting.
Welches KI Tool ist am besten für Webdesign geeignet?
Für eine einfache Seite mit Vorlage ein Baukasten wie Wix oder Squarespace. Für eine eigene Gestaltung arbeite ich mit Claude: Claude Design für den Entwurf, Claude Code für den Bau. Lovable eignet sich für schnelle erste Versionen.
Brauche ich noch Figma oder Adobe XD?
Für eine Firmenwebsite meist nicht. Claude Design erstellt Entwürfe für alle Bildschirmgrössen und gibt sie direkt an Claude Code weiter. Adobe XD wird seit 2023 nicht mehr weiterentwickelt, Figma bleibt vor allem für grosse Designteams stark.
Ist eine Website, die mit AI erstellt wurde, schlechter für Google?
Nein. Google bewertet das Ergebnis, mit welchem Werkzeug es entstanden ist, spielt keine Rolle. Entscheidend sind schnelle Ladezeiten, klare Texte und saubere Technik.
Was kostet eine Website mit AI?
Bei mir beginnt eine Website ab CHF 9'500. AI macht den Bau schneller. Das Denken, Gestalten und Prüfen bleibt Handarbeit.
Quellen
- Creative Bloq: Adobe XD wird nicht mehr weiterentwickelt
- Faustregeln zu Schriftgrössen und Zeilenlänge: Vorlesung Webpage Design, Kalaidos Fachhochschule, Koni Arora (2026)
- Alle übrigen Angaben stammen aus dem eigenen Projekt koniarora.ch.