Wie KI-generierte UIs weniger generisch wirken

Prompt-Tipps sind nicht falsch, sie sind nur kurzlebig. Wenn man dem Agenten eine warme Palette vorgibt, wird er diese nutzen. Sechs Screens später erinnert er sich an das Adjektiv, aber nicht an die Werte; er approximiert, und diese Approximationen driften auseinander. Das ist der Mechanismus dahinter, warum KI-erstellte Seiten konvergieren, und es ist der Grund, warum die folgenden Lösungen als Werte und nicht als Anweisungen formuliert sind.

Dies ist die effektivste Änderung, die jedoch fast niemand vornimmt. Standard-Themes kombinieren eine reine Graustufen-Rampe mit einer nicht zusammenhängenden Akzentfarbe, wodurch beide nicht so wirken, als gehörten sie zum selben Produkt. Gestaltete Systeme tendieren mit den Neutraltönen bei sehr geringer Chroma einige Grad in Richtung der Akzentfarbe.

/* Default: pure neutral, unrelated to the accent */
--background: oklch(0.145 0 0);
--muted:      oklch(0.269 0 0);
--primary:    oklch(0.55 0.19 45);

/* Tinted: same lightness, a trace of the accent hue */
--background: oklch(0.145 0.008 45);
--muted:      oklch(0.269 0.012 45);
--primary:    oklch(0.55 0.19 45);

Halten Sie die Chroma wirklich niedrig. Ab etwa 0.02 werden die Grautöne eher als farbig denn als neutral wahrgenommen – man tauscht dann nur einen offensichtlichen Look gegen einen anderen aus.

Eine einzige Familie für Überschriften, Fließtext, Labels und Zahlen ist der schnellste Weg, eine generierte UI zu entlarven. Die Lösung ist ein Pairing mit echtem Kontrast – keine zwei ähnlichen Grotesk-Schriften, da dies eher wie ein Versehen als wie eine bewusste Entscheidung wirkt.

• Serif Display + Grotesk Body. Der zuverlässigste Kontrast, kaum falsch zu machen.
• Grotesk Display + Humanist Body. Dezenter; funktioniert gut für dichte Produkt-UIs, in denen eine Serifenschrift zu dekorativ wirken würde.
• Eine Superfamilie, zwei Extreme. Ein Condensed Heavy gegenüber einem Regular. Sicher, wenn die Marke kompakt bleiben muss.
• Eine Mono-Schrift für Daten. Keine Dekoration: Tabellarische Ziffern verhindern, dass Zahlen in Zeilen springen.

Egal wofür Sie sich entscheiden: Schreiben Sie die exakten Familien, Gewichte und den Zeichenabstand in die Tokens. *Kombiniere eine Serifenschrift mit einer Sans* ist ein Adjektiv, und Adjektive verblassen.

Ein einziger --radius, der überall angewendet wird, ist das dritte Warnsignal. Der Radius wird *relativ zum Element wahrgenommen*, auf dem er liegt. Dieselben 8px lassen einen kleinen Button klumpig und eine große Card kaum abgerundet wirken.

/* One value, applied to everything */
--radius: 0.5rem;

/* Scaled to element size */
--radius-sm: 0.25rem;  /* inputs, chips, badges */
--radius-md: 0.5rem;   /* buttons, small controls */
--radius-lg: 0.875rem; /* cards, panels */
--radius-xl: 1.25rem;  /* modals, sheets, hero surfaces */

Drei gleich große Cards suggerieren, dass jedes Element die gleiche Gewichtung hat. Das ist fast nie der Fall, und ein Layout, das dies dennoch behauptet, vermittelt keine Information über das Produkt.

Die Änderung ist eher redaktioneller als technischer Natur: Entscheiden Sie, welches Element tatsächlich am wichtigsten ist, und lassen Sie das Layout dies widerspiegeln. Eine breite Card über zwei schmalen. Eine Aufteilung in zwei Drittel und ein Drittel. Ein einzelnes Feature mit aussagekräftigen Bildern statt drei Icons. Das Grid ist völlig in Ordnung, wenn die Elemente tatsächlich gleichwertig sind. Der Fehler liegt in der Nutzung als Standard.

Generierte UIs verwenden meist nur einen einzigen Schatten für alles, was hervorgehoben wirken soll. Echte Elevation-Systeme verfügen über zwei oder drei Ebenen mit einer konsistenten Lichtquelle und nutzen neben Schatten auch Border- und Hintergrundänderungen – oft sogar anstelle von Schatten.

/* One shadow doing every job */
--shadow: 0 1px 3px rgb(0 0 0 / 0.1);

/* Levels that agree about a light source */
--elevation-0: none;                                  /* flush: use a border */
--elevation-1: 0 1px 2px rgb(0 0 0 / 0.06);           /* cards */
--elevation-2: 0 4px 12px rgb(0 0 0 / 0.08);          /* dropdowns */
--elevation-3: 0 16px 40px rgb(0 0 0 / 0.12);         /* modals */

Die fünf oben genannten Änderungen sind wenig wert, wenn sie nur in einem Chatverlauf existieren. Hinterlegen Sie diese in einer DESIGN.md sowie in Token-Dateien im Repo. So löst der Agent bei jedem Durchlauf dieselben Werte auf, auch in einer Sitzung, die erst nächsten Monat geöffnet wird.

1. 1

   Design-Contract installieren

   Schreibt die DESIGN.md und die Token-Dateien in das Projekt.

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Ein Kit verwenden, das diese Entscheidungen bereits enthält

   Getönte Neutralfarben, ein echtes Pairing, skalierte Radien und ein Elevation-Modell – bereits definiert.

   Copy

   identityforge apply terrain-vivant

