hackycy/product-ui-system

Interface Design

Gestalte Produktschnittstellen mit der Kunstfertigkeit eines Top-Designteams – Linear, Vercel, Stripe, Apple. Der Unterschied zwischen diesen und generischer Ausgabe ist nicht Talent. Es ist, dass jede Entscheidung getroffen wurde, die Hierarchie unmissverständlich ist und hundert kleine Details auf einmal korrekt sind. Diese Fähigkeit zeigt dir, wie du dorthin gelangst.

Anwendungsbereich

Verwende für: Dashboards, Admin-Panels, SaaS-Apps, Tools, Einstellungsseiten, Datenschnittstellen.

Nicht für: Landingpages, Marketing-Websites, Kampagnen, reine Markenarbeit. Verwende dafür eine Marketing-/Frontend-Design-Fähigkeit.

Diese Fähigkeit ist in sich geschlossen: Richtung, visuelle Hierarchie, Design-System-Architektur und die für die Auslieferung von produktionsreifer UI notwendigen Grundlagen zu Verfeinerung und Bewegung sind alle hier enthalten.

---

Das Problem

Du wirst generische Ausgabe generieren. Dein Training hat Tausende von Dashboards gesehen, und die Muster sind stark. Du kannst diesen gesamten Prozess befolgen – die Domäne erkunden, ein charakteristisches Merkmal benennen, deine Absicht erklären – und trotzdem eine Vorlage produzieren: warme Farben auf kalten Strukturen, freundliche Schriftarten auf generischen Layouts.

Das passiert, weil Absicht in Prosa lebt, aber die Codegenerierung aus Mustern schöpft. Die Lücke dazwischen ist der Ort, an dem Standards gewinnen. Der Prozess hilft, aber er garantiert keine Handwerkskunst. Du musst dich selbst ertappen, und du musst die konkreten Schritte kennen, die Standards nicht gehen.

Die Messlatte: Wenn eine andere KI bei einer ähnlichen Eingabeaufforderung im Wesentlichen dieselbe Ausgabe produzieren würde, hast du versagt. Nicht anders um der Andersartigkeit willen – anders, weil die Schnittstelle aus diesem Benutzer, dieser Aufgabe, dieser Welt entstanden ist. Wenn du von Standards aus entwirfst, sieht alles gleich aus, weil Standards geteilt werden.

---

Wo Standards sich verstecken

Standards tarnen sich als Infrastruktur – die Teile, von denen man denkt, sie müssten einfach funktionieren, nicht entworfen werden.

• Typografie fühlt sich wie ein Behälter an. Aber Schriftart hält nicht dein Design, sie ist dein Design. Die Stärke einer Überschrift, die Persönlichkeit eines Labels, die Textur eines Absatzes formen das Gefühl des Produkts, bevor jemand ein Wort liest. Nach deiner üblichen Schriftart zu greifen bedeutet, dass du nicht entwirfst.
• Navigation fühlt sich wie ein Gerüst an. Aber Navigation ist das Produkt – wo du bist, wohin du gehen kannst, was wichtig ist. Eine Seite, die im Raum schwebt, ist eine Komponentendemo, keine Software.
• Daten fühlen sich wie Präsentation an. Aber eine Zahl auf dem Bildschirm ist kein Design. Was bedeutet sie für die Person, die sie betrachtet? Ein Fortschrittsring und ein gestapeltes Label zeigen beide „3 von 10“ – eines erzählt eine Geschichte, eines füllt Platz.
• Token-Namen fühlen sich wie Implementierungsdetails an. Aber --tinte und --pergament rufen eine Welt hervor; --grau-700 und --oberfläche-2 rufen eine Vorlage hervor. Jemand, der nur deine Tokens liest, sollte erraten können, um welches Produkt es sich handelt.

Es gibt keine strukturellen Entscheidungen. Alles ist Design. In dem Moment, in dem du aufhörst zu fragen: „Warum das?“, übernehmen die Standards.

---

Absicht zuerst

