Layout Prompts
About 5 minutes
Target audience: Those who want to give precise layout instructions to AI, those who want to learn responsive design prompt techniques
Prerequisites: Reading Design Prompting Basics first helps
Layout determines whether AI-generated UI feels usable or merely decorative. Instead of saying “put these side by side,” specify column counts, content priority, breakpoints, and spacing so the design survives real screen sizes.
This section groups the layout-focused articles. Start with responsive layout basics, then move into lists, grids, bento layouts, and recurring UI components such as modals and navigation.
| Page | What you’ll learn |
|---|---|
| Layout & Responsive Design | How to specify grids, flex layouts, and breakpoints |
| List Layout Prompts | User profiles, contacts, settings, notifications, and product lists |
| Grid Layout Prompts | Card grids, masonry layouts, feature grids, and dashboards |
| Bento Layout Prompts | Mixed-size cells for portfolios and dashboards |
| UI Component Layout Prompts | Modals, navigation bars, sidebars, footers, and toolbars |
| Layout Prompt Examples | Complete prompts for common UI patterns |
What Every Layout Prompt Should Specify
Section titled “What Every Layout Prompt Should Specify”Information priority — Make clear which elements should be seen first
Columns and spacing — Specify column counts and gaps for desktop, tablet, and mobile
Stacking order — State how sections collapse on mobile
Density and state — Adjust row height, card width, and spacing based on the type of UI