Bei größeren Designprojekten scheitert es selten am Werkzeug, sondern meist am fehlenden Ablauf. Wer Claude Design ohne feste Reihenfolge nutzt, erhält schnell einzelne Ergebnisse, die nicht zusammenpassen. In dieser Anleitung lernst du, wie du ein Website-Projekt in klar getrennte Phasen zerlegst, vom Projektziel bis zum finalen Review. Den Ablauf kannst du dir als interaktives HTML-Dokument im Browser öffnen. Das Nutzungslimit, das in der Kurzbeschreibung genannt wird, ist in diesem Abschnitt des Videos kein Thema. Die Anleitung konzentriert sich deshalb auf den Aufbau deines Workflows.
Das Video wird erst beim Abspielen von YouTube geladen – dabei werden Daten (u. a. deine IP-Adresse) an YouTube bzw. Google übertragen. Mehr dazu in der Datenschutzerklärung
Wichtigste Erkenntnisse
- Ein größeres Projekt braucht eine feste Reihenfolge: Projektziel, Zielgruppe, Referenzen, Designsystem, Komponenten, Seitenaufbau, Mobilansicht und Final Review.
- Je präziser du Ziel und Zielgruppe beschreibst, desto passender fällt das Ergebnis aus.
- Referenzen dienen als Stilvorlage und nicht als Kopiervorlage.
- Das Designsystem baust du einmal auf und nutzt es für alle weiteren Arbeiten derselben Marke.
- Jeder Entwurf durchläuft die Schleife aus Prompt, Prüfung, Optimierung und finaler Speicherung.
- Die Mobilansicht ist bei Websites und Landing Pages wichtig, bei Social-Media-Grafiken dagegen meist nicht relevant.
Schritt-für-Schritt-Anleitung
Schritt 1: Den Workflow im Browser öffnen
Öffne die HTML-Datei des Claude Design Workflows in Chrome oder einem anderen Browser. Das Dokument ist interaktiv. Wenn du auf eine Phase klickst, werden dir zusätzliche Informationen angezeigt. So verstehst du den Aufbau eines Projekts, bevor du den ersten Prompt schreibst.
Schritt 2: Das Projektziel definieren
Beginne mit der Frage, was die Website erreichen soll. Kläre dabei, welches Produkt oder welchen Service du anbietest und welches Hauptziel du verfolgst. Geht es um Verkäufe, Newsletter-Anmeldungen, Social-Media-Verlinkungen, Leads oder einfach um Information? Notiere außerdem deine USP, also das, was du besonders gut kannst und warum Menschen dich wählen sollten. Der Call to Action gehört ebenfalls dazu. Er ist mehr als der Button, denn auch der Text darüber zählt dazu.
Schritt 3: Das Projektziel an einem Beispiel durchspielen
Stell dir vor, du verkaufst einen einwöchigen Kurs zum Thema AI E-Mail Marketing. Das Ziel sind Kursverkäufe. Als USP kannst du angeben, dass der Kurs praxisnah ist, mit echten Beispielen arbeitet und Live-Fragen im Chat erlaubt. Der Call to Action lautet dann „Enroll now“. Im Workflow findest du zu diesem Schritt einen Beispiel-Prompt, den du direkt übernehmen oder an dein eigenes Produkt anpassen kannst. Er ist bewusst einfach gehalten, sodass du ihn schnell verstehst und abwandelst.
Schritt 4: Die Zielgruppe beschreiben
Im nächsten Schritt legst du fest, für wen das Design entsteht. Das ist wichtig, weil Claude Texte, Farben und Layouts je nach Zielgruppe anders aufbaut. Beschreibe demografische Merkmale wie Alter und Geschlecht sowie Beruf, Wünsche, Probleme und Designvorlieben. Ein Beispiel wäre eine Person zwischen 20 und 35 Jahren, marketinginteressiert, selbstständig und an einem effizienten Einsatz von KI interessiert. Ihr Problem ist die Masse an KI-Themen, und sie bevorzugt modernes, cleanes Design. Du musst nicht ins Detail gehen. Die Angabe „modern“ und „clean“ reicht in der Regel aus.
Schritt 5: Referenzen sammeln
Referenzen zeigen Claude die Richtung, in die dein Design gehen soll. Du kannst Screenshots, UI-Patterns, Layouts oder Links zu Websites hochladen, die dir gefallen, etwa von Stripe, Notion oder Framer. Links lassen sich direkt einfügen. Google-Dokumente kannst du ebenfalls anhängen. Benenne Dateien aussagekräftig, zum Beispiel „Designvorschläge für Landing Page“, statt sie als „Untitled Document“ zu belassen. Farbideen gibst du als Bild oder als Farbcode an.
Wichtig ist der Unterschied zwischen Inspiration und Kopie. Verlange nicht, dass eine bestehende App eins zu eins nachgebaut wird. Beschreibe stattdessen den Stil, den du möchtest, und kommuniziere das klar im Prompt.
Schritt 6: Das Designsystem festlegen
Als Nächstes definierst du das Designsystem. Dazu gehören Farben, Schrifttypen, Schriftgrößen, Schriftarten und Abstände, also das Spacing. Außerdem bestimmst du Schatten, den Icon-Stil, das Aussehen der Cards, also der Blöcke für Texte und Bilder, sowie die Gestaltung von Buttons und Testimonials. Für jeden dieser Bereiche gibt es einen passenden Prompt. Wenn du für dieselbe Marke weiterarbeitest, musst du das Designsystem nicht neu erstellen, da es bereits vorliegt.
Schritt 7: Die Komponenten auswählen
Nun legst du fest, welche Bausteine die Website enthalten soll. Typisch sind eine Hero-Section, Featured Cards, Testimonials, eine FAQ-Sektion, eine Call-to-Action-Sektion, ein Footer, eventuell eine Newsletter-Sektion und eine Preistabelle für Abos. Bei Social-Media-Posts oder Präsentationen sieht diese Auswahl natürlich ganz anders aus. Orientiere dich am Beispielprojekt, das du bereits kennst.
Schritt 8: Die Iterationsschleife anwenden
Ein Design wird selten beim ersten Versuch perfekt. Der bewährte Ablauf lautet: Prompt senden, Design prüfen, optimieren und anschließend final speichern. Fällt dir auf, dass ein Element größer sein sollte, eine andere Animation braucht oder zu viel Text enthält, kannst du das über Tweaks anpassen oder den Prompt erneut formulieren. Der erste Entwurf muss also nicht sofort perfekt sein.
Schritt 9: Den Seitenaufbau festlegen
Bestimme die Reihenfolge der Komponenten. Ein möglicher Aufbau beginnt mit der Hero-Section, gefolgt von Social Proof, Testimonials und Preisen. Die Reihenfolge kannst du selbst vorgeben. Achte dabei auf die Hierarchie, denn wenn du Claude lediglich alle Komponenten nennst, ordnet es sie so an, wie es das selbst für gut hält. Das muss nicht deinem Geschmack entsprechen. Den Call to Action kannst du an mehreren Stellen platzieren. Welche Stellen du wählst, bleibt deine Entscheidung.
Schritt 10: Die Mobilansicht optimieren
Bei Websites und allem, was online läuft, ist die mobile Ansicht entscheidend. Prüfe die Schriftgröße, die Buttongröße, das Spacing und die Bildskalierung. Setze auf eine einspaltige Darstellung statt mehrerer Abschnitte nebeneinander. Halte Texte kurz und achte darauf, dass der wichtigste Button möglichst weit oben liegt, damit Besucher nicht lange scrollen müssen. Ein sinnvoller Weg ist, zuerst die Desktop-Version zu erstellen, das Projekt zu kopieren und die Kopie mit einem Prompt für Mobilgeräte anzupassen, etwa mit der Vorgabe „Optimize the design for mobile while preserving the overall visual style“.
Schritt 11: Den Final Review durchführen
Zum Abschluss prüfst du das Ergebnis anhand einer Checkliste. Ist das Design konsistent und passen alle Farben zusammen? Ist der Call to Action gut sichtbar? Funktioniert die Mobilansicht? Sind die Texte verständlich? Wie steht es um die Ladezeit, und ist das Ganze auf Conversion ausgerichtet? Dieser Review entscheidet darüber, ob das Projekt fertig ist.
Schritt 12: Hosting und Umsetzung klären
Ein fertiges Design bringt dich nur weiter, wenn du es online stellst. Klär deshalb Fragen wie Hosting, Ladezeit und technische Umsetzung mit deinem Hostinganbieter oder deinem Entwicklerteam. Claude Design eignet sich außerdem gut für Vorlagen und Mockups, die du an ein Designteam weitergeben kannst. Mit diesem Workflow lassen sich auch ganze Projekte umsetzen, wenn du die Schritte konsequent durchgehst.
Zusammenfassung – Claude Design Workflow: Größere Projekte strukturiert umsetzen
Ein größeres Projekt mit Claude Design gelingt, wenn du es in feste Phasen gliederst. Beginne mit Projektziel, Zielgruppe und Referenzen, lege anschließend das Designsystem und die Komponenten fest und bestimme den Seitenaufbau. Danach optimierst du die Mobilansicht, führst einen Final Review durch und klärst die technische Umsetzung. Jeder Entwurf durchläuft dabei die Schleife aus Prompt, Prüfung, Optimierung und Speicherung. So entsteht aus einzelnen Ergebnissen ein stimmiges Gesamtprojekt.
FAQ
Wie viele Schritte umfasst der Workflow für ein Website-Projekt?Der Workflow umfasst zwölf Schritte, von der Öffnung des interaktiven Dokuments über Projektziel, Zielgruppe, Referenzen und Designsystem bis zu Komponenten, Seitenaufbau, Mobilansicht, Final Review und Hosting.
Muss ich das Designsystem für jedes neue Projekt neu erstellen?Nein. Wenn du für dieselbe Marke weiterarbeitest, ist das Designsystem bereits vorhanden und kann wiederverwendet werden.
Darf ich eine bestehende Website als Vorlage eins zu eins nachbauen lassen?Davon rät das Video ab. Referenzen sollen als Inspiration dienen. Beschreibe den gewünschten Stil, statt eine Kopie zu verlangen.
Ist die Mobilansicht bei jedem Projekt wichtig?Nicht immer. Bei Websites und Landing Pages ist sie zentral. Bei Social-Media-Postings spielt sie dagegen meist keine große Rolle.
Muss der erste Entwurf schon perfekt sein?Nein. Das Design wird in mehreren Durchgängen verbessert, indem du es prüfst, optimierst und bei Bedarf erneut promptest.