Beantworte dies, bevor du Code anrührst. Halte es als kompaktes Arbeits-Briefing, es sei denn, die Richtung erfordert eine Bestätigung durch den Benutzer.

• Wer ist dieser Mensch? Nicht „Benutzer“. Die tatsächliche Person. Wo ist sie, wenn sie dies öffnet? Was hat sie vor 5 Minuten gemacht, was wird sie 5 Minuten danach tun? Ein Lehrer um 7 Uhr morgens mit Kaffee ist kein Entwickler, der um Mitternacht debuggt, und kein Gründer zwischen Investorentreffen.
• Was müssen sie erreichen? Das Verb. Diese Einreichungen benoten. Den kaputten Deployment finden. Die Zahlung freigeben. Die Antwort bestimmt, was führt, was folgt, was sich verbirgt.
• Wie soll es sich anfühlen? In Worten, die etwas bedeuten. „Sauber und modern“ bedeutet nichts – das sagt jede KI. Warm wie ein Notizbuch? Kalt wie ein Terminal? Dicht wie ein Handelsraum? Ruhig wie eine Lese-App? Das formt Farbe, Schriftart, Abstände, Dichte – alles.

Wenn die Eingabeaufforderung zu vage ist, um den Menschen, die Aufgabe und das Gefühl zu identifizieren, stelle eine präzise Frage. Wenn der Kontext eine verantwortungsvolle Annahme zulässt, formuliere sie kurz und fahre fort.

Absicht muss systemisch sein. „Warm“ zu sagen und dann kalte Farben zu verwenden, ist nicht konsequent. Wenn die Absicht warm ist: Oberflächen, Text, Ränder, Akzente, semantische Farben, Schriftart – alles warm. Wenn dicht: Abstände, Schriftgröße, Informationsarchitektur – alles dicht. Überprüfe jeden Token anhand der angegebenen Absicht. Bei jeder Wahl – Layout, Farbtemperatur, Schriftart, Abstandsskala, Hierarchie – musst du warum sagen können. „Es ist üblich“ oder „es funktioniert“ bedeutet, dass du Standard gewählt hast.

---

Produktdomänenerkundung

Hier werden Standards ertappt – oder auch nicht. Generischer Pfad: Aufgabentyp → visuelle Vorlage → Theme. Handwerkspfad: Aufgabentyp → Produktdomäne → charakteristisches Merkmal → Struktur + Ausdruck. Der Unterschied ist die Zeit, die in der Produktwelt verbracht wird, bevor visuelles Denken beginnt.

Erzeuge alle vier, bevor du eine Richtung vorschlägst:

• Domäne – Konzepte, Metaphern, Vokabular aus der Welt dieses Produkts. Nicht Funktionen – Terrain. Mindestens 5.
• Farbwelt – welche Farben existieren natürlich hier? Nicht „warm“ oder „kalt“ – gehe in die tatsächliche Welt. Wenn dieses Produkt ein physischer Raum wäre, was würdest du sehen? Liste 5+ auf.
• Charakteristisches Merkmal – ein Element (visuell, strukturell oder interaktiv), das nur für DIESES Produkt existieren könnte. Wenn du keins nennen kannst, erkunde weiter.
• Standards – 3 offensichtliche Entscheidungen für diesen Schnittstellentyp, visuell UND strukturell. Du kannst Muster nicht vermeiden, die du nicht benannt hast.

Der Test: Lies deinen Vorschlag, wobei der Produktname entfernt ist. Könnte jemand erkennen, wofür er ist? Wenn nicht, erkunde tiefer.

---

Gestalte es, wenn du kannst

Wenn ein visuelles Inline-Rendering-Tool in der Sitzung verfügbar ist (z. B. ein show_widget/visualize-Tool, das HTML oder SVG inline in der Konversation rendert), ziehe es vor, das Design zu zeigen, anstatt es zu beschreiben. Eine in Prosa gefangene Richtung ist nur einen Bruchteil so nützlich wie eine, die die Person anschauen kann. Dies ist bedingt: Wenn kein solches Tool vorhanden ist (CI, kopflose Agenten, reine Terminals), greife auf Code, Tokens und einen schriftlichen Vorschlag zurück. Gehe niemals davon aus, dass das Tool existiert; überprüfe es, dann verwende es.

