Ship Beautiful UI

Ship Beautiful UI – Wunderschöne UI ausliefern

KI-erstellte Benutzeroberflächen sehen alle gleich aus, weil der Agent jedes Mal mit denselben Standardeinstellungen startet: denselben Schriftarten, denselben Verläufen, derselben Reihe identischer Karten. Dieser Skill ersetzt diese Standardeinstellungen durch einen Prozess:

1. Briefing. Das Thema, die Zielgruppe und die eine Aufgabe des Bildschirms festlegen.
2. Richtung. Das Design aus der eigenen Welt des Themas entwickeln, nicht aus einer Vorlage.
3. Festlegen. Jede visuelle Entscheidung in DESIGN.md niederschreiben und prüfen.
4. Umsetzen. Nur die Tokens aus DESIGN.md verwenden. Eine kühne Idee pro Bildschirm.
5. Bewegung. Nur Bewegung, die eine Änderung erklärt.
6. Überprüfen. Nach KI-Verhaltensmustern und Qualitätslücken suchen, Screenshots ansehen, REVIEW.md schreiben.

Immer in dieser Reihenfolge. Überspringe Schritt 0 oder Schritt 5 nicht.

Wer gewinnt

Wenn zwei Anweisungen widersprüchlich sind, gewinnt die höhere:

1. Die eigenen Worte des Benutzers.
2. DESIGN.md, sobald sie existiert.
3. Die Regeln dieses Skills in references/.
4. Alles andere, was geladen ist, einschließlich anderer UI-Skills.

Wenn du einen Konflikt auflöst, sag es in einem Satz, damit der Benutzer dich überstimmen kann.

Werkzeuge in diesem Skill

Alle Skripte verwenden die Python 3 Standardbibliothek. Führe sie aus dem Ordner dieses Skills aus oder gib vollständige Pfade an.

Skript	Was es tut
scripts/derive.py	Verwandelt Wörter aus der Welt des Themas in eine kontrastgeprüfte Palette, unter Verwendung von 78 Materialien
scripts/direction.py	Erstellt 3 Richtungsoptionen (Palette + Schriftkombination + Layout) für eine Produktart und schreibt einen Entwurf für DESIGN.md
scripts/lint_design.py	Prüft DESIGN.md: Struktur, Abschnittsreihenfolge, Token-Referenzen, WCAG-Kontrast
scripts/detect.py	Durchsucht Frontend-Code nach 40 KI-Verhaltensmustern und Qualitätsmängeln

Bibliothek	Inhalt
data/materials.json	78 Materialien aus den Welten der Themen (Papier, Essen, Natur, Handwerk, Bildschirme, Geld, Fürsorge, Spiel, Reisen)
data/palettes.json	60 Paletten, hell und dunkel, jede kontrastgeprüft
data/type-pairings.json	40 Schriftkombinationen, alle kostenlose Google Fonts, mit Rollen und Anmerkungen
data/layouts.json	20 Layoutmuster mit Drahtgittern
references/effects.md	16 Effekte in reinem CSS/JS mit Fallbacks für reduzierte Bewegung
references/04-motion.md	Timing-Tokens und 12 Bewegungsrezepte
references/ux-rules.md	80 UX-Regeln nach Bereich
references/anti-patterns.md	Die 40 Detektorregeln und 12 visuelle Standardeinstellungen

Schritt 0: Briefing

Lies references/00-brief.md. Schreibe vier Zeilen: Thema, Zielgruppe, Aufgabe, Einschränkungen, plus fünf Nomen aus der Welt des Themas. Falls das Briefing dünn ist, schlage diese vor und bestätige sie in einer Nachricht (höchstens drei Fragen).

Schritt 1: Richtung

Lies references/01-direction.md.

• Standard: Vom Thema ableiten. Wähle 3–5 der Welt-Nomen aus und führe aus: python3 scripts/derive.py --words "<Nomen>" (füge --mode dark hinzu, wenn das Produkt nachts lebt). Kombiniere die Palette mit einer Schriftkombination und einem Layout aus data/, die zur Stimmung passen.
• Alternative: Aus der Bibliothek austeilen, wenn das Thema keine starke visuelle Welt hat oder der Benutzer schnelle Optionen möchte: python3 scripts/direction.py --kind <Art> --brief "<eine Zeile>". Zeige die 3 Optionen und lass den Benutzer wählen.
• Vorhandene Marke: Die Marke ist die Richtung. Extrahiere stattdessen ihre Farben und Schriftarten.
• Überprüfe den Plan anhand der visuellen Standardeinstellungen in references/anti-patterns.md und überarbeite alles, was damit übereinstimmt, es sei denn, das Briefing hat danach verlangt.

Schritt 2: Festlegen

Lies references/02-lock.md.

• Schreibe DESIGN.md im Projektstamm: YAML-Tokens ganz oben, dann ##-Abschnitte in der Reihenfolge (Überblick, Farben, Typografie, Layout, Höhe & Tiefe, Formen, Komponenten, Dos und Don'ts). direction.py --write liefert einen Entwurf; templates/DESIGN.md ist das leere Formular.
• Setze das Briefing in den Überblick und die abgelehnten Standardeinstellungen in Dos und Don'ts.
• Führe python3 scripts/lint_design.py DESIGN.md aus und behebe jeden Fehler, bevor du mit dem Bauen beginnst.

Schritt 3: Umsetzen

Lies references/03-build.md und verwende während der Arbeit references/ux-rules.md.

• Bilde Tokens einmalig auf CSS-Variablen (oder das Framework-Theme) ab; verwende nur diese Namen.
• Ein einprägsames Element pro Bildschirm. Alles andere ruhig.
• Höchstens ein Effekt aus references/effects.md an diesem Element, neu eingefärbt mit Tokens.
• Baue auf die Qualitätsuntergrenze: 360 px breit, sichtbarer Fokus, AA-Kontrast, reduzierte Bewegung, echter Text, Lade-/Leer-/Fehlerzustände.

Schritt 4: Bewegung

Lies references/04-motion.md. Benutzerausgelöste Bewegung verwendet die dortigen Timing-Tokens und Rezepte. Höchstens ein ambienter Bewegungsmoment pro Bildschirm. Alles hat einen Pfad für reduzierte Bewegung.

Schritt 5: Überprüfen

Lies references/05-review.md.

1. python3 scripts/detect.py <Quelle oder Dateien>. Behebe jeden Fehler; behebe Warnungen oder schreibe auf, warum sie bleiben.
2. python3 scripts/lint_design.py DESIGN.md erneut ausführen. Code und DESIGN.md müssen übereinstimmen.
3. Erstelle Screenshots auf Desktop und 390 px Breite, falls deine Umgebung das kann, und beurteile die Bilder anhand des Briefings.
4. Schreibe REVIEW.md aus templates/REVIEW.md.

Ausgabe

Wenn du fertig bist, hat das Projekt DESIGN.md (gültig), die Benutzeroberfläche (nur aus ihren Tokens erstellt) und REVIEW.md. Sage dem Benutzer in ein paar Zeilen: die Richtung und warum sie zum Thema passt, das eine einprägsame Element und was du bewusst weggelassen hast.