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

2026-06-20 17:06:07 +05:00
commit 2b42a76d6d
@@ -0,0 +1,113 @@
+---
+title: Premium Design Wiki — Overview
+description: Central index for all 79 design patterns, LLM prompts, and assets.
+version: 2.1.0
+date: 2026-06-20
+---
+
+# Premium Design Wiki
+
+## Mission
+Encode premium web design taste into reusable patterns so LLMs can generate professional, conversion-optimized, visually stunning websites.
+
+## 📊 Progress
+
+| Category | Patterns | Status |
+|----------|----------|--------|
+| 🏗️ Layout | 7 patterns | ✅ Complete |
+| 🏃 Motion | 7 patterns | ✅ Complete |
+| ✒️ Typography | 3 patterns | ✅ Complete |
+| 🎬 Media | 4 patterns | ✅ Complete |
+| 🧠 Psychology | 4 patterns | ✅ Complete |
+| 🎨 Systems | 6 patterns | ✅ Complete |
+| 🌐 Mobile | 21 token systems | ✅ Complete |
+| 🎯 Landing | 25 patterns | ✅ Complete |
+| **Total** | **79 patterns** | **✅ Complete** |
+
+## 📁 Structure
+
+```
+wow-design-wiki/
+├── 00-overview.md
+├── concepts/
+│   ├── industry-color-systems.md
+│   ├── mobile-design-tokens.md
+│   └── ux-guidelines-99.md
+├── layout/
+│   ├── bento-grid.md
+│   ├── card-grid.md
+│   ├── feature-list.md
+│   ├── full-bleed-content.md
+│   ├── hero-variations.md
+│   ├── landing-patterns.md
+│   ├── overlapping-layers.md
+│   └── sticky-feature.md
+├── motion/
+│   ├── animated-gradient.md
+│   ├── hover-micro-interaction.md
+│   ├── magnetic-button.md
+│   ├── page-transitions.md
+│   ├── parallax-scroll.md
+│   ├── procedural-patterns.md
+│   └── staggered-reveal.md
+├── typography/
+│   ├── font-pairing.md
+│   ├── gradient-text-reveal.md
+│   └── kinetic-text.md
+├── media/
+│   ├── animated-illustration.md
+│   ├── image-parallax.md
+│   ├── svg-animation.md
+│   └── video-mask.md
+├── psychology/
+│   ├── cognitive-fluency.md
+│   ├── testimonials.md
+│   ├── trust-signals.md
+│   └── visual-hierarchy.md
+├── system/
+│   ├── component-patterns.md
+│   ├── css-architecture.md
+│   ├── design-tokens.md
+│   ├── glassmorphism.md
+│   ├── noise-texture.md
+│   └── responsive-patterns.md
+├── prompts/
+│   ├── 00-master-prompt.md
+│   ├── layout/00-layout-prompts.md
+│   ├── motion/00-motion-prompts.md
+│   ├── typography/00-typography-prompts.md
+│   ├── media/00-media-prompts.md
+│   ├── psychology/00-psychology-prompts.md
+│   └── system/00-system-prompts.md
+└── assets/
+    ├── icons/ (22 SVG icons)
+    ├── gradients/
+    └── patterns/
+```
+
+## 🎯 How to Use
+
+### For LLMs:
+1. Read `prompts/00-master-prompt.md` for system instructions
+2. Reference specific pattern files (e.g., `layout/bento-grid.md`)
+3. Use prompts from category folders for quick generation
+
+### For Designers:
+1. Review pattern files for code examples
+2. Use assets for icons and graphics
+3. Validate with CV Service
+
+## 📐 Design System
+
+- **Colors**: Dark theme (#0a0a0a bg, #111111 surfaces)
+- **Accent**: #6366f1 (indigo)
+- **Typography**: Inter font, 1.25 scale ratio
+- **Spacing**: 4-128px scale
+- **Motion**: 0.3s ease-out for hovers, 0.6s for reveals
+
+## 🚀 Next Steps
+
+1. Test patterns with CV Service validation
+2. Create real-world examples
+3. Export as HyperFrames composition
+4. Package as SaaS tool for agencies