Claude Artifact als echte Website veröffentlichen

Die Artifacts-Funktion von Claude ist eine der schnellsten Möglichkeiten, eine komplette Website zu erzeugen. Du beschreibst, was du brauchst, Claude schreibt HTML und CSS, und du siehst die Vorschau direkt im Chatfenster. Sieht großartig aus.

Dann stößt du an eine Wand: Wie bekommst du das Ganze eigentlich ins Internet?

Das Artifact lebt in Claude. Du kannst es ansehen, den Code kopieren, sogar einen Link zur Unterhaltung teilen – aber es ist keine echte Website. Es hat keine URL, die du auf eine Visitenkarte drucken kannst. Es taucht nicht bei Google auf. Es verschwindet, wenn du die Unterhaltung verlierst. Und mit einer eigenen Domain verbinden kannst du es erst recht nicht.

Diese Anleitung zeigt dir, wie du in unter fünf Minuten von einem Claude Artifact zu einer live gehosteten Website kommst – mit eigener Adresse, SSL-Zertifikat und funktionierendem Kontaktformular.

Was ist ein Claude Artifact?

Wenn du Claude bittest, etwas Visuelles zu erstellen – eine Website, ein Diagramm, eine interaktive App –, erzeugt es den Code und zeigt eine Live-Vorschau in einem Bereich neben der Unterhaltung. Anthropic nennt diese Artifacts. Es sind eigenständige HTML/CSS/JS-Dateien, die im Browser laufen.

Für die Website-Erstellung sind Artifacts wirklich beeindruckend. Der Code ist sauber, die Designs sind modern, und das responsive Verhalten funktioniert meist auf Anhieb. Das Problem ist nicht die Qualität, sondern die Auslieferung. Ein Artifact ist eine Vorschau, keine Veröffentlichung.

Schritt 1: Den Code aus Claude herausholen

Zuerst musst du die HTML-Datei aus dem Artifact auf deinen Computer bekommen. Dafür gibt es zwei Wege:

Option A: Den Code kopieren

1. Klicke in Claude auf den Artifact-Bereich, um ihn zu erweitern.
2. Klicke auf das Code-Symbol (oder „Quelltext anzeigen“), um das rohe HTML zu sehen.
3. Klicke auf Kopieren, um den gesamten Codeblock zu kopieren.
4. Öffne einen reinen Texteditor (Notepad unter Windows, TextEdit auf dem Mac – achte darauf, dass er im Nur-Text-Modus läuft).
5. Füge den Code ein und speichere die Datei als index.html auf deinem Desktop.

Option B: Das Artifact herunterladen

Bei manchen Claude-Tarifen kannst du das Artifact direkt als HTML-Datei herunterladen. Wenn du im Artifact-Bereich eine Download-Schaltfläche siehst, nutze sie – das geht schneller. Achte nur darauf, dass die heruntergeladene Datei index.html heißt (benenne sie bei Bedarf um).

Schritt 2: Auf SiteDrop ablegen

Jetzt hast du eine Datei index.html auf deinem Computer. So bringst du sie ins Internet:

1. Gehe zu SiteDrop und melde dich an (der Einstieg ist kostenlos).
2. Ziehe deine Datei index.html auf das SiteDrop-Dashboard. Das war es schon. Ein Ziehen.
3. In unter fünf Sekunden stellt SiteDrop deine Website auf einem globalen CDN bereit, sichert sie mit einem kostenlosen SSL-Zertifikat (HTTPS) und gibt dir einen Live-Link.

Dein Claude Artifact ist jetzt eine echte Website, die jeder auf der Welt aufrufen kann.

Schritt 3: Deine eigene Domain einrichten

Der kostenlose SiteDrop-Link eignet sich bestens zum Teilen. Wenn du aber eine professionelle Adresse willst (etwa www.yourbusiness.com), kannst du sie direkt im SiteDrop-Dashboard sichern:

1. Öffne die Einstellungen deiner Website im Dashboard.
2. Suche nach dem gewünschten Domainnamen.
3. Sichere ihn dir – SiteDrop übernimmt die gesamte DNS-Konfiguration automatisch. Keine Registrar-Dashboards, keine Nameserver-Einträge, keine 48 Stunden Wartezeit.

Schritt 4: Ein funktionierendes Kontaktformular (kostenlos)

