ANTHROPIC · ARTIFACTS

Code tippen. Preview live daneben.

Claude öffnet ein zweites Pane, du tippst React, HTML oder Markdown, die fertige App entsteht gleichzeitig im Vorschau-Fenster.

Prompt kopieren

Free · Pro · Max · Team · claude.ai, auch in DE/EU

Was Artifacts besonders macht.

Vier Mechaniken, die Artifacts vom normalen Chat-Output trennen, und warum sie deine Outputs sofort produktiv machen.

01 · DIAGRAM CANVAS

Beschreiben, fertig.

Du schreibst zwei Sätze über deinen Prozess, und Claude rendert daraus ein Mermaid-Flowchart im Artifact-Pane. Knoten, Pfeile, Farben: alles live, alles editierbar, kein Diagramm-Tool nötig.

02 · VERSION TIMELINE

Kein Edit geht verloren.

Jede neue Chat-Antwort erzeugt eine neue Version. Per Pfeil-Navigation springst du zwischen v1, v2 und v3, oder wiederherstellst einen alten Stand in einer Sekunde. Kein Strg+Z-Chaos mehr.

03 · INLINE IMPROVE

Markieren, verbessern.

Stelle im Artifact-Pane direkt markieren, dann erscheint der Improve-Button. Claude ändert nur diesen Teil, ohne den Rest anzufassen. Chirurgische Präzision statt „nochmal neu generieren".

04 · PUBLISH & REMIX

Ein Klick, öffentlich live.

Publish erzeugt einen Link. Empfänger brauchen keinen Claude-Account, sie öffnen die App im Browser, nutzen sie sofort und können mit einem Klick eine eigene Variante ableiten.

Wie Artifacts wirklich funktionieren.

01 · Split-Pane

Chat links, Output rechts.

Claude öffnet automatisch ein zweites Fenster, sobald deine Anfrage etwas Eigenständiges erzeugt: Code, Dokument, Diagramm oder App. Kein Copy-Paste mehr.

02 · Iterieren

Jede Nachricht updated live.

„Mach den Button rot". Claude ändert gezielt nur diese Stelle. Alternativ: direkt im Pane markieren, Improve klicken. Alle Versionen bleiben per Pfeil-Navigation erreichbar.

03 · Sechs Formate

Code, Docs, SVG, Apps und mehr.

HTML, JS, Python, React mit Syntax-Highlighting; Markdown-Dokumente; SVG-Grafiken; Mermaid-Flowcharts; interaktive HTML-Mini-Apps, alle live, alle editierbar.

04 · Teilen

Publish-Link, kein Claude-Account nötig.

Ein Klick auf Publish erzeugt einen öffentlichen Link. Empfänger sehen und nutzen das Artifact im Browser, ohne Login. HTML-Mini-Apps laufen vollständig clientseitig.

Vier Anwendungen, die Artifacts sofort liefert.

01 · Solopreneur

Interaktiver Rechner

Stundensatz, Marge oder Spar-Plan: Claude baut einen HTML-Rechner als Artifact, du teilst den Link, Kunden geben Werte ein, sehen Ergebnis. Kein Excel, kein Figma.

02 · Coach

Klickbares Worksheet

Werte priorisieren, Ziele setzen, Reflexionsbogen: Markdown- oder HTML-Artifact, Clients füllen im Browser aus, kein PDF-Download, kein Tool-Kauf nötig.

03 · Berater

Prozess als Flowchart

Sales-Funnel oder Automatisierungs-Logik in zwei Absätzen beschreiben, und Claude rendert daraus ein Mermaid-Flowchart. Exportieren, in die Präsentation, fertig.

04 · Creator

SVG-Grafik in Sekunden

Icons, Charts oder Schaubilder für Reels und LinkedIn-Posts: SVG-Artifact, runterladen, verwenden. Kein Figma-Detour mehr für jede kleine Illustration.

Mein Prompt: die Idee-Entscheidungsmatrix.

Ein vollständiges Business-Tool als Artifact. Einfügen, 3–5 Ideen eingeben, und Claude baut eine interaktive Web-App mit Scoring, Ranking, Aufwand-Nutzen-Matrix und 7-Tage-Aktionsplan. Eckige Klammern anpassen.

artifacts.txt
Erstelle ein vollständig funktionsfähiges interaktives Claude Artifact als moderne Web-App.

