neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
152 lines
5.7 KiB
Markdown
152 lines
5.7 KiB
Markdown
---
|
|
title: Premium Design Wiki — Overview
|
|
description: Central index for all 82 design patterns, LLM prompts, and assets.
|
|
version: 2.2.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 |
|
|
| 🎬 Blender Pipeline | 1 pipeline spec | ✅ Complete |
|
|
| ⚙️ Deterministic Gen | 1 methodology | ✅ Complete |
|
|
| 🏢 Brand Design Systems | 74 brands (147 DESIGN.md) | ✅ Complete |
|
|
| **Total** | **82 patterns + 74 brand systems + assets** | **✅ 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
|
|
│ ├── pattern-animations.md
|
|
│ ├── procedural-patterns.md
|
|
│ └── staggered-reveal.md
|
|
├── typography/
|
|
│ ├── font-pairing.md
|
|
│ ├── gradient-text-reveal.md
|
|
│ └── kinetic-text.md
|
|
├── media/
|
|
│ ├── animated-illustration.md
|
|
│ ├── blender-pipeline.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
|
|
│ ├── deterministic-generation.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
|
|
├── design-systems/
|
|
│ ├── airbnb/
|
|
│ │ ├── DESIGN.md (brand analysis: colors, typography, components)
|
|
│ │ └── README.md
|
|
│ ├── stripe/
|
|
│ │ ├── DESIGN.md
|
|
│ │ └── README.md
|
|
│ ├── ... (72 more brands)
|
|
│ └── zapier/
|
|
│ ├── DESIGN.md
|
|
│ └── README.md
|
|
└── assets/
|
|
├── icons/
|
|
│ ├── carbon/ (2673 SVG icons, 2.5 MB)
|
|
│ │ ├── actions/ — add, delete, edit, save, download, upload, search...
|
|
│ │ ├── arrows/ — arrow--*, chevron--*, caret--*...
|
|
│ │ ├── communication/ — chat, email, message, phone, share...
|
|
│ │ ├── content/ — image, video, document, table, chart...
|
|
│ │ ├── data/ — analytics, bar-chart, pie-chart, funnel...
|
|
│ │ ├── development/ — code, api, terminal, server, database...
|
|
│ │ ├── editor/ — edit, pencil, highlight, font...
|
|
│ │ ├── navigation/ — chevron, caret, skip, home...
|
|
│ │ ├── people/ — user, avatar, people, team, profile...
|
|
│ │ ├── system/ — warning, error, checkmark, info, caution...
|
|
│ │ ├── media/ — play, pause, stop, volume, film...
|
|
│ │ ├── organization/ — app, folder, tag, bookmark, location...
|
|
│ │ ├── shapes/ — circle, square, triangle, diamond...
|
|
│ │ ├── time/ — calendar, clock, date, schedule...
|
|
│ │ ├── weather/ — sun, moon, cloud, rain, snow...
|
|
│ │ ├── finance/ — currency, payment, credit-card, wallet...
|
|
│ │ ├── security/ — lock, shield, key, password, biometric...
|
|
│ │ └── file-types/ — PDF, DOC, XLS, PPT, CSV, ZIP...
|
|
│ ├── carbon-pictograms/ (1000 SVG pictograms, 2.0 MB)
|
|
│ │ └── 24x24 SVG illustrations (cloud, infrastructure, security...)
|
|
│ ├── 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
|