Features: - 30+ Custom Skills (cognitive, development, UI/UX, autonomous agents) - RalphLoop autonomous agent integration - Multi-AI consultation (Qwen) - Agent management system with sync capabilities - Custom hooks for session management - MCP servers integration - Plugin marketplace setup - Comprehensive installation script Components: - Skills: always-use-superpowers, ralph, brainstorming, ui-ux-pro-max, etc. - Agents: 100+ agents across engineering, marketing, product, etc. - Hooks: session-start-superpowers, qwen-consult, ralph-auto-trigger - Commands: /brainstorm, /write-plan, /execute-plan - MCP Servers: zai-mcp-server, web-search-prime, web-reader, zread - Binaries: ralphloop wrapper Installation: ./supercharge.sh
30 KiB
30 KiB
| 1 | No | UI_Category | Recommended_Pattern | Style_Priority | Color_Mood | Typography_Mood | Key_Effects | Decision_Rules | Anti_Patterns | Severity |
|---|---|---|---|---|---|---|---|---|---|---|
| 2 | 1 | SaaS (General) | Hero + Features + CTA | Glassmorphism + Flat Design | Trust blue + Accent contrast | Professional + Hierarchy | Subtle hover (200-250ms) + Smooth transitions | {"if_ux_focused": "prioritize-minimalism", "if_data_heavy": "add-glassmorphism"} | Excessive animation + Dark mode by default | HIGH |
| 3 | 2 | Micro SaaS | Minimal & Direct + Demo | Flat Design + Vibrant & Block | Vibrant primary + White space | Bold + Clean typography | Large CTA hover (300ms) + Scroll reveal | {"if_quick_onboarding": "reduce-steps", "if_demo_available": "feature-interactive-demo"} | Complex onboarding flow + Cluttered layout | HIGH |
| 4 | 3 | E-commerce | Feature-Rich Showcase | Vibrant & Block-based | Brand primary + Success green | Engaging + Clear hierarchy | Card hover lift (200ms) + Scale effect | {"if_luxury": "switch-to-liquid-glass", "if_conversion_focused": "add-urgency-colors"} | Flat design without depth + Text-heavy pages | HIGH |
| 5 | 4 | E-commerce Luxury | Feature-Rich Showcase | Liquid Glass + Glassmorphism | Premium colors + Minimal accent | Elegant + Refined typography | Chromatic aberration + Fluid animations (400-600ms) | {"if_checkout": "emphasize-trust", "if_hero_needed": "use-3d-hyperrealism"} | Vibrant & Block-based + Playful colors | HIGH |
| 6 | 5 | Healthcare App | Social Proof-Focused | Neumorphism + Accessible & Ethical | Calm blue + Health green | Readable + Large type (16px+) | Soft box-shadow + Smooth press (150ms) | {"must_have": "wcag-aaa-compliance", "if_medication": "red-alert-colors"} | Bright neon colors + Motion-heavy animations + AI purple/pink gradients | HIGH |
| 7 | 6 | Fintech/Crypto | Conversion-Optimized | Glassmorphism + Dark Mode (OLED) | Dark tech colors + Vibrant accents | Modern + Confident typography | Real-time chart animations + Alert pulse/glow | {"must_have": "security-badges", "if_real_time": "add-streaming-data"} | Light backgrounds + No security indicators | HIGH |
| 8 | 7 | Education | Feature-Rich Showcase | Claymorphism + Micro-interactions | Playful colors + Clear hierarchy | Friendly + Engaging typography | Soft press (200ms) + Fluffy elements | {"if_gamification": "add-progress-animation", "if_children": "increase-playfulness"} | Dark modes + Complex jargon | MEDIUM |
| 9 | 8 | Portfolio/Personal | Storytelling-Driven | Motion-Driven + Minimalism | Brand primary + Artistic | Expressive + Variable typography | Parallax (3-5 layers) + Scroll-triggered reveals | {"if_creative_field": "add-brutalism", "if_minimal_portfolio": "reduce-motion"} | Corporate templates + Generic layouts | MEDIUM |
| 10 | 9 | Government/Public | Minimal & Direct | Accessible & Ethical + Minimalism | Professional blue + High contrast | Clear + Large typography | Clear focus rings (3-4px) + Skip links | {"must_have": "wcag-aaa", "must_have": "keyboard-navigation"} | Ornate design + Low contrast + Motion effects + AI purple/pink gradients | HIGH |
| 11 | 10 | Fintech (Banking) | Trust & Authority | Minimalism + Accessible & Ethical | Navy + Trust Blue + Gold | Professional + Trustworthy | Smooth state transitions + Number animations | {"must_have": "security-first", "if_dashboard": "use-dark-mode"} | Playful design + Unclear fees + AI purple/pink gradients | HIGH |
| 12 | 11 | Social Media App | Feature-Rich Showcase | Vibrant & Block-based + Motion-Driven | Vibrant + Engagement colors | Modern + Bold typography | Large scroll animations + Icon animations | {"if_engagement_metric": "add-motion", "if_content_focused": "minimize-chrome"} | Heavy skeuomorphism + Accessibility ignored | MEDIUM |
| 13 | 12 | Startup Landing | Hero-Centric + Trust | Motion-Driven + Vibrant & Block | Bold primaries + Accent contrast | Modern + Energetic typography | Scroll-triggered animations + Parallax | {"if_pre_launch": "use-waitlist-pattern", "if_video_ready": "add-hero-video"} | Static design + No video + Poor mobile | HIGH |
| 14 | 13 | Gaming | Feature-Rich Showcase | 3D & Hyperrealism + Retro-Futurism | Vibrant + Neon + Immersive | Bold + Impactful typography | WebGL 3D rendering + Glitch effects | {"if_competitive": "add-real-time-stats", "if_casual": "increase-playfulness"} | Minimalist design + Static assets | HIGH |
| 15 | 14 | Creative Agency | Storytelling-Driven | Brutalism + Motion-Driven | Bold primaries + Artistic freedom | Bold + Expressive typography | CRT scanlines + Neon glow + Glitch effects | {"must_have": "case-studies", "if_boutique": "increase-artistic-freedom"} | Corporate minimalism + Hidden portfolio | HIGH |
| 16 | 15 | Wellness/Mental Health | Social Proof-Focused | Neumorphism + Accessible & Ethical | Calm Pastels + Trust colors | Calming + Readable typography | Soft press + Breathing animations | {"must_have": "privacy-first", "if_meditation": "add-breathing-animation"} | Bright neon + Motion overload | HIGH |
| 17 | 16 | Restaurant/Food | Hero-Centric + Conversion | Vibrant & Block-based + Motion-Driven | Warm colors (Orange Red Brown) | Appetizing + Clear typography | Food image reveal + Menu hover effects | {"must_have": "high_quality_images", "if_delivery": "emphasize-speed"} | Low-quality imagery + Outdated hours | HIGH |
| 18 | 17 | Real Estate | Hero-Centric + Feature-Rich | Glassmorphism + Minimalism | Trust Blue + Gold + White | Professional + Confident | 3D property tour zoom + Map hover | {"if_luxury": "add-3d-models", "must_have": "map-integration"} | Poor photos + No virtual tours | HIGH |
| 19 | 18 | Travel/Tourism | Storytelling-Driven + Hero | Aurora UI + Motion-Driven | Vibrant destination + Sky Blue | Inspirational + Engaging | Destination parallax + Itinerary animations | {"if_experience_focused": "use-storytelling", "must_have": "mobile-booking"} | Generic photos + Complex booking | HIGH |
| 20 | 19 | SaaS Dashboard | Data-Dense Dashboard | Data-Dense + Heat Map | Cool to Hot gradients + Neutral grey | Clear + Readable typography | Hover tooltips + Chart zoom + Real-time pulse | {"must_have": "real-time-updates", "if_large_dataset": "prioritize-performance"} | Ornate design + Slow rendering | HIGH |
| 21 | 20 | B2B SaaS Enterprise | Feature-Rich Showcase | Trust & Authority + Minimal | Professional blue + Neutral grey | Formal + Clear typography | Subtle section transitions + Feature reveals | {"must_have": "case-studies", "must_have": "roi-messaging"} | Playful design + Hidden features + AI purple/pink gradients | HIGH |
| 22 | 21 | Music/Entertainment | Feature-Rich Showcase | Dark Mode (OLED) + Vibrant & Block-based | Dark (#121212) + Vibrant accents + Album art colors | Modern + Bold typography | Waveform visualization + Playlist animations | {"must_have": "audio-player-ux", "if_discovery_focused": "add-playlist-recommendations"} | Cluttered layout + Poor audio player UX | HIGH |
| 23 | 22 | Video Streaming/OTT | Hero-Centric + Feature-Rich | Dark Mode (OLED) + Motion-Driven | Dark bg + Poster colors + Brand accent | Bold + Engaging typography | Video player animations + Content carousel (parallax) | {"must_have": "continue-watching", "if_personalized": "add-recommendations"} | Static layout + Slow video player | HIGH |
| 24 | 23 | Job Board/Recruitment | Conversion-Optimized + Feature-Rich | Flat Design + Minimalism | Professional Blue + Success Green + Neutral | Clear + Professional typography | Search/filter animations + Application flow | {"must_have": "advanced-search", "if_salary_focused": "highlight-compensation"} | Outdated forms + Hidden filters | HIGH |
| 25 | 24 | Marketplace (P2P) | Feature-Rich Showcase + Social Proof | Vibrant & Block-based + Flat Design | Trust colors + Category colors + Success green | Modern + Engaging typography | Review star animations + Listing hover effects | {"must_have": "seller-profiles", "must_have": "secure-payment"} | Low trust signals + Confusing layout | HIGH |
| 26 | 25 | Logistics/Delivery | Feature-Rich Showcase + Real-Time | Minimalism + Flat Design | Blue (#2563EB) + Orange (tracking) + Green | Clear + Functional typography | Real-time tracking animation + Status pulse | {"must_have": "tracking-map", "must_have": "delivery-updates"} | Static tracking + No map integration + AI purple/pink gradients | HIGH |
| 27 | 26 | Agriculture/Farm Tech | Feature-Rich Showcase | Organic Biophilic + Flat Design | Earth Green (#4A7C23) + Brown + Sky Blue | Clear + Informative typography | Data visualization + Weather animations | {"must_have": "sensor-dashboard", "if_crop_focused": "add-health-indicators"} | Generic design + Ignored accessibility + AI purple/pink gradients | MEDIUM |
| 28 | 27 | Construction/Architecture | Hero-Centric + Feature-Rich | Minimalism + 3D & Hyperrealism | Grey (#4A4A4A) + Orange (safety) + Blueprint Blue | Professional + Bold typography | 3D model viewer + Timeline animations | {"must_have": "project-portfolio", "if_team_collaboration": "add-real-time-updates"} | 2D-only layouts + Poor image quality + AI purple/pink gradients | HIGH |
| 29 | 28 | Automotive/Car Dealership | Hero-Centric + Feature-Rich | Motion-Driven + 3D & Hyperrealism | Brand colors + Metallic + Dark/Light | Bold + Confident typography | 360 product view + Configurator animations | {"must_have": "vehicle-comparison", "must_have": "financing-calculator"} | Static product pages + Poor UX | HIGH |
| 30 | 29 | Photography Studio | Storytelling-Driven + Hero-Centric | Motion-Driven + Minimalism | Black + White + Minimal accent | Elegant + Minimal typography | Full-bleed gallery + Before/after reveal | {"must_have": "portfolio-showcase", "if_booking": "add-calendar-system"} | Heavy text + Poor image showcase | HIGH |
| 31 | 30 | Coworking Space | Hero-Centric + Feature-Rich | Vibrant & Block-based + Glassmorphism | Energetic colors + Wood tones + Brand | Modern + Engaging typography | Space tour video + Amenity reveal animations | {"must_have": "virtual-tour", "must_have": "booking-system"} | Outdated photos + Confusing layout | MEDIUM |
| 32 | 31 | Cleaning Service | Conversion-Optimized + Trust | Soft UI Evolution + Flat Design | Fresh Blue (#00B4D8) + Clean White + Green | Friendly + Clear typography | Before/after gallery + Service package reveal | {"must_have": "price-transparency", "must_have": "trust-badges"} | Poor before/after imagery + Hidden pricing | HIGH |
| 33 | 32 | Home Services | Conversion-Optimized + Trust | Flat Design + Trust & Authority | Trust Blue + Safety Orange + Grey | Professional + Clear typography | Emergency contact highlight + Service menu animations | {"must_have": "emergency-contact", "must_have": "certifications-display"} | Hidden contact info + No certifications | HIGH |
| 34 | 33 | Childcare/Daycare | Social Proof-Focused + Trust | Claymorphism + Vibrant & Block-based | Playful pastels + Safe colors + Warm | Friendly + Playful typography | Parent portal animations + Activity gallery reveal | {"must_have": "parent-communication", "must_have": "safety-certifications"} | Generic design + Hidden safety info | HIGH |
| 35 | 34 | Senior Care/Elderly | Trust & Authority + Accessible | Accessible & Ethical + Soft UI Evolution | Calm Blue + Warm neutrals + Large text | Large + Clear typography (18px+) | Large touch targets + Clear navigation | {"must_have": "wcag-aaa", "must_have": "family-portal"} | Small text + Complex navigation + AI purple/pink gradients | HIGH |
| 36 | 35 | Medical Clinic | Trust & Authority + Conversion | Accessible & Ethical + Minimalism | Medical Blue (#0077B6) + Trust White | Professional + Readable typography | Online booking flow + Doctor profile reveals | {"must_have": "appointment-booking", "must_have": "insurance-info"} | Outdated interface + Confusing booking + AI purple/pink gradients | HIGH |
| 37 | 36 | Pharmacy/Drug Store | Conversion-Optimized + Trust | Flat Design + Accessible & Ethical | Pharmacy Green + Trust Blue + Clean White | Clear + Functional typography | Prescription upload flow + Refill reminders | {"must_have": "prescription-management", "must_have": "drug-interaction-warnings"} | Confusing layout + Privacy concerns + AI purple/pink gradients | HIGH |
| 38 | 37 | Dental Practice | Social Proof-Focused + Conversion | Soft UI Evolution + Minimalism | Fresh Blue + White + Smile Yellow | Friendly + Professional typography | Before/after gallery + Patient testimonial carousel | {"must_have": "before-after-gallery", "must_have": "appointment-system"} | Poor imagery + No testimonials | HIGH |
| 39 | 38 | Veterinary Clinic | Social Proof-Focused + Trust | Claymorphism + Accessible & Ethical | Caring Blue + Pet colors + Warm | Friendly + Welcoming typography | Pet profile management + Service animations | {"must_have": "pet-portal", "must_have": "emergency-contact"} | Generic design + Hidden services | MEDIUM |
| 40 | 39 | News/Media Platform | Hero-Centric + Feature-Rich | Minimalism + Flat Design | Brand colors + High contrast | Clear + Readable typography | Breaking news badge + Article reveal animations | {"must_have": "mobile-first-reading", "must_have": "category-navigation"} | Cluttered layout + Slow loading | HIGH |
| 41 | 40 | Legal Services | Trust & Authority + Minimal | Trust & Authority + Minimalism | Navy Blue (#1E3A5F) + Gold + White | Professional + Authoritative typography | Practice area reveal + Attorney profile animations | {"must_have": "case-results", "must_have": "credential-display"} | Outdated design + Hidden credentials + AI purple/pink gradients | HIGH |
| 42 | 41 | Beauty/Spa/Wellness Service | Hero-Centric + Social Proof | Soft UI Evolution + Neumorphism | Soft pastels (Pink Sage Cream) + Gold accents | Elegant + Calming typography | Soft shadows + Smooth transitions (200-300ms) + Gentle hover | {"must_have": "booking-system", "must_have": "before-after-gallery", "if_luxury": "add-gold-accents"} | Bright neon colors + Harsh animations + Dark mode | HIGH |
| 43 | 42 | Service Landing Page | Hero-Centric + Trust & Authority | Minimalism + Social Proof-Focused | Brand primary + Trust colors | Professional + Clear typography | Testimonial carousel + CTA hover (200ms) | {"must_have": "social-proof", "must_have": "clear-cta"} | Complex navigation + Hidden contact info | HIGH |
| 44 | 43 | B2B Service | Feature-Rich Showcase + Trust | Trust & Authority + Minimalism | Professional blue + Neutral grey | Formal + Clear typography | Section transitions + Feature reveals | {"must_have": "case-studies", "must_have": "roi-messaging"} | Playful design + Hidden credentials + AI purple/pink gradients | HIGH |
| 45 | 44 | Financial Dashboard | Data-Dense Dashboard | Dark Mode (OLED) + Data-Dense | Dark bg + Red/Green alerts + Trust blue | Clear + Readable typography | Real-time number animations + Alert pulse | {"must_have": "real-time-updates", "must_have": "high-contrast"} | Light mode default + Slow rendering | HIGH |
| 46 | 45 | Analytics Dashboard | Data-Dense + Drill-Down | Data-Dense + Heat Map | Cool→Hot gradients + Neutral grey | Clear + Functional typography | Hover tooltips + Chart zoom + Filter animations | {"must_have": "data-export", "if_large_dataset": "virtualize-lists"} | Ornate design + No filtering | HIGH |
| 47 | 46 | Productivity Tool | Interactive Demo + Feature-Rich | Flat Design + Micro-interactions | Clear hierarchy + Functional colors | Clean + Efficient typography | Quick actions (150ms) + Task animations | {"must_have": "keyboard-shortcuts", "if_collaboration": "add-real-time-cursors"} | Complex onboarding + Slow performance | HIGH |
| 48 | 47 | Design System/Component Library | Feature-Rich + Documentation | Minimalism + Accessible & Ethical | Clear hierarchy + Code-like structure | Monospace + Clear typography | Code copy animations + Component previews | {"must_have": "search", "must_have": "code-examples"} | Poor documentation + No live preview | HIGH |
| 49 | 48 | AI/Chatbot Platform | Interactive Demo + Minimal | AI-Native UI + Minimalism | Neutral + AI Purple (#6366F1) | Modern + Clear typography | Streaming text + Typing indicators + Fade-in | {"must_have": "conversational-ui", "must_have": "context-awareness"} | Heavy chrome + Slow response feedback | HIGH |
| 50 | 49 | NFT/Web3 Platform | Feature-Rich Showcase | Cyberpunk UI + Glassmorphism | Dark + Neon + Gold (#FFD700) | Bold + Modern typography | Wallet connect animations + Transaction feedback | {"must_have": "wallet-integration", "must_have": "gas-fees-display"} | Light mode default + No transaction status | HIGH |
| 51 | 50 | Creator Economy Platform | Social Proof + Feature-Rich | Vibrant & Block-based + Bento Box Grid | Vibrant + Brand colors | Modern + Bold typography | Engagement counter animations + Profile reveals | {"must_have": "creator-profiles", "must_have": "monetization-display"} | Generic layout + Hidden earnings | MEDIUM |
| 52 | 51 | Sustainability/ESG Platform | Trust & Authority + Data | Organic Biophilic + Minimalism | Green (#228B22) + Earth tones | Clear + Informative typography | Progress indicators + Impact animations | {"must_have": "data-transparency", "must_have": "certification-badges"} | Greenwashing visuals + No data | HIGH |
| 53 | 52 | Remote Work/Collaboration | Feature-Rich + Real-Time | Soft UI Evolution + Minimalism | Calm Blue + Neutral grey | Clean + Readable typography | Real-time presence indicators + Notification badges | {"must_have": "status-indicators", "must_have": "video-integration"} | Cluttered interface + No presence | HIGH |
| 54 | 53 | Pet Tech App | Storytelling + Feature-Rich | Claymorphism + Vibrant & Block-based | Playful + Warm colors | Friendly + Playful typography | Pet profile animations + Health tracking charts | {"must_have": "pet-profiles", "if_health": "add-vet-integration"} | Generic design + No personality | MEDIUM |
| 55 | 54 | Smart Home/IoT Dashboard | Real-Time Monitoring | Glassmorphism + Dark Mode (OLED) | Dark + Status indicator colors | Clear + Functional typography | Device status pulse + Quick action animations | {"must_have": "real-time-controls", "must_have": "energy-monitoring"} | Slow updates + No automation | HIGH |
| 56 | 55 | EV/Charging Ecosystem | Hero-Centric + Feature-Rich | Minimalism + Aurora UI | Electric Blue (#009CD1) + Green | Modern + Clear typography | Range estimation animations + Map interactions | {"must_have": "charging-map", "must_have": "range-calculator"} | Poor map UX + Hidden costs | HIGH |
| 57 | 56 | Subscription Box Service | Feature-Rich + Conversion | Vibrant & Block-based + Motion-Driven | Brand + Excitement colors | Engaging + Clear typography | Unboxing reveal animations + Product carousel | {"must_have": "personalization-quiz", "must_have": "subscription-management"} | Confusing pricing + No unboxing preview | HIGH |
| 58 | 57 | Podcast Platform | Storytelling + Feature-Rich | Dark Mode (OLED) + Minimalism | Dark + Audio waveform accents | Modern + Clear typography | Waveform visualizations + Episode transitions | {"must_have": "audio-player-ux", "must_have": "episode-discovery"} | Poor audio player + Cluttered layout | HIGH |
| 59 | 58 | Dating App | Social Proof + Feature-Rich | Vibrant & Block-based + Motion-Driven | Warm + Romantic (Pink/Red gradients) | Modern + Friendly typography | Profile card swipe + Match animations | {"must_have": "profile-cards", "must_have": "safety-features"} | Generic profiles + No safety | HIGH |
| 60 | 59 | Micro-Credentials/Badges | Trust & Authority + Feature | Minimalism + Flat Design | Trust Blue + Gold (#FFD700) | Professional + Clear typography | Badge reveal animations + Progress tracking | {"must_have": "credential-verification", "must_have": "progress-display"} | No verification + Hidden progress | MEDIUM |
| 61 | 60 | Knowledge Base/Documentation | FAQ + Minimal | Minimalism + Accessible & Ethical | Clean hierarchy + Minimal color | Clear + Readable typography | Search highlight + Smooth scrolling | {"must_have": "search-first", "must_have": "version-switching"} | Poor navigation + No search | HIGH |
| 62 | 61 | Hyperlocal Services | Conversion + Feature-Rich | Minimalism + Vibrant & Block-based | Location markers + Trust colors | Clear + Functional typography | Map hover + Provider card reveals | {"must_have": "map-integration", "must_have": "booking-system"} | No map + Hidden reviews | HIGH |
| 63 | 62 | Luxury/Premium Brand | Storytelling + Feature-Rich | Liquid Glass + Glassmorphism | Black + Gold (#FFD700) + White | Elegant + Refined typography | Slow parallax + Premium reveals (400-600ms) | {"must_have": "high-quality-imagery", "must_have": "storytelling"} | Cheap visuals + Fast animations | HIGH |
| 64 | 63 | Fitness/Gym App | Feature-Rich + Data | Vibrant & Block-based + Dark Mode (OLED) | Energetic (Orange #FF6B35) + Dark bg | Bold + Motivational typography | Progress ring animations + Achievement unlocks | {"must_have": "progress-tracking", "must_have": "workout-plans"} | Static design + No gamification | HIGH |
| 65 | 64 | Hotel/Hospitality | Hero-Centric + Social Proof | Liquid Glass + Minimalism | Warm neutrals + Gold (#D4AF37) | Elegant + Welcoming typography | Room gallery + Amenity reveals | {"must_have": "room-booking", "must_have": "virtual-tour"} | Poor photos + Complex booking | HIGH |
| 66 | 65 | Wedding/Event Planning | Storytelling + Social Proof | Soft UI Evolution + Aurora UI | Soft Pink (#FFD6E0) + Gold + Cream | Elegant + Romantic typography | Gallery reveals + Timeline animations | {"must_have": "portfolio-gallery", "must_have": "planning-tools"} | Generic templates + No portfolio | HIGH |
| 67 | 66 | Insurance Platform | Conversion + Trust | Trust & Authority + Flat Design | Trust Blue (#0066CC) + Green + Neutral | Clear + Professional typography | Quote calculator animations + Policy comparison | {"must_have": "quote-calculator", "must_have": "policy-comparison"} | Confusing pricing + No trust signals + AI purple/pink gradients | HIGH |
| 68 | 67 | Banking/Traditional Finance | Trust & Authority + Feature | Minimalism + Accessible & Ethical | Navy (#0A1628) + Trust Blue + Gold | Professional + Trustworthy typography | Smooth number animations + Security indicators | {"must_have": "security-first", "must_have": "accessibility"} | Playful design + Poor security UX + AI purple/pink gradients | HIGH |
| 69 | 68 | Online Course/E-learning | Feature-Rich + Social Proof | Claymorphism + Vibrant & Block-based | Vibrant learning colors + Progress green | Friendly + Engaging typography | Progress bar animations + Certificate reveals | {"must_have": "progress-tracking", "must_have": "video-player"} | Boring design + No gamification | HIGH |
| 70 | 69 | Non-profit/Charity | Storytelling + Trust | Accessible & Ethical + Organic Biophilic | Cause-related colors + Trust + Warm | Heartfelt + Readable typography | Impact counter animations + Story reveals | {"must_have": "impact-stories", "must_have": "donation-transparency"} | No impact data + Hidden financials | HIGH |
| 71 | 70 | Florist/Plant Shop | Hero-Centric + Conversion | Organic Biophilic + Vibrant & Block-based | Natural Green + Floral pinks/purples | Elegant + Natural typography | Product reveal + Seasonal transitions | {"must_have": "delivery-scheduling", "must_have": "care-guides"} | Poor imagery + No seasonal content | MEDIUM |
| 72 | 71 | Bakery/Cafe | Hero-Centric + Conversion | Vibrant & Block-based + Soft UI Evolution | Warm Brown + Cream + Appetizing accents | Warm + Inviting typography | Menu hover + Order animations | {"must_have": "menu-display", "must_have": "online-ordering"} | Poor food photos + Hidden hours | HIGH |
| 73 | 72 | Coffee Shop | Hero-Centric + Minimal | Minimalism + Organic Biophilic | Coffee Brown (#6F4E37) + Cream + Warm | Cozy + Clean typography | Menu transitions + Loyalty animations | {"must_have": "menu", "if_loyalty": "add-rewards-system"} | Generic design + No atmosphere | MEDIUM |
| 74 | 73 | Brewery/Winery | Storytelling + Hero-Centric | Motion-Driven + Storytelling-Driven | Deep amber/burgundy + Gold + Craft | Artisanal + Heritage typography | Tasting note reveals + Heritage timeline | {"must_have": "product-showcase", "must_have": "story-heritage"} | Generic product pages + No story | HIGH |
| 75 | 74 | Airline | Conversion + Feature-Rich | Minimalism + Glassmorphism | Sky Blue + Brand colors + Trust | Clear + Professional typography | Flight search animations + Boarding pass reveals | {"must_have": "flight-search", "must_have": "mobile-first"} | Complex booking + Poor mobile | HIGH |
| 76 | 75 | Magazine/Blog | Storytelling + Hero-Centric | Swiss Modernism 2.0 + Motion-Driven | Editorial colors + Brand + Clean white | Editorial + Elegant typography | Article transitions + Category reveals | {"must_have": "article-showcase", "must_have": "newsletter-signup"} | Poor typography + Slow loading | HIGH |
| 77 | 76 | Freelancer Platform | Feature-Rich + Conversion | Flat Design + Minimalism | Professional Blue + Success Green | Clear + Professional typography | Skill match animations + Review reveals | {"must_have": "portfolio-display", "must_have": "skill-matching"} | Poor profiles + No reviews | HIGH |
| 78 | 77 | Consulting Firm | Trust & Authority + Minimal | Trust & Authority + Minimalism | Navy + Gold + Professional grey | Authoritative + Clear typography | Case study reveals + Team profiles | {"must_have": "case-studies", "must_have": "thought-leadership"} | Generic content + No credentials + AI purple/pink gradients | HIGH |
| 79 | 78 | Marketing Agency | Storytelling + Feature-Rich | Brutalism + Motion-Driven | Bold brand colors + Creative freedom | Bold + Expressive typography | Portfolio reveals + Results animations | {"must_have": "portfolio", "must_have": "results-metrics"} | Boring design + Hidden work | HIGH |
| 80 | 79 | Event Management | Hero-Centric + Feature-Rich | Vibrant & Block-based + Motion-Driven | Event theme colors + Excitement accents | Bold + Engaging typography | Countdown timer + Registration flow | {"must_have": "registration", "must_have": "agenda-display"} | Confusing registration + No countdown | HIGH |
| 81 | 80 | Conference/Webinar Platform | Feature-Rich + Conversion | Glassmorphism + Minimalism | Professional Blue + Video accent | Professional + Clear typography | Live stream integration + Agenda transitions | {"must_have": "registration", "must_have": "speaker-profiles"} | Poor video UX + No networking | HIGH |
| 82 | 81 | Membership/Community | Social Proof + Conversion | Vibrant & Block-based + Soft UI Evolution | Community brand colors + Engagement | Friendly + Engaging typography | Member counter + Benefit reveals | {"must_have": "member-benefits", "must_have": "pricing-tiers"} | Hidden benefits + No community proof | HIGH |
| 83 | 82 | Newsletter Platform | Minimal + Conversion | Minimalism + Flat Design | Brand primary + Clean white + CTA | Clean + Readable typography | Subscribe form + Archive reveals | {"must_have": "subscribe-form", "must_have": "sample-content"} | Complex signup + No preview | MEDIUM |
| 84 | 83 | Digital Products/Downloads | Feature-Rich + Conversion | Vibrant & Block-based + Motion-Driven | Product colors + Brand + Success green | Modern + Clear typography | Product preview + Instant delivery animations | {"must_have": "product-preview", "must_have": "instant-delivery"} | No preview + Slow delivery | HIGH |
| 85 | 84 | Church/Religious Organization | Hero-Centric + Social Proof | Accessible & Ethical + Soft UI Evolution | Warm Gold + Deep Purple/Blue + White | Welcoming + Clear typography | Service time highlights + Event calendar | {"must_have": "service-times", "must_have": "community-events"} | Outdated design + Hidden info | MEDIUM |
| 86 | 85 | Sports Team/Club | Hero-Centric + Feature-Rich | Vibrant & Block-based + Motion-Driven | Team colors + Energetic accents | Bold + Impactful typography | Score animations + Schedule reveals | {"must_have": "schedule", "must_have": "roster"} | Static content + Poor fan engagement | HIGH |
| 87 | 86 | Museum/Gallery | Storytelling + Feature-Rich | Minimalism + Motion-Driven | Art-appropriate neutrals + Exhibition accents | Elegant + Minimal typography | Virtual tour + Collection reveals | {"must_have": "virtual-tour", "must_have": "exhibition-info"} | Cluttered layout + No online access | HIGH |
| 88 | 87 | Theater/Cinema | Hero-Centric + Conversion | Dark Mode (OLED) + Motion-Driven | Dark + Spotlight accents + Gold | Dramatic + Bold typography | Seat selection + Trailer reveals | {"must_have": "showtimes", "must_have": "seat-selection"} | Poor booking UX + No trailers | HIGH |
| 89 | 88 | Language Learning App | Feature-Rich + Social Proof | Claymorphism + Vibrant & Block-based | Playful colors + Progress indicators | Friendly + Clear typography | Progress animations + Achievement unlocks | {"must_have": "progress-tracking", "must_have": "gamification"} | Boring design + No motivation | HIGH |
| 90 | 89 | Coding Bootcamp | Feature-Rich + Social Proof | Dark Mode (OLED) + Minimalism | Code editor colors + Brand + Success | Technical + Clear typography | Terminal animations + Career outcome reveals | {"must_have": "curriculum", "must_have": "career-outcomes"} | Light mode only + Hidden results | HIGH |
| 91 | 90 | Cybersecurity Platform | Trust & Authority + Real-Time | Cyberpunk UI + Dark Mode (OLED) | Matrix Green (#00FF00) + Deep Black | Technical + Clear typography | Threat visualization + Alert animations | {"must_have": "real-time-monitoring", "must_have": "threat-display"} | Light mode + Poor data viz | HIGH |
| 92 | 91 | Developer Tool/IDE | Minimal + Documentation | Dark Mode (OLED) + Minimalism | Dark syntax theme + Blue focus | Monospace + Functional typography | Syntax highlighting + Command palette | {"must_have": "keyboard-shortcuts", "must_have": "documentation"} | Light mode default + Slow performance | HIGH |
| 93 | 92 | Biotech/Life Sciences | Storytelling + Data | Glassmorphism + Clean Science | Sterile White + DNA Blue + Life Green | Scientific + Clear typography | Data visualization + Research reveals | {"must_have": "data-accuracy", "must_have": "clean-aesthetic"} | Cluttered data + Poor credibility | HIGH |
| 94 | 93 | Space Tech/Aerospace | Immersive + Feature-Rich | Holographic/HUD + Dark Mode | Deep Space Black + Star White + Metallic | Futuristic + Precise typography | Telemetry animations + 3D renders | {"must_have": "high-tech-feel", "must_have": "precision-data"} | Generic design + No immersion | HIGH |
| 95 | 94 | Architecture/Interior | Portfolio + Hero-Centric | Exaggerated Minimalism + High Imagery | Monochrome + Gold Accent + High Imagery | Architectural + Elegant typography | Project gallery + Blueprint reveals | {"must_have": "high-res-images", "must_have": "project-portfolio"} | Poor imagery + Cluttered layout | HIGH |
| 96 | 95 | Quantum Computing | Immersive + Interactive | Holographic/HUD + Dark Mode | Quantum Blue (#00FFFF) + Deep Black | Futuristic + Scientific typography | Probability visualizations + Qubit state animations | {"must_have": "complexity-visualization", "must_have": "scientific-credibility"} | Generic tech design + No viz | HIGH |
| 97 | 96 | Biohacking/Longevity App | Data-Dense + Storytelling | Biomimetic/Organic 2.0 + Minimalism | Cellular Pink/Red + DNA Blue + White | Scientific + Clear typography | Biological data viz + Progress animations | {"must_have": "data-privacy", "must_have": "scientific-credibility"} | Generic health app + No privacy | HIGH |
| 98 | 97 | Autonomous Drone Fleet | Real-Time + Feature-Rich | HUD/Sci-Fi FUI + Real-Time | Tactical Green + Alert Red + Map Dark | Technical + Functional typography | Telemetry animations + 3D spatial awareness | {"must_have": "real-time-telemetry", "must_have": "safety-alerts"} | Slow updates + Poor spatial viz | HIGH |
| 99 | 98 | Generative Art Platform | Showcase + Feature-Rich | Minimalism + Gen Z Chaos | Neutral (#F5F5F5) + User Content | Minimal + Content-focused typography | Gallery masonry + Minting animations | {"must_have": "fast-loading", "must_have": "creator-attribution"} | Heavy chrome + Slow loading | HIGH |
| 100 | 99 | Spatial Computing OS | Immersive + Interactive | Spatial UI (VisionOS) + Glassmorphism | Frosted Glass + System Colors + Depth | Spatial + Readable typography | Depth hierarchy + Gaze interactions | {"must_have": "depth-hierarchy", "must_have": "environment-awareness"} | 2D design + No spatial depth | HIGH |
| 101 | 100 | Sustainable Energy/Climate | Data + Trust | Organic Biophilic + E-Ink/Paper | Earth Green + Sky Blue + Solar Yellow | Clear + Informative typography | Impact viz + Progress animations | {"must_have": "data-transparency", "must_have": "impact-visualization"} | Greenwashing + No real data | HIGH |