Mise UI
UI, die sich selbst erklärt. Jede Komponente wird mit dem Prinzip hinter ihrer Form und einer Regel geliefert, wann sie nicht verwendet werden sollte. Behalte beides, wenn du eine Komponente installierst oder anpasst.
Wann verwenden
- Das Projekt ist React + Tailwind CSS v4 mit einem Shadcn-ähnlichen
components.json - Der Bildschirm hat einen KI-Schritt: Warten auf ein Modell, gestreamter Text, Tool-Aufrufe, Reasoning, Spracheingabe
- Du benötigst ein Basiskit (Button, Dialog, Select…), dessen Begründung du in einem Design-Review zitieren kannst
Installation
- Theme, einmal pro Projekt:
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json - Jede Komponente:
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<name>.json(Abhängigkeiten werden automatisch installiert) - Lese
references/<name>.md, bevor du eine Komponente zum ersten Mal verwendest
Regeln
- Respektiere
prefers-reduced-motion. Jede Mise-Komponente tut das bereits; behalte das bei, wenn du eine bearbeitest. - Ein
mise-Akzent pro Bildschirm. Er markiert die primäre Aktion oder aktive KI-Aktivität, niemals Dekoration. - Benenne die Wartezeit. Jeder Modellaufruf, der länger als etwa eine Sekunde dauert, erhält einen
thinking-indicator, dessen Label sagt, was passiert. - Keine Dark Patterns: keine gefälschten Countdowns, versteckten Abbrechen, vorausgefüllten Zustimmungen. Die Nicht-Zeile in jeder Referenz ist verbindlich.
- Behalte
data-slot-Attribute; Tests und Styling-Hooks hängen von ihnen ab.
Symptom → Komponente
| Wenn du siehst | Verwende |
|---|---|
| Benutzer wartet auf einen Modellaufruf länger als etwa eine Sekunde | thinking-indicator |
| Token kommen einzeln an und sollen als Tippen gelesen werden, nicht als eingefrorener Block | streaming-text |
| Ein Agent hat ein Tool ausgeführt und der Benutzer soll dem Ergebnis vertrauen können | tool-call-card |
| Ein mehrstufiger Plan, den der Benutzer einsehen kann, aber nicht gezwungen werden sollte zu lesen | reasoning-steps |
| Das Mikrofon ist aktiv und der Benutzer muss es wissen | voice-wave |
| Inhalt wird geladen und das endgültige Layout ist bekannt | skeleton |
| Eine Aktion ist wichtiger als der Rest des Bildschirms | button |
| Zu viele Optionen an einem Ort | select |
| Eine kurze Liste von Aktionen hinter einem Auslöser | dropdown-menu |
| Der Benutzer muss sich entscheiden, bevor er etwas anderes tut | dialog |
| Zusätzliche Details, die nur einige Benutzer benötigen | tooltip |
| Zusammengehörige Steuerelemente | card |
KI-Zustände
- Reasoning Steps (
reasoning-steps): Zusammengeklappte Zeitleiste der Modellschritte; der Header benennt den aktuellen, der Körper zeigt sie alle. — Progressive Offenlegung · Referenz - Streaming Text (
streaming-text): Enthüllt ankommenden Text Zeichen für Zeichen in Lesegeschwindigkeit, mit einem Cursor, der markiert, wo das nächste Wort landet. — Wahrgenommene Latenz · Referenz - Thinking Indicator (
thinking-indicator): Drei atmende Punkte und ein Live-Label, die dem Benutzer sagen, dass das Modell arbeitet, und woran. — Sichtbarkeit des Systemstatus · Arbeitsillusion · Referenz - Tool Call Card (
tool-call-card): Zusammenklappbarer Datensatz eines Tool-Aufrufs: Name, Status, Dauer und die genauen Ein- und Ausgaben auf Anfrage. — Transparenz schafft Vertrauen · Referenz - Voice Wave (
voice-wave): Balken, die mit dem Mikrofonpegel steigen, damit der Benutzer sehen kann, dass er gehört wird, und sehen kann, wann nicht. — Sichtbarkeit des Systemstatus · Referenz
Kernkomponenten
- Badge (
badge): Kleiner Status-Chip in fünf Varianten; die warme mise-Variante ist für das eine Element reserviert, das hervorstechen muss. — Von-Restorff-Effekt · Referenz - Button (
button): Drückziel mit einer 150 ms Beruhigung und einem 2% Druck nach unten, sodass der Klick bestätigt wirkt. — Doherty-Schwelle · Referenz - Card (
card): Umrandete Oberfläche mit Kopf-, Inhalts- und Fußzeilen-Slots, die als eine Region gelesen wird, bevor jemand den Text liest. — Gesetz der gemeinsamen Region · Referenz - Checkbox (
checkbox): Quadratischer Umschalter, der sein Häkchen innerhalb von 150 ms nach dem Drücken füllt und zeichnet und die Änderung über aria-checked mitteilt. — Sofortiges Feedback · Referenz - Dialog (
dialog): Modale Oberfläche, die alles andere abdunkelt und den Fokus hält, bis der Benutzer eine Frage beantwortet. — Aufmerksamkeitstrichter · Referenz - Dropdown Menu (
dropdown-menu): Kompaktes Aktionsmenü, das von einem Button aus geöffnet wird und sich bei Auswahl schließt, mit Pfeiltasten-Navigation und einer destruktiven Variante. — Hick'sches Gesetz · Referenz - Input (
input): Einzeiliges Textfeld, 36 px hoch, passend zum Button, das den ungültigen Zustand auf seinen Rand und Ring verschiebt. — Fitts'sches Gesetz · Referenz - Label (
label): Beschriftung, die an ein Steuerelement gebunden ist: Klicken fokussiert das Feld, und es wird abgedunkelt, wenn das Feld deaktiviert ist. — Gesetz der Nähe · Referenz - Popover (
popover): Kleines schwebendes Panel, das an dem Steuerelement verankert ist, das es geöffnet hat, für ein Formular oder Detail, das keinen vollständigen Dialog benötigt. — Räumliches Gedächtnis · Referenz - Select (
select): Dropdown für eine Auswahl aus einer Liste, mit Platzhalter, Gruppen, einem Häkchen auf der ausgewählten Zeile und vollständiger Tastaturunterstützung. — Standardeffekt · Referenz - Skeleton (
skeleton): Pulsierender Platzhalter, geformt wie der Inhalt, der geladen wird, damit die Wartezeit kürzer erscheint als bei einem Spinner. — Wahrgenommene Leistung · Referenz - Switch (
switch): Schiebender Ein/Aus-Schalter, dessen Daumen 16 px in 150 ms zurücklegt und den physischen Schalter nachahmt, den er imitiert. — Affordanz · Referenz - Tabs (
tabs): Segmentiertes Steuerelement, das ein Panel gegen ein anderes an Ort und Stelle austauscht, sodass zusammengehörige Ansichten einen einzigen Platz auf dem Bildschirm teilen. — Chunking · Referenz - Textarea (
textarea): Mehrzeiliges Textfeld, das bei 64 px beginnt und mit seinem Inhalt wächst, sodass die Antwort nie hinter einer Bildlaufleiste versteckt ist. — Chunking · Referenz - Tooltip (
tooltip): Einzeiliger Hinweis, der bei Hover oder Fokus ohne Verzögerung erscheint und mit dem Zeiger verschwindet, für Details, die keinen Bildschirmplatz verdienen. — Progressive Offenlegung · Referenz
Quelle und Probleme: https://github.com/kimjusnu/miseui