Was sind Claude-Artefakte? Eine praktische Einführung
7 Min. Lesezeit
Wenn Claude dir heute eine React-Komponente, ein Diagramm oder ein kleines Tool als Codeblock gibt, kopierst du es vermutlich in deinen eigenen Editor, nur um zu sehen, ob es tatsächlich funktioniert. Genau diese zusätzliche Runde nehmen dir Artefakte ab.
Tipp
Ein Artefakt ist kein schickerer Codeblock. Es ist eine laufende Version dessen, was Claude gerade beschrieben hat, in einem eigenen Bereich dargestellt, die du ansehen, anklicken und weiterentwickeln kannst, ohne die Unterhaltung zu verlassen.
Was ein Artefakt tatsächlich ist
Erzeugt Claude etwas Umfangreiches und in sich Geschlossenes, eine Webseite, ein Diagramm, eine kleine React-App, eine Datenvisualisierung, kann es diesen Inhalt in einem separaten Bereich neben dem Chat öffnen, statt ihn als Text einzufügen. Dieser Bereich führt den Code in einer abgeschotteten Umgebung aus: Dein Browser führt ihn aus, aber er kommt ohne deine ausdrückliche Handlung nicht an dein Dateisystem, deine anderen Tabs oder irgendetwas außerhalb der Abschottung.
Das ist wichtig dafür, wie du über Artefakte denken solltest. Sie sind keine Vorschau dessen, was du veröffentlichen würdest. Sie sind ein schneller Weg, eine Idee zu prüfen, bevor du entscheidest, ob sie sich überhaupt zu veröffentlichen lohnt, und du brauchst keinen Entwicklerhintergrund, um Nutzen daraus zu ziehen: Das gewünschte Ergebnis zu beschreiben genügt für viele gängige Einsätze.
Was du mit Artefakten bauen kannst
Alles, was in sich geschlossen genug ist, um allein zu laufen oder dargestellt zu werden. Die gängigen Kategorien, mit einem Prompt, der jede auslösen würde:
| Typ | Gut für | Beispiel-Prompt |
|---|---|---|
| Interaktives Tool | Rechner, Umrechner, formulargesteuerte Schätzungen | „Baue einen Hypothekenrechner mit Schiebereglern für Zins, Laufzeit und Anzahlung.“ |
| Webseite | Landingpages, Einseiter, E-Mail-Vorlagen | „Mach eine einseitige Seite für eine Bäckerei vor Ort mit Öffnungszeiten, Speisekarte und Kartenlink.“ |
| Datenvisualisierung | Diagramme aus Daten, die du einfügst | „Stelle diesen Quartalsumsatz als gruppiertes Balkendiagramm mit Trendlinie dar.“ |
| Diagramm | Flussdiagramme, Organigramme, einfache Architektur | „Zeichne ein Flussdiagramm unseres Retourenprozesses von der Anfrage bis zur Erstattung.“ |
| Dokument | Formatierte Berichte, strukturierte Briefings | „Mach aus diesen Notizen ein formatiertes einseitiges Projektbriefing mit Überschriften.“ |
| Einfaches Spiel oder Demo | Lernhilfen, interaktive Erklärungen | „Mach einen kleinen Tipp-Geschwindigkeitstest, der Wörter pro Minute anzeigt.“ |
Wann ein Artefakt eine normale Chat-Antwort schlägt
Nicht alles, was Claude baut, braucht einen eigenen Bereich. Ein Artefakt ist die richtige Wahl, wenn:
Du das Ergebnis ansehen und durchklicken willst, nicht nur lesen, ein Dashboard-Entwurf, ein funktionierendes Spiel, ein Diagramm deiner eigenen Daten
Du dasselbe visuelle oder interaktive Ergebnis über mehrere Runden weiterentwickelst und willst, dass Claude eine Sache an Ort und Stelle aktualisiert statt jedes Mal einen neuen Codeblock
Jemand anderes es funktionieren sehen muss, statt nur gesagt zu bekommen, was es täte
Musst du stattdessen nur Code lesen und verstehen, oder ist die Ausgabe eine einmalige Antwort, die du nicht wieder aufrufst, ist eine normale Antwort einfacher. Es gibt keinen zusätzlichen Bereich zu verwalten für etwas, das du nie zweimal ansiehst.
| Du willst | Nutze |
|---|---|
| Etwas laufen sehen und durchklicken | Artefakt |
| Code einmal lesen, verstehen oder kopieren | Normale Antwort |
| Echte Dateien in einem echten Projekt ändern | Claude Code |
| Ein visuelles Ergebnis über viele Runden entwickeln | Artefakt |
Ein kurzes Beispiel
Um ein kleines interaktives Tool zu bitten, genügt, um eines auszulösen. Hier ein realistischer Ausgangs-Prompt:
Baue ein einfaches interaktives Tool als Artefakt: ein Formular mit drei Zahlenfeldern (gearbeitete Stunden, Stundensatz, Steuerprozent), das das Nettogehalt live berechnet und anzeigt, während ich tippe. Nutze reines React, keine externen Bibliotheken, und halte das Styling minimal.
”Claude stellt das als funktionierende Komponente dar, in die du tatsächlich tippen kannst, nicht als Beschreibung einer solchen. Ist die erste Fassung nah dran, aber nicht richtig, z. B. stimmt die Steuerrechnung nicht, oder du willst ein Währungssymbol, sag es in einfacher Sprache. Claude aktualisiert dasselbe Artefakt, statt ein neues zu beginnen, was deinen Iterationsverlauf an einem Ort hält, statt ihn über mehrere Codeblöcke zu verstreuen.
Claudes API aus einem Artefakt heraus aufrufen
Eine neuere Fähigkeit, die man kennen sollte, auch wenn du sie noch nicht baust: Artefakte können jetzt direkt Claudes eigene API aufrufen, ohne dass du einen API-Schlüssel stellst oder pro Aufruf zahlst. Das macht aus einem Artefakt von einer statischen Demo etwas, das eine eigene Unterhaltung führen, mehrere Anfragen verketten oder einen kleinen agentischen Workflow steuern kann, ganz innerhalb der Abschottung.
Das ist ein deutlich anderer Anwendungsfall als „zeig mir ein Diagramm“ und verdient eine eigene, tiefere Anleitung. Fürs Erste die praktische Erkenntnis: Prototypst du etwas, das über mehrere Schritte schlussfolgern muss, nicht nur ein festes Ergebnis darstellt, verlange es ausdrücklich. Claude greift nicht zum API-Aufruf, wenn die Aufgabe ihn nicht wirklich braucht.
In Claude Tutorial
Artefakte sind eine Claude-Fähigkeit unter vielen
Die App führt durch wiederverwendbare Techniken wie diese, Muster, die gelten, ob du ein Tool prototypst oder nur eine bessere Antwort aus einem normalen Chat holen willst.
Der Datenschutz-Kompromiss, den niemand erwähnt
Artefakte lassen sich öffentlich per Link teilen, und geteilte Artefakte wurden schon von Suchmaschinen indexiert gefunden. Baust du etwas mit echten Daten, selbst mit Daten, die du für harmlos hältst, kommt ein geteilter Link dem Veröffentlichen einer Webseite näher als dem Senden einer privaten Datei.
Achtung
Lies ein Artefakt vor dem öffentlichen Teilen noch einmal, als würde ein Fremder ohne jeden Kontext es über eine Google-Suche finden, denn das ist eine echte Möglichkeit, keine hypothetische.
Die sichere Voreinstellung: Halte Artefakte privat, sofern du nicht konkret geprüft hast, was darin steht. Musst du eines an eine Kollegin weitergeben, ist das eine andere, engere Art des Teilens als ein öffentlicher Link, und es lohnt sich, diese Unterscheidung bewusst zu behandeln, statt auf „mach einfach einen Link daraus“ auszuweichen.
Häufige Fehler
- Eine kleine Korrektur als völlig neuen Bau formulieren. Alles von vorn zu verlangen, verliert, was schon funktionierte. Sag konkret, was sich ändern soll, „behalte alles, korrigiere nur die Steuerberechnung“, statt die ganze ursprüngliche Anfrage zu wiederholen.
- Erwarten, dass ein Formular innerhalb der Abschottung abgeschickt wird. Das ist Absicht, kein Fehler: Die Abschottung blockiert echte Navigation und externe Formular-Posts. Behandle das Absenden stattdessen in JavaScript, aktualisiere den Zustand oder zeige direkt ein Ergebnis.
- Annehmen, ein Artefakt, das nicht dargestellt wird, sei kaputt. Meist bedeutet es eine fehlende Bibliothek oder einen Laufzeitfehler. Sag Claude, was du siehst („leerer Bereich“ oder den Fehlertext), und es korrigiert den Code an Ort und Stelle.
- Eines mit echten Daten teilen, ohne es noch einmal zu lesen. Oben behandelt und wiederholenswert: Ein öffentlicher Link kommt dem Veröffentlichen einer Seite näher als dem Senden einer Datei.
Häufig gestellte Fragen
Was sind Claude-Artefakte?
Ein eigener Bereich neben dem Chat, der etwas ausführt oder darstellt, das Claude gebaut hat, eine kleine App, ein Diagramm, ein Dokument, sodass du es ansehen und weiterentwickeln kannst, ohne Code in deinen eigenen Editor zu kopieren.
Was lässt sich mit Claude-Artefakten bauen?
Interaktive Tools, einzelne Webseiten, Datenvisualisierungen, Diagramme, formatierte Dokumente und einfache Spiele oder Demos. Alles, was in sich geschlossen genug ist, um allein in einer abgeschotteten Browserumgebung zu laufen.
Sind Claude-Artefakte standardmäßig privat?
Ja. Ein Artefakt ist nur für dich sichtbar, bis du einen Freigabelink erstellst. Geteilte Artefakte wurden schon von Suchmaschinen indexiert gefunden, behandle einen öffentlichen Link also wie eine Veröffentlichung.
Können andere mein Claude-Artefakt bearbeiten?
Wer einen Freigabelink hat, kann es ansehen und in einem geteilten Kontext von einer Kopie aus arbeiten. Dein Original bleibt deins. Für echte Zusammenarbeit gib die Unterhaltung weiter, nicht nur den Link.
Welche Programmiersprachen unterstützen Artefakte?
Hauptsächlich Webtechnologien: HTML, CSS und JavaScript, einschließlich React. Das deckt die meisten interaktiven Tools und Visualisierungen ab. Es ist keine allgemeine Laufzeit für Backend-Sprachen.
Laufen Claude-Artefakte ab?
Sie bleiben mit der Unterhaltung bestehen, in der sie erstellt wurden. Willst du, dass eines unabhängig von diesem Chat erhalten bleibt, speichere den Code oder bewahre ihn an einem Ort auf, den du kontrollierst.
Weiterlesen
- Inhalte bekommen, auf denen du aufbauen kannst, statt nur einer Chat-Antwort um zu erkennen, wann eine Ausgabe in einen eigenen bearbeitbaren Raum gehört.
- Eine Änderung über mehrere Dateien mit Claude Code vornehmen für den Fall, dass du einer Abschottung entwachsen bist und echte Dateien in einem Projekt ändern musst.
- Claudes erste Antwort zur richtigen verfeinern für dieselbe Iterationshaltung, die dieser Leitfaden beim Verfeinern eines Artefakts nutzt, angewandt auf jede Claude-Ausgabe.
- Zwischen neuem Chat, Projekt oder Weitermachen wählen denn wo du ein Artefakt baust, beeinflusst, wie leicht es später zu finden und wiederzuverwenden ist.