Website mit KI erstellen ohne Programmierkenntnisse: Praxisbericht mit Claude Code und Codex

Auf Grundlage des Corporate Designs von Christian Schön entstand die Website als HTML-Prototyp. Den größten Teil der Umsetzung übernahm Kathi, gemeinsam mit Vroni und Christian. Die Umsetzung lief von Juli bis September, mit einer Urlaubspause im August. Davor lag die erste Zusammenarbeit mit Christian, in der klar wurde, was sich ändern muss (mehr dazu in Teil 1).

Eine Idee ließ sich mit KI schnell sichtbar machen. Ob sie zur Marke passte, die richtigen Inhalte betonte und als ganze Seite funktionierte, zeigte sich erst beim Anschauen und Ausprobieren. Die ersten Ansätze waren deshalb Ausgangspunkte für weitere Überarbeitungen.

Website mit KI bauen: Dauer und Aufwand (2 bis 3 Monate)

Vorab, weil es wichtig ist: Eine Website mit KI zu bauen heißt nicht, dass sie in einer Woche fertig ist. Dieses Versprechen ist heute noch nicht einlösbar, wenn die Seite sich zumindest ein wenig von anderen unterscheiden soll. Wir sprechen hier nicht von den Standard-Webseiten, wie sie aus Claude und Co. herauspurzeln. Die KI beschleunigt vieles, aber nicht das Entscheiden, Ausprobieren, Verwerfen und Nachbessern. Bei uns hat die Umsetzung zwei bis drei Monate gedauert, und es war viel Arbeit. Vieles hat länger gedauert als gedacht, auch die Bilder.

Website neu bauen: Warum UNCANNY MINDS eine neue Seite brauchte

Vroni hat dafür ein Bild: „Kennst du diese jungen Männer auf Hochzeiten, die ihren Anzug von der Firmung tragen, der ein bisschen zwickt? So war es bei uns auch. Wir brauchten einen neuen Maßanzug, eine neue Marke.“ Ganz neu war die Marke nicht, denn wir firmieren seit dem 1.1.2025 als UNCANNY MINDS. Mit dem KI Marketing Bootcamp hatten wir eine Marke geschaffen, die für richtig gute KI-Weiterbildungen steht, live und nahbar.

Dann zeigten sich zwei weitere Bereiche in unserer Arbeit. Genau genommen sind es keine weiteren Bereiche, denn es hängt alles zusammen:

• Strategie und Beratung: Viele Kund:innen wollen langfristig jemanden an der Seite, der sie strategisch bei konkreten Fragen einer Marketing-Abteilung oder Agentur unterstützt.
• Studio: Das ist unsere Werkbank, an der Projekte umgesetzt werden. Am ehesten ist das mit Agenturarbeit vergleichbar.

Weder unter dem Begriff „Bootcamp“ noch auf der alten Website war dafür Platz.

Zum Auftritt sagt Vroni: Gerade in Zeiten von KI dürfe man keine Angst davor haben, sich immer wieder neu zu erfinden. „Wir trauen uns Veränderung zu.“ Außerdem habe sich in der Unternehmenswelt die Haltung zu KI verändert. Die Faszination und die Freude am Ausprobieren haben über die Jahre stark abgenommen, und heute buchen Leute KI-Schulungen aus anderen Gründen als 2023.

Website mit KI selbst bauen statt Agentur: Warum, mit wem und wer was machte

Warum haben wir die Website selbst mit KI gebaut und nicht an eine Agentur gegeben? Vronis Antwort: „Weil wir uns selbst auch immer herausfordern wollen. Wir sind Menschen, die glaubwürdig dafür stehen, den Weg selbst zu gehen.“

Das Corporate Design hat Christian Schön entwickelt. Wir kannten ihn aus einer unserer KI-Weiterbildungen. Vroni sagt, er bringe das menschliche Auge und die Erfahrung wie kaum ein anderer mit den Möglichkeiten generativer KI zusammen. „Das Ergebnis spricht für sich, oder?“

Die Aufgaben lagen so:

• Kathi und Vroni: Sie haben die Seite konzipiert und die Seiten und Inhalte entworfen.
• Artur: Er hat die technischen Voraussetzungen geschaffen.
• Jörg Zimmer: Der externe Berater hat uns bei der Umsetzung von technischem SEO und GEO unterstützt.

Vorerfahrung: Was man für eine KI-Website mitbringen sollte

Kathi arbeitet seit über zwei Jahren für das KI Marketing Bootcamp, heute UNCANNY MINDS. Webdesign gehörte von Anfang an zu ihrer Arbeit, WordPress hat sie sich über die Jahre immer mehr angeeignet, und die Website für ihr eigenes kleines Gewerbe hat sie komplett allein gebaut. Das waren aber andere Systeme. Vorher hatte sie schon ab und zu Code-Snippets mit KI erzeugt, etwa für Newsletter oder Website-Widgets.

