So machst du aus einem Claude-Artefakt eine Website

Einleitung

Viele Leute nutzen Claude, um Websites zu erstellen. Wenn du danach fragst, gibt Claude die Seite als Artefakt zurück: eine einzelne Datei, die du direkt im Chat ansehen kannst. Aber sobald du dieses Artefakt hast, ist der nächste Schritt nicht offensichtlich. Du musst es noch irgendwo hosten, eine Domain verbinden, es auf dem Handy zum Laufen bringen und herausfinden, wie du es später weiter bearbeiten kannst.

Claude hat einen "Publish"-Button für Artefakte, aber das Ergebnis liegt auf einer claude.site-URL, eingebettet in die UI von Anthropic. Das ist in Ordnung, um eine Demo zu teilen, aber keine echte Website, die du für ein Unternehmen nutzen würdest.

In dieser Anleitung zeige ich dir, wie du ein Claude-Artefakt mit einem neuen KI-Tool namens Repaint in eine echte, veröffentlichte Website verwandelst. Damit kannst du von deinem Artefakt aus starten, die Seite veröffentlichen und Änderungen per Chat mit der KI vornehmen.

Warum es schwer ist, ein Claude-Artefakt zu veröffentlichen

Claude kann Code generieren, ist aber kein vollwertiger Website-Builder. Wenn du fragst, wie du auf deiner eigenen Domain veröffentlichen kannst, verweist es dich auf andere Plattformen. In der Regel empfiehlt es Entwickler-Tools wie GitHub, Netlify und Vercel oder schlägt vor, alles in einem klassischen Website-Builder neu aufzubauen. Beides ist nicht ideal.

Entwickler-Tools sind praktisch, weil sie den von Claude 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, dass sie ständig Dateien in ihren bereitgestellten Code hinein- und herausschicken müssen, nur um einfache Änderungen mit KI vorzunehmen.

Die meisten Leute umgehen die Komplexität von Code, indem sie einen Website-Builder wie WordPress, Wix oder Webflow verwenden. Diese Plattformen machen das Veröffentlichen von Änderungen einfacher. Das Problem ist, dass sie keine Claude-Artefakte ausführen können, also musst du alles manuell neu aufbauen. Und ab dann musst du alles von Hand bearbeiten.

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

Was ist Repaint?

Repaint ist eine KI-Plattform zum Erstellen von Websites. Sie basiert auf demselben chatbasierten Workflow, der Claude so nützlich macht. Du kannst Änderungen in einfacher Sprache anfragen, das Ergebnis prüfen und so lange iterieren, bis die Seite stimmt.

Aber Repaint ist eine vollwertige Website-Plattform, nicht nur ein Ort, an dem Code generiert wird. Das bedeutet, dass Repaint die Aspekte einer echten Website abdeckt, die Claudes Artefakt-Veröffentlichung nicht abdeckt:

• Es veröffentlicht deine Seite als normale Website, ohne dass die UI von Anthropic darum herum gewickelt ist.
• Du kannst eine eigene Domain verbinden, sodass die Seite unter deiner echten URL läuft.
• Die Seite bleibt mit KI bearbeitbar, sodass du später Änderungen vornehmen kannst.
• Es hilft bei der Verwaltung von SEO-Details wie Seitentiteln, Beschreibungen und Seitenstruktur.
• Es kann über ein einzelnes Artefakt hinaus zu einer mehrseitigen Website wachsen.

Das ist der Unterschied zwischen dem Teilen eines Artefakts und einem echten Ort, an dem du deine Seite langfristig verwalten kannst.

Schritt 1: Code aus Claude importieren

Wenn Claude eine Website erstellt, packt es alles in eine einzelne Datei, die du im Chat ansehen kannst. Standardmäßig ist das Artefakt HTML, du kannst aber stattdessen auch React/TSX anfragen. So oder so gibt es oben im Artefakt-Panel einen Kopieren-Button.

