Wie KI-generierte UIs weniger generisch wirken

Prompt-Ratschläge sind nicht falsch, sie sind nur kurzlebig. Wenn man dem Agenten sagt, er solle eine warme Palette verwenden, wird er dies tun. Sechs Screens später erinnert er sich an das Adjektiv, aber nicht an die Werte, und beginnt zu approximieren – und diese Approximationen driften auseinander. Das ist der Mechanismus dahinter, warum KI-erstellte Seiten konvergieren, und es ist der Grund, warum die folgenden Fixes 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 die beiden nie so wirken, als gehörten sie zum selben Produkt. Gestaltete Systeme verschieben die Neutraltöne bei sehr geringer Chroma um 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 also 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 eine Kombination mit echtem Kontrast – nicht zwei ähnliche 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-Serif* ist ein Adjektiv, und Adjektive verblassen.

Ein einziger --radius, der überall angewendet wird, ist das dritte Anzeichen. Der Radius wird *relativ zum Element wahrgenommen*, auf dem er sitzt. Dieselben 8px lassen einen kleinen Button klobig 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 signalisieren, dass jedes Element das gleiche Gewicht hat. Das ist fast nie der Fall, und ein Layout, das dies dennoch suggeriert, 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 haben meist nur einen Schatten, der auf alles angewendet wird, was erhöht erscheinen soll. Echte Elevation-Systeme nutzen zwei oder drei Ebenen, die eine einheitliche Lichtquelle definieren, und setzen dabei auf Border- und Background-Verschiebungen sowie Schatten – 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 Chat existieren. Betten Sie sie in eine DESIGN.md und Token-Dateien im Repo ein, damit der Agent bei jedem Durchlauf dieselben Werte verwendet – auch in einer Sitzung, die erst nächsten Monat gestartet wird.

1. 1

   Installieren Sie den Design-Vertrag

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

   Copy

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

2. 2

   Wenden Sie ein Kit an, das diese Entscheidungen bereits trifft

   Getönte Neutraltöne, ein echtes Farbschema, skalierte Radien und ein Elevation-Modell – bereits festgelegt.

   Copy

   identityforge apply terrain-vivant

3. 3

   Referenzieren Sie ihn aus Ihrer Agent-Datei

   Eine Zeile in AGENTS.md, damit der Contract gezielt gefunden wird, anstatt ihn nur zufällig zu entdecken.

   Copy

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

4. 4

   Prüfen Sie die Beständigkeit

   Öffnen Sie eine neue Sitzung, erstellen Sie einen nicht verwandten Screen und vergleichen Sie dessen Primärfarbe und Radius mit dem ersten. Identische Werte bedeuten, dass die Werte gelesen und nicht nur aus dem Gedächtnis abgerufen werden.

Jeder Guide auf dieser SERP endet bei der Fehlerliste. Das ist der falsche Punkt zum Aufhören, denn zwei Merkmale überleben alle sechs Änderungen – und das sind genau die, die man bemerkt, ohne sie benennen zu können. Beide liegen außerhalb der Token-Datei, wie sie üblicherweise geschrieben wird, und genau deshalb bleiben sie bestehen.

Generierte Interfaces haben nur eine Animation: ein kurzes Fade-In mit einer leichten Aufwärtsbewegung, die auf jedes erscheinende Element angewendet wird. Sie findet auf dem Hero, den Cards, dem Modal und dem Toast statt. Die Bewegung vermittelt nicht, was gerade passiert ist, weshalb sich das gesamte Produkt wie eine einzige, fortlaufende Diashow anfühlt.

Bewegung vermittelt Bedeutung, wenn Dauer und Easing variieren, je nachdem, *was das Element tut*, und nicht, wo es sitzt. Die zu kodierende Unterscheidung besteht zwischen Dingen, die auf Sie reagieren, und Dingen, die von selbst erscheinen:

Die Asymmetrie in dieser letzten Zeile ist der Teil, den fast nichts Generierte richtig macht: Exits laufen mit der gleichen Geschwindigkeit wie Entrances, was das Schließen von Elementen „zäh“ wirken lässt. Schreiben Sie die drei Dauern als Tokens, dann hört der Agent auf, für alles eine einzige Zahl zu wählen.

/* 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;
}

Der zweite Überlebende ist die Ikonografie. Eine Standardinstallation liefert Ihnen ein Open-Source-Set mit einer festen Linienstärke. Da dieses Set mit der Komponenten-Bibliothek ausgeliefert wird, erscheinen dieselben zwanzig Glyphen in tausenden Produkten. Sie können jede Farbe und jede Schriftart ändern und sind dennoch allein an den Icons erkennbar.

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

• Passen Sie die Linienstärke an Ihre Schriftstärke an. Eine 1.5px-Linie neben einem Light-Body-Font wirkt wie eine Leihgabe; neben einem Medium-Font wirkt sie passend. Wählen Sie einen Wert und legen Sie ihn in den Tokens fest.
• 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 Indikatoren 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 – das am einfachsten zu schreibende und zuverlässigsten befolgte Element – 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.