Neu war, eine ganze Website als HTML-Prototyp aufzubauen. „Ich habe es komplett geliebt“, sagt Kathi, „und bin mit Codex und Claude Code schnell reingekommen.“

KI-Tools für die Website: Claude Code, Codex und Magnific

Tool	Wofür
Visual Studio Code	Arbeitsumgebung mit visueller Vorschau
Codex	Designumsetzung, war zu dem Zeitpunkt auch etwas schneller
Claude Code	vor allem Texte
Magnific	Bild-, Video- und 3D-Generierung

Kathi hat Codex und Claude Code abwechselnd und teilweise gleichzeitig genutzt. Welches Tool wofür besser ist, kann sich immer wieder ändern. Die Aufteilung oben ist eine Momentaufnahme.

KI-Prompts für Webdesign: So formuliert Kathi ihre Aufträge

Ein Lehrbuch-Beispiel für einen guten oder schlechten Prompt gibt es nicht. Kathis Aufträge bestehen meistens aus viel Beschreibung, wie sie es gern hätte, teilweise mit Skizzen dazu. Dann schaut sie sich das Ergebnis an und erklärt, was ihr noch nicht gefällt und wie sie es lieber hätte.

Wenn sie komplett feststeckt, geht sie ein paar Schritte zurück. Sie macht sich erst klar, wie genau sie es haben will und wie sich das am besten beschreiben lässt. Oft zeichnet sie dann selbst eine Skizze und gibt ein paar Infos dazu. Das Gleiche half, wenn die KI danebenlag: Das merkte Kathi schnell, etwa wenn Bilder nicht gut dargestellt waren oder das Layout für Besucher:innen unübersichtlich war. Die KI prüft das nicht von allein. Menschlicher Input ist wichtig, um ihr die „Welt“ zu erklären, in der die Seite funktionieren soll.

Vom KI-Prototyp zur fertigen Website: Entwurf, Überarbeitung, Ergebnis

Der erste Entwurf der Startseite war noch ein reiner Prototyp: schwarzer Hintergrund, ein Linienmotiv statt Gehirn, Standardschrift. Von dort aus ging es Schritt für Schritt weiter.

Dahinter steckte eine kleine Animation: Eine Linie zeichnet sich selbst, wird vom Zickzack zum Gekritzel und am Ende zu einem sauberen Netzwerk. Hier läuft sie, wie sie damals im Prototyp aussah:

Wenig später kamen die Schrift und die Farben des Corporate Designs dazu, und die Seite begann nach UNCANNY MINDS auszusehen:

Später sind aus Christians Designvorlage und Kathis Umsetzung Seiten geworden wie diese:

Corporate Design mit KI umsetzen: Was der Skill leistet und wo er an Grenzen kommt

Der Skill mit dem Corporate Design war eine große Hilfe: Die Gestaltung von Christian blieb bis zum Schluss erhalten. Das genaue Layout musste dagegen noch einmal neu gedacht werden. Ein Skill hält Farben, Schriften und Bildsprache zusammen, ersetzt aber nicht die Entscheidung, wie eine Seite aufgebaut ist.

KI-Design-Idee: Wie das gläserne 3D-Gehirn entstand

Für die Startseite gab es zunächst andere Ideen. Sie gehörten zum Prozess, hatten aber noch nicht den Wow-Effekt, den eine Startseite braucht. Also dachte sie neu darüber nach, wie sich die Marke UNCANNY MINDS darstellen lässt. Kathi kommt eigentlich aus der Neurowissenschaft. Und wie soll es anders sein: Wenn man sich länger mit einem Thema beschäftigt, entstehen starke Verknüpfungen. MINDS und Brain, das passt doch.

Den gläsernen Look inspirierte der Riffelglas-Effekt aus dem Corporate Design. Die Frage war, wie man ihn cool und abstrakt darstellen kann. Die Antwort: das Gehirn gläsern machen.

Das Gehirn bleibt zunächst bewusst UNCANNY. Auf der Startseite sieht man nicht gleich das ganze Gehirn, sondern ist mittendrin. Erst beim Runterscrollen wird immer klarer, was man sieht, und ab und zu blitzen Synapsen auf. Danach kommen die Menschen ins Bild: Vroni und Georg, die Gründer:innen. Bei uns soll KI nicht alles übernehmen, die Menschen dahinter sollen sichtbar sein. Der Übergang von den Minds im Logo zu den Minds dahinter ist für Kathi einer der stärksten Momente der Seite. Er zeigt die Menschen hinter UNCANNY MINDS und hinter der ganzen KI-Anwendung.

Das gläserne Motiv taucht inzwischen auch an anderen Stellen auf, zum Beispiel als abstrakte gläserne Organe für die verschiedenen Bereiche der aktuellen Blogreihe.

