Initial commit: 79+ design patterns, LLM prompts, and assets

prompts/00-master-prompt.md

@@ -0,0 +1,67 @@
+---
+name: 00-master-prompt
+title: Master LLM Prompt — Premium Design Generation
+description: Universal prompt for generating premium web pages using wiki patterns.
+version: 1.0.0
+---
+
+# Master LLM Prompt for Premium Design Generation
+
+## System Prompt
+
+```
+You are an elite frontend designer and developer. You create award-winning, high-converting landing pages using modern HTML, CSS, and vanilla JavaScript.
+
+Design principles:
+1. Premium dark theme (#0a0a0a background, #111111 surfaces)
+2. Accent color: #6366f1 (indigo)
+3. Typography: Inter font, 1.25 scale ratio
+4. Spacing: 4-128px scale (4,8,12,16,20,24,32,40,48,64,80,96,128)
+5. Motion: 0.3s ease-out for hovers, 0.6s ease for reveals
+6. Accessibility: WCAG AA minimum, skip-link, focus-visible
+7. Mobile-first: breakpoints at 768px, 1024px
+
+Always use these CSS custom properties:
+--color-bg: #0a0a0a
+--color-surface: #111111
+--color-surface-hover: #1a1a1a
+--color-border: rgba(255,255,255,0.06)
+--color-border-hover: rgba(255,255,255,0.12)
+--color-text-primary: #f5f5f5
+--color-text-secondary: #b0b0b0
+--color-accent: #6366f1
+--color-accent-hover: #818cf8
+--ease-out: cubic-bezier(0.4, 0, 0.2, 1)
+--duration-normal: 300ms
+
+Generate complete, production-ready HTML files with:
+- Semantic HTML5 (<header>, <main>, <footer>, <article>, <section>)
+- CSS custom properties for theming
+- Vanilla JavaScript for interactions
+- Smooth animations with CSS transitions
+- Responsive design with media queries
+- Skip-link for accessibility
+- Preconnect to Google Fonts
+- Performance optimized (will-change, lazy loading)
+```
+
+## Usage
+
+```
+Use pattern layout/bento-grid.md for card layouts
+Use pattern motion/staggered-reveal.md for entrance animations
+Use pattern psychology/visual-hierarchy.md for conversion flow
+```
+
+## Anti-Patterns to Avoid
+
+1. No Bootstrap/Tailwind — custom CSS only
+2. No external JS libraries unless necessary
+3. No hardcoded values — use CSS variables
+4. No inline styles
+5. No !important
+6. No >2 fonts
+7. No >3 colors
+8. No animations < 200ms
+9. No images without alt text
+10. No forms without labels

prompts/layout/00-layout-prompts.md

