mannobeats/ui-director

UI Director

Du führst Regie bei einer Benutzeroberfläche, baust sie auf und siehst sie dir an, bevor du sie für erledigt erklärst. Die Messlatte ist das, was die besten Produktstudios ausliefern: wenige, sehr groß gesetzte Worte, ein Bild, das nur dieses Produkt zeigen kann, großzügiger Raum, exakte Handwerkskunst. Kühn in der Idee, zurückhaltend überall sonst.

Wie stark du drücken sollst

Die goldenen Beispiele in examples/ sind die Messlatte, kein Richtwert. Wenn deine Version die wortreichere, kleinere, flachere oder allgemeinere neben dem nächsten Goldstück ist, dann ist das der erste Fehler. Sieh dir dann deine Screenshots so an, wie es der akribischste Designer, den du kennst, tun würde – derjenige, der das eine falsche Ding screenshotet und mit „Was ist das?“ zurückschickt: ein Absatz, wo eine Zeile hingehört, eine Überschrift, die alles Mögliche verkaufen könnte, ein Produktbild, das zu klein zum Lesen ist, ein Label, das seine Pill-Touch-Border berührt. Wenn du dir diesen Screenshot vorstellen kannst, hast du den nächsten Fehler gefunden.

Wähle den Auftrag aus

Auftrag	Jetzt lesen
Eine Seite, die verkauft: Landing, Launch, Produkt, Preise, Event	references/landing.md, references/product-shots.md
App-UI auf einem Bildschirm: Dashboard, Tabelle, Einstellungen, Detail, Admin	references/app-ui.md
Eine Smartphone-App: Startseite, Liste, Detail, Onboarding, Paywall, native Bildschirme	references/mobile.md, references/app-ui.md
Redesign, Polieren, „es wirkt schief“: URLs, Labels, Feldreihenfolge und Logo behalten; die größten sichtbaren Probleme in einem Durchgang beheben	references/tells.md
Nur Audit: maximal 5 Erkenntnisse, die schwerwiegendsten zuerst, jeweils mit Screenshot und kleinster Lösung; nichts ändern, außer es wird verlangt	references/look.md, references/tells.md
Designsystem einrichten oder bereinigen, im eigenen Format des Projekts	references/system.md

Die Vorgabe des Benutzers gewinnt. Ein benannter Stil, eine Referenz, die Marke des Benutzers oder ein bestehendes Designsystem überschreibt hier jede Voreinstellung. Erweitere das, was existiert. Nur das „Niemals“ unten gilt uneingeschränkt.

Beginne mit dem Goldstandard

Jeder Auftrag beginnt mit der nächstgelegenen fertigen Seite, niemals mit einer leeren Datei. Stelle das Skill-Verzeichnis bereit (python3 -m http.server darin) und öffne das Goldstück in 1440, 820 und 390 Breite. Kopiere seine Struktur und seine Handwerkskunst: den Abstand, die Typografie-Skala, die Art, wie das Produkt gezeigt wird, die Bewegung. Ersetze dann seine Welt durch die des Produkts: die Idee, die Worte, das Bild, die Farben, die Beispieldaten. Eine Kopie, die nur den Namen ändert, ist nicht fertig; sie sollte wie dieses Produkt wirken, nicht wie das Goldstück.

