Artifacts sind interaktive, editierbare Outputs direkt im Chat — erscheinen im separaten Panel rechts. Unterstützte Typen: HTML/CSS/JS (vollständige interaktive Seiten), React-Komponenten (live ausführbar), SVG (Diagramme, Illustrationen), Markdown-Dokumente (formatiert, downloadbar), Code (alle Sprachen mit Syntax-Highlighting), Mermaid-Diagramme (Flussdiagramme, Sequenz-Diagramme). Artifacts können live bearbeitet werden ohne neu zu starten — Claude updated direkt was geändert werden soll.
Warum wichtig
Artifacts verwandeln Claude von einem Text-Generator in einen Produktions-Partner. Statt Text der beschreibt wie ein Dashboard aussehen könnte, gibt es das funktionierende Dashboard — sofort nutzbar, teilbar, deploybar.
Erstelle als Artifact ein interaktives HTML-Dashboard mit:
- 3 Metriken-Karten (Umsatz, Leads, Conversion)
- Balkendiagramm für Monatsdaten (Chart.js via CDN)
- Datentabelle mit 5 Zeilen Beispieldaten
- Dunkles Design mit orangem Akzent (#FF4E00)
- Professionelle Typografie (DM Sans via Google Fonts)
Tipp
Artifacts können live bearbeitet werden — kein Neu-Starten nötig. Iteriere direkt: "Ändere die Farbe", "Füge eine Spalte hinzu", "Mache es responsiv."
#22
Wann Artifacts triggern
Claude erstellt automatisch Artifacts bei: substantiell nutzbaren Outputs (vollständige Dokumente, fertige Code-Dateien), interaktivem Code (Funktionen, UI-Elemente), Dokument-Format-Anfragen (Markdown, Berichte), expliziten Trigger-Phrasen. Trigger-Phrasen die zuverlässig funktionieren: "Erstelle HTML-Seite", "Baue React-Komponente", "Erstelle als Artifact", "Erstelle Markdown-Dokument zum Download", "Erstelle interaktive [Typ]". Wenn Claude im Text-Modus bleibt: "Als Artifact" explizit hinzufügen.
Warum wichtig
Das Verstehen der Trigger verhindert Frustration. Wenn Claude den Code nur als Text schreibt statt als ausführbares Artifact — ein Wort ändert alles: "Als Artifact erstellen."
Erstelle als Artifact eine interaktive Checkliste für [Aufgabe]:
- HTML mit Checkboxen für alle Punkte
- Fortschrittsanzeige oben (X von Y erledigt)
- Checkboxen speichern in localStorage
- Alle erledigten Punkte visuell abhaken
- Grüner "Abgeschlossen"-Status wenn 100%
Tipp
"Als Artifact" explizit in den Prompt schreiben wenn Claude im Text-Modus bleibt. Das funktioniert zuverlässig als Override für den Standard-Modus.
#23
Artifact Prompting
Gute Artifact-Prompts enthalten fünf Elemente: (1) Typ (HTML, React, SVG — explizit), (2) Inhalt (was angezeigt wird, welche Funktionen), (3) Design (Farben, Fonts, Spacing, Dark/Light), (4) Interaktivität (was klickbar ist, was sich ändert, was gespeichert wird), (5) Daten (echte Beispielzahlen statt Platzhalter). Schlechter Prompt: "Erstelle ein Dashboard." Guter Prompt: Spezifiziert alle fünf Elemente. Der Unterschied im Output ist enorm.
Warum wichtig
Artifact-Qualität ist direkt proportional zur Prompt-Qualität. Ein vager Prompt gibt ein generisches Artifact. Ein spezifischer Prompt gibt etwas das direkt nutzbar ist.
Erstelle React-Dashboard als Artifact:
KOMPONENTEN: Sidebar-Navigation (5 Punkte), Header mit Suche, 4 KPI-Cards, Liniendiagramm (recharts), Datentabelle mit Sortierung
DESIGN: Tailwind CSS, Dark Mode default, Orange Akzent (#FF4E00), Icons von lucide-react
INTERAKTIVITÄT: Sidebar kollabierbar, Tabelle sortierbar per Klick, Dark/Light Toggle
BEISPIELDATEN: Umsatz: [45200, 51300, 48900, 62100, 58400, 71200] für Jan–Jun 2025
Tipp
Beispieldaten immer im Prompt mitliefern — Claude baut dann mit echten, plausiblen Werten statt mit "Lorem Ipsum"-Platzhaltern. Macht den Output sofort präsentierbar.
#24
Einfache Projekte
Was Claude problemlos in einem Prompt baut: Landing Pages (komplette HTML-Seiten), Formulare (mit Validierung), ROI-Rechner (Eingaben → Berechnungen → Output), Datenvisualisierungen (Charts mit CDN-Libraries), Checklisten (interaktiv, localStorage), einfache Dashboards (statisch oder mit Fake-Daten), Quiz-Apps (Fragen, Antworten, Auswertung), Timer/Countdown, Notizzettel-Apps. Alles in einem Prompt, kein externes Setup nötig. Die Qualität überrascht konsistent.
Warum wichtig
Viele nützliche Tools werden nie gebaut weil der Aufwand zu hoch erscheint. Claude baut ein funktionierendes ROI-Tool in 3 Minuten — was früher Stunden Entwicklerzeit gekostet hätte.
Erstelle interaktiven ROI-Rechner für KI-Projekt-Investitionen als Artifact:
EINGABEN (Schieberegler + Zahlenfeld):
- Stunden pro Woche die automatisiert werden
- Stundensatz in Euro
- Investitionskosten einmalig in Euro
- Zeitersparnis in Prozent (10–100%)
OUTPUTS (automatisch berechnet):
- Monatliche Ersparnis in Euro
- Jahresersparnis in Euro
- Break-Even in Monaten
- 3-Jahres-ROI in Prozent
DESIGN: Professionell, dark, orange Akzente
Tipp
Einfaches Tool das sofort funktioniert ist besser als komplexes Tool das halb fertig ist. MVP zuerst, dann iterieren.
#25
Responsive Design
Claude erstellt responsives HTML wenn es explizit angefragt wird. Schlüsselbegriffe: "Mobile-First", "Breakpoints 768px/1024px", "Grid das auf Mobile zu einer Spalte kollabiert", "Touch-freundliche Buttons (min. 44px)", "kein horizontales Scrollen auf Mobile". Claude nutzt CSS Grid, Flexbox und Media Queries kompetent. Ohne explizite Anfrage erstellt Claude oft Desktop-optimierte Layouts die auf Mobile schlecht aussehen.
Warum wichtig
In 2025 kommt mehr als 60% des Web-Traffics von Mobilgeräten. Ein nicht-responsives Tool ist für die Hälfte der Nutzer unbrauchbar. Responsive zu spezifizieren kostet 10 Wörter mehr im Prompt.
Erstelle [Artifact] vollständig responsiv:
LAYOUT:
- Mobile-First Ansatz (320px–767px): 1 Spalte, volle Breite
- Tablet (768px–1023px): 2 Spalten Grid
- Desktop (1024px+): 3 Spalten Grid
TOUCH:
- Alle Buttons min. 44px Höhe
- Kein horizontales Scrollen
- Touch-freundliche Abstände zwischen Elementen
TYPOGRAPHY: Skaliert von 14px (Mobile) auf 16px (Desktop)
Tipp
Nach dem Erstellen anfragen: "Zeig wie das Layout bei 375px Breite aussieht" — Claude erklärt dann was responsive angepasst wurde und ob etwas fehlt.
#26
Live Editing
Nach dem ersten Artifact beginnt das iterative Editing. Claude versteht den Kontext des bestehenden Artifacts und ändert nur was angefragt wird — ohne den Rest zu verwerfen. Funktioniert mit: "Ändere die Überschrift zu [X]", "Füge Export-Button hinzu der als CSV lädt", "Mache den Hintergrund dunkel", "Füge eine Suchfunktion für die Tabelle hinzu", "Ändere die Farbe von blau auf orange". Änderungen als nummerierte Liste sind effizienter als Einzelanfragen.
Warum wichtig
Live Editing verwandelt Claude in einen Co-Developer. Kein Neu-Generieren vom Scratch — stattdessen präzise, inkrementelle Verbesserungen wie beim Pair-Programming.
Füge zum bestehenden Artifact folgende Erweiterungen hinzu:
1. CSV-Export-Button: Exportiert alle Tabellendaten als Download
2. Sortierbare Spalten: Klick auf Spaltenheader sortiert auf-/absteigend
3. Dark/Light-Toggle: Oben rechts, speichert Präferenz in localStorage
4. Suchfeld: Filtert Tabellenzeilen live beim Tippen
5. Paginierung: Max. 10 Zeilen pro Seite mit Vor/Zurück-Navigation
Tipp
Änderungen als nummerierte Liste formulieren — Claude arbeitet sie systematisch ab und bestätigt jeden Punkt. Viel effizienter als 5 separate Einzelanfragen.
#27
Debugging
Wenn ein Artifact nicht funktioniert: Browser-Konsole öffnen (F12), Fehler-Text kopieren, direkt in den Chat einfügen. Claude liest den vollständigen Fehler, identifiziert die Ursache, erklärt sie, behebt sie und erklärt wie man ähnliche Fehler zukünftig vermeidet. Häufige Fehler: undefined variables, CORS-Probleme bei externen APIs, falsche CDN-URLs, fehlende Event-Listener, CSS-Konflikte. Claude kennt alle — wenn der Fehlertext vollständig mitgeliefert wird.
Warum wichtig
Debugging ohne vollständigen Fehlertext ist wie Arzt ohne Symptombeschreibung. Der vollständige Konsolen-Fehler ist das wichtigste Werkzeug — und 80% der Nutzer geben nur "es funktioniert nicht."
Fehler in der Browser-Konsole (F12 → Console):
[Vollständigen Fehler-Text hier einkopieren]
Relevanter Code-Abschnitt:
[Betroffenen Code hier einkopieren]
Bitte erkläre:
1. Was ist genau falsch?
2. Warum tritt dieser Fehler auf?
3. Wie beheben wir ihn?
4. Wie vermeiden wir ähnliche Fehler zukünftig?
Tipp
Immer den vollständigen Fehler-Text aus der Konsole kopieren — nicht paraphrasieren. "TypeError: Cannot read properties of undefined (reading 'map')" ist präziser als "es gibt einen Fehler mit der Liste."
#28
Frontend Basics
Claude beherrscht HTML/CSS/JS ohne Frameworks — und kann CDN-Libraries einbinden: Chart.js (Diagramme aller Art), Alpine.js (reaktive UI ohne Build-Step), Tailwind CSS (Utility-First Styling), GSAP (professionelle Animationen), Lottie (SVG-Animationen), D3.js (komplexe Datenvisualisierungen), Leaflet (interaktive Karten). Der Trick: im Prompt angeben welche Libraries verfügbar sind und wie sie einzubinden sind. Claude nutzt sie dann korrekt.
Warum wichtig
CDN-Libraries erweitern was Claude bauen kann dramatisch — von simplen Charts bis zu professionellen animierten Dashboards. Die richtigen Libraries spezifizieren gibt in Minuten Ergebnisse die sonst Stunden dauern würden.
Erstelle [Tool-Beschreibung] als Artifact mit:
- Chart.js via CDN für alle Diagramme
- Tailwind CSS via CDN für Styling
- Alpine.js via CDN für Reaktivität
Diagramm-Daten:
[Daten hier einfügen]
Interaktivität:
- Hover-Tooltips auf allen Datenpunkten
- Klick auf Legende blendet Datensatz ein/aus
- Zeitraum-Filter: 1W / 1M / 3M / 1J
Tipp
Immer angeben welche Libraries verfügbar sind: "Nutze Chart.js und Tailwind CSS — beide via CDN." Claude wählt dann die richtigen CDN-URLs und nutzt die APIs korrekt.
#29
React Prompting
React-Komponenten in claude.ai sind direkt ausführbar — kein Build-Step nötig. Verfügbar: Standard React Hooks (useState, useEffect, useRef, useMemo), recharts (alle Diagramm-Typen), lucide-react (500+ Icons), shadcn/ui Komponenten, Tailwind CSS. Nicht verfügbar: externe API-Calls (CORS), Node.js-spezifisches, komplexe State-Management-Libraries. Wichtige Regeln: immer `export default` verwenden, keine Required Props ohne Default-Values, keine Datei-Imports die nicht existieren.
Warum wichtig
React-Artifacts ermöglichen komplexere Interaktivität als reines HTML/JS — State-Management, komponentenbasiertes Denken, echtere User-Interface-Patterns. Ideal für Dashboard- und Tool-Prototypen.
Erstelle React-Komponente als Artifact für [Funktion]:
TECHNISCH:
- useState für alle State-Variablen
- useEffect für Berechnungen bei State-Änderungen
- Tailwind CSS für alle Styles
- Icons: lucide-react (nur existierende Icons)
- Diagramme: recharts
PFLICHT:
- export default function App() am Ende
- Alle Props haben Default-Values
- Keine externen API-Calls
BEISPIELDATEN direkt im Code als const DATA = [...]
Tipp
Immer `export default` verlangen und keine Required Props ohne Defaults — das sind die zwei häufigsten Gründe warum React-Artifacts in Claude nicht rendern.
#30
Mini-Produkte
Mini-Produkte sind vollständige, einsatzfähige Apps die Claude in einer Chat-Session baut: Kalkulatoren (ROI, Pricing, Kalkulation), CRM-Tools (Kontakte verwalten, Pipeline tracken), Quiz-Apps (Wissenstests, Onboarding), Rechnungs-Generatoren (PDF via Browser Print), Projekt-Tracker (Tasks, Status, Deadlines), Angebotsrechner, Zeiterfassungs-Tools. In 20-30 Minuten, ohne Programmierung, professionell genug für den echten Einsatz. Der MVP-First-Ansatz ist entscheidend.
Warum wichtig
Mini-Produkte demokratisieren Softwareentwicklung. Was früher einen Entwickler und Wochen brauchte, entsteht jetzt in einer Stunde. Für Prototypen, interne Tools, Kunden-Demos ist das transformativ.
Erstelle Mini-Produkt als vollständiges HTML-Artifact:
PRODUKT: [Beschreibung in 1-2 Sätzen]
ZIELGRUPPE: [Wer nutzt es, wie]
MVP-KERNFUNKTION: [Die eine wichtigste Funktion]
MUSS haben:
- [Funktion 1]
- [Funktion 2]
- [Funktion 3]
DESIGN: Professionell, [Farbschema], [Schrift]
DATEN: Lokal im Browser (localStorage), kein Backend
Tipp
MVP zuerst — die eine wichtigste Funktion perfekt. Dann Features iterativ hinzufügen. Ein zu ambitionierter erster Prompt führt zu halbfertigen Tools.