kasonye/ui-aesthetics-skill

UI-Ästhetik

Absicht

Verwende diesen Skill, um Web-UI-Ausgaben professioneller, stabiler und produktreifer zu machen.

Standardziele:

• den angefragten Umfang und den Inhaltsumfang des Benutzers bewahren
• eine ausgewogene Komposition erzeugen, bevor Dekoration hinzugefügt wird
• die Hierarchie auf einen Blick lesbar machen
• Farben zurückhaltend, aber teuer aussehend halten
• Schatten, Unschärfe, Glühen und Highlights nur verwenden, wenn sie Tiefe verdeutlichen
• Bewegungen kurz, glatt und nützlich halten
• Komponenten präzise wirken lassen, bevor sie gestylt wirken
• Zustände, Bewegung und Tiefe in einem kohärenten System halten

Dieser Skill ist framework-agnostisch. Beurteile nicht nur die Seitenkomposition, sondern auch die Komponentenpräzision, das Zustandsverhalten, die Bewegungsgrammatik und die Tiefendisziplin. Beginne mit gestalterischem Urteilsvermögen, setze dann um.

Aufgaben-Routing

Klassifiziere die Anfrage, bevor du handelst:

1. Generierung Verwende dies, wenn der Benutzer eine neue Seite, einen neuen Abschnitt oder eine neue Komponente wünscht.
2. Review Verwende dies, wenn der Benutzer Kritik, Erkenntnisse oder eine Diagnose wünscht, warum das UI schwach wirkt.
3. Refactoring Verwende dies, wenn der Benutzer die bestehende Implementierung direkt umgeschrieben haben möchte.
4. Komponenten-Polish Verwende dies, wenn die Struktur akzeptabel ist, aber die Bedienelemente, Karten, Tabellen, Modals oder Overlays immer noch generisch oder billig wirken.
5. Zustands-/Bewegungsverfeinerung Verwende dies, wenn Hover, Fokus, Gedrückt, Ausgewählt, Laden, Erfolg, Fehler oder Übergänge laut, schwach oder theatralisch wirken.
6. Tiefen-/Lichtverfeinerung Verwende dies, wenn Schatten, Highlights, Glühen, Unschärfe oder Dark-Mode-Trennung eine strengere Disziplin benötigen.

Wenn die Anfrage Review und Refactoring mischt, diagnostiziere zuerst, wähle dann die Umschreibtiefe, bevor du bearbeitest.

Nicht verhandelbare Punkte

• Respektiere den angefragten Umfang genau: Eine Komponente bleibt eine Komponente, ein Kartensatz bleibt ein begrenztes Modul, ein Abschnitt bleibt ein Abschnitt, und eine Seite wird nur dann zu einer Seite, wenn danach gefragt wird.
• Entscheide die visuelle These, bevor du mit der Implementierung beginnst.
• Lege den Artefakttyp vor dem Styling fest: Verwandle keine Aufforderungen für Karten, Widgets, Modals, Panels oder Abschnitte in vollständige Landing Pages oder Dashboards.
• Lass Layout, Abstände und Typografie-Hierarchie den Großteil der Qualität tragen.
• Bevorzuge räumliche Gruppierung gegenüber Standard-Rahmen, wann immer Abstände die Beziehung tragen können.
• Behandle „Premium“ als Zurückhaltung, Konsistenz und Präzision, nicht als visuelles Rauschen.
• Verwende weniger Container, weniger Akzente und weniger gleichzeitige Ideen.
• Wenn das angeforderte Artefakt eine Seite ist, standardmäßig eine Vollbild-Komposition verwenden, die die Bildschirmbreite ausfüllt, anstatt einer kleinen zentrierten Leinwand.
• Für Plattform-, Marktplatz-, E-Commerce- oder Portal-Seiten standardmäßig ein Vollbreiten-Seitenskelett verwenden und den inneren Inhalt absichtlich einschränken, anstatt die gesamte Erfahrung in einem einzigen zentrierten Panel zu fangen.
• Standardmäßig die Informationsdichte und den Kopierumfang des Benutzers bewahren.
• Keine Hero-Texte, Marketing-Absätze, Navigation, Footer, Feature-Abschnitte, Badges oder CTA-Cluster hinzufügen, es sei denn, die Anfrage erfordert sie.
• Halte normale Karten kurz. Bevorzuge starke Labels, Werte und kompakte unterstützende Texte gegenüber erfundenen Anreißertexten.
• Bevorzuge standardmäßig klare neutrale oder leicht kühle neutrale Oberflächen; Verwende nicht Creme, Beige, Elfenbein oder warmes Off-White als automatisches Premium-Signal.
• Ordne das Komponenten-Polish der Seitenkomposition unter.
• Behandle zusammengehörige Bedienelemente als Mitglieder eines geometrischen und verhaltensorientierten Systems.
• Halte Standardzustände visuell ruhig; reserviere stärkere Betonung für Interaktions- und semantische Zustände.
• Bevorzuge ausgewogene und stabile Layouts gegenüber Spannung, Asymmetrie oder visueller Provokation.
• Führe Asymmetrie oder übertriebenen Kontrast nicht ein, nur um nicht wie eine Vorlage auszusehen.
• Unterscheide persistente ausgewählte Zustände von transientem aktivem oder gedrücktem Feedback.
• Verwende Tiefe nur, wenn sie Schichtung, Materialtrennung oder Fokus erklärt.
• Behandle Glühen als außergewöhnlich, nicht als strukturell.
• Mache Mobilversionen zu einem neu komponierten Layout, nicht zu einer gequetschten Desktop-Version.
• Halte das Ergebnis auslieferbar und wartbar.