Goldstück	Was es ist	Kopiere davon
landing-sky	Helle Seite. Ein zentriertes Fünf-Worte-Versprechen über einem in Code gezeichneten Himmel; die App erhebt sich daraus und füllt den Bildschirm beim Scrollen	Den zentrierten Stack, die fixierte Szene, einen Halbtonhimmel aus Rauschen, Glaspanele über gezeichneten Szenen, eine Metapher vom Chip bis zum Schluss, Lichter, die leuchten
landing-object	Dunkle Seite. Drei Zeilen Schrift auf der linken Seite, ein bearbeitetes Objekt auf der rechten Seite, das du drehen kannst	Zeilen, die aus Masken aufsteigen, ein nur mit CSS skulpturiertes Objekt, eine Frontplatte als Produktbild, Spezifikationen Zeile für Zeile, ein Preis, der die Überschrift ist
landing-card	Helle Seite, alles zentriert. Eine Graphitkarte, die in CSS gezeichnet ist und sich zum Zeiger neigt	Einen Abstandstoken zwischen Abschnitten und einen zwischen Blöcken, einen Satelliten über leerem Raum, einen Abschluss, der die Hero-Sektion aufgreift
app-dashboard	Sidebar-Shell. Eine Übersicht einer Deployment-Plattform, hell und dunkel	Die Antwort als Titel, nur das, was dich braucht, jedes Element als Zelle in seinem Zustand, eine Akzentfarbe für eine Aktion, eine Leiste auf Tablets, die Frische präzise angegeben
app-analytics	Inset-Shell: eine abgerundete Sidebar und ein Blatt, das auf einem getönten Hintergrund schwebt	Einen Satz für die Woche, Zahlen in einem Streifen mit ihren Trends, ein Diagramm, dessen Beschriftungen unter ihren Punkten sitzen, Listen mit Inline-Balken
app-finance	Top-Nav-Shell, eine zentrierte Spalte	Das Guthaben als Überschrift, sein Monat darunter gezeichnet, Konten, was kommt und was passiert ist
phone-app	Eine Lauf-App nach dem Lauf, bei 390	Die Antwort zuerst, das Schlüsselobjekt gezeichnet (eine Route farbig nach Tempo), dieselbe Skala wiederverwendet, eine Glas-Tab-Leiste

teaching/ enthält kleine Vorher-Nachher-Paare (Ränder, Gruppierung, Betonung, Icons, Farbe, Dunkel, Tabellen, Zeitleisten, destruktive Aktionen, Telefonzeilen) zur Diagnose eines einzelnen Problems. Jedes Paar zeigt denselben Bildschirm zweimal mit einer geänderten Abweichung, und jede rechte Hälfte besteht die Prüfung. Sie lehren eine Lösung nach der anderen; beginne niemals eine Seite mit teaching/, sondern beginne mit dem Goldstandard.

Der erste Bildschirm

Das meiste, was als hochwertig wahrgenommen wird, wird hier entschieden, und das meiste davon ist Subtraktion.

• Wenige Wörter, sehr groß gesetzt. Eine Überschrift von 3–8 Wörtern auf 2–3 Zeilen, 64–112px auf einem Desktop (clamp() herunter auf etwa 48px auf einem Telefon), Gewicht 600–650, Zeichenabstand −.045 bis −.055em, Zeilenhöhe .92–1. Eine zweite Zeile darf in einem ruhigeren Ton sitzen; eine ganze Zeile, niemals ein einzelnes Wort.
• Eine Zeile darunter, höchstens 14 Wörter, die erklärt, wie und für wen. Kein Absatz auf dem ersten Bildschirm, niemals.
• Höchstens zwei Aktionen: eine primäre Kapsel (48px) und eine ruhige. Eine Risikozeile daneben oder darunter („Kostenlos für ein Postfach“) nur, wenn es wahr ist.
• Höchstens ein Chip oberhalb der Überschrift, der eine Tatsache trägt oder in der Stimme des Produkts spricht (bei einer Mail-App: „Heutige Prognose: 4 von Personen, 12 zum Überfliegen“).
• Das Bild ist das größte Element. Ein Produktfenster bei 80 % oder mehr der Inhaltsbreite, das sich aus dem Falz erhebt; ein Objekt bei etwa 40 % des Bildschirms; ein Telefon in seinen tatsächlichen Proportionen. Klein und eingerahmt ist der generierte Look.
• Abstand: Der Stapel in der oberen Hälfte zentriert mit 24–36px zwischen seinen Teilen, oder Wörter in der linken Hälfte und das Objekt in der rechten. Alles andere auf dem Bildschirm ist ruhig.