Öffne zunächst dein Claude-Artefakt und kopiere den Code. Gehe dann zum Repaint-Code-Importer und füge ihn dort ein. Damit startet der Prozess zum Erstellen der Website. Repaint verwendet deinen Code, um eine vollständige Website zu erstellen, die du veröffentlichen und weiter bearbeiten kannst.

Wenn du noch kein Artefakt in Claude erstellt hast, empfehle ich, nach React zu fragen. Es kommt dem Format, das Repaint verwendet, näher, sodass kleine Designdetails seltener bei der Übertragung verloren gehen. HTML funktioniert auch, etwaige Probleme lassen sich später per Chat mit Repaint beheben.

Schritt 2: Planen, was Repaint bauen soll

Nachdem du deinen Code eingefügt hast, stellt Repaint einige Fragen, bevor die Website gebaut wird. Das gibt dir die Möglichkeit zu entscheiden, ob du die Claude-Version exakt übernehmen, sie als lose Inspiration nutzen oder sie in eine größere Seite mit mehreren Seiten verwandeln möchtest.

Den Inhalt planen

Claude-Artefakte sind immer eine einzelne Datei, daher landen sie meist als Onepager, bei denen Links zu Abschnitten scrollen, anstatt neue Seiten zu öffnen. Aber die meisten Unternehmen brauchen mehr als eine einzelne Seite. Wenn dein Artefakt also ein Onepager ist, solltest du in Erwägung ziehen, es von Repaint als mehrere Seiten bauen zu lassen.

Diesen Moment kannst du auch nutzen, um mehr Inhalte hinzuzufügen. Claude-Artefakte enthalten in der Regel keine umfangreichen Seitensammlungen wie Blogbeiträge. Wenn du das Artefakt in Repaint importierst, kannst du den Umfang erweitern und alles einbeziehen, was du möchtest.

Neue Seiten passen sich dem bestehenden Stil an.

Den Stil planen

Standardmäßig übernimmt Repaint den Stil deines Originals. Das bedeutet, dass das gleiche Erscheinungsbild beibehalten wird: 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 individuellen Stil für deine Inhalte erstellen
• Einen Stil aus der Repaint-Stil-Bibliothek auswählen
• Für dich entscheiden

Mach dir darüber nicht zu viele Gedanken. Wenn dir das Ergebnis nicht gefällt, kannst du es später bitten, neue Versionen zu erstellen.

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 Seite 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 Seite. 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 dauern.

Repaint hostet nicht einfach den Code, den du eingefügt hast. Es nutzt das Claude-Artefakt als Ausgangsmaterial und baut dann die Seite, die in deinem Plan beschrieben ist. Wenn du nach einer exakten Nachbildung gefragt hast, versucht es, das Original genau zu treffen. Wenn du nach mehr Seiten oder einem anderen Stil gefragt hast, verwendet es das Artefakt stattdessen als Ausgangspunkt.

Manchmal gehen bei der Generierung Details verloren. Das passiert häufiger, wenn dein Artefakt HTML ist, da React näher an dem ist, was Repaint verwendet. Falls wichtige Details verloren gehen, kannst du sie im nächsten Schritt beheben.

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 Claude. Du tippst, 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 für die Veröffentlichung 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

Das ist der Punkt, an dem aus deiner Arbeit eine echte Website im Internet wird. Du kannst sie auf deinem Handy öffnen, an jemanden schicken oder in einem echten Browser testen. Außerdem wird sie nicht von einer Anthropic-UI umrahmt, wie es bei einem veröffentlichten Artefakt der Fall wäre.

Du musst auch keinen Code exportieren oder Dateien woanders deployen. Ab jetzt ist Repaint der Ort, an dem du die Seite bearbeitest und veröffentlichst. 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 verwenden, 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 Claude und Repaint verwaltet. Sie ist bei einem Domain-Anbieter wie GoDaddy, Namecheap oder Cloudflare registriert. Du musst sie nirgendwo hin verschieben. Du aktualisierst lediglich 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