3. 3

   In der Agent-Datei referenzieren

   Eine Zeile in der AGENTS.md, damit der Contract gezielt gefunden und nicht nur zufällig entdeckt wird.

   Copy

   Never hardcode theme colors. Use the semantic tokens in DESIGN.md.

4. 4

   Überprüfung der Beständigkeit

   Öffnen Sie eine neue Sitzung, erstellen Sie einen nicht zusammenhängenden Screen und vergleichen Sie dessen Primary-Farbe und Radius mit dem ersten. Wenn diese identisch sind, werden die Werte gelesen und nicht nur aus dem Gedächtnis reproduziert.

Jeder Guide zu diesem Thema in den SERPs endet mit der Liste der Fixes. Das ist der falsche Zeitpunkt zum Aufhören, denn zwei Merkmale überstehen alle sechs Änderungen – und genau diese fallen den Nutzern auf, ohne dass sie sie benennen können. Beide liegen außerhalb der Token-Datei, wie sie üblicherweise geschrieben wird, weshalb sie auch bestehen bleiben.

Generierte Interfaces haben meist nur eine Animation: ein kurzes Einblenden mit einer kleinen Verschiebung nach oben, angewendet auf jedes erscheinende Element. Das Hero-Element, die Cards, das Modal und der Toast – alle nutzen dasselbe. Die Bewegung gibt keinen Hinweis darauf, welche Art von Ereignis gerade eingetreten ist, wodurch sich das gesamte Produkt wie eine einzige, kontinuierliche Slideshow anfühlt.

Motion vermittelt Bedeutung, wenn Dauer und Easing variieren, je *danach, was das Element tut*, und nicht danach, wo es platziert ist. Die zu kodierende Unterscheidung liegt zwischen Elementen, die auf den Nutzer reagieren, und Elementen, die von selbst erscheinen:

Die Asymmetrie in der letzten Zeile ist der Punkt, den fast keine generierte UI richtig macht: Ausblenden erfolgt in der gleichen Geschwindigkeit wie Einblenden, was das Schließen von Elementen zäh wirken lässt. Definieren Sie die drei Dauern als Tokens, damit der Agent nicht mehr einen einzigen Wert für alles verwendet.

/* One duration, one curve, applied to everything */
--transition: 200ms ease;

/* Motion that says what kind of event it was */
--motion-response: 120ms cubic-bezier(0, 0, 0.2, 1);
--motion-enter:    220ms cubic-bezier(0, 0, 0.2, 1);
--motion-exit:     160ms cubic-bezier(0.4, 0, 1, 1);

@media (prefers-reduced-motion: reduce) {
  --motion-response: 1ms;
  --motion-enter: 1ms;
  --motion-exit: 1ms;
}

Das zweite überlebende Merkmal ist die Ikonografie. Eine Standardinstallation liefert ein Open-Source-Set mit einer einzigen Strichstärke. Da dieses Set oft mit der Komponenten-Bibliothek ausgeliefert wird, erscheinen dieselben zwanzig Glyphen in tausenden von Produkten. Man kann jede Farbe und jede Schriftart ändern und das Produkt ist dennoch allein an den Icons erkennbar.

Das Set komplett zu ersetzen, lohnt sich meist nicht. Es einzuschränken hingegen schon:

• Passen Sie die Strichstärke an die Schriftstärke an. Eine 1.5px-Linie wirkt neben einer Light-Schrift wie ein Fremdkörper; neben einer Medium-Schrift wirkt sie stimmig. Wählen Sie einen Wert und hinterlegen Sie ihn in den Tokens.
• Passen Sie die Größe an den danebenstehenden Text an, damit ein Icon in einem Button und ein Icon in einer Tabellenzeile nicht zufällig dieselbe Pixelgröße haben.
• Verbieten Sie dekorative Icons. Untersagen Sie Icons, die eher eine Stimmung als eine Aktion darstellen: Funkeln, Raketen und Blitze sind die stärksten Signale für generierte UIs, die selbst nach einem vollständigen Re-Theme bestehen bleiben.
• Erlauben Sie eine einzige Ausnahme und benennen Sie diese. Ein einzelnes benutzerdefiniertes Glyphen-Element, in der Regel das Markenlogo, das an einer konsistenten Stelle verwendet wird. Eine bewusste Abweichung wirkt wie eine Entscheidung; mehrere wirken wie ein Zufall.

Die sechs Änderungen schriftlich festzuhalten, ist der einfache Teil. Wir haben 299 öffentliche DESIGN.md-Dateien von GitHub analysiert, um zu sehen, was tatsächlich committet wird. Das Fehlermuster ist konsistent genug, um es bei der Planung zu berücksichtigen.

Vergleicht man dies mit den sechs Änderungen oben, ist die Überschneidung exakt. Eine Radius-Skalierung wird nur in jeder fünften Datei spezifiziert. Verbote (die einfachste Form der Dokumentation und die zuverlässigste Anweisung) fehlen in drei Vierteln der Fälle. Und die häufigsten Wörter, die eine Entscheidung ersetzen sollten, waren *clean* (39 % der Dateien), *modern* (36 %) und *professional* (22 %).

Die praktische Konsequenz für die sechs Änderungen: Schreiben Sie jede einzelne als Zahl oder Hex-Wert und prüfen Sie Ihre eigene Datei auf die drei oben genannten Wörter, bevor Sie diese committen.