Initial commit: 79+ design patterns, LLM prompts, and assets
This commit is contained in:
commit
2b42a76d6d
112 files changed
+13652
No files matched your search
@@ -0,0 +1,81 @@
|
||||
---
|
||||
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
|
||||
```
|
||||
Reference in new issue
Block a user