Eine App-Idee wird greifbar, sobald jemand sie anklicken kann. Genau dafür dient ein Mockup: ein gestalteter Entwurf der Oberfläche, den du Investoren, Entwicklern oder Kunden zeigst, bevor die eigentliche Entwicklung beginnt. Claude Design kann solche Oberflächen aus einer Textbeschreibung erzeugen. Du legst dabei Bildschirme, Navigation, Komponenten und den visuellen Stil fest, und das Tool setzt sie um.
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
In dieser Anleitung begleite ich dich am Beispiel einer mobilen App für einen Hundeshop, den sogenannten „PuPlay“-Shop. Du erfährst, wie du den Prompt aufbaust, auf Rückfragen reagierst, fehlende Teile nachbesserst und dein Ergebnis anschließend exportierst.
Wichtigste Erkenntnisse
- Claude Design erstellt App-Mockups aus Beschreibungen. Screens, Funktionen und Inhalte bestimmst du über deinen Prompt.
- Je konkreter du Stil, Farben, Eckenform und Darstellung (zum Beispiel als mobiler Rahmen) beschreibst, desto näher kommt das Ergebnis deiner Vorstellung.
- Ein erster Entwurf ist selten perfekt. Gezieltes Nachprompten und Anpassen gehören zum Arbeitsprozess.
- Die Sprache deines Prompts bestimmt die Sprache der App.
- Für Präsentationen exportierst du am besten Screenshots oder importierst die Screens in Canva oder PowerPoint, denn das PDF verliert an Qualität.
Schritt-für-Schritt-Anleitung
Schritt 1: Ziel und Beispielprojekt festlegen
Bevor du den ersten Prompt schreibst, kläre, wozu das Mockup dienen soll. Im Beispiel verwalten Hundebesitzerinnen über die App ihre Bestellungen, erhalten Spielzeugempfehlungen und legen ein Profil für ihren Hund an. Das Mockup soll bei Präsentationen, Investorengesprächen und der Visualisierung deiner Idee helfen. Je klarer das Ziel ist, desto gezielter kannst du die Inhalte beschreiben.
Schritt 2: Screens, Funktionen und Inhalte beschreiben
Lege zunächst fest, welche Bildschirme die App braucht. Im Beispiel sind es drei: den Homescreen, das Hundeprofil und die Produktdetails. Beschreibe anschließend, was auf jedem Screen passieren soll. Dazu gehören Buttons mit klarer Funktion, eine personalisierte Begrüßung, ein Avatar für den Hund, Namensfeld und Präferenzen.
Wenn du nur einen einzelnen Bildschirm benötigst, frage gezielt nach diesem Screen. Das spart Zeit und hält das Ergebnis übersichtlich.
Schritt 3: Visuellen Stil festlegen
Der Stil entscheidet, ob dein Mockup hochwertig oder billig wirkt. Im Beispiel wurde ein Stil im Sinne von „iOS Inspired“ gewählt: clean, minimalistisch und passend für Apple-Geräte. Die Hauptfarbe ist Orange, der Hintergrund Weiß. Schatten sollten weich und nicht zu kräftig sein, Ecken werden abgerundet. Mit dem Hinweis auf einen mobilen Rahmen mit Handy-Outline zeigt Claude die Screens direkt im Gerät.
Möchtest du zusätzlich eine dunkle Variante, ergänze einfach den Satz, dass dieselben Screens im Dark Mode erstellt werden sollen.
Schritt 4: Prototyp anlegen und Prompt einfügen
Starte einen neuen Prototyp und vergib einen eindeutigen Projektnamen, im Video etwa „Praxis Projekt 2 App Interface“. Wähle als Detailgrad „High Fidelity“, damit die Oberfläche möglichst detailliert ausfällt. Füge danach deinen vorbereiteten Prompt ein.
Falls vorhanden, kannst du an dieser Stelle Logos und einen Style Guide hochladen. Claude übernimmt dann Farben, Schriften und Markenelemente direkt in die Gestaltung.
Schritt 5: Rückfragen beantworten und Details schärfen
Claude stellt häufig Rückfragen, bevor es die Oberfläche fertigstellt. Beantworte sie so präzise wie möglich. Im Beispiel wurden unter anderem diese Entscheidungen getroffen: Texte und Schriften sollen clean und minimalistisch sein, Produkte werden als Karten statt als reine Listen dargestellt, und die Tab-Bar erhält Icons mit Beschriftung. Außerdem sollen das Featured Product die volle Breite nutzen, ein Bewertungssystem eingebaut werden, und sanfte Übergänge zwischen den Elementen sorgen für eine flüssige Bedienung. Als Sekundärfarbe wurde Grau gewählt.
Je genauer deine Antworten sind, desto weniger Nacharbeit fällt später an.
Schritt 6: Vierten Screen ergänzen und Ergebnis prüfen
Nachdem die drei Hauptbildschirme stehen, lässt sich mit einem Zusatzprompt ein weiterer Screen hinzufügen. Im Beispiel lautete die Anweisung sinngemäß: Füge einen vierten Screen hinzu, den Warenkorb, mit zwei Artikeln, Preis und Checkout-Button. Claude erzeugt daraufhin den neuen Bildschirm.
Prüfe danach jeden Screen kritisch. Im Video fielen drei typische Probleme auf. Erstens funktionierte der Shop-Bereich noch nicht, weil dafür kein eigener Screen erzeugt worden war. Zweitens fehlte der Produktteil, der nachgeprompted werden musste. Drittens lag der X-Button über dem Titel. Solche Abstände korrigierst du entweder direkt im Editor oder mit einer präzisen Neuformulierung im Prompt.
Ein wichtiger Hinweis zur Sprache: Claude hatte im Video gelegentlich Probleme mit Umlauten. Deshalb wurde der Prompt auf Englisch verfasst. Die Sprache der Oberfläche richtet sich aber nach der Sprache des Prompts. Wenn du englische Willkommenstexte wie „Hey Sarah, Bruno is waiting for something new“ möchtest, musst du entsprechend auf Englisch prompten. Für rein deutsche Texte kannst du auf Deutsch schreiben.
Schritt 7: Mockup exportieren und präsentationsfertig machen
Zum Schluss geht es um die Weitergabe. Im Menü findest du die Option „Share“. Dort kannst du das Mockup als ZIP-Datei, als PDF herunterladen oder direkt in Canva importieren. Bei einem PDF-Export solltest du vorab alle Screens vollständig geladen haben, sonst fehlen Elemente.
Das PDF wirkt im Video relativ schwach, weil Schrift und Grafiken an Schärfe verlieren. Für überzeugende Präsentationen lohnt sich deshalb der Weg über Screenshots. Verkleinere die Ansicht, mache für jeden Screen einen Screenshot und füge die Bilder in Canva oder PowerPoint ein. So bleibt die Qualität erhalten, und du kannst zusätzlich Texte und Hinweise ergänzen.
Zusammenfassung – Moderne App-Interfaces mit Claude Design erstellen
Mit Claude Design erstellst du in kurzer Zeit ein App-Mockup, das sich gut präsentieren lässt. Entscheidend sind ein klares Ziel, präzise beschriebene Screens und ein eindeutiger Stil. Rückfragen des Tools solltest du ernst nehmen und Fehler gezielt nachprompten. Für die Präsentation exportierst du am besten Screenshots und bearbeitest sie in Canva oder PowerPoint. So erhältst du ein Mockup, das Investoren und Entwicklern deine Idee anschaulich zeigt.
FAQ
Kann ich auch nur einen einzelnen Screen erstellen lassen?Ja, frage Claude gezielt nach dem gewünschten Bildschirm, zum Beispiel nur nach dem Profil.
Wie erhalte ich eine Dark-Mode-Version meines Mockups?Ergänze im Prompt den Hinweis, dass dieselben Screens im Dark Mode erstellt werden sollen.
Kann ich die Sprache der App frei wählen?Ja, die Sprache des Prompts bestimmt die Sprache der Oberfläche. Für englische Texte musst du daher auf Englisch prompten.
Warum funktionieren manche Buttons im Mockup nicht?Ein Mockup zeigt zunächst nur Oberflächen. Funktionsbereiche wie ein Shop müssen gesondert beschrieben und erzeugt werden.
Warum sieht das exportierte PDF weniger scharf aus?Das PDF verliert an Qualität. Exportiere besser Screenshots und importiere sie in Canva oder PowerPoint.