Prioritäten-Reihenfolge

Arbeite in dieser Reihenfolge, es sei denn, die Aufgabe erfordert offensichtlich eine andere Abfolge:

1. Angeforderter Umfang und Artefaktgrenzen
2. Komposition und strukturelles Gleichgewicht
3. Abstandsrhythmus und Informationsdichte
4. Typografie und Textpassung
5. Komponenten-Handwerkskunst
6. Interaktionszustände und -verhalten
7. Farbsystem und semantische Zurückhaltung
8. Tiefen-Hinweise: Rand, Schatten, Unschärfe, Highlight
9. Bewegung, Feedback und Übergänge

Wenn die Seite in Graustufen immer noch nicht funktioniert, ist die Struktur noch nicht gelöst.

Arbeitsablauf

Generierung

1. Identifiziere den angeforderten Artefakttyp und den harten Umfang: Einzelkomponente, Komponentensatz, Abschnitt oder vollständige Seite.
2. Leite Rolle, Zielgruppe und Dichte innerhalb dieses Umfangs ab, anstatt ihn zu erweitern.
3. Benenne den gewünschten Eindruck in einem kurzen Satz wie ruhige Produktklarheit, Enterprise-Polish oder leise Präzision.
4. Wähle einen stabilen primären Block und unterstützende Module, bevor du Markup schreibst.
5. Wenn die Anfrage für eine Karte oder Komponente ist, verwende nur die minimale umgebende Leinwand, die benötigt wird, um sie klar darzustellen.
6. Bewahre den Textumfang, es sei denn, der Benutzer fragt nach Inhaltsdesign. Straffe die Formulierung bei Bedarf, aber erfinde keine zusätzlichen erklärenden Texte.
7. Wenn die Anfrage für eine Seite ist, lass das äußere Layout standardmäßig den Viewport einnehmen, anstatt als schmale zentrierte Platte zu schweben.
8. Für Plattform- oder E-Commerce-Seiten erweitere zuerst das Seitenskelett: Lass Navigation, Hero-Framing, Kategorie-Leisten, Kampagnen-Zonen und Produkt-Streams über den Viewport atmen, bevor einzelne Module verkartet werden.
9. Definiere die Farblogik: zuerst Neutraltöne, dann Akzent.
10. Stelle sicher, dass Komponentenmetriken, Zustände und Verhalten systematisiert wirken, bevor Polish hinzugefügt wird.
11. Füge Tiefe und Bewegung erst hinzu, nachdem die statische Komposition funktioniert.
12. Mache Desktop- und Mobilverhalten explizit, wenn das angeforderte Artefakt tatsächlich beide umfasst.

