Design-Stile im Vergleich

Zwei Vergleiche, jeder auf einer eigenen Ausgangsseite: Visuelle Stile gestalten eine Homepage neu, Design-Systeme eine App-Seite. Jede Seite wird einmal pro Ankername neu gestaltet; jede Fassung stammt aus einer eigenen Session mit Claude Opus 5.5, die denselben Prompt bekam, nur der Name änderte sich:

Gestalte diese Website im Stil von {ANKER} neu. Die Inhalte bleiben unverändert.

Keine Beschreibung, keine Referenzbilder, ein Lauf pro Anker, keine Wiederholungen; jede Session prüfte ihr Ergebnis im Browser, mit einer unten genannten Ausnahme. Jede Stil-Kachel verlinkt ihren Anker.

Ein Lauf zeigt, was der Name auslöst, nicht das einzig mögliche Ergebnis. Ein weiterer Lauf oder ein anderes Modell weicht in Details ab.

Stile und Regelwerke: eine Homepage

Die erste Kachel ist das Original, rdmueller.github.io mit Stand vom 28. Oktober 2026. Wie diese Beispiele entstanden sind und was jeweils auffiel: A Design Style Is a Name Your LLM Already Knows (Ralf D. Müller, 29. Oktober 2026). Material Design 3, Apples Human Interface Guidelines und das GOV.UK Design System sind Design-Systeme, ihre Beispiele stammen aber aus diesem Lauf und bleiben hier.

Refactoring UI und Bringhursts The Elements of Typographic Style sind Regelwerke, keine Stile. Ihre Kacheln kamen am 30. Oktober 2026 mit demselben Prompt hinzu, je ein Lauf, und zeigen, was die Regeln an derselben Homepage ändern: Bringhursts Regeln sieht man sofort an der Schrift; die von Refactoring UI zeigen sich leiser, in Hierarchie, Abständen und Farbe. Die Session zu Refactoring UI prüfte ihr Ergebnis im Browser; die Session zu Bringhurst verglich den Text jeder Seite mit dem Original, sagt aber nicht, dass sie sich das Ergebnis angesehen hat.

Design-Systeme: eine App-Seite

Design-Systeme sind für Produktoberflächen gemacht. Ihre Unterschiede zeigen sich in Tabellen, Status-Labels, Seitenköpfen und Dichte, und davon hat eine Homepage wenig. Deshalb gestalten die Design-Systeme stattdessen eine App-Seite neu: die Einstellungsseite „Team members“ einer erfundenen Admin-Konsole, für diese Galerie bewusst schlicht geschrieben. Die erste Kachel ist diese Seite.

Diese Sessions liefen am 30. Oktober 2026 in einer Cloud-Umgebung ohne Webzugriff. Für die Screenshots wurden die Schriften und Stylesheets, die die Seiten bei Google Fonts und jsDelivr anfordern, lokal aus denselben npm-Paketen ausgeliefert; lizenzierte Schriften wie Segoe UI oder Adobe Clean erscheinen in ihrer Ersatzschrift.