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.
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
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]
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
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.
Ralf Schukay liebt Analytics, Python & alles mit Daten. In seiner Freizeit spielt er Synthesizer (Nord, Novation), joggt und fährt Gravel Bike. Er arbeitet als Teamlead Analytics & Conversion mit einem fitten und netten Team in der Berliner Digitalagentur >MAI mediaworx<
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional
Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