3D-Modell mit KI erzeugen

Kathi erzeugte zuerst über Magnific selbst ein 3D-Gehirn. Das Modell funktionierte grundsätzlich, war für die Website aber viel zu groß. Deshalb haben wir eine einfache 3D-Version gekauft und als Grundlage genommen. Den gläsernen Look und die Einbindung arbeitete Kathi mit KI-Unterstützung aus, ohne vorher Erfahrung mit 3D-Modellen zu haben.

Später prüfte Artur, was die Einbindung technisch bedeutete: Wie schwer war das Modell, und wie wirkte es sich auf Ladezeit und Ressourcenbedarf aus? Daraus wurde eine Lösung, die auf der Website sinnvoll eingesetzt werden konnte. Kathi entwickelte die Idee und machte sie im Entwurf erlebbar, Artur prüfte die technischen Folgen.

Der HTML-Prototyp machte Gestaltung, Inhalte und Interaktionen gemeinsam beurteilbar. Als dieser Stand weitgehend ausgearbeitet war, kam Artur für die technischen Voraussetzungen des Livegangs hinzu.

KI-Bilder für die Website: Riffelglas-Porträts brauchten Wochen

Am meisten hakte es bei der Bildgenerierung. Die Riffelglas-Porträts und Markenbilder haben deutlich mehr Zeit gekostet, als Kathi zunächst gedacht hatte, denn in einem Bild kommt viel zusammen, gerade wenn Georg und Vroni gemeinsam drauf sind:

• Vroni und Georg müssen richtig getroffen sein.
• Die Kleidung muss sitzen. Erst wirkte sie bieder, dann zu unnatürlich.
• Der Hintergrund muss stimmen, in Lila oder einer anderen CD-Farbe.
• Das Riffelglas muss noch darüber liegen.

Bis der Stil gefunden war, der unsere Bildsprache repräsentiert, hat es Wochen gedauert, nicht am Stück, aber immer wieder. Am Ende fand Kathi immer einen Weg, doch nachbearbeiten muss man fast immer.

Die ersten Versionen sahen noch ganz anders aus: weißer Studiohintergrund, bunte Outfits, viel Bewegung.

Im Ergebnis passen Gesicht, Kleidung, Hintergrund und Riffelglas zusammen.

Website mit KI bauen ohne Programmierkenntnisse: Wie fühlt sich das an?

Wir haben mit Visual Studio Code gearbeitet. Dort sieht man das Ergebnis visuell, der Code ist trotzdem mit drin. Kathi hat sich Codex und Claude Code dort eingebunden und konnte damit sehr gut arbeiten. An abstraktes No-Code-Arbeiten ohne Vorschau hat sie sich dagegen noch nicht gewöhnt: „Ich brauche etwas Visuelles, um mir das Ergebnis vorstellen zu können.“

Der Einstieg. Am Anfang ist alles viel. Kathi kam trotzdem schnell rein. Viel Sicherheit gab ihr, dass Artur die ganze Zeit für Rückfragen da war und direkt half, wenn etwas nicht klappte. Jemanden Professionelles im Hintergrund zu haben, nimmt sehr viel Druck raus.

Vronis erster Eindruck. Bei klassischen CMS wie WordPress oder TYPO3 hat man auf den ersten Blick mehr Kontrolle, sagt Vroni. Diese Kontrolle schränkt aber auch ein. In VS Code entsteht per Code einfach, was vorher nicht da war. Das fühlt sich für sie nach Freiheit an: „Wie freihändig Fahrrad fahren: total befreiend, abenteuerlich und immer mit der Angst vor der nächsten Kurve!“

Der Klick. Der kam recht schnell, sobald klar war, wie sich mit dem Interface gut arbeiten lässt. Geholfen haben Arturs Aufbereitung und seine Erklärungen: Er hat uns Cards gebaut, eine Art Präsentation, worauf wir achten müssen. Sein wichtigster Rat, wenn etwas nicht passt: Ruhe bewahren, nicht in Panik geraten.

Für Vroni hat Artur den Rahmen gesetzt, in dem sie sicher arbeiten konnten. Er gab eine kleine Einführung und betonte: „Ihr könnt nichts kaputt machen.“ Für eine Nicht-Coderin wie sie sei das ganz wichtig gewesen.

Muss man den Code verstehen? Es ist nicht schlecht, Dinge zu verstehen. Ein gutes Code-Verständnis hat Kathi aber noch nicht, und für die Arbeit mit Codex und Claude Code braucht sie es im Moment auch nicht. Wichtig ist etwas anderes: Man braucht jemanden im Team, der sich wirklich auskennt. Sonst kann viel schiefgehen.