@@ -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
+```

prompts/media/00-media-prompts.md

@@ -0,0 +1,50 @@
+---
+name: media-prompts
+title: Media Pattern LLM Prompts
+description: Ready-to-use prompts for media with wiki patterns.
+---
+
+# Media Pattern Prompts
+
+## 1. Video Mask
+
+```
+Create video mask effect:
+- Text with video inside using -webkit-mask-image: text
+- Video: autoplay, muted, loop, playsinline
+- Width: 100% of container
+- Font-size: clamp(4rem, 12vw, 10rem)
+- Font-weight: 900
+- Fallback: static image for mobile
+```
+
+## 2. Image Parallax
+
+```
+Create image parallax:
+- Section: height 100vh, overflow hidden
+- Image: position absolute, height 140%
+- GSAP ScrollTrigger: yPercent: 50, scrub: 1
+- Will-change: transform
+- Mobile: static image (no parallax)
+```
+
+## 3. SVG Animation
+
+```
+Create SVG icon animation:
+- Path with stroke-dasharray: 30, stroke-dashoffset: 30
+- Animation: draw 0.5s ease forwards
+- Icon: 48x48px
+- Color: accent (#6366f1)
+- Hover: scale(1.2) rotate(10deg)
+- Transition: 0.3s ease
+```
+
+## Anti-Patterns
+
+1. Never autoplay video with sound
+2. Never use images > 5MB
+3. Always use WebP/AVIF
+4. Always lazy load below-fold images
+5. Never skip alt text

prompts/motion/00-motion-prompts.md

@@ -0,0 +1,105 @@
+---
+name: motion-prompts
+title: Motion Pattern LLM Prompts
+description: Ready-to-use prompts for generating animations with wiki patterns.
+---
+
+# Motion Pattern Prompts
+
+## 1. Staggered Reveal
+
+```
+Create a staggered reveal animation:
+- 3 elements (cards, items, headings)
+- Each appears with opacity: 0 → 1, translateY(30px) → 0
+- Delay between each: 0.08s (80ms)
+- Duration: 0.6s
+- Easing: ease-out
+- Trigger: IntersectionObserver when element enters viewport
+- Use CSS transitions, not JS animation
+- Add data-stagger-index attribute to each element
+```
+
+## 2. Magnetic Button
+
+```
+Create a magnetic button effect:
+- Button with padding 16px 32px
+- Follow cursor within 80px radius
+- Strength: 0.2
+- Use requestAnimationFrame for smooth movement
+- Reset on mouseleave
+- Only apply on devices with pointer: fine
+- Easing: cubic-bezier(0.25, 0.1, 0.25, 1)
+```
+
+## 3. Animated Gradient
+
+```
+Create an animated gradient background:
+- 3 gradient orbs (indigo, pink, cyan)
+- Each: 400x400px, border-radius: 50%
+- Blur: 100px
+- Float animation: 20s infinite
+- Different delays: 0s, -7s, -14s
+- Opacity: 0.3
+- Position: absolute, full-height section
+- Use CSS keyframes, not JS
+```
+
+## 4. Hover Micro-interactions
+
+```
+Create hover micro-interactions:
+- Cards: translateY(-4px), box-shadow on hover
+- Buttons: scale(1.02), color shift
+- Links: underline animation (width 0 → 100%)
+- All: transition 0.3s ease-out
+- No hover effects on touch devices
+- Use will-change for performance
+```
+
+## 5. Parallax Scroll
+
+```
+Create a parallax scroll effect:
+- Background layer: yPercent: 30
+- Midground layer: yPercent: 50
+- Foreground layer: yPercent: 80
+- Use GSAP ScrollTrigger with scrub: 1
+- Start: "top bottom", end: "bottom top"
+- Fallback: CSS only for non-GSAP sites
+- Respect prefers-reduced-motion
+```
+
+## 6. Page Transitions
+
+```
+Create smooth page transitions:
+- Fade overlay: black background, opacity 0 → 1, duration 300ms
+- Content swap during transition
+- Exit: opacity 1 → 0, duration 300ms
+- Use CSS transitions, not JS animation
+- Trigger: link click
+- Only apply on desktop (pointer: fine)
+- Respect prefers-reduced-motion
+```
+
+## 7. Procedural Pattern Generation
+
+```
+Create a procedural pattern generation system:
+- Canvas 2D rendering at 1920×1080, export at 4× resolution (7680×4320)
+- Grid-based placement: 20px grid, occupancy grid for collision detection
+- BFS proximity map: calculate distance from each grid cell to title elements
+- Seeded RNG (mulberry32): deterministic layout — same seed = same result
+- 7 animation types: dots (stagger fade), capsule (center grow), circle (pie-fill),
+  arrow (slide up), square (scale 1.6→1), stripes (stagger slide), cross (scale)
+- 3-phase timeline: Phase 1 (title reveal) → Phase 2 (pattern reveal) → Phase 3 (dots pulse)
+- Phase 2+3 loop: cycle = 4 × durationMs
+- Color pairs: algorithmic bg/fg generation from luminance (darken/mix)
+- SVG pattern convention: 40×40, white=bg, black=fg, runtime colorize
+- Export: 3 PNG layers (titles, patterns, dots) at 24fps, ZIP archive
+- Parameters: density (1-20), proximity (1-20), stagger (0-5)
+- Easing: easeOutCubic default, 7 easing types
+```

prompts/psychology/00-psychology-prompts.md

@@ -0,0 +1,51 @@
+---
+name: psychology-prompts
+title: Psychology Pattern LLM Prompts
+description: Ready-to-use prompts for conversion patterns with wiki patterns.
+---
+
+# Psychology Pattern Prompts
+
+## 1. Visual Hierarchy
+
+```
+Create visual hierarchy for CTA:
+- H1: 48-64px, weight 800
+- H2: 32-40px, weight 700
+- Body: 16-18px, weight 400
+- CTA button: 16px, weight 600, accent color
+- Use size contrast 2:1 between headings and body
+- CTA should be most contrasting element on page
+- Whitespace: 128px between sections
+```
+
+## 2. Testimonials
+
+```
+Create testimonials section:
+- 3 testimonial cards
+- Each: 5 stars, quote, author avatar, name, position
+- Grid: 3 columns desktop, 1 column mobile
+- Cards: 20px border-radius, 24px padding
+- Hover: translateY(-4px), border-color accent
+- Social proof: "Trusted by 500+ agencies"
+```
+
+## 3. Trust Signals
+
+```
+Create trust signals section:
+- Security badges: SSL, GDPR, SOC2
+- Uptime: 99.9% indicator
+- Client logos: monochrome, opacity 0.4
+- Guarantee: 30-day money-back
+- Place after hero, before pricing
+```
+
+## Anti-Patterns
+
+1. Never fake testimonials
+2. Never use more than 5 client logos
+3. Never put CTA before trust signals
+4. Never use small text (<16px)
+5. Never clutter with too many badges

prompts/system/00-system-prompts.md

@@ -0,0 +1,50 @@
+---
+name: system-prompts
+title: System Pattern LLM Prompts
+description: Ready-to-use prompts for system patterns with wiki patterns.
+---
+
+# System Pattern Prompts
+
+## 1. Design Tokens
+
+```
+Create complete design tokens:
+- Color palette: bg, surface, border, text (primary, secondary, muted), accent
+- Spacing: 4,8,12,16,20,24,32,40,48,64,80,96,128
+- Typography: xs(12), sm(14), base(16), lg(18), xl(20), 2xl(24), 3xl(30), 4xl(36)
+- Motion: ease-out, duration-normal(300ms), duration-slow(500ms)
+- Border-radius: sm(4), md(8), lg(16), xl(24), full(9999)
+- All as CSS custom properties
+```
+
+## 2. Component Patterns
+
+```
+Create reusable component patterns:
+- Buttons: primary, secondary, ghost (3 variants)
+- Inputs: default, focus, error (3 states)
+- Cards: default, featured (2 variants)
+- Badges: default, accent (2 variants)
+- All with consistent padding, border-radius, transitions
+```
+
+## 3. CSS Architecture
+
+```
+Create CSS architecture:
+- File structure: tokens/, base/, components/, layouts/, pages/
+- Naming: BEM methodology
+- No !important
+- No hardcoded values
+- Mobile-first media queries
+- Custom properties for theming
+```
+
+## Anti-Patterns
+
+1. Never use inline styles
+2. Never use !important
+3. Never hardcode values
+4. Never mix design systems
+5. Never skip accessibility

prompts/typography/00-typography-prompts.md

@@ -0,0 +1,55 @@
+---
+name: typography-prompts
+title: Typography Pattern LLM Prompts
+description: Ready-to-use prompts for typography with wiki patterns.
+---
+
+# Typography Pattern Prompts
+
+## 1. Gradient Text
+
+```
+Create gradient text effect:
+- H1 with font-size: clamp(2.5rem, 6vw, 4rem)
+- background: linear-gradient(135deg, #6366f1, #ec4899, #f43f5e)
+- background-clip: text
+- -webkit-text-fill-color: transparent
+- text-shadow: none
+- Letter-spacing: -0.02em
+- Font weight: 800
+- Line height: 1.1
+```
+
+## 2. Font Pairing
+
+```
+Create font pairing:
+- Headings: Inter, font-weight: 700-900
+- Body: Inter, font-weight: 400-500
+- Mono: JetBrains Mono
+- Scale ratio: 1.25
+- Body text: 16px minimum
+- Line height: 1.6 for body, 1.2 for headings
+- Max-width: 65ch for body text
+```
+
+## 3. Kinetic Text
+
+```
+Create kinetic text animation:
+- Each word wrapped in <span class="word">
+- opacity: 0, translateY(30px) initially
+- On scroll: opacity: 1, translateY(0)
+- Duration: 0.6s ease-out
+- Stagger: 0.1s between words
+- Use IntersectionObserver
+- Fallback: always visible text
+```
+
+## Anti-Patterns
+
+1. Never use < 16px for body text
+2. Never use line-height < 1.4
+3. Never use more than 2 fonts
+4. Never use all-caps for paragraphs
+5. Never use decorative fonts for body