Lies references/design-principles.md, wenn die visuelle Richtung noch vage ist. Lies references/color-system.md, wenn die Palette laut, flach oder billig wirkt. Lies references/component-aesthetics.md, wenn die Anfrage sich auf Bedienelemente, Formulare, Karten, Tabellen oder Overlays konzentriert. Lies references/interaction-states.md, wenn Hover, Fokus, Aktiv, Ausgewählt, Laden, Erfolg oder Fehlerverhalten wichtig ist. Lies references/motion-principles.md für allgemeine Bewegungsdisziplin. Lies references/motion-patterns.md, wenn Übergänge, Hover-Verhalten oder Enthüllungsbewegungen mehr Kontrolle benötigen. Lies references/depth-lighting-system.md, wenn Schatten, Highlights, Glühen, Unschärfe oder Dark-Mode-Ebenenlogik strengere Kontrolle benötigen. Lies references/style-archetypes.md, wenn der Benutzer nach einer spezifischeren visuellen Persönlichkeit fragt.

Review

1. Beginne mit dem größten strukturellen Fehler, nicht mit CSS-Kleinigkeiten.
2. Erkläre, ob das Problem Hierarchie, Dichte, Komponentenqualität, Zustandsverhalten, Palette, Tiefe oder Bewegung ist.
3. Verknüpfe jeden Befund mit Lesbarkeit, Vertrauen, Fokus oder Handlungsklarheit.
4. Bevorzuge direkte Korrekturen gegenüber generischen Geschmacksäußerungen.

Verwende references/review-rubric.md zur Strukturierung der Befunde. Verwende references/anti-patterns.md, wenn das UI KI-generiert oder oberflächlich premium wirkt. Verwende references/color-system.md, wenn die Hauptschwäche die Palettendisziplin oder die Fehlverwendung von Akzenten ist. Verwende references/component-aesthetics.md, wenn die Hauptschwäche die Qualität von Bedienelementen, Karten, Tabellen oder Overlays ist. Verwende references/interaction-states.md, wenn die Hauptschwäche das Hover-, Fokus-, Aktiv-, Ausgewählt-, Lade- oder Fehlerverhalten ist. Verwende references/motion-principles.md und references/motion-patterns.md, wenn die Hauptschwäche die Animationsqualität, das Timing oder das Feedbackverhalten ist. Verwende references/depth-lighting-system.md, wenn die Hauptschwäche Schatten-Haze, falsche Verwendung von Glühen, schwache Schichtung oder Dark-Mode-Tiefe ist.

Refactoring

1. Wähle leichtes Polish, mittlere Umstrukturierung oder kompletten Wiederaufbau.
2. Behebe Layout und Gruppierung vor Komponenten-Kosmetik.
3. Reduziere schwaches Styling zurück zur Graustufenstruktur, wenn die Hierarchie unklar ist.
4. Baue Komponentenmetriken und Zustandslogik wieder auf, bevor du Polish hinzufügst.
5. Führe nur die Farbe, Tiefe und Bewegung wieder ein, die das Interface noch benötigt.
6. Baue Mobilversionen absichtlich wieder auf, wenn die Desktop-Struktur nicht übertragbar ist.
7. Gib die Umschreibebene, den Kernfehler und die beabsichtigte Richtung an, bevor du bearbeitest.

Verwende references/rewrite-playbook.md vor breiten visuellen Änderungen. Verwende references/component-aesthetics.md vor breiten Umschreibungen von Bedienelementen oder Overlays. Verwende references/interaction-states.md vor Änderungen des Verhaltens über Zustände hinweg. Verwende references/color-system.md vor dem Umschreiben einer lauten Palette. Verwende references/motion-principles.md und references/motion-patterns.md vor dem Hinzufügen oder Vereinfachen von Übergängen. Verwende references/depth-lighting-system.md vor dem Hinzufügen oder Entfernen von Erhebung, Glühen oder Highlight-Logik.

Anti-Pattern-Richtlinie

Lehne Ergebnisse ab, die auf Folgendem basieren:

