Claude artifacts — der vollständige Leitfaden

Anthropics Claude hat eine Funktion, die die meisten anderen KI-Chatbots nicht haben: artifacts. Eigenständiger Code, HTML, React-Komponenten, Mermaid-Diagramme und SVG, die inline im Chat als eigene Einheiten dargestellt werden.

Gut eingesetzt, machen artifacts Claude zu einem One-Shot-Prototyping-Werkzeug. Schlecht eingesetzt, sind sie nur aufgehübschte Codeblöcke. Hier ist der vollständige Leitfaden.

Was ein artifact eigentlich ist

Anthropics Dokumentation bezeichnet artifacts als „substantielle, in sich geschlossene Inhalte, die Benutzer wahrscheinlich ändern, iterieren oder außerhalb der Konversation verwenden werden.” In der Praxis decken sie sechs Typen ab:

1. Code — Python, TypeScript, Rust, Go, usw. Mit Syntax-Highlighting dargestellt.
2. Markdown-Dokumente — ausführliche Prosa, Berichte, Entwürfe.
3. HTML-Seiten — einseitige Landing Pages, Dashboards, Prototypen.
4. React-Komponenten — live gerenderte Komponenten mit voller Reaktivität.
5. Mermaid-Diagramme — Flussdiagramme, ER-Diagramme, Sequenzdiagramme. Inline als SVG dargestellt.
6. SVG-Bilder — Vektorgrafiken, die aus Prompts generiert wurden.

Claude entscheidet anhand von Länge und In-sich-Geschlossenheit, wann etwas ein artifact wird. Sie können die Entscheidung beeinflussen, indem Sie sagen: „Mach das zu einem artifact” oder „als eigenständige Komponente”.

Warum artifacts für den Export wichtig sind

Das artifact hat seinen eigenen Lebenszyklus:

• Es wird getrennt vom Konversationstext dargestellt.
• Sie können es inline bearbeiten (bitten Sie Claude, „am artifact zu iterieren”).
• Es hat eine stabile Kennung über Bearbeitungen hinweg.

Das macht den Export knifflig. Wenn Ihr Export-Tool die Konversation einfach als Markdown ausgibt, erscheint das artifact entweder als (a) inline Codeblöcke, die die darstellbare Form verlieren, oder (b) fehlt vollständig.

Gute Export-Tools behandeln artifacts als vollwertige Einheiten.

Wie ChatExport AI artifacts behandelt

Drei Modi, pro Export auswählbar:

Modus 1: Inline (Standard für PDF, Word)

Der artifact-Inhalt wird an der Stelle, an der er erschien, in das Konversationstranskript eingefügt. Code behält Syntax-Highlighting. Mermaid-Diagramme werden als eingebettetes SVG dargestellt. HTML-Seiten werden als Screenshot der gerenderten Seite dargestellt.

Am besten geeignet: Die Exportdatei an jemanden weitergeben, der die Konversation nur lesen möchte.

Modus 2: Separate Dateien (Standard für ZIP, Markdown)

Das artifact wird als eigenständige Datei gespeichert:

• Code → chat/<artifact-name>.py (oder .ts, .rs, usw.)
• HTML → chat/<artifact-name>.html
• React → chat/<artifact-name>.jsx
• Mermaid → chat/<artifact-name>.mmd plus chat/<artifact-name>.svg
• SVG → chat/<artifact-name>.svg

Das Transkript verweist auf jedes artifact über einen relativen Link.

Am besten geeignet: Das artifact an einen Entwickler weitergeben, der den Code ausführen/ändern möchte.

Modus 3: Beides

Der ZIP-Modus enthält beides: das Transkript inline zum Lesen, die artifacts als separate Dateien zum Ausführen.

Am besten geeignet: zur Archivierung. Sechs Monate später werden Sie die beiden Ansichten zu schätzen wissen.

Fallstricke bei artifacts

Mehrere Revisionen

Wenn Sie an einem artifact iterieren („mach den Button größer”), aktualisiert Claude das artifact an Ort und Stelle. Ältere Revisionen verschwinden aus der Konversationsansicht, sind aber über das Verlaufsfenster des artifacts abrufbar.

ChatExport AI erfasst zum Zeitpunkt des Exports die aktuelle Version jedes artifacts. Wenn Sie alle Revisionen wünschen, bitten Sie Claude vor dem Export: „Zeig mir v1, v2, v3 des artifacts”; der Revisionsverlauf wird dann als separate Codeblöcke exportiert.

Unvollständige artifacts

Wenn Claude gerade mitten im Streamen ist, wenn Sie Export drücken, wird das unvollständige artifact so wie es ist eingeschlossen. Warten Sie, bis der Streaming-Indikator fertig ist, bevor Sie exportieren.

React-artifact-Abhängigkeiten

React artifacts können aus einer kleinen Whitelist importieren (React, Tailwind via classnames, lucide-react icons). Der Export erfasst den JSX-Quellcode; der Empfänger muss dieselben Abhängigkeiten einrichten, wenn er das artifact lokal ausführen möchte.

Die Exporte von ChatExport AI enthalten für React artifacts eine README.md im ZIP, die die benötigten Abhängigkeiten auflistet, plus einen Snippet, der zeigt, wie man ein Vite + React-Projekt aufsetzt, das das artifact ausführt.

Mermaid-Diagramme offline rendern

Der SVG-Export eines Mermaid-Diagramms ist vollständig in sich geschlossen — öffnet in jedem Browser, kein Internet nötig. Der .mmd-Quellexport ermöglicht späteres Bearbeiten und erneutes Rendern.

Workflow: Vom Claude-Prototyp zum ausgelieferten Code

Der Ablauf, der für mich am besten funktioniert hat:

1. Claude auffordern, den Prototyp als React artifact zu erstellen. 2-3 Mal inline iterieren.
2. Die Konversation als ZIP exportieren. Das Transkript erklärt die Designentscheidungen; die artifact-Dateien sind ausführbar.
3. Das artifact in ein echtes Vite-Projekt einfügen. Die aufgelisteten Abhängigkeiten hinzufügen. Die Komponente läuft so wie sie ist im Projekt.
4. Die prompt-artigen Prosa-Kommentare durch echtes JSDoc ersetzen. Tests hinzufügen. Ausliefern.

Gesamtzeit von der Aufforderung bis zum lokalen Ausführen: ~5 Minuten. Der Export ist das, was das schnell macht — er ist die Brücke zwischen „Claude hat das gebaut” und „das ist in meinem Repo”.

Probieren Sie es aus

Öffnen Sie Claude. Bitten Sie es: „Erstell mir eine eigenständige HTML-Seite, die ein Mermaid-Diagramm eines Benutzeranmeldeflusses ist”. Wenn das artifact rendert, exportieren Sie die Konversation als ZIP über ChatExport AI. Das ZIP enthält das Transkript plus ein eigenständiges .html plus die .mmd-Quelle plus das gerenderte .svg.

Das ist der vollständige Claude-artifact-Workflow.

Verwandte Themen

• Claude-Export-Anleitung.
• Claude to Markdown — Nur-Markdown-Ablauf, artifacts als separate Dateien.
• Für Entwickler — Code-getreue KI-Export-Workflows.