Überschriften sind das Design, also schreibe zehn und behalte eine. Sage die Wahrheit des Produkts in den Worten des Besuchers, in einer Stimme, die wie ein Mensch klingt: „Dein Posteingang, größtenteils leer.“ „Analoge Wärme, ohne das Rack.“ „23 von 24 Apps laufen.“ Wähle eine Metapher aus der Welt des Produkts (Wetter für E-Mail, Hardware für Audio) und trage sie leicht durch den Chip, die eigenen Labels des Produkts und die Schlusszeile. Niemals ein Slogan, der alles Mögliche verkaufen könnte („Optimiere deinen Workflow“), niemals eine Kategoriebeschreibung („Die All-in-One-Plattform für…“).

Raum und Ausgewogenheit

Konsistenz ist das meiste, was als Sorgfalt wahrgenommen wird. Jedes Goldstück befolgt diese Regeln, und die Prüfung setzt sie durch.

• Zwei Abstandstoken für eine Seite: einen zwischen Abschnitten (--section, etwa clamp(88px, 10vw, 136px)) und einen zwischen Blöcken innerhalb eines Abschnitts (--gap, 48–56px). Verwende sie einmal: Ein Abschnitt hat nur einen oberen Innenabstand, sodass sich zwei Abschnitte nie in ihrem Abstand stapeln.
• Keine leere Zone. Keine Lücke zwischen zwei Inhaltselementen ist größer als der Abschnittsabstand, bei keiner Breite oder Höhe, auch nicht nach einer Scrollszene (empty band).
• Zentriert bedeutet zentriert. Eine zentrierte Spalte zentriert jeden Block darin, einschließlich Button-Gruppen und kurzer Absätze (margin-inline: auto); eine Seiten-Spalte sitzt in der Mitte des ihr zur Verfügung stehenden Bereichs, umarmt niemals den linken Rand eines breiten Bildschirms (off-center).
• Ausgeglichene Boxen. Der Inhalt sitzt in der Mitte seiner Karte oder füllt sie absichtlich aus; der Abstand oben ist gleich dem Abstand unten (unbalanced); keine Karte endet in einem leeren Bereich (empty pane) oder berührt die Kante ihres Abschnitts (touches the edge); Wörter laufen niemals aus ihrem Panel über.
• Jede Breite ist designed: Desktop, Tablet (eine Sidebar faltet sich bei etwa 760–1180px zu einer Leiste mit Icons) und Telefon (eine Spalte, dieselbe Abstandsskala). Die Prüfung betrachtet 1440, 820 und 390.
• Die Navigation bleibt. Sie fixiert sich oben und passt sich an: transparent über einem dunklen oder fotografischen Helden, eine frostige Leiste mit Tintenfarbe, sobald etwas Helles darunter ist. Niemals eine Navigation, die wegscrollt.

Erstelle die Bilder selbst

Du kannst fast alles, was eine Seite braucht, in Code zeichnen, und gezeichnete Bilder passen immer zur Seite:

• Eine Szene: einen Himmel, ein Feld, eine Textur, aus geschichtetem Rauschen auf einer Leinwand: weiche Lautstärke unter einem Halbton aus Punkten (landing-sky, references/craft.md). Schichten, die sich beim Scrollen mit unterschiedlichen Geschwindigkeiten bewegen.
• Ein Objekt: Metall, Glas, Kunststoff, Papier in CSS-Verläufen und Schatten: Eine gebürstete Kappe ist ein conic-gradient aus hellen und dunklen Schritten über einem feinen repeating-radial-gradient (landing-object).
• Die Daten als Held: eine Route, eine Wellenform, eine Flotte von Zellen, ein Messgerät, gezeichnet in SVG aus realistisch aussehenden Zahlen (phone-app, app-dashboard).
• Das Produkt selbst, in seiner tatsächlichen Größe neu erstellt (references/product-shots.md).

Fotografien stammen vom Benutzer, einem Bildbearbeitungswerkzeug oder einem frei lizenzierten Foto, das im Projekt gespeichert wird (references/visuals.md). Niemals ein Verlaufsblob, eine Stock-Illustration oder CSS-Formen, die ein Foto vortäuschen.

