Unterrichts-Workflows
Das erste Design von Claude ist selten das finale. Die Feinarbeit entscheidet. Claude Design gibt dir vier Werkzeuge dafür:
- Inline-Kommentare – Du klickst auf ein Element und schreibst: „Ändere diesen Button zu rot." Claude wendet das gezielt an diesem Element an.
- Direct-Edit – Text im Design direkt anklicken und umschreiben, wie in einem Dokument.
- Custom-Slider – Präzise Feinjustierung für Spacing, Farben, Layout-Abstände. Kein Rumprobieren mit Prompts.
- Apply across / Global Changes – Eine Änderung auf das ganze Design anwenden („alle Sekundär-Buttons kleiner machen").
Praxis-Beispiel: Arbeitsblatt-Entwurf verfeinern
- Erster Entwurf via Brief – Claude liefert Version 1.
- Text direkt umschreiben: Aufgabenstellung anpassen.
- Inline-Kommentar auf Grafik: „Ersetze durch einfacheres Diagramm."
- Slider: Schriftgrösse Body um 2 Punkte nach oben.
- Apply-across: „Alle Überschriften fett."
⚠ Research-Preview-Hinweis: Claude Design ist noch in der Research-Preview-Phase. Bekannte Bugs:
- Inline-Kommentare können vor dem Verarbeiten plötzlich verschwinden (→ neu schreiben).
- Im Compact-View treten Speicher-Fehler auf (→ im Standard-View arbeiten).
- Grosse Codebase-Uploads verursachen Lag (→ nur relevante Dateien hochladen).
- Gelegentliche Chat-Upstream-Errors (→ kurz warten, dann neu senden).
Geduld und ab und zu ein Reload gehören aktuell zum Workflow.
Claude Design exportiert in 6 Formate. Je nach Ziel wählst du anders:
| Ziel | Export | Wann |
|---|---|---|
| Druck-Arbeitsblatt | Wenn's auf Papier geht. | |
| Elternabend-Präsentation | PPTX | Für den Beamer – mit 5-10 Min PowerPoint-Feinschliff. |
| Online-Lehrmittel-Seite | Standalone HTML oder Handoff zu Claude Code | Wenn's ins Netz soll. |
| Kolleg:innen-Review | Canva-Link | Wenn Sekretariat/Kollegium weiterarbeitet. |
| Langfristig archivieren | .zip-Folder | Komplettes Paket lokal speichern. |
| Intern teilen (Team/Enterprise) | Internal Org URL | Shareable Link im Team. |
Faustregeln:
- Für Papier: immer PDF.
- Für Live-Präsentation: PPTX + leichte Nachbearbeitung.
- Für Online: HTML, wenn du selbst hostest; Claude-Code-Handoff, wenn Claude das Hosting mit-erledigen soll.
- Für Weitergabe ans Sekretariat: Canva (niederschwellig zu bearbeiten).
Das Premium-Feature: Ein fertiges Design direkt in Claude Code übergeben – und eine lauffähige, deploybare Website kommt heraus.
Ablauf:
- Im Design-Projekt: Export → Handoff to Claude Code.
- Claude Design packt Layout, Komponenten und Assets als Handoff-Bundle.
- In Claude Code öffnen (via CLI oder Cowork Code-Tab).
- Ein einziger Prompt genügt: „Package this design into a deployable site with an /about page and deploy to GitHub Pages."
- Claude Code setzt das um, pusht ins Repo, triggert das Deployment.
Voraussetzung: Claude-Code-Zugang. Falls noch nicht eingerichtet → siehe den Block Code hier auf der Plattform.
Anwendungsfälle in der Schule:
- Kleine Landingpage fürs Wahlfach oder Schullager.
- Prototyp eines Klassen-Blogs.
- Portfolio-Template für Lernende.
- Projektwochen-Übersichtsseite.
Hosting-Details sind in den Tutorials Apps selbst hosten und GitHub Pages (Block Apps entwickeln) beschrieben.
Claude Design ist mächtig, aber nicht immer das richtige Werkzeug. Hier eine Entscheidungshilfe:
| Szenario | Claude Chat (Artefakt) | Claude Design |
|---|---|---|
| Schnell ein Arbeitsblatt als Text | ✅ reicht | overkill |
| Arbeitsblatt mit Layout + Grafik | eingeschränkt | ✅ |
| Elternbrief (Text) | ✅ | overkill |
| Elternabend-Präsentation (Deck) | eingeschränkt | ✅ |
| Schulhaus-Branding anlegen | – | ✅ |
| Kurze Mindmap-Skizze | ✅ (Mermaid) | ✅ (schöner) |
| Deploybare HTML-Website | Handoff manuell | ✅ (integrierter Handoff) |
Wochenrhythmus-Idee (parallel zu Claude Chat – Workflow für die Woche):
- Einmal pro Semester: Schulhaus-Brand-Kit anlegen/aktualisieren.
- Regelmässig wiederkehrende Präsentationen (Eltern-, Infoabende): Design-System als Input bereitstellen, Brief-Vorlage wiederverwenden.
- Ad-hoc: Für ein schnelles Druck-Arbeitsblatt direkt ins Design, für Textmaterial bleibst du im Chat.
- Weekly-Allowance-Disziplin: Mit Wireframe-first und gezieltem Brief reichen die Weekly-Credits für viele Projekte. Zusatz-Nutzung nur bei Bedarf.
⚠ Datenschutz (wir wiederholen's bewusst): Keine Schüler:innen-Daten, -Bilder oder -Namen in Claude Design. Gleiche Disziplin wie in Claude Chat.
Quiz
1. Welches Edit-Tool in Claude Design wendet eine Änderung auf das gesamte Design an?
- Inline-Kommentar
- Direct-Edit
- Custom-Slider
- Apply across / Global Changes
Lösung anzeigen
Richtige Antwort: d) — Apply across (Global Changes) wendet eine Änderung systematisch auf alle passenden Elemente an – z.B. „alle Sekundär-Buttons kleiner machen".
2. Welches Export-Format ist für ein klassisches Druck-Arbeitsblatt am besten geeignet?
- PPTX
- HTML
- Canva
Lösung anzeigen
Richtige Antwort: b) — PDF ist das Standard-Format für Print. Ränder, Schriften und Layout bleiben beim Drucken erhalten.
3. Wann ist Claude Chat (Artefakt) die bessere Wahl als Claude Design?
- Für ein Pitch-Deck mit 10 Slides
- Für eine interaktive Lernseite
- Für reinen Text ohne komplexes Layout – etwa ein Elternbrief
- Für ein Schulhaus-Brand-Kit
Lösung anzeigen
Richtige Antwort: c) — Wenn's nur um Text geht (Elternbrief, Notiz, kurze Zusammenfassung), reicht ein Chat-Artefakt vollständig. Design wäre overkill.