Layout Prompt Examples

Reading about layout techniques is useful — but having copy-paste-ready prompts for common UI patterns is what actually speeds up your work. This page collects complete, production-tested prompt examples you can use immediately.

---

Landing Page Layout

Create a modern landing page layout with the following sections:

1. Hero section — headline on the left, feature image on the right.
   On mobile, the image stacks below the headline.

2. Features section — 3 columns with icon, heading, and brief description per feature.
   Collapses to 1 column on mobile.

3. Testimonial section — centered quote with client photo and name.

4. Call-to-action section — centered heading and a prominent signup button.

Use Tailwind CSS throughout.
Cards: subtle shadow, rounded corners (8px), 24px padding.
Sections: 80px vertical padding on desktop, 40px on mobile.
Breakpoints: 768px (tablet) and 640px (mobile).

---

Dashboard Layout

Design a dashboard layout with:

1. Fixed left sidebar (240px wide):
   - Logo at top
   - Navigation links in the middle with active state highlight
   - User profile section at the bottom
   On mobile: collapses to a slide-in drawer triggered by a hamburger icon.

2. Top navigation bar:
   - Search input (center)
   - Notification bell icon (right)
   - Settings dropdown (right)

3. Main content area (grid layout):
   - Row 1: 4 small metric cards (1×1 each) — revenue, users, orders, conversion
   - Row 2: large line chart (2×1) and donut chart (2×1)
   - Row 3: data table (full width)

Card styling: white background, 1px border (#F0F0F0), 8px radius, 16px padding.
Main background: light gray (#F9F9F9). Sidebar background: white.
Make it responsive with appropriate stacking on tablet and mobile.

---

E-commerce Product Page

Create an e-commerce product page layout:

1. Product section (desktop: two-column, 60%/40%):
   Left column (60%): main product image with 4 thumbnails below for gallery navigation.
   Right column (40%):
   - Product name (24px, bold)
   - Star rating and review count
   - Price (bold, large)
   - Color swatch selector
   - Size selector (S, M, L, XL) as toggle buttons
   - Short description (3–4 lines)
   - Add to cart button (full width, primary color)
   - Shipping info row (icon + text)

2. Tabs section: Description | Specifications | Reviews (3 columns of review cards)

3. Related products grid (4 per row on desktop, 2 on tablet, 1 on mobile)

On mobile: stack with gallery at top, product details below, tabs last.
Ensure clear visual hierarchy for quick scanning.

---

Mobile App in Device Frame

Design a fitness tracking app screen and place it inside an iPhone 15 Pro frame.

Screen contents:
1. Status bar: full battery, good signal, time showing 10:30 AM
2. Today's summary: three metric cards (Steps, Calories, Distance) in a horizontal row
3. Circular progress ring in the center showing 68% of daily goal
4. Recent activity feed below: scrollable list with date, activity type, small spark chart, and duration per day
5. Bottom tab bar: Dashboard, Workouts, Nutrition, Profile

Device framing:
- iPhone 15 Pro frame (accurate bezels and Dynamic Island)
- Display at a slight angle (10°) with a soft drop shadow
- Place the device on a gradient background (light purple to blue)
- Add a faint reflection beneath the device

---

Personal Portfolio Bento

Create a personal portfolio homepage with a 4-column bento grid layout:

1. Featured project (2×2, top-left):
   - Full bleed project image
   - Overlay with project title and 1-line description (bottom of card)
   - Subtle dark gradient on the overlay

2. About me (1×1):
   - Circular profile photo (80px)
   - Name and 2-line bio

3. Skills/tools (1×2):
   - Section label "Tools I use"
   - Icon grid: React, TypeScript, Figma, Node.js, etc.

4. Three project cards (1×1 each):
   - Thumbnail image
   - Hover overlay revealing project name, tech stack, and a view link

5. Contact card (1×1):
   - GitHub, LinkedIn, and email icon links

All cells: 16px gap, 12px border-radius, subtle hover transitions (150ms ease).
Mobile: single column, stacking order — featured → about → skills → projects → contact.

---

Layout Prompt Best Practices

When writing your own layout prompts, follow these principles:

1. Lead with the overall structure Describe the top-level layout before the details of individual components.

2. Specify numbers, not adjectives “24px padding” instead of “comfortable padding.” “4 columns” instead of “a multi-column grid.”

3. Always include responsive behavior State what changes at each breakpoint, even if it’s just “collapses to single column on mobile.”

4. Reference a framework explicitly “Use Tailwind CSS” or “use CSS Grid with custom properties” removes guesswork.

5. Describe visual hierarchy Tell the AI which element should draw the eye first, and which are secondary.

---