Claude Artifacts erklärt
Artifacts sind Claudes Live-Fenster für generierte Inhalte: Dokumente, Code-Snippets, Diagramme, sogar lauffähige Web-Apps — alles direkt im Chat editierbar, teilbar und exportierbar. Artifacts sind das Feature, das Claude vom Chatbot zur Arbeitsumgebung macht. Dieser Ratgeber zeigt, wie sie funktionieren, welche Typen es gibt, wann sie sich lohnen — und wie KMU sie konkret in Vertrieb, Marketing, HR und Engineering einsetzen.
Das Wichtigste in 60 Sekunden
- Artifacts sind separate, strukturierte Inhaltsbereiche neben dem Chat — Dokumente, Code, Diagramme, Apps.
- Editierbar im Dialog: „Mach die Tabelle dreispaltig“ → Claude ändert nur diesen Teil.
- Teilbar via Link, exportierbar als Datei.
- Live-Vorschau bei Code, HTML, React, Mermaid, SVG.
- Verfügbar in allen Plänen — Free, Pro, Team, Enterprise.
- Live Artifacts sind die nächste Stufe: interaktive Apps mit State und Datenanbindung — siehe Live Artifacts erstellen.
- Ein einzelner Artifact ersetzt oft ein Excel, ein Word-Doc, eine kleine Web-App oder eine Powerpoint-Skizze.
Was genau ist ein Artifact?
Ein Artifact ist ein separater, strukturierter Inhaltsbereich, der von Claude erzeugt wird — getrennt vom normalen Chat-Stream. Du fragst Claude nach „einer schicken Tabelle mit Quartalszahlen“, und statt eines langen Chat-Texts erscheint rechts neben dem Chat ein eigenes Fenster mit der Tabelle. Dieses Fenster:
- bleibt über den Chat-Verlauf hinweg persistent sichtbar,
- ist editierbar — entweder direkt durch Klicks oder durch weitere Anweisungen an Claude („Mach die Spalte 'Umsatz' fett“),
- lässt sich versionieren — du siehst die Iterationen,
- kann exportiert werden (Markdown, HTML, PDF, PNG, je nach Typ),
- kann per Share-Link verteilt werden.
Praktisch heißt das: Statt im Chat 200 Zeilen Code zu generieren und du sie kopierst, hast du ein lauffähiges, teilbares Artefakt mit URL — direkt produktionstauglich.
Die Artifact-Typen im Überblick
- Markdown-Dokument: für Texte, Konzepte, Reports, Memos. Mit Tabellen, Listen, Headings.
- Code-Snippet: beliebige Sprache (Python, JS, Go, Rust, SQL, …). Syntax-Highlighting, kopierbar.
- HTML-Seite: komplette Single-Page mit Live-Preview. Ideal für Landingpages und Mockups.
- React-Komponente: mit JSX, Tailwind, lucide-Icons. Live ausführbar im Browser.
- SVG-Grafik: Logos, Icons, Diagramme als skalierbare Vektoren.
- Mermaid-Diagramm: Flowcharts, Sequenz-, Gantt-, ER-Diagramme via Text-Definition.
- Interaktive App (Live Artifact): mit State, MCP-Datenanbindung, Auth — die nächste Evolutionsstufe.
Praxistipp: In einem Chat können mehrere Artifacts entstehen. Du kannst zwischen ihnen hin- und herwechseln, Claude weiterer Anweisungen geben oder mehrere parallel iterieren.
Was macht Artifacts so besonders?
- Live-Vorschau. HTML, React, SVG, Mermaid werden direkt im Browser gerendert. Du siehst sofort, ob etwas falsch aussieht — keine Copy-Paste-Schleife.
- Iteratives Arbeiten. „Mach die Buttons größer“, „Tausche Pink gegen Blau“, „Füge eine Datums-Spalte hinzu“ — Claude versteht den Kontext und ändert chirurgisch nur das Gemeinte. Der Rest bleibt unverändert.
- Versionierung. Du siehst alle Iterationen. Hat dir Version 3 besser gefallen? Zurückspringen und ab dort weiter.
- Teilen mit einem Klick. Share-Button → URL. Empfänger braucht keinen Account, sieht das Artifact direkt im Browser.
- Export in saubere Formate. Markdown → .md, HTML → .html, Code → Datei mit korrekter Endung, SVG → .svg, Mermaid → .png oder .svg.
Wie erstelle ich ein Artifact?
Du erstellst Artifacts nicht mit einem Spezial-Befehl — du fragst Claude einfach. Sobald deine Anfrage strukturiert genug ist (ein Dokument, eine App, ein Diagramm), entscheidet Claude automatisch, ob ein Artifact passt.
Beispiel-Prompts, die zuverlässig Artifacts erzeugen:
- „Schreib mir ein einseitiges Konzept für unsere LinkedIn-Wochenstrategie als Markdown-Doc.“
- „Bau einen einfachen Brutto-Netto-Rechner als HTML mit Tailwind.“
- „Visualisiere unseren Onboarding-Prozess als Mermaid-Flowchart.“
- „Erstelle ein Logo-Konzept als SVG — minimalistisch, dunkelgrau, Sans-Serif.“
- „Code mir einen schnellen Lead-Scoring-Rechner als React-Komponente.“
Wenn Claude das Artifact nicht von alleine erzeugt: explizit drum bitten („Bitte als Artifact“). In der UI kannst du dann editieren, kopieren, exportieren, teilen.
Artifacts iterativ bearbeiten
Der wahre Zeitgewinn liegt in der iterativen Bearbeitung. Beispiel-Workflow für ein Angebot:
- „Bau ein Angebot für Kunde Müller, basierend auf unserer Preisliste, 5 Tage Beratung à 1.200 €.“
- Claude liefert ein Markdown-Angebot als Artifact.
- „Mach den Ton etwas formaler und füge oben einen Disclaimer ein.“
- „Ergänze unten eine Akzeptanz-Klausel mit Unterschrift-Linie.“
- „Wandle das in ein druckfertiges HTML mit unserem Logo (Logo-URL: …).“
- „Exportiere als PDF.“
Das, was bei klassischer Word-Arbeit in 90 Minuten landet, schaffst du so in 6.
Konkrete Einsatzszenarien nach Abteilung
Vertrieb
- Angebots-Dokumente, Verträge, Leistungsverzeichnisse als Markdown oder HTML.
- Live-Rechner für Tarif-, Versicherungs- oder Förder-Berechnungen — direkt im Kundengespräch.
- Mini-Demos / Mock-ups in Sekunden („So könnte eure Landingpage aussehen“).
Marketing
- Landingpage-Prototypen mit echtem HTML/CSS — keine 3-Tage-Wireframes mehr.
- Newsletter-Layouts (HTML-E-Mail), inklusive Inline-Styles.
- Social-Media-Asset-Mockups (SVG für statische, HTML für animierte Vorschauen).
- Content-Briefings als strukturierte Markdown-Dokumente.
HR
- Stellenanzeigen-Templates, branchenspezifisch ausformuliert.
- Mitarbeiterhandbücher mit klickbarem Inhaltsverzeichnis.
- Onboarding-Pläne als Mermaid-Diagramm + Markdown-Checkliste.
- Bewerber-Scorecards als kleine HTML-App.
Engineering
- Architektur-Diagramme via Mermaid (Sequence, ER, C4).
- Proof-of-Concepts als React-Artifacts — vor der Sprint-Planung.
- Migrationspläne als Markdown mit Abhängigkeiten.
- Code-Snippets als wiederverwendbare Bibliothek.
Beratung & Strategie
- Interaktive Rechner (ROI, Pricing, Make-or-Buy).
- Vergleichs-Dashboards in HTML/React.
- Strategie-Memos als Markdown-Dokumente.
- Branchen-Benchmarks als Tabellen-Artifacts.
Verwaltung & Office
- Briefe nach DIN 5008.
- Protokolle aus Meetings (Transkript rein → Protokoll-Artifact raus).
- Formulare und Checklisten — direkt druckfähig.
Live Artifacts vs. statische Artifacts
Statisches Artifact: einmal generiert, ggfs. iteriert, dann fix. Beispiel: ein Markdown-Konzept oder ein SVG-Logo.
Live Artifact: eine ausführende Anwendung — React-State, Inputs, API-Calls, Persistenz, optional MCP-Datenanbindung. Beispiel: ein Lead-Scoring-Rechner mit Eingabe-Feldern, der Werte berechnet und gespeichert.
Live Artifacts sind die nächste Stufe — wir nutzen sie für Kunden, die sonst eine kleine Web-App entwickeln müssten, dafür aber keine Engineering-Ressource haben. Vollständige Anleitung: Claude Live Artifacts erstellen oder direkt Live Artifacts entwickeln lassen.
Artifacts teilen, einbetten und exportieren
Teilen
Klick auf „Share“ → Link generieren. Empfänger ohne Account sehen das Artifact im Browser. Optional: Bearbeitungs-Berechtigung, Ablauf-Datum.
Einbetten
Per iframe in andere Webseiten oder interne Wikis (Notion, Confluence). Hinweis: Datenschutz-Aspekte beachten — geteilte Artifacts liegen auf Anthropic-Servern.
Exportieren
- Markdown: .md-Datei, ideal für Versionskontrolle.
- HTML: komplette eigenständige Datei.
- SVG/PNG: für Grafiken und Diagramme.
- PDF: über Browser-Print oder Drittanbieter-Tools.
- Code: als reine .py/.js/.ts-Dateien.
Grenzen und Stolperfallen
- Kein System-of-Record. Artifacts sind Arbeitsstücke, keine Datenbank. Wichtige Daten gehören ins CRM/ERP.
- Geteilte Links sind öffentlich, sobald sie weiterversendet werden. Für vertrauliche Inhalte: keine offenen Share-Links, lieber Export + interner Versand.
- Live Artifacts haben Performance-Grenzen. Sehr große Datenmengen oder rechenintensive Berechnungen sollten serverseitig laufen.
- Nicht jedes Tool akzeptiert direkt importierten HTML/CSS. Prüfen, ob euer CMS, Newsletter-Tool etc. das Format unterstützt.
- Versionen werden nicht ewig gespeichert. Wichtige Iterationen exportieren, sonst verloren.
Aktivieren, abschalten, Admin-Steuerung
In claude.ai sind Artifacts standardmäßig aktiv. Wenn sie nicht erscheinen: Settings → Feature Preview → Artifacts aktivieren. Bei Team- und Enterprise-Plänen können Admins das global steuern, etwa Sharing nur intern erlauben oder Artifact-URLs auf eine Domain einschränken.
Für DSGVO-sensible Branchen empfehlen wir: Sharing-Defaults strikt setzen, Mitarbeiter schulen („Was darf ich extern teilen?“), und Audit-Logs aktivieren (Enterprise). Mehr: Ist Claude DSGVO-konform?
Nächster Schritt
Wenn dein Team Artifacts und besonders Live Artifacts für eure Prozesse einsetzen will — wir bauen euch fertige Vorlagen, Skills für die häufigsten Output-Typen und schulen das Team. Claude-Skills bauen lassen oder direkt Erstgespräch buchen.