Der Kreislauf

Jeder Schritt endet mit etwas, das du überprüfen kannst.

1. Richtung. Fülle den Richtungsblock aus der Datei deines Auftrags und schreibe ihn in DESIGN.md im Projektstammverzeichnis. Er benennt das Goldstück, die von dir behaltene Überschrift und das Bild, das du erstellen wirst. Erledigt, wenn keine Zeile ein anderes Produkt beschreiben könnte.
2. Goldstück und Tokens. Kopiere die Struktur des Goldstücks; schreibe die Tokens im Format des Projekts (references/system.md), mit den Schriftartdateien im Projekt.
3. Baue alles. Jeden Abschnitt und Zustand, den das Briefing impliziert, mit echtem Text (references/words.md) und einer Beispielwelt.
4. Mach es zu dem einen. Das Bild und die charakteristische Bewegung (references/product-shots.md, references/motion.md). Erledigt, wenn du auf den Moment zeigen kannst, den Leute screenshoten würden.
5. Prüfe. Führe node <skill>/scripts/check.mjs <url> aus und öffne jeden Screenshot, den es schreibt. Lege deinen ersten Bildschirm neben den des Goldstücks und benenne den einen Unterschied. Fordere für eine Seite, die verkauft, oder einen neuen App-Bildschirm eine Überprüfung durch frische Augen an (references/review.md). Erledigt, wenn die Prüfung mit check passed endet, die Überprüfung beantwortet ist und du mindestens zweimal repariert und erneut geprüft hast.
6. Beende. Schreibe den Abschnitt „Prüfung“ von DESIGN.md, stoppe Server, lösche Screenshots und teile dem Benutzer mit, was du gemacht hast, was du erfunden hast und was er überprüfen soll.

Häufig wiederkehrende Fehler

• Zu viele Wörter: ein Absatz unter der Überschrift, ein Satz auf jeder Kachel, ein Label über jedem Abschnitt. Streiche, bis es weh tut, dann streiche eine weitere Zeile.
• Eine Überschrift, die alles Mögliche verkaufen könnte, oder eine in der Stimme der Kategorie.
• Das Bild zu klein, in eine Karte gezwängt, oder ein grauer Platzhalter, wo das Produkt hingehört.
• Unausgewogene Platzierung: eine Überschrift auf eine Seite geschoben, ohne dass die andere Seite etwas hält; ein Button, der von seiner Zeile wegschwebt; ein Fenster, das an einer zufälligen Kante abgeschnitten ist. Zentriere den Stapel oder kombiniere die Wörter mit einem Objekt von gleichem Gewicht.
• Das Telefon ist der geschrumpfte Desktop: jede Seite hat ihre eigene Telefon-Komposition (tiny text).
• Wörter überdeckt oder abgeschnitten: ein Fenster über der Überschrift, ein Status durch einen Beschnitt geteilt (covered, cut by the crop).
• Kontrast bei ruhigen Texten und Links; der zweite Ton einer Überschrift mit mindestens 3:1.
• Standard-KI: Glitzer, violette Verläufe, ein Buchstabe in einem farbigen Quadrat, Emojis als Icons.

Handwerkliche Zahlen

Die Voreinstellungen. Ein Bauplan oder das System des Benutzers ersetzt sie.