Rolle: Erfahrener AI-/Business-Consultant und UX-Designer.
Ziel: Entscheidungsmatrix-Tool, um aus 3–5 Projektideen die beste Startidee auszuwählen.

## App-Struktur
1. Header mit Nutzenversprechen
2. Eingabe: 3–5 Ideen (Name, Beschreibung, Zielgruppe, Problem)
3. Bewertung per Slider (1–5): Problemklarheit, Nutzen, Umsetzbarkeit, Business-Potenzial, Differenzierung, Risiko
4. Automatisches Ranking: Gesamt-Score 0–100
5. Aufwand-Nutzen-Matrix (X: Aufwand, Y: Nutzen)
6. Finale Empfehlung + 7-Tage-Aktionsplan
7. Copy-Button für Empfehlung

## Beispiel-Daten (bearbeitbar)
Idee 1: AI-Angebots-Konfigurator für Agenturen
Idee 2: Automatisierte Lead-Recherche für lokale Dienstleister
Idee 3: Interner Chatbot für wiederkehrende Kundenfragen

## Bewertungslogik
Score = gewichteter Durchschnitt (0–100), Risiko invers gewichtet.
Empfehlung: höchster Score + niedrigstes Risiko + beste Umsetzbarkeit.

## Design & Technik
Heller Hintergrund, Kartenstruktur, dezente Akzentfarbe, responsive.
Keine externen APIs. Frontend-only. Sofort nutzbar, keine Platzhalter.

In 3 Schritten zum ersten Artifact.

01

claude.ai öffnen

Free-Account reicht für den Start. Artifacts ist in allen Plänen aktiv, kein separates Setup, kein Plugin. Einfach einloggen und loslegen.

02

Artifact-Typ benennen

Schreib direkt in den Prompt: „als Artifact", „als interaktive HTML-Seite" oder „als Mermaid-Diagramm". Claude wählt dann sofort das richtige Format, das spart eine Iteration.

03

Iterieren oder teilen

Stelle im Pane markieren + Improve klicken für gezielte Änderungen. Oder Publish für einen öffentlichen Link, Empfänger brauchen keinen Claude-Account.

Bau heute deinen ersten Artifact.

„Der Sprung von der Idee zum klickbaren Tool dauerte früher Tage. Mit Artifacts dauert er die Zeit, die du zum Beschreiben brauchst.“ Du brauchst nur claude.ai und eine konkrete Idee, der Prompt oben ist dein Einstieg.

Prompt kopieren

Mehr Tipps auf @till.schae

Häufige Fragen.

Muss ich für Artifacts ein bezahltes Abo haben?
Nein. Artifacts ist auf claude.ai in allen Plänen aktiv, auch im kostenlosen Free-Account. Einschränkung ist nur das Tages-Limit für Nachrichten. Wer täglich iteriert (komplexe Mini-Apps, mehrere Artifacts pro Tag), kommt mit dem Pro-Plan deutlich weiter.
Funktioniert Artifacts in Deutschland und der EU?
Ja. Claude.ai ist in der EU verfügbar, Artifacts läuft mit allen Funktionen: Code-Rendering, HTML-Mini-Apps, SVG und Markdown. Anthropic hostet die Modelle in den USA, die Datenverarbeitung läuft nach Standardvertragsklauseln. Für DSGVO-relevante Nutzung mit Kundendaten empfiehlt sich eine AVV mit Anthropic.
Was kann Claude im Artifact-Pane rendern?
Sechs Format-Familien: Code mit Syntax-Highlighting (HTML, JS, Python, React, fast jede Sprache), formatierte Markdown-Dokumente, klickbare HTML-Seiten (One-Pager, laufen direkt im Pane), SVG-Grafiken, Mermaid-Diagramme (Flowcharts, Mindmaps, Sequence-Diagramme) und interaktive Mini-Apps (React-Rechner, Quiz, Dashboards).
Kann ich ein Artifact später noch ändern?
Ja. Jede neue Chat-Nachricht updated das bestehende Artifact, kein neues Anfragen nötig. Alternativ: Stelle direkt im Pane markieren und Improve klicken, und Claude ändert nur den markierten Teil. Alle Versionen bleiben per Pfeil-Navigation erhalten und können wiederhergestellt werden.