So lässt du mit KI eine gut aussehende App gestalten

Um von einer KI eine gut aussehende App zu bekommen, hör auf, „mach es schön“ zu verlangen, und gib ihr das, was ein Designer braucht: zwei oder drei Referenzen, die dir gefallen, eine benannte Gestaltungsrichtung und konkrete Regeln für Schrift, Farben und Abstände. Baue dann einen Bildschirm und bring ihn in Ordnung, und lass die KI dasselbe System überall sonst anwenden. Der meiste „KI-Look“ entsteht durch vage Prompts, die durchschnittliche Ergebnisse liefern. Konkrete Vorgaben ergeben konkretes Design.

Warum KI-Designs generisch aussehen

Frag eine KI nach „einem modernen, sauberen SaaS-Dashboard“, und sie liefert dir die statistische Mitte aller Dashboards, die sie je gesehen hat: dieselbe serifenlose Schrift, einen Verlauf von Lila zu Blau, abgerundete Karten mit weichen Schatten, emojiartige Symbole in Kreisen und einen zentrierten Hero-Bereich mit dem Satz „Dein Workflow, vereinfacht“. Keine einzelne Entscheidung ist falsch. Das Problem ist, dass keine davon für dein Produkt gewählt wurde.

Gutes Design besteht vor allem aus Entscheidungen. Deine Aufgabe ist, die wenigen Entscheidungen zu treffen, die der App einen Charakter geben, und die KI die vielen kleinen Entscheidungen konsistent umsetzen zu lassen.

Schritt 1: Referenzen sammeln, bevor du promptest

Nimm dir zwanzig Minuten und sammle zwei bis vier Referenzen – Apps oder Websites, deren Look zu deinem Produkt passt. Gute Quellen sind Produkte, die deine Zielgruppe ohnehin nutzt, Design-Galerien und die Seiten von Unternehmen aus angrenzenden Branchen.

Schreib zu jeder in einfachen Worten auf, was dir gefällt:

• „Viel Weißraum, Inhalt in einer schmalen Spalte, kleine graue Labels über großen Zahlen.“
• „Dichte Tabellen mit dünnen Trennlinien, keine Kartenschatten, eine Akzentfarbe für Aktionen.“
• „Große Serifenüberschriften, warmer Off-White-Hintergrund, Fotos statt Illustrationen.“

Gib diese Beschreibungen dann an die KI weiter und hänge Screenshots an, wenn dein Tool Bilder akzeptiert. Lass dich von den Qualitäten inspirieren, nicht vom Produkt: Das Layout, das Branding oder die Texte eines anderen Unternehmens komplett zu kopieren, ist sowohl ein rechtliches als auch ein Glaubwürdigkeitsrisiko.

Schritt 2: Eine Gestaltungsrichtung wählen und benennen

Eine Richtung ist eine kurze Beschreibung des Gefühls. Sie gibt der KI einen Filter für jede Entscheidung. Einige, die gut funktionieren:

Nimm sie in den ersten Prompt auf, zusammen damit, für wen die App ist:

Baue eine Buchungs-App für ein unabhängiges Yoga-Studio. Gestaltungsrichtung: ruhig und minimal, wie ein gedruckter Studio-Stundenplan. Warmer Off-White-Hintergrund, fast schwarzer Text, ein gedämpftes Salbeigrün als Akzent für Buttons und ausgewählte Zustände. Eine Serifenschrift für Überschriften, eine klare serifenlose Schrift für Fließtext. Großzügige Abstände, keine Verläufe, keine Schlagschatten, keine Emojis. Mobile zuerst.

Schritt 3: Die Regeln festlegen – Schrift, Farbe und Abstände

Diese drei tragen den größten Teil der visuellen Qualität. Sie ausdrücklich festzulegen, ist die größte einzelne Verbesserung, die du vornehmen kannst.

Typografie

• Ein oder zwei Schriftfamilien. Eine für Überschriften und eine für Fließtext oder eine Familie in mehreren Schnitten.
• Eine Schriftskala. Wenige Größen, konsistent verwendet – zum Beispiel 14, 16, 20, 28 und 40 px –, statt dass jede Komponente selbst wählt.
• Lesbarer Fließtext. Im Web etwa 16 px, eine Zeilenhöhe von ungefähr 1,5 und bei längeren Texten eine Zeilenlänge von etwa 60–75 Zeichen.
• Hierarchie über Gewicht und Größe, nicht über Farbe. Überschriften fetter und größer, sekundärer Text kleiner und in weicherem Grau.

Farbe

• Vor allem Neutraltöne. Hintergründe, Flächen, Rahmen und Textgrau erledigen den größten Teil der Arbeit.
• Eine Akzentfarbe für Aktionen und ausgewählte Zustände. Eine zweite nur, wenn sie eine klare Aufgabe hat.
• Semantische Farben für Erfolg, Warnung und Fehler – und nur dafür.
• Kontrast. WCAG 2 verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Fließtext und 3:1 für große Schrift. Hellgrauer Text auf Weiß scheitert oft; lass die KI das prüfen.
• Dunkelmodus, falls gewünscht, bewusst gestaltet statt einfach invertiert.

Abstände und Layout

• Eine Abstandsskala wie 4, 8, 12, 16, 24, 32, 48, 64 px. Alles rastet darauf ein.
• Ausrichtung. Kanten fluchten; Inhalte liegen auf einem Raster oder in einer konsistenten maximalen Spaltenbreite.
• Nähe. Zusammengehöriges liegt nah beieinander, Unzusammengehöriges weiter auseinander. Diese eine Regel behebt die meisten unübersichtlichen Bildschirme.
• Weniger Container. Nicht alles braucht eine Karte. Rahmen, Trennlinien und Weißraum gruppieren Inhalte oft ruhiger.

