So machst du aus KI-generiertem Code eine Website

Einleitung

Viele Leute nutzen KI, um Websites zu erstellen. Tools wie ChatGPT, Claude und Gemini generieren gerne eine einzelne Code-Datei mit einer Vorschau der von dir beschriebenen Website. Aber sobald du diesen Code hast, ist der nächste Schritt nicht offensichtlich. Du musst ihn immer noch irgendwo hosten, eine Domain verbinden, dafür sorgen, dass alles auf dem Handy funktioniert, und herausfinden, wie du ihn später weiter bearbeiten kannst.

Klassische Entwickler-Tools wie GitHub und Netlify können die Datei online hosten, aber jede Änderung erfordert das Verwalten von Code-Dateien, Deployments und technischen Details. Die meisten Leute wollen sich damit lieber nicht herumschlagen, vor allem, weil sie den Code überhaupt nur dank KI haben.

In diesem Leitfaden zeige ich dir, wie du KI-generierten Code mit einem neuen KI-Tool namens Repaint in eine echte, veröffentlichte Website verwandelst. Damit kannst du von deinem Code ausgehen, die Seite veröffentlichen und Änderungen per Chat mit der KI vornehmen.

Warum es schwer ist, KI-generierten Code zu veröffentlichen

KI macht es einfacher denn je, eine funktionierende Code-Datei für eine Website zu bekommen. Das Problem ist, dass KI-Chatbots wie ChatGPT, Claude und Gemini nicht dafür gebaut sind, diesen Code als echte Website zu hosten. Sie geben dir die Datei und überlassen den Rest dir. Von da an führt der einzige realistische Weg über ein Entwickler-Tool wie GitHub, Netlify oder Vercel. Diese Tools funktionieren, aber sie sind für Entwickler gemacht.

Entwickler-Tools sind praktisch, weil sie den von der KI generierten Code direkt ausführen können. Der Nachteil ist, dass jede Änderung das Bearbeiten bestimmter Code-Dateien erfordert. Für Nicht-Programmierer bedeutet das, ständig Dateien in den deployten Code hinein- und herauszuschieben, nur um mit KI einfache Änderungen vorzunehmen.

Deshalb solltest du einen KI-Website-Builder wie Repaint nutzen. Er bietet dir die Flexibilität, eigenen Code auszuführen, und gleichzeitig den Komfort, alles an einem Ort zu bearbeiten und zu veröffentlichen.

Was ist Repaint?

Repaint ist eine KI-Plattform zum Erstellen von Websites. Alles passiert im Chat. Du beschreibst, was du möchtest, prüfst das Ergebnis und iterierst weiter, bis die Seite passt.

Aber Repaint ist eine vollständige Website-Plattform und nicht nur ein Ort, an dem du Code generierst. Das heißt, es übernimmt die Teile beim Betrieb einer Website, die ein KI-Chatbot nicht übernimmt:

• Es veröffentlicht deine Seite, damit Leute sie tatsächlich online besuchen können.
• Es lässt dich eine eigene Domain verbinden, damit die Seite unter deiner echten URL liegt.
• Es hält die Seite per KI bearbeitbar, sodass du später Änderungen vornehmen kannst.
• Es hilft beim Verwalten von SEO-Details wie Seitentiteln, Beschreibungen und Seitenstruktur.
• Es kann neue Seiten anlegen, wenn deine Website wachsen soll.

Das ist der Unterschied zwischen dem Besitz einer Code-Datei und einem echten Ort, an dem du deine Website langfristig verwalten kannst.

Schritt 1: Code importieren

Wenn ein Chatbot wie ChatGPT, Claude oder Gemini eine Website für dich erstellt, ist das Ergebnis meistens eine einzelne Code-Datei, entweder HTML oder React, je nachdem, was du angefragt hast. All diese Chatbots lassen dich die Datei aus ihrer Oberfläche kopieren.

Kopiere als Erstes den Code von dort, wo er generiert wurde. Gehe dann zum Repaint Code-Importer und füge ihn ein. Damit startet der Website-Aufbau. Repaint nutzt deinen Code, um eine vollständige Website zu erstellen, die du veröffentlichen und weiter bearbeiten kannst.

