Wenn man KI die UI erstellen lässt, sind die Komponenten für sich genommen in Ordnung, aber zusammengesetzt sieht es irgendwie nach „generiert“ aus.
Der Grund sind nicht hässliche Bauteile, sondern dass die Teile nicht zueinander passen — es fehlt an Kohärenz.
Die Lösung ist überraschend einfach: Für jede Achse (Ecken, Akzentfarbe, Abstände, Schatten) legt man genau einen Wert fest und richtet alles daran aus.
Basierend auf Refactoring UI, Material 3, Apple HIG und WCAG + mit direkt kopierbarem CSS zusammengestellt.
Demo zum direkten Anschauen: https://styleseed-demo.vercel.app/how-it-thinks
Open Source (MIT): https://github.com/bitjaru/styleseed
7 Kommentare
Es wäre schön, wenn auch das UX Writing von toss dokumentiert würde.
Ich werde es vorbereiten.
Das klingt irgendwie selbstverständlich, aber es war ein Aspekt, an den ich nicht gedacht hatte, daher hoffe ich, dass es bei Anwendung zu einer deutlichen Verbesserung führen wird.
Probiert es aus und stellt euer Feedback gern auf GitHub ein!
Kann man nicht einfach nur die Agent-Regeln anwenden, wenn bereits ein Designsystem vorhanden ist?
Ja, man kann auch nur die Regeln herauslösen.
Die StyleSeed-Regeln schreiben weder bestimmte Farben noch Komponenten vor, sondern enthalten nur Entscheidungskriterien nach dem Muster „in diesem Fall so“, sodass sie sich unverändert auf ein bestehendes System aufsetzen lassen.
Ohne Installation reicht ein einziger Satz:
"https://styleseed-demo.vercel.app/llms.txt lies und wende diese Designregeln an"Wenn du ein bestehendes Design systematisieren willst, schreib die bereits getroffenen Entscheidungen (Abstände, Rundungen, Akzentfarben usw.) einfach Zeile für Zeile in diese Datei. Der Agent verwendet sie für jeden neuen Screen erneut, sodass sich nach und nach ein konsistentes System verfestigt. Die Grundregeln sind nur ein Ausgangspunkt, und was nicht passt, kannst du einfach anpassen.
Das war sehr hilfreich. Vielen Dank.