Vroni hat Kurse in Python und HTML gemacht. Theoretisch könnte sie sich so „durchwursteln“, dass sie den roten Faden im Code versteht. Aber zwischen lesend grob einordnen und selbst schreiben können liegt für sie ein großer Unterschied.

Die eigentliche Kompetenz lag deshalb nicht im Tippen von Code, sondern im Entscheiden: Passt diese Lösung zur Marke, zur Seite und zum Ziel?

Website mit KI bauen: 7 Tipps für Nicht-Coder:innen

• In den Sandkasten gehen. Vroni rät, sich eine Sandbox einzurichten oder einrichten zu lassen, in der man nichts kaputt machen kann. „Und dann: los geht’s!“
• Nicht einschüchtern lassen. Vom Interface und vom sichtbaren Code sollte man sich nicht abschrecken lassen. Man kommt gut damit klar.
• Langsam herantasten. Ausprobieren, Schritt für Schritt.
• Ein Briefing geben. Claude Code und Codex sollten wissen, dass man wenig Erfahrung hat und bei heiklen Schritten erst nachfragen soll, etwa bei Bildfreigaben oder beim Online-Stellen. Das ist eine gute Absicherung, wenn niemand mit viel Erfahrung dabei ist.
• Nicht zu viel freigeben. Vorsicht bei Zugängen und APIs: Welche Rechte und API-Keys bekommt ein Tool wirklich?
• Auf den Blick von außen hören. Wer sich lange mit etwas beschäftigt, sieht irgendwann den Wald vor lauter Bäumen nicht mehr. Input von anderen hat oft geholfen.
• Alles dokumentieren. Jede Entscheidung, jedes Ergebnis und jede Vorlage gehören festgehalten, auch für die Übergabe zwischen den Systemen.

Was Kathi mit KI-Tools gelernt hat

Eine komplette Website mit Codex und Claude Code umzusetzen, hatte Kathi vorher noch nie gemacht. „Ich liebe es, mich in neue Aufgaben reinzustürzen und voll kreativ zu werden. Die eigenen Vorstellungen direkt umsetzen zu können, ohne richtige Programmierkenntnisse zu haben, ist sehr empowernd.“ Interaktive Webseiten fand sie immer cool, hatte aber keinen Zugang dazu. Jetzt geht das ziemlich gut: Das Gehirn verändert sich beim Scrollen, und auf dem Handy kann man einstellen, dass es sich mitbewegt, wenn man das Handy bewegt. Außerdem hat sie gelernt, aus Christians Designvorlage eine ganze Website aufzubauen.

Leicht war es nicht, es hat viel Zeit gekostet: zwei bis drei Monate, nicht zwei bis drei Tage. Zur Zusammenarbeit sagt Kathi: „Herausragend, es war richtig cool. Wir haben alle an einem Strang gezogen.“ Ideen wie das Gehirn oder das Video zum Blogbeitrag, in dem das Kaninchen ins Uncanny führt, kamen gut an, und was nicht gelungen war, konnten wir gezielt überarbeiten. Es wird wohl nicht die einzige Website bleiben, die Kathi baut.

Website mit KI bauen im Rückblick: Was Vroni mitnimmt

Verworfene Ideen. „Wir haben tausende Ideen verworfen“, sagt Vroni. Ideen auszuprobieren kostet nicht mehr so viel wie früher. Wo wir früher kurz diskutiert und dann entschieden hätten, ließen sich jetzt verschiedene Varianten schnell visualisieren. Ein Beispiel sind die Stage-Bilder, bei denen wir herumgehüpft sind. Sie kamen schnell wieder weg: „Georg und ich hüpfen in echt nur selten.“

Der Zeitaufwand. Bei einem Website-Relaunch gehen bei Vroni sofort die Alarmleuchten an. „Früher“ saß man da locker sechs Monate drin, heute waren es zwei bis drei Monate. „Schon irre. Aber immer noch zwei bis drei Monate“, sagt sie, obwohl in den sozialen Medien der Konsens zu sein scheine, dass man gehörig etwas falsch mache, wenn man länger als vier Stunden brauche.

Würde sie es wieder so machen? Für Vroni ist es zu früh, über Best Practices zu reden, weil sich die Technologie zu schnell verändert. Was sie wieder so machen würde: neugierig Dinge ausprobieren und Verantwortung abgeben. Sie ist zufrieden, wie es gelaufen ist, und auch, wie es noch läuft: „Mit einer Website ist man ja nie fertig!“

Fazit: Was man vor einer KI-Website wissen sollte

Ein KI-Prototyp ist kein Produktionsstand. Er ist ein Raum zum Entscheiden. Er zeigt schnell, wie sich eine Idee anfühlt, macht aber auch sichtbar, welche Regeln noch fehlen. Genau darin lag für uns der Wert: Wir konnten Gestaltung, Inhalt und Interaktion gemeinsam sehen, bevor Artur die technische Basis sauber aufbaute.