Wenn du die Wahl hast, empfehle ich, nach React zu fragen. Es liegt näher am Format, das Repaint verwendet, sodass weniger Designdetails bei der Übersetzung verloren gehen. HTML funktioniert auch, eventuelle Probleme lassen sich später per Chat mit Repaint beheben.

Wenn dein Code von einem bestimmten Chatbot kommt, kannst du auch einen der speziell darauf zugeschnittenen Leitfäden nutzen: ChatGPT, Claude oder Gemini.

Schritt 2: Planen, was Repaint bauen soll

Nachdem du deinen Code eingefügt hast, stellt Repaint ein paar Fragen, bevor es die Website baut. So kannst du entscheiden, ob du das Original genau so übernehmen, es als grobe Inspiration nutzen oder daraus eine größere Website mit mehreren Seiten machen möchtest.

Den Inhalt planen

Websites, die aus einer einzelnen Code-Datei entstehen, sind in der Regel One-Pager, bei denen Links zu Abschnitten scrollen, statt neue Seiten zu öffnen. Aber die meisten Unternehmen brauchen mehr als eine Seite. Wenn du also eine einseitige Seite hast, solltest du überlegen, sie von Repaint als mehrere Seiten bauen zu lassen.

Du kannst diesen Moment auch nutzen, um mehr Inhalt hinzuzufügen. Eine einzelne Code-Datei deckt selten eine vollständige Website mit Dingen wie Blogbeiträgen ab. Wenn du den Code in Repaint importierst, kannst du den Umfang erweitern und alles ergänzen, was du möchtest.

Alle neuen Seiten passen sich dem Stil an, den du bereits hast.

Den Stil planen

Standardmäßig übernimmt Repaint den Stil deines Originals. Das heißt, das Erscheinungsbild bleibt erhalten: Farben, Layout, Typografie und Abstände.

Aber du musst den Stil nicht beibehalten. Wenn du damit nicht zufrieden bist, kannst du Repaint bitten, deine Website neu zu gestalten. Repaint kann:

• Das Original so genau wie möglich nachbilden
• Den Stil einer anderen Website übernehmen, die dir gefällt
• Einen eigenen Stil für deine Inhalte erstellen
• Einen Stil aus der Repaint-Stilbibliothek auswählen
• Für dich entscheiden

Mach dir darüber nicht zu viel Stress. Wenn dir nicht gefällt, was es erstellt, kannst du es später um neue Versionen bitten.

Den Plan prüfen

Bevor irgendetwas generiert wird, schreibt Repaint genau auf, was es bauen wird: welche Seiten, welche Inhalte und welchen Stil. Schau es dir an und nimm letzte Änderungen vor. Es ist viel schneller, den Plan anzupassen, als die gesamte Website neu zu generieren.

Sobald du bestätigst, baut Repaint deine neue Website!

Schritt 3: Website generieren

Sobald du den Plan bestätigst, beginnt Repaint mit dem Aufbau deiner Website. Du siehst Fortschrittsmeldungen, während es jede Seite bearbeitet. Eine einfache Startseite kann ein bis zwei Minuten dauern. Eine größere Website mit mehr Seiten kann länger brauchen.

Repaint hostet nicht einfach den Code, den du eingefügt hast. Es nutzt das Original als Ausgangsmaterial und baut dann die in deinem Plan beschriebene Seite. Wenn du eine exakte Nachbildung angefragt hast, wird versucht, das Original genau zu treffen. Wenn du mehr Seiten oder einen anderen Stil wolltest, wird das Original stattdessen als Ausgangspunkt verwendet.

Manchmal gehen Details bei der Übersetzung während der Generierung verloren. Das passiert häufiger, wenn deine Ausgangsdatei HTML ist, da React näher an dem ist, was Repaint verwendet. Falls wichtige Details verloren gehen, kannst du sie im nächsten Schritt korrigieren.

Schritt 4: Website mit KI bearbeiten

Sobald Repaint die erste Version generiert hat, siehst du sie auf der rechten Seite deines Bildschirms. Jetzt kannst du Änderungen genauso vornehmen wie in einem Chatbot. Du schreibst, was geändert werden soll, Repaint aktualisiert die Seite und du prüfst das Ergebnis.

Du kannst Repaint zum Beispiel bitten:

• Eine neue Seite hinzuzufügen
• Die Farben oder Schriften zu ändern
• Ein Kontaktformular hinzuzufügen
• Bilder zu generieren
• Die Texte umzuschreiben

Du kannst so lange Änderungen vornehmen, bis sich die Seite bereit zum Veröffentlichen anfühlt.

Schritt 5: Website veröffentlichen

Wenn die Seite fertig ist, klicke auf den Veröffentlichen-Button. Repaint stellt die Seite online und gibt dir eine Live-URL, die du mit jedem teilen kannst. Sie sieht in etwa so aus: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

An diesem Punkt wird aus deiner Arbeit eine echte Website im Internet. Du kannst sie auf deinem Handy öffnen, an jemanden senden oder in einem echten Browser testen.

Du musst auch keinen Code exportieren oder Dateien irgendwo anders deployen. Von nun an bearbeitest und veröffentlichst du die Seite in Repaint. Wenn du später Änderungen vornehmen möchtest, kannst du Repaint bitten, die Website zu aktualisieren, und dann die neue Version mit demselben Button veröffentlichen.

Schritt 6: Domain verbinden

Wenn du bereit bist, deine eigene URL zu nutzen, gehe zu Website-Einstellungen > Domains und klicke auf Eigene Domain verbinden. Dies erfordert einen kostenpflichtigen Plan. Preisdetails findest du hier.

Deine Domain wird auf einer Plattform außerhalb von Repaint verwaltet. Sie ist bei einem Domain-Anbieter wie GoDaddy, Namecheap oder Cloudflare registriert. Du musst sie nirgendwo hin verschieben. Du aktualisierst einfach die Einstellungen bei deinem Domain-Anbieter, sodass die Domain auf deine Repaint-Seite zeigt.

Wenn du das noch nie gemacht hast, keine Sorge. Bitte Repaint, dich Schritt für Schritt durch den Prozess zu führen. Es sagt dir genau, was zu tun ist.

Die Änderung kann ein paar Stunden dauern, bis sie wirksam wird. Sobald Repaint deine Domain als verifiziert anzeigt, ist deine Website unter deiner eigenen Domain live.

Fazit

KI macht es einfach, eine erste Version einer Website zu generieren, aber diesen Code online zu bringen und zu pflegen, ist nach wie vor schwierig. Repaint bietet dir einen Weg, diesen Code in eine echte Website zu verwandeln, die du veröffentlichen, mit einer Domain verbinden und mit KI weiter bearbeiten kannst. Repaint macht es einfacher denn je, KI-generierten Code in eine veröffentlichte Seite zu verwandeln.

Häufig gestellte Fragen

Spielt es eine Rolle, welches KI-Tool ich zum Generieren des Codes verwendet habe?

Nicht wirklich. Solange du die Code-Datei hast, kann Repaint sie verwenden. Die am häufigsten genutzten Tools zum Importieren sind ChatGPT, Claude und Gemini. Wenn du eines davon konkret genutzt hast, gibt es einen darauf zugeschnittenen Leitfaden: ChatGPT, Claude und Gemini.

Macht es einen Unterschied, ob der Code HTML oder React ist?

Nein, aber React lässt sich in der Regel etwas besser übersetzen. Repaint kommt mit beidem klar. Wenn du beim Generieren des Codes die Wahl hast, frag nach React. Wenn du bereits eine HTML-Datei hast, funktioniert das auch, und kleinere Probleme kannst du nach dem Import per Chat mit Repaint beheben.

Wie lange dauert es, KI-generierten Code mit Repaint in eine Website zu verwandeln?

Wenn dein Code bereits fertig ist, sollte es nur wenige Minuten dauern. Den Code teilen, die Seite planen und die Website generieren dauert in der Regel 2-5 Minuten. Danach hängt die Zeit bis zur Veröffentlichung davon ab, wie viele Anpassungen du vornimmst.

Wie viel kostet es, mit Repaint zu veröffentlichen?

Es ist kostenlos, deinen Code in Repaint zu importieren, eine Seite zu generieren, Änderungen vorzunehmen und zu veröffentlichen. Die wichtigsten Einschränkungen des kostenlosen Plans sind ein begrenztes Kontingent, keine eigene Domain und ein Repaint-Badge auf der Seite. Kostenpflichtige Pläne beginnen bei 20 $/Monat bei jährlicher Abrechnung oder 25 $/Monat bei monatlicher Abrechnung. Das beinhaltet erweitertes Kontingent, Unterstützung für eigene Domains und entfernt das Repaint-Badge.

