Claude Artifacts – Interaktive Rechner & Infografiken erstellen

Mit dem neuen Feature "Claude Artifacts" wird das Erstellen interaktiver Tools durch generative AI für jeden leicht möglich. Diese Use-Cases zeigen wie es geht. Mit allen Prompts zum nachmachen.

Was ist Claude Artifacts?

Artifacts ist ein neues Feature, das seit Juni 2024 in Anthropics Chatbot-Lösung Claude integriert ist (siehe Claude 3.5 Sonnet Update). Dadurch wird das Erstellen von Inhalten wie Code und Anwendungen stark vereinfacht. Man gibt auf der linken Seite den Prompt ein. Auf der rechten Seite kann man die erstelle Anwendung dann direkt sehen und nutzen.

Was kann man mit Artifacts erstellen?

Per generativer KI kann man mit Claude.ai jetzt nicht nur Texte sondern auch Anwendungen und kleine Tools erstellen. Im Gegensatz zu ChatGPT kann man die Anwendung in Claude.ai direkt ausprobieren, da die KI im Browser lauffähigen HTML/Javascript-Code mit dem React-Framework erstellt. Das bringt besonders Vorteile beim Erstellen interaktiver Inhalte wie z.B. Rechner, Tools und Analysen.

Beispiele für interaktive Inhalte:

  • Rechner: Von einfachen mathematischen bis hin zu komplexen Finanz- oder wissenschaftlichen Kalkulatoren.
  • Quiz: Anwendungen, die sofort auf Nutzereingaben reagieren und Ergebnisse in Echtzeit anzeigen.
  • Formulare und Umfragen: Interaktive Formulare mit sofortiger Auswertung.
  • Datenvisualisierungen: Dynamische Diagramme und Graphen, die auf Benutzereingaben reagieren.
  • Spiele: Einfache, browserbasierte Spiele.
  • Simulationen: Physikalische oder wirtschaftliche Modelle, die Nutzer anpassen können.
  • Lernmodule: Interaktive Tutorials und Übungen.
  • Interaktive Geschichten: Erzählungen, bei denen Nutzer den Verlauf beeinflussen können.

Interaktive Inhalte sind die Zukunft des Webs da diese sich von den monotonen Text/Bild-Kombinationen abheben. Hier zeigen wir einige eindrucksvolle Use-Cases für diese jetzt durch KI deutlich einfacher erstellbaren Inhalte.

Beispiel 1: Einfache Infografiken

Infografiken machen Zusammenhänge in Texten einfacher klar und lockern Texte visuell auf. Mit Claude kann man diese direkt erzeugen und verfeinern, bis diese zum gewünschten Stil passen.

Claude Artifacts: Einfache Infografiken
Claude Artifacts: Einfache Infografiken

Prompt für Infografiken:

Der Prompt kann sehr einfach formuliert werden. Jedoch kann man noch keine Design-Wunder erwarten, da die Grafiken per SVG generiert werden.

Prompt: 
Zeige eine schematische, ansprechende Infografik zu diesem Inhalt an: 
[zu visualisierender Text]

Ideen für Prompt-Erweiterungen:

  • Nutze Farbpalette: Blautöne
  • Nutze Icons
  • Nutze Diagrammtyp "Mindmap" (oder: Flowchart, Venn-Diagramm, Word-Cloud etc.)

Beispiel 2: ETF-Investmentrechner

Ein interaktiver Investmentrechner ermöglicht, eine Geldanlage z.B. in ETFs interaktiv durchzuspielen. Dabei können Schieberegler und farbige Balken-Charts genutzt werden, um das Ergebnis schnell und ansprechend zu visualisieren.

Claude Artifacts: Interaktiver ETF-Investmentrechner per generativer KI erstellen
Claude Artifacts: Interaktiver ETF-Investmentrechner per generativer KI erstellen

Prompt für den Investment-Rechner:

Beim Prompt beschreiben wir den Rechner schön strukturiert nach Input / Output / Logik & Verhalten. Dabei geben wir an, wie die Slider reagieren sollen und was die Wertebereiche sind. Für eine gute Usability wählen wir Slider mit Textboxen.

Prompt: 
Act as a skilled web developer. Your task is to create an interactive ETF investment chart as Claude Artifact. 
Headline: ETF Investment Calculator
Input fields:
- One-time deposit (slider & small text box, range: 0-100.000€, steps: 1.000€)
- Monthly deposit (slider & small text box, range: 0-1.000€, steps: 25€)
- Investment period (slider & small text box, range: 1-50 years, steps: 1 year)
- Return rate in % (slider & small text box, range: 1-20%, steps: 1%)
Output: 
- Chart: Stacked bar-chart showing cumulated deposits (blue) and yield (green) by year
- Return: Total Return, Total deposits, Growth rate in absolute and percent
Logic and Behaviour:
- When changing the sliders or text boxes: recalculate the growth using compound interest calculation and update output
- Reset button: sets all sliders/text boxes to 0

Mögliche Prompt-Erweiterungen:

  • Use decimal points on the axis to make numbers more readable, e.g. 100.000 €
  • Show a reference investment as line, based on 2 % return rate (Product: "Festgeld")

Video: So sieht der interaktive Investmentrechner in Aktion aus

 

Häufige Fragen & Tipps

Was kostet Claude.ai?

Claude ist in der Free-Version kostenlos nutzbar oder als Pro-Version (ca. 22 € pro Monat) oder Team-Version (ab 5 Nutzern, ca. 34 € pro Nutzer/Monat) verfügbar. Die kostenlose Version hat Nutzungs-Limits, so dass man nur wenige Prompts pro Tag absenden kann. Siehe Claude-Pricing

Was kann ich tun, wenn meine Anwendung nicht funktioniert?

Claude macht beim Code generieren gelegentlich Fehler. Am einfachsten kommt man voran, wenn man den Fehler beschreibt und im Folge-Prompt mitgibt, z.B. "Error: charts are not updating" oder "Fix this: Fonts are too small"

Muss ich programmieren können, um Claude Artifacts zu nutzen?

Nein, oft bekommt man das gewünschte Ergebnis auch ohne Coding-Skills hin. Es hilft zwar etwas, wenn man technisch versteht, wodurch Fehler entstehen oder wie man bestimmte Elemente nennt um sie per Prompt besser beschreiben zu können. Aber man muss dafür nicht im Code arbeiten.