---
name: layout-prompts
title: Layout Pattern LLM Prompts
description: Ready-to-use prompts for generating layouts with wiki patterns.
---

# Layout Pattern Prompts

## 1. Bento Grid Prompt

```
Create a bento-grid layout section with 6 cards. Each card should have:
- 16px border radius
- 24px padding
- 1px solid border with rgba(255,255,255,0.06)
- Hover: translateY(-4px), border-color changes to accent
- Staggered entrance animation with 0.08s delay
- 3 cards span 2 columns, 3 cards span 1 column
- Use CSS grid with gap: 24px
```

## 2. Hero Section Prompt

```
Create a hero section with:
- Centered layout
- H1 with gradient text (clip-background)
- Subtitle with max-width 600px
- Primary CTA button with magnetic hover effect
- Secondary CTA (ghost button)
- Animated gradient orbs in background
- min-height: 80vh
- padding: 128px 0
```

## 3. Feature List Prompt

```
Create a feature list section with:
- 4 feature items
- Each: checkmark icon (32x32 circle), title, description
- Border-bottom between items
- Hover: translateX(8px)
- Green checkmark: #10b981
- Clean spacing: 32px padding per item
```

## 4. Pricing Table Prompt

```
Create a 3-column pricing table:
- Free, Standard ($5000), Premium ($15000/mo)
- Standard card highlighted with accent border
- Feature list with checkmarks
- CTA button per card
- Responsive: stack on mobile
```

## 5. Testimonials Grid Prompt

```
Create a testimonials section with:
- 3 testimonial cards
- Star rating (5 stars)
- Quote text
- Author: avatar, name, position
- Cards with hover lift effect
- Grid: 3 columns on desktop, 1 on mobile
```

## 6. Sticky Feature Prompt

```
Create a sticky feature section:
- Left: scrolling text blocks (3 blocks)
- Right: sticky image/visual
- Each text block: number, title, description
- Sticky top: 100px
- Min-height: 100vh
- Padding: 128px 0
```