🛠️ Apps entwickeln › Apps mit Claude

Apps mit Claude

Digitales Pausenbrot · 14. April 2026

Artefakte erstellen und direkt teilen

1 Was sind Artefakte? ▾

Wenn du Claude bittest, eine HTML-App zu erstellen, zeigt er dir das Ergebnis als Artefakt an. Das ist ein interaktives Vorschaufenster direkt im Chat.

Du siehst sofort, wie die App aussieht und funktioniert. Kein Copy-Paste, kein Speichern, kein Browser-Wechsel.

Das Besondere an Artefakten

  • Live-Vorschau: Du siehst die App sofort im Chat.
  • Direkt teilbar: Klicke auf «Teilen» — und du bekommst einen Link. Fertig.
  • Iterierbar: Sag Claude, was du ändern willst. Er passt das Artefakt an.
Screenshot: Claude Chat mit einem Artefakt — links der Chat, rechts die Live-Vorschau einer HTML-App
Artefakte sind der grösste Vorteil von Claude gegenüber anderen Tools. Kein anderes KI-Tool bietet diese direkte Vorschau und Teilbarkeit.
2 Eine App erstellen — Schritt für Schritt ▾

Öffne claude.ai und schreibe diesen Prompt:

Erstelle ein interaktives Lernkarten-Set als HTML-Artefakt. Thema: Die 26 Kantone der Schweiz. Vorderseite: Kantonsname. Rückseite: Hauptort und Wappen-Emoji. Design: freundlich, grosse Schrift, Karten zum Durchklicken mit Vor/Zurück-Buttons. Zeige den Fortschritt an (z.B. «Karte 5 von 26»).

Claude erstellt das Artefakt. Du siehst es sofort rechts im Chat.

Anpassen

Gefällt dir etwas nicht? Sag es einfach:

  • «Mach die Schrift grösser»
  • «Füge einen Shuffle-Button hinzu»
  • «Ändere die Farben zu Blau und Weiss»

Claude passt das Artefakt sofort an.

Screenshot: Claude zeigt das fertige Lernkarten-Artefakt mit einer Schweizer Kantonskarte
3 Artefakt teilen ▾

Dein Artefakt ist fertig. Jetzt willst du es teilen. Das geht in 3 Klicks:

Option 1: Link teilen (empfohlen)

  1. Klicke auf das Artefakt, um es gross anzuzeigen.
  2. Klicke auf «Veröffentlichen» (oben rechts).
  3. Kopiere den Link. Fertig.

Jeder mit dem Link kann die App nutzen — ohne Claude-Konto, ohne Anmeldung.

Option 2: HTML-Datei herunterladen

  1. Klicke auf das Code-Symbol im Artefakt.
  2. Kopiere den gesamten Code.
  3. Speichere ihn als .html-Datei (z.B. lernkarten-kantone.html).

Diese Datei kannst du per E-Mail, USB-Stick oder Schulplattform verteilen.

Screenshot: Der Teilen-Dialog von Claude mit dem kopierbaren Link und dem Veröffentlichen-Button
Der geteilte Link funktioniert dauerhaft. Du kannst ihn in deine Kursunterlagen, in Teams oder in ein LMS (z.B. Moodle) einfügen.
4 Praxis: Drei Apps in 10 Minuten ▾

Probiere es aus! Erstelle diese drei Apps hintereinander. Kopiere die Prompts direkt in Claude:

App 1: Quiz

Erstelle ein Multiple-Choice-Quiz als HTML-Artefakt. Thema: Verdauungssystem, 2. Sek. 6 Fragen, Sofortfeedback, Auswertung am Ende. Modernes Design mit Fortschrittsbalken.

App 2: Timer

Erstelle einen Gruppen-Timer als HTML-Artefakt. 3 konfigurierbare Timer nebeneinander (für 3 Gruppen). Jeder Timer hat Start/Pause/Reset. Visueller Countdown mit Kreisdiagramm. Alarm-Sound wenn die Zeit abläuft.

App 3: Vokabeltrainer

Erstelle einen Vokabeltrainer als HTML-Artefakt. 20 Französisch-Deutsch Vokabeln zum Thema «Einkaufen». Modus 1: Lernkarten. Modus 2: Abfrage (Eingabefeld). Fortschrittsanzeige und Statistik am Ende.

Teile alle drei als Links. Du hast jetzt drei fertige Unterrichtstools.

Screenshot: Drei Claude-Artefakte nebeneinander — Quiz, Timer und Vokabeltrainer
Speichere gelungene Prompts in einer Notiz-App. So kannst du sie jederzeit wiederverwenden und anpassen.