Rendere zu drei Zeitpunkten:

1. Vorschlagen einer Richtung. Zeige zusammen mit dem „Vorschlagen + Fragen“-Block ein kleines Live-Beispiel: die Palette als tatsächliche Farbfelder, die Schriftgrößenskala in der tatsächlichen Schriftart, die Oberflächenhöhenstufen als gestapelte Karten, das charakteristische Merkmal als echte Komponente. Die Person sollte „warm wie ein Notizbuch“ sehen, nicht die Worte lesen.
2. Entwerfen einer Komponente. Rendere die tatsächliche Komponente (oder einen engen Vorher/Nachher-Vergleich, beide Varianten nebeneinander), damit die handwerklichen Entscheidungen – Abstände, Ränder, Hierarchie, Zustände – sichtbar sind, nicht behauptet werden. Rendere die tatsächlichen Zustände (Standard, Hover, Leer, Fehler), wo sie wichtig sind.
3. Kritisieren oder Auditing. Rendere die aktuelle Version und die verbesserte Version zusammen, damit die Lücke gezeigt wird, nicht erzählt.

Regeln beim Rendern:

• Das Widget zeigt nur das Visuelle. Alle Argumentation, die Domänenerkundung, die Liste der verworfenen Standards und die Empfehlung bleiben in deinem Antworttext – füge niemals Prosa in das Widget ein.
• Passe an den eigenen Design-System-Vertrag des Rendering-Tools an (lade sein read_me/seine Anleitung, falls vorhanden). Verwende seine Theme-Variablen, damit das Beispiel den Hell-/Dunkelmodus erbt und nativ im Host erscheint. Bekämpfe nicht die Host-Oberfläche.
• Das Beispiel muss dennoch die untenstehenden Prüfungen bestehen. Ein gerendertes Standard ist immer noch ein Standard – Rendering ist, wie Handwerkskunst gesehen wird, kein Ersatz dafür.
• Dies rendert in die Konversation, nicht in das Projekt. Die tatsächliche Implementierung landet weiterhin durch normale Bearbeitungen im Codebase.

Der Punkt: Die Schleife zwischen „hier ist mein Denken“ und „hier ist, wie es aussieht“ in eine einzige Nachricht zu kollabieren, auf die die Person reagieren kann.

---

Visuelle Hierarchie & Komposition

Der mit Abstand größte Treiber für „das sieht entworfen aus“ vs. „das sieht generiert aus“. Standards produzieren Flachheit – alles die gleiche Größe, das gleiche Gewicht und die gleichen Abstände, sodass nichts führt und das Auge nirgendwo hingehen kann. Handwerkskunst produziert Hierarchie – das Auge weiß sofort, was wichtig ist. Dies sind konkrete Schritte, keine Stimmungen.

Ein Brennpunkt pro Ansicht

Jeder Bildschirm hat eine Sache, die der Benutzer tun kam. Diese Sache dominiert – durch Größe, Kontrast, Position oder den Raum um sie herum. Wenn alles gleich stark konkurriert, gewinnt nichts und die Schnittstelle wirkt wie ein Parkplatz. Bevor du baust, nenne den Brennpunkt laut. Dann sorge dafür, dass er gewinnt: größer, höherer Kontrast oder von Weißraum umgeben. Stufe alles andere bewusst herab.

Schriftgrößenskala ist ein Verhältnis, und Gewicht schlägt Größe

Wähle Größen nicht nach Gefühl. Wähle ein Verhältnis und schreite es ab: ~1.2 (kleine Terz) für dichte/ruhige UI, ~1.25 für die meisten Produkt-UIs, ~1.333 für ausdrucksstarke. Aus einer 14–16px Grundgröße ergibt sich eine sichtbar unterschiedliche Skala, kein 15/16/17-Brei. Eine 14px Basis bei 1.25: Beschriftung 11 · Textkörper 14 · h4 16 · h3 18 · h2 22 · h1 28 · Anzeige 44+. Runde auf ganze Pixel und an dein Abstandsrasters an.

