Entwirf ein Bottom Sheet (Bottom Sheet) für diese Situation: Telefonkartenfilter öffnen sich in einem verschiebbaren Fenster. Es kann blinzeln, vollständig geöffnet oder geschlossen sein. Nutze Glassmorphismus (Glassmorphism) als zurückhaltende visuelle Richtung und Federanimation (Spring Animation) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.
UI-Texte in eine klare Bauanfrage umwandeln
Wähle, was die UI macht, wie sie aussieht und wie sie sich bewegt. Kopiere dann eine klare Anfrage für deinen Entwickler oder deinen KI-Coding-Helfer.
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
Entwirf ein Command Palette (Command Palette) für diese Situation: Drücke Command-K, tippe „Teammitglied einladen“ und führe diese Aktion aus der Liste aus. Nutze Minimalismus (Minimalism) als zurückhaltende visuelle Richtung und Reduzierte Bewegung (Reduced Motion) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.
Entwirf ein Formularvalidierung (Form Validation) für diese Situation: Wenn ein Passwort eine Regel verletzt, erklärt die Seite dies neben dem Feld. Bildschirmlesegeräte können die Nachricht mit diesem Feld verbinden. Nutze Neobrutalismus (Neobrutalism) als zurückhaltende visuelle Richtung und Mikrointeraktion (Microinteraction) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.
Entwirf ein Inspektor (Inspector) für diese Situation: Das Auswählen eines Diagramms öffnet einen Inspektor für Achsen, Farben und Beschriftungen. Die Arbeitsfläche bleibt sichtbar. Nutze Flüssigglas (Liquid Glass) als zurückhaltende visuelle Richtung und Übergang (Transition) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.
Entwirf ein Anmeldeformular (Sign-In Form) für diese Situation: Ein zurückkehrender Kunde loggt sich mit E-Mail und Passwort ein. Er kann das Passwort zeigen, aus einem Passwort-Manager einfügen oder den Zugriff wiederherstellen, ohne seinen Platz zu verlieren. Nutze Schweizer Stil (Swiss Style) als zurückhaltende visuelle Richtung und Einblenden, Ausblenden & Überblenden (Enter, Exit & Crossfade) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.
Entwirf ein Leer-, Fehler- & Erfolgszustand — Lernpaket (Empty, Error & Success State — Learning Bundle) für diese Situation: Eine neue Projektliste erklärt, wie man das erste Element erstellt. Wenn das Netzwerk ausfällt, erscheint Retry und die Filter bleiben gespeichert. Nutze Claymorphism (Claymorphism) als zurückhaltende visuelle Richtung und Vereinfachung (Easing) für Feedback. Behalte semantisches HTML, Tastaturzugriff, sichtbaren Fokus, Unterstützung für reduzierte Bewegung und die bestehenden Projektregeln bei.