• Umfangserweiterung, die eine Komponentenanfrage in eine vollständige Seite, ein Dashboard-Shell oder ein Landing-Layout verwandelt
• dekorative Texterweiterung, die nicht angeforderte Füllbeschreibungen, Badges, Statistiken oder CTA-Blöcke hinzufügt
• Seitenlayout auf Seitenniveau, das ohne Inhaltsgrund in unnötig schmalen zentrierten Shells gefangen ist
• Plattform- oder E-Commerce-Seiten, die in eine einzige übergroße zentrierte Karte gepackt sind, anstatt ein Vollbreiten-Seitenskelett zu verwenden
• Vorlagenartige zentrierte Hero- plus Kartenraster-Layouts
• instabile oder erzwungen asymmetrische Layouts, die Spannung erzeugen
• gleichgewichtige Module ohne klare Lesereihenfolge
• zu viele Oberflächen, Striche, Pillen und Radien
• Creme, Beige, Elfenbein oder warme Off-White-Neutraltöne, die als Standardshortcut für „Premium“ verwendet werden
• laute Akzentfarben auf instabilen Neutraltönen
• Standardzustände, die bereits zu viel Betonung verbrauchen
• Hover-, Gedrückt- oder Enthüllungsverhalten, das Interaktion in Choreografie verwandelt
• ausgewählte Zustände, die wie Klick-Feedback aussehen
• Glühen, Schatten, Unschärfe oder Verläufe, die verwendet werden, um Raffinesse vorzutäuschen
• Animation, die Aufmerksamkeit auf sich zieht, anstatt die Wahrnehmung zu lenken
• Tiefensysteme, in denen alles gleichzeitig schwebt
• starke visuelle Behandlungen, die entworfen wurden, um zu beeindrucken, bevor sie klarstellen
• mobile Layouts, die lediglich Spalten zusammenklappen, ohne die Betonung neu zu komponieren

Lies references/anti-patterns.md, wenn das Ergebnis poliert, aber immer noch billig wirkt.

Selbstkritik

Überprüfe vor der endgültigen Ausgabe:

• Blieb das Ergebnis innerhalb des angeforderten Umfangs des Benutzers, ohne eine Seite darum herum zu erfinden?
• Ist der erste Eindruck innerhalb von drei Sekunden offensichtlich?
• Wirkt das Layout auch ohne Verläufe und Schatten glaubwürdig und ausgewogen?
• Wenn dies eine Seite ist, nimmt die Komposition tatsächlich standardmäßig die Bildschirmbreite ein?
• Wenn dies eine Plattform- oder E-Commerce-Seite ist, expandiert das äußere Skelett über den Viewport, während nur innere Inhaltsbereiche eingeschränkt bleiben?
• Blieb der Text so kurz wie die Aufgabe es erlaubt, insbesondere bei normalen Karten?
• Sind die Neutraltöne ruhig und konsistent genug, damit die Akzentfarbe etwas bedeutet?
• Vermied die Palette, ohne inhaltlichen Grund auf cremige oder warm-weiße Luxus-Hinweise zurückzugreifen?
• Teilen zusammengehörige Bedienelemente kompatible Höhen, Padding-Logik und Radius-Disziplin?
• Sind Standardzustände ruhig genug, um Platz für Fokus-, Aktiv- und Fehlerzustände zu lassen?
• Sind ausgewählte und gedrückte Zustände klar unterscheidbar?
• Sehen Komponenten verwandt aus, ohne alle das gleiche Gewicht zu haben?
• Beschreiben Schatten und Highlights Tiefe, anstatt Nebel zu erzeugen?
• Bei dunklem UI: Kommt Tiefe aus der Oberflächenhierarchie und Kantendefinition vor Unschärfe und Schatten?
• Ist Glühen selten genug, um noch etwas zu bedeuten?
• Fühlen sich Bewegungs-Timings kontrolliert und kurz an?
• Verstärkt Bewegung die Interaktionslogik, anstatt zu Choreografie zu werden?
• Blieb die Komposition ausgewogen, anstatt aufmerksamkeitsheischend zu sein?
• Bewahrt die erste mobile Ansicht dieselbe primäre Nachricht oder Aktion?
• Hat das Upgrade Rauschen entfernt, anstatt mehr Styling hinzuzufügen?

Referenzen

• Kern-Designregeln: references/design-principles.md
• Farbsystemregeln: references/color-system.md
• Komponenten-Handwerksregeln: references/component-aesthetics.md
• Interaktionszustandsregeln: references/interaction-states.md
• Bewegungsregeln: references/motion-principles.md
• Bewegungsmusterregeln: references/motion-patterns.md
• Tiefen- und Lichtregeln: references/depth-lighting-system.md
• Stil-Archetypen: references/style-archetypes.md
• Fehlermuster: references/anti-patterns.md
• Review-Struktur: references/review-rubric.md
• Umschreibtiefe und Ausgabevertrag: references/rewrite-playbook.md
• Destillierte Urteilsbeispiele: references/distilled-examples.md