Webseiten-Prototyp
High-Fidelity-Layout — speist Modul 11. ZIP-Export mit HTML/CSS.
Modul 09 · Tag 2
Claude Design: Dein Designsystem.
Logo, Farben, Schriften einmal hinterlegen — dann jede Webseite, jedes Slidedeck, jeden Social-Post in deiner Marke.
Ein eigener Ort für alles Visuelle.
Claude Design ist eine eigene Oberfläche unter claude.ai/design — links der Chat, rechts dein Arbeitsbereich. Du hinterlegst einmal dein Designsystem (Logo, Farben, Schriften), und danach erstellt Claude Webseiten, Slides und Social-Posts automatisch in deiner Marke.
Drei Welten.
Slidedeck .pptx
Editierbare Schriften, direkt in PowerPoint öffnen und feinschleifen.
Carousel
Bis 10 Slides, direkt nach Canva via Connector. Wichtig: „Text editierbar" im ersten Prompt.
Sieben Schritte.
- claude.ai/design öffnen.
- Designsystem anlegen — Logo, Brand-Farben, Schriften hochladen.
- Output wählen: Webseiten-Prototyp / Slidedeck / Carousel.
- Briefing schreiben (Zielgruppe, Stil, Sektionen).
- Tweaks-Slider für Layout-/Farb-Varianten ohne neuen Prompt.
- Edit-Modus für Feinarbeit: einzelne Bereiche anklicken, ändern.
- Export oder Übergabe — als ZIP, PDF,
.pptx, HTML, nach Canva oder direkt an Claude Code.
Ein Design, viele Wege.
Steht dein Design, bist du nicht eingesperrt. Du exportierst es als PowerPoint, PDF oder HTML, lädst es als ZIP herunter oder schickst es direkt nach Canva. Und für größere Vorhaben: Du übergibst dein Design an Claude Code (lokal oder im Web) und entwickelst es dort weiter.
Die Faustregel: Claude Design fürs Design — Look, Layout, Marke. Steht das, übernimmt Claude Code und baut daraus etwas Echtes.
Such dir eine Aufgabe aus.
Drei Wege, eine Spielwiese — alle nutzen dein Designsystem (deine Marke kennt Claude schon). Tipp: Fang einfach an und ergänze Schritt für Schritt, sag Zielgruppe und Stil direkt, gib konkretes Feedback statt vager Kritik und frag ruhig nach mehreren Varianten. Extra-Wünsche (z.B. „Text editierbar") gleich in den ersten Prompt — das spart Korrekturschleifen.
1 · Animierte Landingpage
Eine lebendige Angebots-Seite mit dezenter Bewegung.
Prompt · Landingpage
Bau mir eine einseitige Landingpage für [mein Angebot] — mit dezenten Animationen: - Hero: Headline und Subline blenden beim Laden nacheinander sanft ein, darunter ein CTA-Button - Beim Scrollen: jede Sektion erscheint weich, leicht von unten eingeblendet - CTA-Button mit feinem Hover-Effekt - Ein ruhiger, animierter Farbverlauf im Hero Drei Sektionen: Was du bekommst / Für wen / Wie es abläuft. Halt die Animationen edel und ruhig — kein Zappeln. Mobile-first.
2 · Glücksrad zum Angebot
Ein verspieltes Rad mit Sound und Effekten — führt zu einem Freebie oder Angebot.
Prompt · Glücksrad
Bau mir ein interaktives Glücksrad als Webseite: - Ein Rad mit 6 Feldern (z.B. Freebie, Mini-Call, Rabatt, Checkliste …) — die Feld-Texte als Platzhalter - Button „Drehen": das Rad dreht sich animiert, mit einem leisen Dreh-Sound, und bleibt zufällig auf einem Feld stehen - Beim Stehenbleiben: ein kurzer Ton und das Gewinnfeld leuchtet kurz auf - Beim Gewinn: eine kleine Feier — Konfetti und ein fröhlicher Ton — danach das Ergebnis mit Text + CTA-Button Verspielt, aber hochwertig — in meinem Look. Mobile-first.
3 · App-Prototyp
Mehrere Screens, durchgängiges Design — Claude Designs Königsdisziplin.
Prompt · App-Prototyp
Designe den Prototyp einer kleinen App für [meine App-Idee]: - Vier Screens: Willkommen/Onboarding, Dashboard/Start, eine Detail-Ansicht, Profil - Klares, modernes Mobile-UI: Tab-Leiste unten, Karten, gut sichtbare Buttons - Durchgängig in meinem Designsystem Zeig die vier Screens nebeneinander wie ein echtes App-Mockup.
Egal welche: Der fertige Prototyp lässt sich exportieren und speist Modul 11 — dort bringst du ihn mit Netlify live ins Netz.
Wichtig zu wissen: Bilder sind Platzhalter — Claude Design ist keine Bild-KI.
Webseiten kommen mit grauen Platzhalter-Boxen, die du mit Stock-Fotos oder generierten Bildern füllst.
Beim Canva-Export „Text editierbar" im ersten Prompt anfordern. Claude Design ist eine
Research Preview und am stärksten beim visuellen Design; für aufwendigere Interaktivität
bist du in Cowork freier. Und: Claude Design verbraucht eigene Credits, die schnell
aufgebraucht sind — überleg dir vorher, was du bauen willst, statt endlos zu iterieren.
Output
Dein eigenes Designsystem in Claude Design. Plus ein erster Output — der Webseiten-Prototyp speist Modul 11.
Hintergrund — warum dieses Modul wichtig ist
Visuelle Konsistenz ist eines der hartnäckigsten Probleme für Solo-Unternehmerinnen. Jede Folie sieht anders aus, jeder Newsletter hat eine andere Farbe. Claude Design löst das: ein Designsystem, unendliche Outputs in deiner Marke.
Anthropic launchte Claude Design am 17. April 2026 als eigene Oberfläche unter claude.ai/design — Chat links, Arbeitsbereich rechts.
Stolpersteine
- Kein Designsystem hinterlegt: Output ist generisch. Designsystem-Setup einmal investieren — zahlt sich tausendfach zurück.
- Zu komplexes Briefing: „Eine moderne, professionelle, freundliche Webseite mit allem drin" liefert nichts. Sei konkret.
- Canva-Export ohne „Text editierbar": Du landest mit Bildern, die du nicht mehr anpassen kannst.
Vertiefung
Beispiel-Videos zu Claude Design findest du auf YouTube — deutsch und englisch. Such nach „Claude Design Tutorial". Die meisten zeigen den 16-Minuten-Workflow mit 5 realen Use-Cases.