📖 Step 2: Design - UI/UX Basics#31 / 291
Wireframe
Wireframe
📖One-line summary
A black-and-white skeleton that lays out structure without visual design.
💡Easy explanation
Like a blueprint before building a house — the basic skeleton of an app/site. No colors or images, just where things go.
✨Example
Wireframes sketching the UI skeleton
⚡Vibe coding prompt examples
>_
Build a wireframe for an e-commerce product list page in HTML/CSS. Include filters, sorting, and product card layout.
>_
Build a 3-step wireframe for a mobile app onboarding. The structure should swipe between steps and include a skip button.
>_
Build a low-fidelity wireframe for a dashboard screen. Lay out the sidebar, chart area, and data table.
Try these prompts in your AI coding assistant!