• Schriftart: eine Familie (Geist und Geist Mono werden in fonts/ mitgeliefert), eine Auszeichnungsschrift nur mit Grund. Seiten, die verkaufen: Auszeichnung wie oben; Abschnittsüberschriften 36–64px bei −.04em; Fließtext 16–18px; Einleitungen 17–20px bei Zeilenhöhe 1.45. App-UI: 12 / 13 / 14 / 16 / 20 / 24–26px, Gewichte 450 Fließtext, 500 UI, 600 Überschriften. Telefon-Apps: 15–17px Fließtext, 34px große Titel. Höchstens 10 Größen auf einer Seite. tabular-nums bei Zahlen, text-wrap: balance bei Überschriften, überall Satzanfang groß.
• Farbe: Neutrale Farben machen die Struktur (3 Oberflächen, 2 Linien, 4 Textebenen). Eine Akzentfarbe, rationiert für das, was handelt, ausgewählt ist oder leuchtet. Rot bedeutet gescheitert oder destruktiv, unabhängig von der Marke. Kontrast 4.5:1 für Lesetexte, 3:1 für große Texte, gemessen auf dem tatsächlichen Hintergrund.
• Abstand: ein 4px-Raster. 8px innerhalb einer Gruppe, 12–16px zwischen verwandten Elementen, 24–32px zwischen Gruppen, Wörter mindestens 12px von jeder Kante entfernt. Abschnitte auf Seiten, die verkaufen: clamp(96px, 12vw, 176px) auseinander. Inhalt bis 1200–1320px, Rand clamp(20px, 4vw, 48px).
• Form: eine Radius-Familie, verschachtelt (innen = außen − Innenabstand): 20–32px für Kacheln und Fenster, Kapseln für Buttons, 8–12px innerhalb von Apps. Kanten sind 0.5–1px Haarstriche; Schatten getönt zum Hintergrund, lang und weich für das, was schwebt.
• Steuerelemente: 3–4 Höhen: etwa 32px in der App-UI, 44px auf Touch-Geräten, 48px Buttons auf Seiten, die verkaufen. Labels 10px oder mehr von ihrer Kante entfernt, line-height: 1.

Layout

• Kanten: Text in Leserichtung linksbündig, Zahlen und Aktionen rechtsbündig; ein kurzer Überschriftenstapel darf zentriert sein. Jeder Block fluchtet mit einer Linie, die ein anderer Block verwendet.
• Gruppieren, dann unterscheiden: Personen bekommen Gesichter, Kategorien bekommen Farben, Zahlen bekommen tabellarische Ziffern, dasselbe bekommt überall dasselbe Zeichen.
• Zeigen, nicht erzählen: das Produkt, ein Balken, ein Gesicht anstelle eines Satzes.
• Betonung ist ein Unterschied: die Nachbarn beruhigen; Farbe nur für das, was sich geändert hat, ausgewählt ist oder Aufmerksamkeit braucht.
• Eine Oberfläche, geteilt durch Linien und Abstand. Karten halten reale Objekte und schwebende Ebenen, niemals eine weitere Karte.

Niemals

• Ein Punkt in einer Pille oder einem Badge; Status ist ein Wort.
• Ein Icon auf einem getönten Kreis, der eine Karte, eine Statistik oder einen leeren Zustand überschreibt.
• Emoji in Oberflächentexten; Begrüßungen („Willkommen zurück, Sarah“).
• Standard-KI-Farbe: Violett-zu-Pink oder blau leuchtende Verläufe, verschwommene Blobs, Neon, ein Glitzer oder Zauberstab für KI.
• Ein Wort einer Überschrift in einer anderen Farbe, einem anderen Stil oder Gewicht.
• Großbuchstaben mit Laufweite, nummerierte Abschnitts-Labels („01 /“), ein kleines Label über jedem Abschnitt.
• Erfundene Beweise: Testimonials, Logo-Wände, Bewertungen und Benutzerzahlen, die dir niemand gegeben hat.
• Platzhalter: Lorem, „Acme“, „Max Mustermann“, runde Zahlen, „Alle anzeigen →“ auf jedem Panel.
• Graue Balken oder gefälschte Diagramme als Platzhalter für das Produkt.
• Ein erfundenes Logo: ein Buchstabe in einem farbigen Quadrat. Das echte Zeichen oder der Name als Wortmarke.
• Handgezeichnete Icons oder als Textsymbole (✦ ✳ ◐), zwei Icon-Sets auf einer Seite, Pfeile auf Buttons.

Die offensichtliche Version

Was jedes Modell baut, wenn nichts gewählt wurde. Benenne sie in deiner Richtung, dann verlasse sie.

• Ein weißer erster Bildschirm mit einem Verlaufsblob, einer Überschrift mit einem Wort in einem Verlauf, einem Absatz...