Claude Artifacts lokal ausführen: der Weg ohne Installation (2026)
Jedes Claude-Artefakt ist eine einzelne, in sich geschlossene HTML-Datei. Diese Anleitung zeigt den kompletten Exportweg — Code kopieren, als .html speichern, doppelklicken, und die App läuft in Ihrem eigenen Browser — dazu den integrierten Download-Shortcut und die Vite-Route für React-Artefakte.
Das Wichtigste in Kürze
- Ein Claude-Artefakt kommt als einzelne HTML-Datei daher: links der Chat, rechts das vollständige Code-Panel — alles, was Sie brauchen, um es außerhalb von Claude auszuführen, ist bereits auf dem Bildschirm.
- Kopierweg: Markieren Sie den gesamten Code, fügen Sie ihn in eine neue Textdatei ein, speichern Sie sie mit der Endung .html und doppelklicken Sie — das Artefakt öffnet sich in Ihrem Standardbrowser.
- Downloadweg: An der Artefakt-Karte in Claude sitzt ein Download-Button, der die .html-Datei direkt in Ihren Download-Ordner legt — kopieren und einfügen entfällt ganz.
- Achten Sie auf die Endung: Der Editor speichert standardmäßig als .txt, und ein Browser stellt eine .txt-Datei nicht als Seite dar. Das Speichern als .html ist der Schalter, der das Artefakt wirklich zum Laufen bringt.
Make an HTML File from a Claude.ai Game File
Kanal:Karl Kapp1:53
Diese Anleitung überträgt den im Video gezeigten Ablauf in einen eigenen Schritt-für-Schritt-Text; die Screenshots stammen aus derselben Aufnahme und jeder ist mit dem genauen Zeitpunkt verlinkt.
Die im FAQ beschriebene Vite + React + shadcn/ui-Route stammt aus Matt Palmers „Editing Claude Artifacts locally with Vite, React, and Shadcn/ui“ — als zweite Quelle genannt.
Ihr Artefakt außerhalb von Claude ausführen — Schritt für Schritt
- 1
Öffnen Sie das Code-Panel des Artefakts
Öffnen Sie in Claude die Unterhaltung mit Ihrem Artefakt und klappen Sie das Code-Panel auf, damit Chat und Quelltext nebeneinander liegen. Sie suchen ein einziges durchgehendes HTML-Dokument — inklusive Styles und Skripten, denn diese eine Datei ist die gesamte App.
Links der Chat, rechts der HTML-Quelltext des Artefakts — diese eine Datei ist die ganze App.Ansehen ab 0:02 - 2
Finden Sie den Copy-Button des Code-Panels
Die Kopfzeile des Code-Panels zeigt den Namen des Artefakts mit einem HTML-Tag neben dem Copy-Button. Ein Klick kopiert die komplette aktuelle Version des Quelltexts — manuelles Markieren entfällt.
Ein Klick auf Copy holt die gesamte aktuelle Revision des Artefakts.Ansehen ab 0:08 - 3
Testen Sie das Artefakt vor dem Export
Wechseln Sie zur Vorschau und benutzen Sie die App wirklich — in diesem Beispiel ein Punktesammel-Spiel mit Feindkreisen, Punktestand und aufpoppenden Fragen. Prüfen Sie, ob sich die aktuelle Revision so verhält, wie Sie es wollen: Was in der Vorschau läuft, ist genau das, was Sie exportieren.
Die Vorschau zeigt exakt die Revision, die Sie gleich kopieren — testen Sie sie zuerst hier.Ansehen ab 0:20 - 4
Kopieren Sie den gesamten HTML-Quelltext
Scrollen Sie durch das Code-Panel vom einleitenden DOCTYPE bis zum schließenden script-Tag und vergewissern Sie sich, dass nichts fehlt, dann kopieren Sie alles. Läuft es nach dem Einfügen nicht, ist eine unvollständige Kopie der erste Verdächtige.
Vom DOCTYPE bis zum letzten script-Tag — die Kopie muss vollständig sein.Ansehen ab 0:30 - 5
Erstellen Sie ein neues Textdokument auf dem Desktop
Klicken Sie unter Windows mit der rechten Maustaste auf eine freie Stelle des Desktops, wählen Sie Neu und dann Textdokument. Sie haben eine leere Datei für den Code — kein Editor-Setup nötig, der Editor genügt völlig.
Rechtsklick auf den Desktop, Neu, Textdokument — dieser Weg braucht nur den Windows-Editor.Ansehen ab 0:47 - 6
Öffnen Sie die leere Datei im Editor
Doppelklicken Sie auf das neue Dokument: Der Editor öffnet es mit dem Cursor in Zeile 1, Spalte 1 einer leeren Datei. Lassen Sie den Claude-Tab dahinter offen — eine Minute lang pendeln Sie zwischen beiden hin und her.
Ein leerer Editor bei Zeile 1, Spalte 1 — dahinter wartet Claude.Ansehen ab 0:55 - 7
Fügen Sie den Artefakt-Code in die Datei ein
Fügen Sie alles ein, was Sie kopiert haben. Die Datei füllt sich sofort mit HTML und JavaScript — hier die Zeichen-Hilfsfunktionen des Canvas-Spiels und seine Spielschleife. Wirkt der Einfügetext abgeschnitten, gehen Sie zu Schritt 4 zurück und kopieren Sie erneut.
Das ganze Artefakt lebt jetzt in einer simplen Textdatei auf Ihrem Rechner.Ansehen ab 0:57 - 8
Speichern Sie mit der Endung .html
Öffnen Sie Datei, Speichern unter, und geben Sie der Datei einen echten Namen mit der Endung .html. Der Dateityp im Dialog bleibt Textdokument — das ist egal; entscheidend ist das .html, das Sie in den Namen tippen, denn Browser rendern nur Seiten, die sie als HTML erkennen.
Der Name entscheidet alles: game.html läuft, game.txt nicht.Ansehen ab 1:01 - 9
Ersetzen-Warnung? Benennen Sie um
Warnt Windows, dass die Datei bereits existiert, wählen Sie Nein und greifen einen frischen Namen — in der Aufzeichnung war game.html schon gespeichert, deshalb heißt der zweite Export game2.html. Unterschiedliche Namen bewahren jede Version des Artefakts auf der Platte, statt sie zu überschreiben.
Nein zum Ersetzen, neuer Name: game2.html lässt den ersten Export unangetastet.Ansehen ab 1:07 - 10
Doppelklicken Sie die Datei und spielen Sie
Suchen Sie die gespeicherte Datei auf dem Desktop und doppelklicken Sie. Sie öffnet sich im Standardbrowser unter einer file:///-Adresse auf Ihrem eigenen Rechner — Startbildschirm, Punktestand und Feindkreise laufen exakt wie in Claude, ohne Server und ohne claude.ai-Tab.
file:///...Desktop/game2.html — das Artefakt läuft jetzt komplett auf Ihrer Maschine.Ansehen ab 1:32 - 11
Abkürzung: Claudes eigener Download-Button
Manuelles Kopieren ist nicht der einzige Weg. Claude zeigt unter der Artefakt-Karte einen Download-Button — manchmal neben einer zweiten Datei wie einem Aufbau-Leitfaden plus einer Download-all-Option. Ein Klick, und die .html landet direkt im Download-Ordner, ganz ohne Editor.
Der Download-Button an der Artefakt-Karte speichert die .html direkt — kein Kopieren nötig.Ansehen ab 1:44 - 12
Prüfen Sie, was in Ihren Downloads gelandet ist
Die Download-Liste des Browsers bestätigt die exportierten Dateien — hier DKapp_Game_Revised.html mit rund 20 KB. Doppelklicken Sie eine davon, um sie wie in Schritt 10 lokal zu starten, oder öffnen Sie sie im Texteditor und lesen Sie den Quelltext.
Eine 20-KB-.html in der Download-Liste — das ganze Artefakt, bereit für den Offline-Betrieb.Ansehen ab 1:50