Claude Artifacts verwandeln eine KI-Antwort in etwas Eigenständiges. Statt Text im Chat-Verlauf öffnet Claude automatisch ein zweites Panel rechts neben der Unterhaltung. Was dort entsteht: ein interaktives Mini-Produkt, direkt aus dem Chat. Ein Kalkulator. Ein Dashboard. Ein Diagramm. Ein fertiges Skript.
Seit Februar 2026 ist das komplett kostenlos. Kein Bezahl-Plan nötig.
- Öffne claude.ai kostenlos im Browser
- Schreibe: „Erstelle mir einen HTML-Kalkulator für den BMI-Wert“
- Claude öffnet rechts automatisch das Artifact-Panel mit Live-Vorschau
- Verfeinere per Chat: „Füge eine farbige Ampel-Bewertung hinzu“
Dieser Guide richtet sich an drei Gruppen: Einsteiger ohne Artifact-Erfahrung, Nutzer, die mehr aus Artifacts herausholen wollen, und Profis, die Live-Artifacts mit externen Daten verbinden möchten. Ich nutze Claude seit 2023 täglich für Content, Code und Analyse. Artifacts habe ich in meinem eigenen Workflow getestet: von einfachen HTML-Kalkulatoren bis zu iterativen React-Dashboards. Was ich dabei festgestellt habe: Der größte Effizienzgewinn entsteht nicht beim Erstellen, sondern beim Verfeinern. Drei bis fünf Chat-Iterationen liefern ein Ergebnis, das ich manuell Stunden beschäftigen würde.
Inhaltsverzeichnis
Was sind Claude Artifacts?
Claude Artifacts sind eigenständige Ausgaben, die Claude in einem separaten Panel rechts neben dem Chat anzeigt. Sie unterscheiden sich grundlegend von normalen Antworten: Ein Artifact lebt außerhalb des Chat-Verlaufs. Es lässt sich bearbeiten, iterieren, herunterladen und teilen.
Claude öffnet das Artifact-Panel automatisch, wenn drei Bedingungen erfüllt sind. Der Inhalt ist länger als etwa 15 Zeilen. Er ist eigenständig nutzbar, also Code, Dokument oder Visualisierung. Und er wird wahrscheinlich weiterentwickelt oder wiederverwendet.
Das Interface teilt sich in zwei Hälften. Links der Chat, rechts die Live-Vorschau. Bei HTML-Seiten und React-Komponenten siehst du das Ergebnis sofort im Browser. Bei Code wird der Quelltext angezeigt. Beide Seiten aktualisieren sich, wenn du im Chat neue Anweisungen gibst.
Artifacts funktionieren mit allen aktuellen Claude-Modellen. Claude Haiku 4 ist schnell und reicht für einfache Kalkulatoren und Dokumente. Claude Sonnet 4 ist der Standard für den Alltag, gutes Gleichgewicht aus Qualität und Geschwindigkeit. Claude Opus 4 liefert die komplexesten Ergebnisse, zum Beispiel für mehrstufige React-Apps oder umfangreiche Datenvisualisierungen.
Welche Typen von Artifacts gibt es?
Claude unterstützt sechs Artifact-Typen. Jeder hat einen eigenen Anwendungsbereich und eine eigene Ausgabeform.
| Typ | Was entsteht | Typischer Einsatz | Wann nutzen |
|---|---|---|---|
| HTML-Seite | Live-Vorschau im Browser | Kalkulator, Formular, Mini-App | Wenn ein visuelles Ergebnis gefragt ist |
| Code | Skript in Python, JS, SQL u.a. | Datenverarbeitung, Automation | Wenn das Ergebnis ausgeführt werden soll |
| React-Komponente | Interaktive UI-Komponente | Dashboard, Eingabemaske | Wenn State und Interaktion gebraucht werden |
| SVG-Grafik | Skalierbare Vektorgrafik | Icon, Diagramm, Infografik | Wenn eine skalierbare Grafik gefragt ist |
| Dokument | Markdown-formatierter Text | Briefvorlage, Checkliste, Prompt-Set | Wenn Text weiterverwendet werden soll |
| Mermaid-Diagramm | Flowchart, Mindmap, ER-Diagramm | Prozessübersicht, Systemarchitektur | Wenn Abläufe visualisiert werden sollen |
Wie erstellst du ein Artifact in Claude?
Artifacts entstehen automatisch. Es gibt keinen Schalter und kein Menü. Die Anfrage entscheidet darüber, ob Claude einen normalen Text schreibt oder das Artifact-Panel öffnet.
Schritt 1: Öffne claude.ai im Browser oder in der Desktop-App. Ein kostenloses Konto reicht.
Schritt 2: Formuliere eine Anfrage, die eine eigenständige Ausgabe verlangt. Frag nach einer HTML-Seite, einem Kalkulator, einem Skript oder einem Diagramm. Claude erkennt den Bedarf automatisch.
Schritt 3: Das Artifact-Panel öffnet sich rechts neben dem Chat. Bei HTML-Artifacts siehst du sofort die Live-Vorschau. Kein Export, kein Copy-Paste nötig.
Schritt 4: Verfeinere im Chat. Schreib, was du ändern möchtest. Das Artifact aktualisiert sich in Echtzeit.
Drei Prompts zum direkten Ausprobieren:
Wie teilst und veröffentlichst du Artifacts?
Jedes Artifact lässt sich per Link teilen. Rechts oben im Artifact-Panel befindet sich ein Teilen-Button. Ein Klick öffnet einen Dialog mit zwei Optionen.
Privater Link: Nur Personen, die du einlädst, können das Artifact sehen. Sie brauchen einen eigenen Claude-Account.
Öffentlicher Link: Jeder mit dem Link kann das Artifact öffnen und die Vorschau sehen. Aber auch hier gilt: ein Claude-Account ist zum Öffnen notwendig. Das ist die wichtigste Einschränkung. Ein Artifact-Link ist kein eigenständiger Weblink, den du beliebig weiterleiten kannst wie eine normale URL.
Beachte: Die Sharing-Funktion ist für kollaboratives Arbeiten gedacht. Willst du ein Artifact-Ergebnis wirklich veröffentlichen, exportiere die Datei und hoste sie selbst.
Was sind Live Artifacts und was können sie?
Live Artifacts sind persistente, interaktive HTML-Seiten mit Echtzeit-Datenanbindung. Das ist der Unterschied zu normalen Artifacts: Ein Standard-Artifact ist statisch. Ein Live Artifact zieht bei jedem Öffnen frische Daten aus verbundenen Apps.
Die Verbindung läuft über das Model Context Protocol (MCP). Claude Cowork bietet dafür vorgefertigte Konnektoren zu Tools wie Google Calendar, Asana, Slack und Google Sheets.
Praktische Beispiele:
- Ein Dashboard, das heute fällige Aufgaben aus Asana und Termine aus Google Calendar kombiniert
- Ein SEO-Monitor, der Rankings aus Google Search Console täglich aktualisiert
- Ein Umsatz-Tracker, der automatisch Daten aus Google Sheets zieht
- Ein Morning-Briefing, das Kalender, offene Tickets und aktuelle Nachrichten zusammenfasst
Wie du Claude Cowork einrichtest und Live Artifacts baust, erkläre ich im Claude Cowork Guide.
Für welche Aufgaben sind Artifacts am nützlichsten?
Artifacts sind kein Ersatz für normale Chat-Antworten. Ihr Wert zeigt sich, wenn das Ergebnis eigenständig genutzt, weiterentwickelt oder geteilt werden soll. Diese sechs Anwendungsfälle bringen den größten Nutzen.
Kalkulator und Formular-Tools
Artifacts eignen sich sehr gut für interaktive Berechnungen. BMI-Rechner, Rabattkalkulator, Gehaltsrechner, Kreditvergleich. Claude erstellt eine HTML-Seite mit Eingabefeldern und sofortiger Ergebnisanzeige. JavaScript-Kenntnisse brauchst du dafür nicht.
Datenvisualisierung
Aus rohen Zahlen werden interaktive Charts. Füge deine Daten als Text oder CSV in den Chat ein und frag nach einer Visualisierung. Claude erstellt Balken-, Linien- oder Tortendiagramme als HTML-Seite mit Chart.js oder als React-Komponente.
Interaktive Lernkarten und Quiz
Für Lernen und Prüfungsvorbereitung lassen sich Karteikarten und Multiple-Choice-Tests direkt im Artifact erstellen. Ideal für Sprachvokabeln, Fachbegriffe oder interne Schulungen.
HTML-Prototypen und Wireframes
Bevor du eine Webseite oder App entwickelst, kann Claude einen klickbaren Prototyp als HTML-Artifact erstellen. Kein Design-Tool, kein Entwickler notwendig. Ideal für erste Kundenpräsentationen oder interne Abstimmungen.
Code-Snippets und Automatisierungsskripte
Wiederverwendbare Code-Teile gehören in Artifacts, nicht in den Chat. Claude erstellt Python-Skripte, JavaScript-Funktionen, SQL-Queries oder Shell-Befehle als eigenständige Dateien, direkt kopierbar in dein Projekt.
Präsentationsfolien als HTML
HTML-Präsentationen auf Basis von Reveal.js sind ohne PowerPoint oder Google Slides nutzbar und direkt als Datei teilbar. Claude erstellt vollständige Slide-Decks als Artifact. Optik und Inhalt lassen sich per Chat anpassen.
Was können Artifacts NICHT?
Artifacts sind keine vollständige Entwicklungsumgebung. Wer das nicht weiß, erwartet Dinge, die technisch nicht möglich sind. Die wichtigsten Grenzen:
- Kein Server-Code: Node.js, PHP oder Python-Server laufen nicht im Artifact. Nur Frontend-Code (HTML, CSS, JavaScript) wird ausgeführt. Backend-Logik muss selbst deployt werden.
- Kein Hosting: Ein Artifact ist eine Vorschau, kein Live-Link. Die Sharing-URL funktioniert nur für eingeloggte Claude-Nutzer.
- Keine externen APIs ohne MCP: Ein Standard-Artifact kann keine externen Dienste abfragen. Kein Wetter-API, keine Datenbankverbindung. Das ändert sich nur mit Live Artifacts und MCP.
- Kein persistenter Speicher kostenlos: Artifacts speichern Daten nur im localStorage des Browsers der aktuellen Session. Geräteübergreifender Datenzugriff ist ohne Pro-Plan nicht möglich.
- Nur Single-File: Ein Artifact ist immer eine einzige Datei, maximal 20 MB. Ein React-Projekt mit mehreren Komponenten-Dateien ist nicht möglich.
- Keine echten Datenbanken: Artifacts können Daten im localStorage des Browsers speichern. Echte Datenbanken schreiben oder lesen ist ohne externe Verbindung nicht möglich.
Ist Claude Artifacts kostenlos?
Ja. Seit Februar 2026 sind Artifacts für alle Claude-Nutzer zugänglich, auch ohne Bezahl-Plan. Das war früher anders: bis Ende 2024 waren Artifacts Pro-exklusiv, danach gab es schrittweise Erweiterungen bis zur vollständigen Freigabe.
| Funktion | Kostenlos | Pro ~20 $/Monat | Max ~100 $/Monat |
|---|---|---|---|
| HTML-Artifacts | ✓ | ✓ | ✓ |
| Code-Artifacts | ✓ | ✓ | ✓ |
| Dokumente, SVG, Diagramme | ✓ | ✓ | ✓ |
| Artifacts teilen | ✓ | ✓ | ✓ |
| Artifacts herunterladen | ✓ | ✓ | ✓ |
| Live Artifacts (MCP) | ✗ | ✓ | ✓ |
| Persistenter Speicher | ✗ | ✓ | ✓ |
| Nutzungslimit | begrenzt | hoch | sehr hoch |
Für Einsteiger reicht der kostenlose Plan vollständig. HTML-Artifacts, Code, Diagramme, Teilen und Herunterladen sind alle dabei. Wer Live Artifacts mit Echtzeit-Datenanbindung braucht oder Claude täglich intensiv nutzt, lohnt sich Claude Pro. Die genauen Planunterschiede erklärt der Claude Preise Guide.
Artifacts direkt ausprobieren?
Kostenlos auf claude.ai starten. Kein Bezahl-Plan nötig für HTML-, Code- und Dokument-Artifacts.
Claude kostenlos öffnen →Fazit: Lohnen sich Claude Artifacts?
Artifacts sind eine der nützlichsten Funktionen in Claude. Nicht weil sie beeindruckend aussehen, sondern weil sie ein echtes Problem lösen: Der Weg von der KI-Antwort zum fertigen, nutzbaren Ergebnis wird kürzer.
Lohnen sich, wenn: du regelmäßig Code, Tools oder Visualisierungen baust, Ergebnisse mit anderen teilen möchtest oder iterativ arbeitest und Änderungen live sehen willst.
Weniger relevant, wenn: du Claude hauptsächlich für einfache Textantworten, Übersetzungen oder kurze Recherchen nutzt. Dort bleibt der normale Chat die schnellere Option.
Probiere heute einen der Prompts aus dem Use-Cases-Abschnitt. Das erste Artifact überzeugt mehr als jede Beschreibung. Für den nächsten Schritt empfehle ich den Claude Cowork Guide mit Live Artifacts, den Claude Projects Guide für persistente Workspaces und den Claude Design Guide für KI-generierte Websites und Präsentationen.
Häufige Fragen zu Claude Artifacts
Ist Claude Artifacts wirklich kostenlos?
Ja, seit Februar 2026. HTML-, Code-, Dokument- und SVG-Artifacts sind für alle Claude-Nutzer zugänglich. Einzige Ausnahme: Live Artifacts mit MCP-Datenanbindung und persistentem Speicher erfordern Claude Pro oder höher.
Was ist ein konkretes Beispiel für ein Claude Artifact?
Du gibst Claude den Prompt: „Erstelle einen Kalkulator für die monatliche Sparrate.“ Claude öffnet rechts ein HTML-Artifact mit Eingabefeldern für Sparziel, Laufzeit und Zinssatz. Die Sparrate berechnet sich sofort beim Tippen. Das Artifact kannst du herunterladen und auf deiner eigenen Webseite einbinden.
Hat ChatGPT auch Artifacts wie Claude?
ChatGPT hat seit 2024 eine ähnliche Funktion namens Canvas. Canvas erlaubt das Bearbeiten von Text und Code in einem separaten Panel. Der Unterschied: Claude Artifacts rendern HTML direkt als Live-Vorschau im Browser-Stil, Canvas zeigt hauptsächlich den Quelltext. Für interaktive Web-Ergebnisse ist Claude Artifacts aktuell stärker. Für Text-Kollaboration sind beide vergleichbar.
Kann ich ein Artifact herunterladen?
Ja. Im Artifact-Panel oben rechts gibt es ein Download-Symbol. HTML-Artifacts werden als .html-Datei gespeichert, Code mit der passenden Endung (.py, .js, .sql usw.). Die Datei ist sofort einsatzbereit.
Funktionieren Artifacts auf dem Handy?
Eingeschränkt. Auf mobilen Geräten wechselt die Ansicht zwischen Chat und Artifact, statt beide nebeneinander zu zeigen. Die Grundfunktionen, Artifact erstellen, herunterladen und teilen, funktionieren. Die Split-Screen-Ansicht mit Live-Vorschau ist jedoch nur am Desktop wirklich nutzbar.
Sind Claude Artifacts DSGVO-konform?
Das hängt davon ab, welche Daten du verarbeitest. Artifacts laufen im Browser des Nutzers. Anthropic hat keinen EU-Datenschutzvertrag (DPA) für kostenlose Nutzer. Wer personenbezogene Daten verarbeitet, sollte Claude Team oder Enterprise nutzen. Details im Claude Anleitung DSGVO-Abschnitt.
Schreibe einen Kommentar