Claude macht es einfach, eine erste Version einer Website in einem Artefakt zu erstellen, aber sie als echte Website online zu bringen und zu pflegen ist immer noch schwierig. Repaint bietet dir eine Möglichkeit, dieses Artefakt in eine echte Website zu verwandeln, die du veröffentlichen, mit einer Domain verbinden und weiterhin mit KI bearbeiten kannst. Repaint macht es einfacher denn je, ein Claude-Artefakt in eine veröffentlichte Seite zu verwandeln.

Häufig gestellte Fragen

Warum nicht einfach die in Claude eingebaute Artefakt-Veröffentlichung nutzen?

Das kannst du, aber das Ergebnis liegt in einer von Claude gehosteten Sandbox, eingebettet in die UI von Anthropic, und du kannst es nicht auf deine eigene Domain legen. Das ist in Ordnung, um eine Demo zu teilen, aber nicht das, was die meisten Unternehmen für eine echte Website wollen. Repaint liefert dir eine normale Website mit deiner eigenen Domain, deinem eigenen Branding und ohne Anthropic-UI drumherum.

Wie lange dauert es, ein Claude-Artefakt mit Repaint in eine Website zu verwandeln?

Wenn dein Artefakt bereits fertig ist, sollte es nur wenige Minuten dauern. Das Teilen deines Codes, das Planen der Seite und das Generieren der Website dauern 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 die Veröffentlichung mit Repaint?

Es ist kostenlos, deinen Code in Repaint zu importieren, eine Seite zu generieren, Änderungen vorzunehmen und zu veröffentlichen. Die wichtigsten Einschränkungen im kostenlosen Plan sind 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?

Das kannst du, besonders wenn du dich wohl dabei fühlst, Code zu verwalten. Diese Tools sind gut darin, Dateien online zu stellen. Aber jede bedeutsame Änderung schickt dich zurück in den Code, was bedeutet, dass du ständig Dateien zwischen Claude, deinem Editor und deinem Hosting-Tool hin- und herkopieren musst.

Repaint ist anders, weil es eine vollwertige Website-Plattform ist und nicht nur ein Ort, um Dateien auszuliefern. Das heißt, du kannst weiterhin mit KI bearbeiten, Änderungen vom selben Ort aus veröffentlichen, Seiten verwalten, SEO-Einstellungen aktualisieren, Bilder optimieren, Formulare verbinden und deine eigene Domain nutzen. Es ist für die langfristige Website-Verwaltung gemacht, nicht nur für das erste Deployment.

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

Nein. Repaint ist für Menschen gemacht, die nicht programmieren. Nachdem du deinen Code aus Claude importiert hast, musst du nie wieder Code verwalten. Wenn etwas falsch aussieht, kannst du es per Chat mit der KI beheben. Programmierkenntnisse können helfen, wenn du sehr spezifisch sein willst, sind aber nicht erforderlich.

Wird die Seite genau wie das Claude-Artefakt aussehen?

Wenn du Repaint sagst, dass es das Original nachbilden 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 Artefakt HTML war. Falls das passiert, solltest du alles mit wenigen Prompts 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 kehrt zu einer früheren Version zurück. 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 das Risiko, deine Seite zu ruinieren.

Funktionieren Formulare und Buttons nach dem Import?

Ja. Kontaktformulare haben in deinem ursprünglichen Claude-Artefakt wahrscheinlich nicht funktioniert. Aber wenn du die Seite zu Repaint umziehst, kann es das Formular in ein echtes Kontaktformular verwandeln, das E-Mail-Benachrichtigungen sendet, wenn du Einsendungen erhältst. 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 Claude-Artefakt umgehen?

Claude-Artefakte speichern in der Regel keine Bilddateien in sich selbst. Sie verlinken meist auf Bilder, die irgendwo anders gehostet sind. Wenn du deinen Code importierst, kann Repaint Kopien dieser Bilder abrufen und speichern, sodass sie für deine neue Seite dauerhaft verfügbar bleiben. Repaint kann auch Bilder generieren, falls du noch welche hinzufügen musst.

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 Hosting, oder brauche ich noch einen separaten Host?

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