Ein Prompt, der das System einmal einrichtet:

Richte vor dem Bau weiterer Bildschirme ein kleines Designsystem ein und verwende es überall: eine Schriftskala von 14/16/20/28/40 px, Zeilenhöhe 1,5 für Fließtext, eine Abstandsskala von 4/8/12/16/24/32/48 px, Neutraltöne von fast Weiß bis fast Schwarz, eine Akzentfarbe (#3F6B5A) nur für primäre Aktionen und Rot nur für Fehler. Buttons, Eingabefelder und Karten sollen denselben Eckradius haben. Prüfe, dass alle Texte den WCAG-AA-Kontrast erfüllen.

Wenn du in einem code-orientierten Builder arbeitest, wird das meist zu Design-Tokens – CSS-Variablen oder ein Tailwind-Theme. Spätere Änderungen passieren dann an einer einzigen Stelle.

Schritt 4: Zuerst einen Bildschirm richtig bauen

Erzeuge nicht zwölf Bildschirme und versuche dann, alle zu reparieren. Wähle den Bildschirm, den Nutzer am häufigsten sehen – oft das Dashboard oder die Hauptliste – und iteriere, bis er stimmt. Dann:

Nutze das Dashboard als Referenz für alle anderen Seiten: gleicher Header, gleiche Abstände, Schriftgrößen, Button-Stile und Tabellenstil. Passe die Seiten Einstellungen und Buchungen entsprechend an.

Ein fertiger Referenzbildschirm vermittelt deinen Geschmack weit besser als jedes Adjektiv.

Schritt 5: Mit konkreten, kleinen Anweisungen iterieren

Feedback an eine KI funktioniert wie Feedback an einen jungen Designer: konkret, ein Bereich nach dem anderen und klar darüber, was bleiben soll.

Füge immer hinzu, was bleiben soll – „alle Routen, Texte und Funktionen unverändert lassen“ –, damit ein optischer Durchgang nicht still Funktionen entfernt. Prüfe jede Änderung auf einem telefongroßen Bildschirm, bevor du die nächste anforderst. Was auf kleinen Bildschirmen gut aussieht, zeigt wie du eine mobilfreundliche Web-App baust.

Schritt 6: Die Details, die gut von generisch trennen

Sobald die Struktur stimmt, machen diese kleinen Dinge eine App fertig wirkend:

• Leerzustände. Was ein neuer Nutzer ohne Daten sieht: eine kurze Erklärung und eine klare Aktion statt einer leeren Tabelle.
• Ladezustände. Platzhalter in der Form des Inhalts statt überall Ladeanimationen.
• Fehlerzustände. Verständliche Meldungen direkt neben dem Feld, das den Fehler verursacht hat.
• Hover-, Fokus- und gedrückte Zustände für jedes interaktive Element – Fokusrahmen sind für Tastaturnutzer wichtig.
• Echte Inhalte. Ersetze „Lorem ipsum“ und „Max Mustermann“ durch realistische Texte und Daten; Platzhalterinhalte verbergen Layoutprobleme.
• Symbole aus einem Set, in ein oder zwei Größen, mit einheitlicher Strichstärke.
• Bilder mit Zweck. Echte Fotos deines Produkts, Ortes oder Teams schlagen generische Stockbilder. Wenn du Stock- oder generierte Bilder verwendest, halte einen einheitlichen Stil.
• Texte. Kurze, konkrete Beschriftungen („Kurs buchen“ statt „Absenden“) tragen so viel zur wahrgenommenen Qualität bei wie jede Farbwahl.

Häufige Fehler

• Alles in einem Prompt neu gestalten. Große Umbauten führen zu Regressionen. Geh Seite für Seite vor.
• Zu viele Akzentfarben. Wenn alles hervorgehoben ist, sticht nichts heraus.
• Alles zentrieren. Zentrierter Text ist außer bei Überschriften schwer zu erfassen; richte die meisten Inhalte linksbündig aus.
• Kleiner, kontrastarmer Text, der auf einem großen Monitor elegant wirkt und auf einem Telefon im Sonnenlicht unlesbar ist.
• Dekoration statt Hierarchie. Verläufe und Schatten können keinen Bildschirm retten, auf dem die wichtigste Aktion nicht offensichtlich ist.
• Die Landingpage ignorieren. Bei vielen Produkten ist sie der erste Eindruck; siehe wie du eine Landingpage baust, die konvertiert.

Weitere Prompt-Muster jenseits von Design findest du in wie du Prompts für KI-App-Builder schreibst. Wenn dein Produkt selbst Design ist – etwa ein Design- oder Fotografie-Portfolio –, geht wie du eine Portfolio-Website baust tiefer auf die Präsentation ein.

Design mit Mythex

In Mythex beschreibst du das Design im Chat, siehst es in der Live-Vorschau und prüfst den telefongroßen Rahmen, bevor die nächste Änderung kommt. Die Dokumentation hat kurze Muster dafür: Design- und UI-Prompts zum Benennen, was geändert und was beibehalten werden soll, und UI neu gestalten, um jeweils eine Seite aufzufrischen, ohne Funktionen zu verlieren. Mythex kann im Chat auch Stockfotos suchen oder ein Bild generieren – ein Hero-Bild, einen Hintergrund, ein Vorschaubild zum Teilen – und es auf Wunsch in die App einfügen. Wenn ein Durchgang schiefgeht, kehre zum Checkpoint davor zurück. Wenn du lieber von einem bestehenden Design startest und es anpasst, schau dir die Vorlagen an.

Fragen