Artifacts erstellen

Artifacts sind eigenständige Inhalte, die Claude in einem separaten Panel neben dem Chat erstellt. Statt einer Antwort im Fließtext bekommst du ein fertiges Dokument, eine HTML-Vorschau oder ein Diagramm — das du kopieren, herunterladen und weiterverarbeiten kannst. Dieser Guide zeigt dir, wie du Artifacts gezielt einsetzt.

Für wen ist das?

Für alle, die Claude nicht nur als Chatbot nutzen, sondern fertige Ergebnisse brauchen: Texte, HTML-Seiten, Visualisierungen oder Code-Snippets als eigenständige Objekte.

Was lernst du?

• Was Artifacts sind und wofür sie gedacht sind
• Welche drei Arten von Artifacts es gibt
• Wie du ein bestimmtes Artifact-Format anforderst
• Wie du Artifacts iterativ verbesserst
• Wie du Artifacts speicherst und weiterverwendest

Wann nutzen?

• Du brauchst einen längeren Text als eigenständiges Dokument (Bericht, Anleitung, E-Mail-Vorlage)
• Du willst eine HTML-Seite mit Live-Vorschau im Browser-Panel sehen
• Du brauchst ein Diagramm, eine Tabelle oder eine SVG-Grafik

Wann nicht?

• Für kurze Antworten im Chat — eine einfache Frage braucht kein Artifact
• Wenn du die Antwort nur lesen, nicht weiterverarbeiten willst
• Für Gespräche, bei denen es um Austausch geht, nicht um ein Ergebnis

Drei Arten von Artifacts

1. Text-Artifacts: Berichte, Anleitungen, E-Mails, Verträge, Blog-Entwürfe. Claude erstellt ein Markdown-Dokument, das du kopieren oder herunterladen kannst.

2. Code und HTML: Claude erstellt Code-Dateien oder komplette HTML-Seiten mit Live-Vorschau. Du siehst das Ergebnis direkt im rechten Panel — mit funktionierendem CSS, JavaScript und interaktiven Elementen.

3. Visualisierungen: Diagramme, Charts, SVG-Grafiken und Flowcharts. Claude nutzt Bibliotheken wie React und Recharts, um interaktive Visualisierungen zu erstellen.

Dein erstes Artifact erstellen

So forderst du bestimmte Formate an

Die Art, wie du deine Anfrage formulierst, beeinflusst, welches Format Claude wählt:

• “Erstelle eine HTML-Vorschau von…” → HTML-Artifact mit Live-Vorschau
• “Zeig das als Balkendiagramm” → Visualisierung mit Recharts
• “Schreibe einen vollständigen Bericht über…” → Text-Artifact als Markdown
• “Erstelle eine SVG-Illustration von…” → SVG-Grafik
• “Baue einen interaktiven Rechner für…” → HTML/JavaScript-Artifact

Artifacts iterativ verbessern

Das erste Artifact ist selten perfekt — und das ist gewollt. Der Workflow ist:

1. Erstelle das Artifact mit einer klaren Beschreibung
2. Prüfe das Ergebnis im Panel
3. Gib Feedback: “Die Überschrift soll linksbündig sein”, “Ersetze die Beispieldaten durch echte Zahlen”, “Füge einen Footer hinzu”
4. Wiederhole, bis das Ergebnis passt

Du kannst so viele Iterationen machen, wie du willst. Jede Änderung aktualisiert das Artifact im Panel.

Tipp: Ändere immer nur eine Sache pro Nachricht. “Ändere die Farbe und die Schrift und füge drei neue Abschnitte hinzu” führt zu unvorhersehbaren Ergebnissen. Besser: eine Änderung, prüfen, nächste Änderung.

Beispiele für starke Artifact-Prompts

Dashboard:

Erstelle ein HTML-Dashboard mit drei KPI-Karten (Umsatz: 245.000€,
Neukunden: 89, Conversion Rate: 3,2%) und einem Balkendiagramm
mit Monatsumsätzen von Januar bis Juni. Modernes Design mit
dunklem Hintergrund.

Bericht:

Schreibe einen Quartalsbericht für Q1 2026 als eigenständiges Dokument.
Struktur: Executive Summary, Highlights, Herausforderungen, Ausblick.
Verwende Platzhalter-Daten, die ich später ersetze.

Flowchart:

Erstelle ein SVG-Flowchart für den Onboarding-Prozess eines neuen
Mitarbeiters. Schritte: Vertrag → IT-Setup → Einführungsgespräch →
Buddy-Zuweisung → 30-Tage-Review. Verwende abgerundete Boxen
und Pfeile.

Typische Fehler

• Nicht speichern: Artifacts verschwinden, wenn du die Conversation schließt. Kopiere oder lade herunter, was du behalten willst.
• Artifact für einfache Antworten: “Was ist die Hauptstadt von Frankreich?” braucht kein Artifact. Nutze Artifacts für Ergebnisse, die du weiterverarbeiten willst.
• Nicht iterieren: Viele Nutzer akzeptieren das erste Ergebnis. Zwei bis drei Runden Feedback machen einen großen Unterschied.
• Zu vage formulieren: “Mach ein Diagramm” liefert ein generisches Ergebnis. Nenne Daten, Farben, Format und Zweck.

Mini-Übung

Erstelle drei verschiedene Artifacts in einer Conversation:

1. Text-Artifact: “Schreibe eine E-Mail-Vorlage für eine Terminabsage. Professioneller Ton, Sie-Form, maximal 100 Wörter.”
2. HTML-Artifact: “Erstelle eine HTML-Visitenkarte mit Name, Titel, E-Mail und Telefonnummer. Modernes Design mit abgerundeten Ecken und einem Farbverlauf.”
3. Visualisierung: “Zeig die Verteilung der Wochentage, an denen Meetings stattfinden, als Balkendiagramm. Beispieldaten: Mo 8, Di 12, Mi 15, Do 10, Fr 5.”

Iteriere bei jedem Artifact mindestens einmal — ändere eine Farbe, ein Wort oder ein Layout-Detail.

Nächster Schritt

Du kannst jetzt Artifacts erstellen und verfeinern. Erfahre mehr über den Unterschied zwischen Artifacts und Code-Output im Vergleich Artifacts vs. Code. Oder lerne, wie du Artifacts in Projects organisierst.