Anthropics Claude hat eine Funktion, die es von den meisten KI-Chatbots unterscheidet: Artefakte. Dabei handelt es sich um in sich geschlossene Code-Stücke, HTML-, React-Komponenten, Mermaid-Diagramme und SVG-Grafiken, die live in Ihrem Chat als unabhängige, bearbeitbare Einheiten dargestellt werden.
Meistern Sie Artefakte und Claude wird zu einer leistungsstarken Ein-Schuss-Prototyping-Engine. Nutzen Sie sie falsch, sind sie nur ausgefallene Code-Blöcke. Hier erfahren Sie alles, was Sie wissen müssen.
Was ein Artefakt eigentlich ist
Anthropic definiert Artefakte als „substanzielle, in sich geschlossene Inhalte, die Benutzer wahrscheinlich ändern, iterieren oder außerhalb der Konversation verwenden werden.” Es gibt sie in sechs verschiedenen Typen:
- Code: Python, TypeScript, Rust, Go und mehr, dargestellt mit vollständiger Syntax-Hervorhebung.
- Markdown-Dokumente: längere Inhalte, Berichte und ausgefeilte Entwürfe.
- HTML-Seiten: vollständige einseitige Landingpages, Dashboards und interaktive Prototypen.
- React-Komponenten: vollständig reaktive, live gerenderte UI-Komponenten.
- Mermaid-Diagramme: Flussdiagramme, ER-Diagramme und Sequenzdiagramme, die als Inline-SVG dargestellt werden.
- SVG-Bilder: Vektorgrafiken, die direkt aus Textaufforderungen erstellt werden.
Claude entscheidet automatisch, wann ein Inhalt basierend auf Länge und Eigenständigkeit zu einem Artefakt werden soll. Möchten Sie mehr Kontrolle? Bitten Sie einfach darum: „Mach dies zu einem Artefakt” oder „Erstelle dies als eigenständige Komponente.”
Warum Artefakte für den Export wichtig sind
Artefakte haben ihren eigenen Lebenszyklus:
- Sie werden unabhängig vom Gesprächstext gerendert.
- Sie können sie inline bearbeiten, indem Sie Claude bitten, „das Artefakt zu iterieren.”
- Jedes Artefakt behält eine stabile Kennung über alle Überarbeitungen hinweg.
Dies stellt eine Herausforderung für den Export dar. Wenn Ihr Export-Tool die Konversation einfach als Markdown ausgibt, werden Artefakte entweder (a) zu einfachen Code-Blöcken, die ihre interaktive Form verlieren, oder (b) verschwinden vollständig.
Fortschrittliche Export-Tools behandeln Artefakte als Bürger erster Klasse.
Wie ChatExport AI mit Artefakten umgeht
ChatExport AI bietet drei verschiedene Exportmodi, die pro Export ausgewählt werden:
Modus 1: Inline (Standard für PDF und Word)
Der Artefakt-Inhalt wird direkt an seiner ursprünglichen Position in das Gesprächstranskript eingebettet. Code behält die Syntax-Hervorhebung. Mermaid-Diagramme erscheinen als eingebettetes SVG. HTML-Seiten werden als gerenderte Screenshots angezeigt.
Am besten geeignet für: das Teilen des Exports mit Lesern, die den vollständigen Gesprächskontext sehen möchten.
Modus 2: Separate Dateien (Standard für ZIP und Markdown)
Jedes Artefakt wird als eigene eigenständige Datei gespeichert:
- Code →
chat/<Artefaktname>.py(oder .ts, .rs usw.) - HTML →
chat/<Artefaktname>.html - React →
chat/<Artefaktname>.jsx - Mermaid →
chat/<Artefaktname>.mmdpluschat/<Artefaktname>.svg - SVG →
chat/<Artefaktname>.svg
Das Transkript verlinkt mit relativen Dateipfaden zu jedem Artefakt.
Am besten geeignet für: Entwickler, die den eigentlichen Code ausführen oder ändern müssen.
Modus 3: Beides
ZIP-Exporte enthalten alles: ein Inline-Transkript zum Lesen plus separate Artefaktdateien zur Ausführung.
Am besten geeignet für: Langzeitarchivierung. Sie werden sich sechs Monate später bedanken, wenn beide Ansichten verfügbar sind.
Fallstricke bei Artefakten
Mehrere Überarbeitungen
Wenn Sie an einem Artefakt iterieren („mach den Button größer”), aktualisiert Claude es direkt an Ort und Stelle. Vorherige Versionen verschwinden aus der Konversationsansicht, bleiben aber über das Verlaufsfenster des Artefakts zugänglich.
ChatExport AI erfasst zum Zeitpunkt des Exports die aktuelle Version jedes Artefakts. Benötigen Sie alle Überarbeitungen? Bitten Sie Claude vor dem Export: „Zeig mir v1, v2, v3 des Artefakts.” Der Revisionsverlauf wird dann als separate Code-Blöcke exportiert.
Unvollständige Artefakte
Exportieren Sie, während Claude noch in der Generierung ist, erhalten Sie ein unvollständiges Artefakt. Warten Sie immer, bis der Streaming-Indikator abgeschlossen ist, bevor Sie exportieren.
Abhängigkeiten von React-Artefakten
React-Artefakte können aus einer begrenzten Whitelist importieren (React, Tailwind über Klassennamen, lucide-react-Symbole). Der Export bewahrt den JSX-Quellcode; jeder, der ihn lokal ausführt, benötigt die gleichen Abhängigkeiten.
ChatExport AI fügt bei ZIP-Exporten für React-Artefakte eine README.md bei, die die erforderlichen Abhängigkeiten sowie ein Starter-Snippet dokumentiert, das zeigt, wie man ein Vite + React-Projekt aufsetzt, das das Artefakt sofort ausführt.
Mermaid-Diagramme offline rendern
Exportierte Mermaid-Diagramme als SVG sind vollständig in sich geschlossen – sie öffnen in jedem Browser ohne Internetverbindung. Die .mmd-Quelldatei ermöglicht es Ihnen, das Diagramm später zu bearbeiten und neu zu rendern.
Workflow: Vom Claude-Prototyp zum ausgelieferten Code
Hier ist der Workflow, der die schnellsten Ergebnisse liefert:
- Fordern Sie Claude auf, Ihren Prototyp als React-Artefakt zu erstellen. Iterieren Sie 2-3 Mal inline, bis es stimmt.
- Exportieren Sie die Konversation als ZIP. Das Transkript erfasst Ihre Designentscheidungen; die Artefaktdateien sind sofort ausführbar.
- Importieren Sie das Artefakt in ein produktives Vite-Projekt. Installieren Sie die aufgelisteten Abhängigkeiten. Die Komponente läuft ohne Änderungen.
- Ersetzen Sie Prompt-artige Kommentare durch ordentliches JSDoc. Fügen Sie Tests hinzu. Stellen Sie bereit.
Gesamtzeit vom ersten Prompt bis zum lokalen Laufen: etwa 5 Minuten. Der Export überbrückt die Lücke zwischen „Claude hat das gebaut” und „das lebt in meinem Repository.”
Probieren Sie es aus
Öffnen Sie Claude. Bitten Sie es: „Baue mir eine eigenständige HTML-Seite mit einem Mermaid-Diagramm, das einen Benutzer-Anmeldevorgang zeigt.” Wenn das Artefakt gerendert wird, exportieren Sie die Konversation als ZIP über ChatExport AI. Ihr ZIP enthält das vollständige Transkript plus eine eigenständige .html-Datei, die .mmd-Quelle und das gerenderte .svg.
Das ist der vollständige Claude-Artefakt-Workflow.
Verwandte Beiträge
- Claude-Export-Leitfaden.
- Claude zu Markdown, Nur-Markdown-Workflow mit Artefakten als separate Dateien.
- Für Entwickler, Code-treue KI-Export-Workflows.