Templates in der Praxis
Use-Case: Ein Mockup für ein Lerntool, das deine Schüler:innen nutzen sollen – zum Beispiel ein Online-Karteikarten-Tool oder einen interaktiven Quiz-Editor.
Charlie's Tipp: Immer zuerst im Wireframe. Erst wenn die Struktur stimmt, duplizierst du ins High-Fi.
Beispiel-Brief (konkret, mit klaren Layout-Regionen):
"Prototyp für ein Online-Karteikarten-Tool. Linke Spalte: Liste der Karten-Stapel mit Titel und Anzahl Karten. Hauptbereich: aktuelle Karte, oben Vorderseite (Frage), nach Klick Rückseite (Antwort). Unten drei Bewertungs-Buttons: einfach / mittel / schwer. Rechte Spalte: Fortschrittsanzeige mit erledigten vs. verbleibenden Karten. Wireframe."
Workflow:
- Projekt anlegen → Start-Punkt Prototype.
- Brief wie oben.
- Wireframe prüfen, Layout-Feedback geben („Buttons grösser", „Liste schmaler").
- Wenn Struktur stimmt: Duplicate in High-Fidelity – dein Design-System liefert Farben + Typo.
- Export als HTML (für Demo in der Klasse) oder als PDF (für Projektantrag/Bildungskommission).
Use-Case: Ein 10-Slide-Deck für einen Elternabend. Thema frei wählbar: „Einführung iPads in der 1. Sek", „Neue Wahlfachlandschaft", „Projektwoche Nachhaltigkeit", usw.
Brief-Vorlage mit Slide-Struktur:
"10-Slide-Pitch-Deck für Elternabend zum Thema [THEMA]. Design-System anhängen: [Schulhaus-Brand-Kit].
Slide 1: Titel, Datum, mein Name.
Slide 2: Warum dieser Elternabend? (Kontext)
Slide 3: Aktuelle Situation.
Slide 4: Was ändert sich.
Slide 5: Pädagogisches Argument (warum das sinnvoll ist).
Slide 6: Praktische Umsetzung im Schulalltag.
Slide 7: Was das konkret für Ihr Kind bedeutet.
Slide 8: Datenschutz und Regeln.
Slide 9: Zeitplan nächste Schritte.
Slide 10: Fragen und Austausch."
Export: .pptx herunterladen, in PowerPoint öffnen, Feinschliff (Charlie: „close but not pixel-perfect" – mit 5-10 Minuten PowerPoint-Nachjustierung ist das Deck präsentationsreif).
Warum Claude Design statt Chat? Im Chat kriegst du Text. Hier kriegst du eine Präsentation mit Layout, Bildern und Farben – direkt aus deinem Schulhaus-Branding.
Use-Case: Eine interaktive HTML-Lernseite zu einem Unterrichtsthema – zum Beispiel „Wasserkreislauf", „Französische Revolution", „Bruchrechnung üben". Die Seite kannst du entweder als HTML exportieren und lokal zeigen, oder via Handoff zu Claude Code ins Netz stellen.
Das versteckte Feature: Grab-web-element
Du kannst eine bestehende Lehrmittel-Website (oder irgendeine andere Seite) als Stil-Inspiration einfangen. Claude übernimmt Farbstimmung, Layout-Logik und Typografie – nicht den Inhalt.
⚠ Urheberrecht: Nur als Stil-Referenz nutzen. Kein 1:1-Kopieren von fremden Inhalten oder Bildern.
Beispiel-Brief:
"Interaktive Lernseite zum Thema Wasserkreislauf. Hero oben mit animierter Grafik der Kreislauf-Stationen. Dann scrollbare Erklär-Sektionen zu Verdunstung, Kondensation, Niederschlag, Versickerung – jeweils mit Text, Grafik und kurzem interaktiven Element (Schieberegler, Klick-Reveal, etc.). Am Ende ein 5-Fragen-Quiz mit direkter Auswertung. Mobile-first."
Datenschutz: Wie immer bei KI-Tools – keine Schüler:innen-Namen, -Fotos oder personenbezogenen Daten in Claude Design hochladen. Gleiche Disziplin wie bei Claude Chat.
Vertiefung zu Tutorial 1 Step 3. Wenn du dort nur konzeptuell gesehen hast, dass ein Design-System wichtig ist, hier gehst du's konkret an.
Inputs zusammenstellen (nimm dir 10 Minuten):
- Logo: SVG oder PNG, idealerweise mit transparentem Hintergrund.
- Farbcodes: Hex-Werte für Primär-, Sekundär- und Akzentfarbe – aus dem Schulhaus-CI oder der eigenen Klassen-Identität.
- Schriftarten: Name einer Headline-Schrift + Fliesstext-Schrift. Google Fonts sind die sichere Wahl (z.B. „Playfair Display" + „Source Serif 4").
- Optional: Eine bestehende Präsentation (PPTX) oder ein Elternbrief als PDF – Claude zieht daraus den allgemeinen Ton.
Brief:
"Erstelle ein Design-System mit dem Logo [hochgeladen], Primärfarbe #XYZ, Sekundärfarbe #ABC, Akzent #DEF, Schriftart [Headline-Font] für Überschriften und [Body-Font] für Fliesstext. Typ-Skala für H1, H2, H3 und Body. Beispiel-Komponenten: Button primär, Button sekundär, Info-Box, Warn-Box."
Was dabei entsteht: Ein Referenz-Pack, das du bei jedem neuen Projekt als Input anhängst. Claude übernimmt dann automatisch Farben, Schriften und Komponenten-Stil.
Reuse: Einmal angelegt, läuft's jahrelang. Bei Bedarf (Logo-Refresh, Farbwechsel) updatest du das System einmal – alle zukünftigen Projekte ziehen nach.
Quiz
1. In welchem Modus empfiehlt es sich, ein neues Prototype-Projekt zu starten?
- Direkt High-Fidelity, damit man Farben sieht
- Wireframe zuerst, dann bei stimmender Struktur ins High-Fi duplizieren
- Nur Wireframe, High-Fi braucht man selten
- Egal, Claude entscheidet automatisch
Lösung anzeigen
Richtige Antwort: b) — Wireframe-first spart Tokens und Iterations-Zeit. Wenn die Struktur stimmt, wechselst du ins High-Fidelity – dein Design-System liefert dann Farben und Typo.
2. Was bedeutet Charlie Hills' Warnung „close but not pixel-perfect" beim PPTX-Export?
- PowerPoint-Dateien lassen sich nicht öffnen
- Der Export ist unbrauchbar
- Das Styling wird weitgehend übernommen, aber kleine Nachbearbeitung in PowerPoint ist nötig
- Nur die erste Slide wird korrekt exportiert
Lösung anzeigen
Richtige Antwort: c) — Der PPTX-Export übernimmt Struktur und Inhalte gut, einzelne Formatierungen (Schriftgrössen, Abstände) können leicht abweichen. 5-10 Minuten Feinschliff in PowerPoint genügen meist.
3. Was darf man beim „Grab-web-element"-Feature NICHT tun?
- Eine Webseite als Stil-Inspiration verwenden
- Farbstimmung und Layout-Logik übernehmen
- Fremde Inhalte oder Bilder 1:1 kopieren
- Eine Seite mehrfach als Referenz einfangen
Lösung anzeigen
Richtige Antwort: c) — Das Feature ist für Stil-Inspiration (Farben, Layout, Typo). Inhalte und Bilder einer fremden Seite 1:1 zu übernehmen verletzt Urheberrecht.