📖 Step 2: Design - UI/UX Basics#36 / 291
UI
User Interface
📖One-line summary
The screen itself that users see and interact with.
💡Easy explanation
The screen the user actually sees. Buttons, menus, inputs, images — every visible element is UI.
✨Example
Logo
HomeAboutContact
← Nav Bar
← Input
Search
← Button
← Cards
⚡Vibe coding prompt examples
>_
Build the admin page UI. Use a clean layout with sidebar nav, data table, filters, and pagination.
>_
Implement the chat UI for a mobile messenger app. Build speech bubbles, time stamps, read receipts, and the input field in KakaoTalk style.
>_
Build the settings page UI. Group toggle switches, radio buttons, and select boxes by section, and pin a Save Changes button at the bottom.
Try these prompts in your AI coding assistant!