Der Apple/Linear-Schritt: Gewicht und Farbe leisten mehr Hierarchiearbeit als Größe. Eine einzelne 14px Größe enthält drei Ebenen allein durch Gewicht + Deckkraft – Wert: 600 / primär, Label: 500 / sekundär, Meta: 400 / gedämpft – und trennt sauberer als zwei reguläre Gewichte zwei Punkte auseinander. Baue aus drei Hebeln zusammen (Größe, Gewicht, Farbe/Deckkraft), niemals nur aus der Größe. Wenn du die Augen zusammenkneifst und Überschrift, Textkörper und Label nicht unterscheiden kannst, ist die Hierarchie zu schwach.

Ausgearbeitetes Beispiel – eine Metrik, flach vs. entschieden. Flach: Umsatz / 48.200 € beide 14px regulär grau, drei identische Boxen, kein Brennpunkt. Entschieden: UMSATZ 11px/500/gedämpft/gesperrt · 48.200 € 28px/600/primär/Tabellenziffern (der Held) · ↑12% 12px/500/erfolgreich. Gleiche Daten, entgegengesetzte Lesbarkeit – die Zahl führt durch Größe+Gewicht+einen Akzent, das Label ist herabgestuft, sekundäre Metriken fallen auf eine niedrigere Ebene.

Dichte ist eine Entscheidung, ausgedrückt in px

Linear ist eng; Stripe ist luftig. Keins ist Standard – beide sind gewählt, und die Wahl ist dieselbe Zahl, die überall wiederholt wird. Entscheide die Dichte von vornherein und nenne die Werte: Ein Tool-Panel mit 12–16px Abstand fühlt sich Werkbank-eng an; dieselbe Karte mit 24px fühlt sich wie eine Broschüre an. Dieselbe Zahl kann in einem Kontext richtig und in einem anderen faul sein. Wähle bewusst, dann halte daran fest.

Räumlicher Rhythmus – ungleichmäßig atmen

Großartige Schnittstellen verteilen den Raum nicht gleichmäßig. Dichte Kontrollzonen weichen offenem Inhalt; schwere Elemente balancieren leichte aus; das Auge wandert mit Absicht. Einförmige Layouts – gleiche Kartengröße, gleicher Abstand, gleiche Dichte überall – sind das Geräusch von niemandem, der entscheidet. Variiere den Rhythmus absichtlich: Gruppiere eng zusammenhängende Dinge und setze dann echte Luft zwischen die Gruppen.

Proportionen sprechen

Eine 280px Seitenleiste neben vollbreitem Inhalt sagt: „Navigation dient dem Inhalt.“ Eine 360px Seitenleiste sagt: „Das sind gleichberechtigte Partner.“ Die spezifische Zahl erklärt, was wichtig ist. Wenn du nicht artikulieren kannst, was eine Proportion aussagt, sagt sie gar nichts. Wähle Breiten und Verhältnisse, die eine Beziehung ausdrücken.

Verteilung und Zurückhaltung (der „teure“ Look)

• ~60/30/10: eine dominante neutrale Oberfläche, ein sekundärer Ton und ~10% Akzent. Farbe ist eine knappe Ressource – der meiste Bildschirm ist Struktur.
• Ein Akzent, mit Absicht verwendet, schlägt fünf Farben ohne Gedanken. Grau baut Struktur; Farbe kommuniziert (Status, Aktion, Identität). Unmotivierte Farbe ist Rauschen.
• Hierarchie durch Raum und Gewicht, nicht durch Linien. Greife zu Weißraum und Tonverschiebung, bevor du Ränder und Trennlinien verwendest. Die hochwertigsten Schnittstellen sind meist unsichtbare Struktur.
• Optische Größenanpassung bei großen Schriftarten: Ziehe den Buchstabenabstand an, wenn die Schrift größer wird (Überschriften leicht negativer Track); lockere die Zeilenhöhe bei Textkörpern für Lesbarkeit (~1.5). Enge Schrift wirkt handwerklich; Standard-Tracking bei einer 32px Überschrift wirkt wie ein Dokument.

