Design a Bottom Sheet for this situation: Phone map filters open in a draggable sheet. It can peek, fully open, or close. Use Glassmorphism as a restrained visual direction and Spring Animation for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.
Turn UI words into a clear build request
Choose what the UI does, how it looks, and how it moves. Then copy a clear request for your developer or AI coding helper.
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.
Design a Command Palette for this situation: Press Command-K, type “Invite teammate,” and run that action from the list. Use Minimalism as a restrained visual direction and Reduced Motion for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.
Design a Form Validation for this situation: If a password breaks a rule, the page explains it beside the field. Screen readers can connect the message to that field. Use Neobrutalism as a restrained visual direction and Microinteraction for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.
Design a Inspector for this situation: Selecting a chart opens an inspector for axes, colors, and labels. The canvas stays visible. Use Liquid Glass as a restrained visual direction and Transition for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.
Design a Sign-In Form for this situation: A returning customer signs in with email and password. They can show the password, paste it from a password manager, or recover access without losing their place. Use Swiss Style as a restrained visual direction and Enter, Exit & Crossfade for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.
Design a Empty, Error & Success State — Learning Bundle for this situation: A new project list explains how to create the first item. If the network fails, Retry appears and the filters stay saved. Use Claymorphism as a restrained visual direction and Easing for feedback. Keep semantic HTML, keyboard access, visible focus, reduced-motion support, and the project's existing rules.