Wenn dein Claude Artifact ein Kontaktformular enthält (und das sollten die meisten Unternehmens-Websites haben), richtet SiteDrop es automatisch ein. Nachrichten, die über das Formular eingehen, landen in deinem integrierten SiteDrop-Posteingang – ohne E-Mail-Hosting, ohne Formular-Tools von Drittanbietern, ohne monatliche Abos.

Das ist einer der größten Vorteile gegenüber anderen Hosting-Optionen: Dein Kontaktformular funktioniert wirklich, ab dem Moment, in dem du die Website hochlädst.

Tipps für bessere Claude Artifacts

Die Qualität deiner Website hängt von der Qualität deines Prompts ab. Hier ein paar Tipps, wie du bessere Artifacts von Claude bekommst:

Sei konkret zu deinem Unternehmen

„Erstelle eine einseitige Website für einen mobilen Hundefriseur namens Paws & Shine in Manchester. Sie soll einen Hero-Bereich mit Slogan, einen Leistungsbereich mit 4 Leistungen und Preisen, Kundenstimmen und ein Kontaktformular enthalten. Verwende ein Farbschema aus warmem Petrol und Creme mit modernen, abgerundeten Designelementen.“

Je konkreter du bist, desto stimmiger wird das Ergebnis. Nenne deinen echten Unternehmensnamen, deine echten Leistungen, deine echten Preise und deine bevorzugten Farben.

Alles in einer Datei verlangen

Ergänze deinen Prompt um „schreibe das gesamte CSS inline in die HTML-Datei“ oder „mach daraus eine einzelne, eigenständige index.html“. Dann klappt der Upload zu SiteDrop reibungslos – eine Datei, ein Ziehen, fertig.

Mobile Darstellung anfordern

Ergänze deinen Prompt um „mach sie vollständig responsiv für Handy, Tablet und Desktop“. Claude macht das in der Regel gut, aber wenn du es ausdrücklich sagst, lässt es keinen Breakpoint aus.

Den SiteDrop Prompt Creator nutzen

Du weißt nicht, wie du einen guten Prompt schreibst? Der SiteDrop Prompt Creator stellt dir ein paar Fragen zu deinem Unternehmen und erzeugt den perfekten Prompt zum Einfügen in Claude. Er übernimmt alle technischen Details für dich.

Warum nicht einfach den Link zur Claude-Unterhaltung teilen?

Claude lässt dich einen Link zur Unterhaltung teilen, und der Empfänger kann das Artifact sehen. Warum also SiteDrop? Weil ein geteilter Unterhaltungslink:

• keine echte URL ist – einen Claude-Unterhaltungslink kannst du weder auf eine Visitenkarte noch in einen Google-Eintrag setzen.
• keine Domain hat – deine Website liegt unter claude.ai/share/..., nicht unter deinem Unternehmensnamen.
• nicht crawlbar ist – Suchmaschinen und KI-Antwortmaschinen können ihn weder finden noch zitieren.
• kein Kontaktformular hat – Besucher können dich nicht erreichen.
• verschwinden kann – wenn Anthropic die Freigaberegeln ändert oder du die Unterhaltung verlierst, bricht der Link.
• das Branding von Claude zeigt – nicht das Branding deines Unternehmens.

Eine bei SiteDrop gehostete Website gehört dir. Deine Domain, dein Branding, dein Kontaktformular, deine Statistiken. Sie ist eine echte Website, keine Vorschau im Produkt eines anderen.

Was kannst du nach der Veröffentlichung noch tun?

• Inhalte visuell bearbeiten – ändere mit dem visuellen Editor von SiteDrop Texte, Bilder und Inhalte direkt auf der Seite.
• Eigene Bilder einfügen – ersetze Platzhalterbilder durch deine echten Unternehmensfotos.
• Jederzeit aktualisieren – erzeuge das Artifact in Claude mit Änderungen neu, lade es erneut zu SiteDrop hoch, und deine Live-Website wird sofort aktualisiert.
• Besucher verfolgen – sieh im SiteDrop-Dashboard, wie viele Menschen deine Website besuchen.

Der ganze Ablauf Schritt für Schritt

1. Öffne Claude und beschreibe deine Website (oder nutze den Prompt Creator).
2. Claude erzeugt ein Artifact – sieh dir die Vorschau an und prüfe, ob es dir gefällt.
3. Kopiere den Code oder lade die HTML-Datei herunter.
4. Ziehe die Datei auf SiteDrop.
5. Deine Website ist live. Auf Wunsch sicherst du dir eine eigene Domain.

Gesamtdauer: unter fünf Minuten. Gesamtkosten: Der Einstieg ist kostenlos.