Claude Artifacts verwenden: Das Schritt-für-Schritt-Tutorial
Ein kompletter Rundgang durch Kevin Stratverts 12-minütiges Claude-Artifacts-Tutorial: aus einer CSV ein interaktives Dashboard bauen, es per Chat-Prompt verfeinern, Details mit dem Annotation-Tool korrigieren — und dann eingebaute KI, gespeicherte Daten, Connectors und Live Artifacts ergänzen. 14 Schritte, jeder mit einem echten Screenshot.
Das Wichtigste in Kürze
- Artifacts sind interaktive Mini-Apps — Dashboards, Tools, Spiele —, die Claude aus einer Beschreibung in gewöhnlicher Sprache baut. Ein kostenloses Claude-Konto reicht für den Einstieg.
- CSV hochladen, und nach etwa einer Minute liefert Claude ein funktionsfähiges Dashboard mit Diagrammen, die beim Überfahren exakte Werte zeigen; jede weitere Änderung ist nur ein weiterer Chat-Prompt — ganz ohne Code.
- Das Annotation-Tool korrigiert ein einziges, exakt markiertes Element; Teilen ist ein Ein-Klick-Link für „jeder mit dem Link“, und Pinning hält deine Lieblings-Artifacts oben in der Bibliothek.
- Artifacts können auch Claude selbst aufrufen, sich Daten über Sitzungen hinweg merken und über MCP-Connectors Slack oder Trello erreichen — und Live Artifacts in der Desktop-App halten sich von selbst aktuell.
How to Use Claude Artifacts (Full Tutorial)
Kanal: Kevin Stratvert · 12:42
Über die Screenshots
Alle Screenshots in diesem Guide sind dem obigen Video entnommen und bleiben Eigentum von Kevin Stratvert. Jeder Schritt verlinkt auf die exakte Stelle im Video. Der Schritt-für-Schritt-Text, die Bildunterschriften und die FAQ haben wir selbst verfasst.
Von der CSV zum Dashboard (Schritte 1–10)
- 1
Die Artifacts-Bibliothek öffnen
Melde dich bei claude.ai an — ein kostenloses Konto genügt — und klicke in der linken Seitenleiste auf Artifacts. Die Tabs All und Yours listen alles, was du erstellt hast, unter Shared with you sammeln sich die Artifacts, die andere mit dir geteilt haben, und das Suchfeld filtert die gesamte Bibliothek.
Die Artifacts-Zentrale: Tabs All, Yours und Shared with you, in der Ecke New artifact.Ab 0:50 ansehen - 2
Auf New artifact klicken
Klicke oben rechts auf den Button New artifact. Claude startet eine neue Aufgabe und interviewt dich zuerst, statt blind loszubauen. Es nennt das Artifact eine „web page“ — das ist nur das Fundament, auf dem es aufbaut, egal was am Ende herauskommt.
Ein Klick startet eine geführte Aufgabe — erst die Fragen, dann der Code.Ab 1:02 ansehen - 3
Die Auftaktfragen beantworten
Für dieses Dashboard wählen wir Dashboard, den Stil Bold & colorful und als Fokus Sales & revenue trends. Dein Fragenkatalog kann leicht anders aussehen — kein Problem. Antworte, was passt, oder überspringe die Fragen und beschreibe alles selbst in einer Nachricht.
Typ, Stil, Fokus: Diese Antworten steuern Claudes ersten Entwurf.Ab 1:40 ansehen - 4
CSV anhängen
Wenn Claude fragt, woher die Daten kommen sollen, sag, dass du eigene hochlädst. Klicke auf das Plus-Symbol im Nachrichtenfeld, wähle Add files or photos (auch Ctrl U / Cmd U) und wähle deine CSV aus. Claude sichtet die Spalten und entscheidet vor dem Bauen, wie er sie visualisiert.
Plus-Symbol → Add files or photos → CSV auswählen; Claude analysiert die Datei, bevor er die Oberfläche schreibt.Ab 2:19 ansehen - 5
Die erste Version veröffentlichen
Ein bis zwei Minuten später veröffentlicht Claude das Artifact. Das Dashboard erscheint rechts — die Kernkennzahlen oben, die Diagramme darunter — und im Chat fasst Claude zusammen, was es gebaut hat: 1,207 Bestellungen über 5 Sorten und 4 Regionen, direkt aus der CSV. Für eine bessere Ansicht auf das Erweitern-Symbol klicken.
„The Bake Sheet“ — KPI-Karten und Diagramme, generiert aus einer einzigen hochgeladenen CSV.Ab 2:42 ansehen - 6
Diagramme überfahren für exakte Werte
Das ist eine echte App, kein Bild. Fährst du mit dem Cursor an der Trendlinie entlang, listet ein Tooltip den exakten Umsatz jeder Sorte in dem Monat; Balkendiagramme und Tabellen reagieren genauso. Niemand hat Diagramm-Code geschrieben — Claude hat alles aus der Datei gebaut.
Ein Juni-Tooltip schlüsselt den Umsatz nach Sorte auf — interaktiv ab der ersten Veröffentlichung.Ab 2:58 ansehen - 7
Verfeinern im Chat statt im Code
Etwas gefällt dir nicht? Sag es einfach. „Add a dark mode toggle to the dashboard“ genügt — Claude veröffentlicht eine aktualisierte Version mit einem Sonne/Mond-Schalter in der Kopfzeile, der das ganze Theme umstellt und deine Wahl merkt. Größere Umbauten wünschst du dir genauso im selben Chat.
Ein Prompt später: ein Mond-Icon in der Kopfzeile und ein komplettes Dark Theme.Ab 4:02 ansehen - 8
Ein Detail mit dem Annotation-Tool korrigieren
Willst du nur ein einzelnes Element ändern, öffne das Annotation-Tool oben rechts im Artifact und markiere die exakte Stelle — hier die Überschrift „Kevin's Cookie Company“. Ein Kommentarfeld öffnet sich: schreib, was geändert werden soll, und wähle dann Send to Claude für die sofortige Anwendung oder Add comment, um die Notiz zu hinterlassen, ohne etwas zu verändern.
Markieren, Fix beschreiben, dann anwenden — oder als Review-Kommentar stehen lassen.Ab 4:50 ansehen - 9
Mit allen teilen, die den Link haben
Klicke auf Share, stelle General access auf Anyone with the link und wähle, welche Version veröffentlicht werden soll — Claude behält jede Revision, du kannst also gezielt einen älteren Schnappschuss teilen. Copy link liefert eine URL, unter der das Dashboard in jedem Browser läuft und interaktiv bleibt.
General access → Anyone with the link; die Versionsauswahl entscheidet, was Besucher sehen.Ab 5:10 ansehen - 10
Anpinnen — und den Chat für Änderungen behalten
Zurück in der Bibliothek: Fahre über das Artifact, öffne das Drei-Punkte-Menü und wähle Pin — Angepinntes sammelt sich in einem Pinned-Bereich für den Ein-Klick-Zugriff. Für spätere Änderungen öffne den ursprünglichen Chat des Artifacts unter Chat and tasks: Dieser Thread bleibt für immer die Werkstatt des Artifacts.
Das Drei-Punkte-Menü pinnt die Karte; der ursprüngliche Chat bleibt für künftige Bearbeitungen offen.Ab 5:42 ansehen
Eine Stufe höher: eingebaute KI, gespeicherte Daten, Connectors, Live Artifacts (Schritte 11–14)
- 11
Ein Tool bauen, das Claude selbst nutzt
Artifacts können Claude direkt aufrufen. Lege ein neues Artifact an, wähle Something else und beschreibe das Tool — hier: Mitarbeitende geben Kekszutaten ein und Claude liefert fünf Namensideen. Kein API-Key, kein Backend; bei der ersten Nutzung fragt das Artifact den Besucher einfach um Erlaubnis für den Zugriff auf Claude.
Der Batch Namer: Zutaten eintippen, auf Generate 5 names klicken — und die KI-Vorschläge kommen.Ab 7:02 ansehen - 12
Es Daten merken lassen
Bittest du Claude um eine Favoriten-Funktion, klärt es zuerst eine Designfrage: Sollen Einträge privat in diesem Browser bleiben oder mit allen geteilt werden, die das Artifact öffnen? Hier entscheiden wir uns für geteilt. Gespeicherte Ideen bleiben erhalten — Tab schließen, und morgen sind die markierten Namen noch da. Die Grundlage für Tracker, Listen und leichte Projekt-Tools.
Privat oder geteilt speichern — danach bekommt jeder Vorschlag einen Stern, der Sitzungen überdauert.Ab 8:20 ansehen - 13
Mit Slack und mehr verbinden
Über MCP-Connectors (Model Context Protocol) kann ein Artifact außerhalb von Claude aktiv werden. Bitte um einen Share-to-Slack-Button, genehmige die Slack-Verbindung, wähle einen Kanal — und jede gespeicherte Idee bekommt eine Schaltfläche, die sie ins Team postet. Apps ohne nativen Connector erreichst du über Zapier MCP — tausende zusätzliche Aktionen.
Slack verbunden: Die gespeicherte Idee postet sich jetzt selbst nach #new-cookie-ideation.Ab 9:40 ansehen - 14
Mit Live Artifacts aktuell halten
In der Claude-Desktop-App ziehen Live Artifacts aktuelle Daten aus verbundenen Apps und lokalen Dateien, statt einen eingefrorenen Schnappschuss zu zeigen. Dieses Verkaufs-Dashboard kompiliert sich selbst aus POS-Berichten und Google-Drive-Tabellen; ein Klick auf Reload in der Kopfzeile zeichnet es mit den neuesten Zahlen neu — einmal bauen, immer eine aktuelle Ansicht.
Der Reload-Button der Desktop-App zieht verbundene Daten bei Bedarf neu.Ab 12:04 ansehen