82 lines
1.8 KiB
Markdown
82 lines
1.8 KiB
Markdown
---
|
|
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
|
|
```
|