Warum nicht einfach GitHub Pages, Netlify oder Vercel verwenden?

Kannst du, vor allem, wenn du gut mit Code umgehen kannst. Diese Tools sind gut darin, Dateien online zu stellen. Aber jede ernsthafte Änderung schickt dich zurück in den Code, was bedeutet, dass du ständig Dateien zwischen dem Ort, an dem du den Code bekommen hast, deinem Editor und deinem Hosting-Tool hin- und herkopierst.

Repaint ist anders, weil es eine vollständige Website-Plattform ist und nicht nur ein Ort zum Ausliefern von Dateien. Das heißt, du kannst weiter mit KI bearbeiten, Änderungen vom gleichen Ort aus veröffentlichen, Seiten verwalten, SEO-Einstellungen aktualisieren, Bilder optimieren, Formulare anbinden und deine eigene Domain nutzen. Es ist auf langfristige Website-Verwaltung ausgelegt, nicht nur auf das erste Deployment.

Muss ich programmieren können, um Probleme zu beheben?

Nein. Repaint ist für Menschen gemacht, die nicht programmieren. Nach dem Import deines Codes musst du nie wieder Code verwalten. Wenn etwas nicht stimmt, kannst du es per Chat mit der KI beheben. Programmierkenntnisse können hilfreich sein, wenn du sehr spezifisch sein möchtest, sind aber nicht erforderlich.

Wird die Seite genauso aussehen wie mein Original?

Wenn du Repaint sagst, dass es das Original nachbauen soll, sollte es fast genauso aussehen. Gelegentlich gehen einige Details verloren, weil Repaint den Code in sein eigenes Website-Format übersetzt. Übersetzungsprobleme treten häufiger auf, wenn das Original HTML war. Falls das passiert, solltest du alles mit wenigen Anweisungen beheben können.

Was passiert, wenn die KI einen Fehler macht?

Während du Änderungen vornimmst, speichert Repaint jede Version deiner Seite. Du kannst Repaint bitten, zurückzugehen, und es wird zu einer früheren Version zurückkehren. Oder wenn du zu einem bestimmten Zeitpunkt zurückkehren möchtest, kannst du frühere Versionen manuell wiederherstellen. So kannst du frei Änderungen vornehmen, ohne deine Seite zu gefährden.

Werden Formulare und Buttons nach dem Import funktionieren?

Ja. Kontaktformulare haben im ursprünglichen Code wahrscheinlich nicht funktioniert. Aber wenn du die Seite zu Repaint überträgst, kann es das Formular in ein echtes Kontaktformular verwandeln, das E-Mail-Benachrichtigungen sendet, wenn Einsendungen eingehen. Buttons sollten funktionieren, wenn sie auf echte Seiten oder Abschnitte verlinken. Wenn ein Button ins Leere zeigt, kannst du Repaint bitten, ihn zu verbinden.

Kann Repaint mit Bildern, Icons und anderen Assets aus meinem Code umgehen?

KI-generierter Code enthält normalerweise keine Bilddateien. Er verlinkt meist auf Bilder, die anderswo gehostet werden, wie zum Beispiel auf Unsplash. Wenn du deinen Code importierst, kann Repaint Kopien dieser Bilder abrufen und speichern, damit sie dauerhaft für deine neue Seite verfügbar sind. Repaint kann auch Bilder generieren, falls du noch welche brauchst.

Kann ich SEO-Einstellungen, Analytics und Metadaten hinzufügen?

Ja. Du kannst eigenen Code, Analytics und Metadaten einfach hinzufügen, indem du Repaint darum bittest. Es kann technisches SEO für dich einrichten und Skripte und Einbettungen von anderen Plattformen hinzufügen. Um Google Analytics hinzuzufügen, teile einfach deine GA-ID.

Ersetzt Repaint das Hosting, oder brauche ich trotzdem einen separaten Host?

Repaint ist eine Hosting-Plattform. Es betreibt deine Website. Du brauchst keine separate Hosting-Plattform wie GitHub Pages, Netlify, Vercel oder einen anderen Website-Builder.