---

Handwerkliche Grundlagen

Subtile Schichtung (das Rückgrat)

Unabhängig von der Richtung gilt dies für alles. Du solltest kaum merken, dass das System funktioniert – wenn du auf Vercels Dashboard schaust, denkst du nicht „schöne Ränder“, du verstehst einfach die Struktur. Unsichtbare Handwerkskunst ist funktionierende Handwerkskunst.

Oberflächenhöhe. Oberflächen stapeln sich: Ein Dropdown liegt über einer Karte, die über der Seite liegt. Baue ein nummeriertes System – Basis, dann zunehmende Stufen. Jeder Sprung beträgt nur wenige Prozentpunkte der Helligkeit – z. B. Dunkelmodus Basis → +7% → +9% → +12%; Hellmodus bleibt hell und fügt stattdessen Schatten hinzu. Du kannst eine Stufe isoliert kaum sehen, aber gestapelt ergibt sich die Hierarchie. Flüsterleise Verschiebungen, die du fühlst, nicht siehst.

• Seitenleisten: gleicher Hintergrund wie die Leinwand, nicht eine andere Farbe. Unterschiedliche Farben fragmentieren den Raum in „Seitenleisten-Welt“ und „Inhalts-Welt“. Ein subtiler Rand reicht aus.
• Dropdowns/Popover: eine Stufe über ihrer Eltern-Oberfläche, sonst verschmelzen sie und die Schichtung geht verloren.
• Eingabefelder: etwas dunkler als ihre Umgebung, nicht heller. Eingabefelder sind vertieft – sie nehmen Inhalt auf. Eine dunklere Füllung signalisiert „hier tippen“ ohne schwere Ränder.

Ränder. Sollten verschwinden, wenn du nicht nach ihnen suchst, aber auffindbar sein, wenn du Struktur brauchst. Niedrige Deckkraft rgba vermischt sich mit dem Hintergrund und definiert eine Kante, ohne Aufmerksamkeit zu fordern; solide Hex-Ränder wirken im Vergleich hart. Dunkelmodus lebt um rgba(255,255,255,0.06–0.12), Hellmodus etwas höher. Baue eine Progression – Standard, weichere Trennung, Betonung, Fokusring – und passe die Intensität an die Wichtigkeit der Grenze an.

Der Kneiftest: Blinzele mit den Augen auf die Schnittstelle. Du solltest immer noch Hierarchie wahrnehmen – was über was ist, wo sich Abschnitte teilen –, aber nichts sollte herausstechen. Keine harten Linien, keine ruckartigen Verschiebungen. Nur leise Struktur. Wenn das falsch ist, ist alles andere egal.

Unendlicher Ausdruck

Jedes Muster hat unendliche Ausdrücke – keine zwei Schnittstellen sollten gleich aussehen. Eine Metrikanzeige könnte eine Heldenzahl, eine Inline-Statistik, ein Sparkline, ein Messinstrument, ein Fortschrittsbalken, ein Vergleichsdelta oder ein Trend-Abzeichen sein. Dieselbe Seitenleistenbreite, dasselbe Kartengitter, dasselbe Icon-links-Zahl-groß-Label-klein-Metrik-Boxen jedes Mal signalisiert sofort KI-generiert und ist vergessbar. Linears Karten sehen nicht aus wie die von Notion; Vercels Metriken sehen nicht aus wie die von Stripe. Gleiche Konzepte, unendliche Ausdrücke. Bevor du baust, frage: Was ist die EINE Sache, die Benutzer hier tun, und welches Produkt löst ein ähnliches Problem brillant?

Farbe lebt irgendwo

Jedes Produkt existiert in einer

…

[für die Übersetzung gekürzt]