Was macht unslop-components?
KI-generierte Apps teilen eine Silhouette: ein Seitentitel, eine Reihe von vier KPI-Karten, eine Tabelle, ein Formular mit Dropdowns. Es ist korrekt und vergessbar. Komponenten sollten von der Form der Daten geprägt sein, nicht davon, was die Komponentenbibliothek bietet.
Baue zuerst auf der Grundlage auf (unslop-foundation): Paletten-Tokens, Icon-Stil, Illustrationssystem, Bewegungssprache und ein genehmigtes Komponentenblatt. Komponenten hier verwenden diese Tokens und Teile; sie erfinden keine Farben oder Stile.
Die Verbotsliste (Standard-Look)
Denke zuerst in Komponenten: Benenne die Bausteine des Produkts, baue und überprüfe sie, dann setze Bildschirme zusammen. Liefere keinen Bildschirm aus, dessen Hauptinhalt eines dieser Elemente ist, es sei denn, die Daten sind wirklich so:
- Zeilen oder Gruppen, die durch Ränder und Haarlinien getrennt sind (trenne durch Abstand und Ton)
- Ein beschriftetes Formular (Raster aus Feldern plus Speichern) als Bearbeitungsweg; verwende die Bearbeitungsmuster in
unslop-foundation/references/designer-standard.md - Eine Reihe von KPI/Statistik-Karten (verwende einen Satz oder zeige die Zahl innerhalb des Dings, das sie misst)
- Eine Tabelle mit Bearbeitungs-Dropdowns in Zellen (Tabellen sind zum Vergleichen vieler Attribute vieler Zeilen)
- Ein einheitliches Raster identischer Kacheln
- Ein Formular als primäre Oberfläche (Formulare dienen der Dateneingabe, nicht der Ansicht)
- Status als einfarbiger Text oder Pills mit nur einem Namen (gib Status eine Form, siehe unten)
- Kuchendiagramme für Fortschritt, Tachometer, Donut-Ringe als Dekoration
Prozess (pro Bildschirm)
- Benenne die Datenform. Sequenz/Reise, Teile eines Ganzen, Vergleich, Beziehung, Veränderung über Zeit, Rangfolge, Ort, Hierarchie oder ein Strom von Dingen, die Aufmerksamkeit erfordern.
- Wähle die Form, die zur Datenform passt aus
references/patterns.md. Schreibe einen Satz: „Dieser Bildschirm ist eine Routenplan weil die Daten ein geordneter Fluss pro Bereich sind.“ - Definiere eine Signaturkomponente pro Bildschirm: das Ding, an das sich ein Benutzer erinnern würde. Sie trägt den Reichtum; alles um sie herum ist ruhiger Text und dünne Linien.
- Gib Status eine visuelle Sprache mit mindestens zwei Kanälen (Form/Füllung und Farbe, nicht nur Farbe), die auf jedem Bildschirm identisch verwendet werden.
- Zeige, dann bearbeite. Die Standardansicht ist lese-zuerst. Die Bearbeitung ist einen Schritt tiefer (ein Detailblock, eine Seitenleiste, eine Detailseite), nicht in jeder Zeile.
- Direkte Manipulation statt Bedienelemente. Filter, die auch die Legende sind. Klicke auf das Ding anstatt auf einen „Ansicht“-Button. Ziehe nur, wenn es ein Dropdown durch etwas Schnelleres ersetzt.
- Variiere die Dichte. Ein großer Moment, eine ruhige Mitte, kleine unterstützende Details. Nicht fünf gleiche Boxen.
- Überprüfe gegen das folgende Gate.
Gate
- Das Hauptelement des Bildschirms ist keine Tabelle, kein Karten-Raster, keine Statistik-Zeile und kein Formular.
- Eine einzeilige Begründung verbindet die gewählte Komponente mit der Form der Daten.
- Status verwendet Form/Füllung plus Farbe und ist konsistent über alle Bildschirme hinweg.
- Lese-zuerst: Kein Bildschirm hat mehr als eine Handvoll Dropdowns oder Eingaben, die ohne einen Klick sichtbar sind.
- Die Komponente funktioniert auch bei 360 px (umwickelt, stapelt oder scrollt absichtlich) und ist tastaturerreichbar mit sichtbarem Fokus.
- „Reduced Motion“ wird respektiert; nichts animiert nur zur Dekoration.
- Du hast es angesehen: Screenshots, die mit dem Playwright MCP aufgenommen wurden (
claude mcp add playwright npx @playwright/mcp@latest) bei 360 px und 1280 px. Wenn du nicht sehen konntest, sag es; nenne einen Bildschirm nicht kreativ oder fertig, basierend nur auf Code.
Wann Tabellen richtig sind
Viele Zeilen, viele vergleichbare Spalten, Sortierung ist wichtig (Audit-Logs, Preislisten, Exporte). Dann gestalte die Tabelle: tabellarische Zahlen, ausgerichtete Spalten, ruhige Linien, Zeilen-Hover, keine Zebrastreifen oder umrahmte Zellen und keine Bedienelemente in Zellen.
Dateien
references/patterns.md– Datenform-zu-Komponenten-Katalog, Status-Sprache, durchgearbeitetes Beispiel (Routenplan für Produktabläufe)