#!/usr/bin/env python3 """ UI/UX Pro Max - Design Knowledge Search Tool This script searches through the UI/UX design knowledge base to provide recommendations based on keywords, domains, and technology stacks. Usage: python search.py "" --domain [--max-results ] python search.py "" --stack [--max-results ] Examples: python search.py "dashboard" --domain product python search.py "glassmorphism" --domain style python search.py "responsive" --stack react """ import argparse import sys import os # Design knowledge base organized by domain DESIGN_KNOWLEDGE = { "product": { "saas": { "style": "Clean, modern, professional", "colors": ["#6366f1 (indigo)", "#10b981 (emerald)", "#3b82f6 (blue)"], "typography": "Inter, SF Pro Display", "principles": ["Clear CTAs", "Social proof", "Feature hierarchy", "Pricing tables"] }, "ecommerce": { "style": "Visual, product-focused, trust-building", "colors": ["#ef4444 (red for CTAs)", "#22c55e (green for success)", "#f59e0b (amber)"], "typography": "Poppins, Montserrat", "principles": ["Large product images", "Clear add-to-cart", "Trust badges", "Urgency indicators"] }, "portfolio": { "style": "Minimal, showcase, personality-driven", "colors": ["#1f2937 (dark gray)", "#6b7280 (medium gray)", "#ffffff (white)"], "typography": "Playfair Display, Lato", "principles": ["Large imagery", "Clean layout", "Case studies", "Contact forms"] }, "healthcare": { "style": "Trustworthy, clean, accessible", "colors": ["#0ea5e9 (medical blue)", "#10b981 (health green)", "#6366f1 (calm indigo)"], "typography": "Open Sans, Lato", "principles": ["WCAG AAA compliance", "Clear contact info", "Certifications", "Privacy focus"] }, "fintech": { "style": "Secure, professional, modern", "colors": ["#1e40af (deep blue)", "#059669 (financial green)", "#dc2626 (alert red)"], "typography": "Roboto, Source Sans Pro", "principles": ["Bank-level security", "Clear data display", "Compliance badges", "Multi-factor auth UI"] }, "blog": { "style": "Readable, content-focused, engaging", "colors": ["#374151 (dark text)", "#6b7280 (muted)", "#f3f4f6 (light backgrounds)"], "typography": "Merriweather, Inter", "principles": ["High readability", "Content hierarchy", "Share buttons", "Author bio"] }, "dashboard": { "style": "Data-rich, organized, actionable", "colors": ["#3b82f6 (primary)", "#10b981 (success)", "#ef4444 (danger)", "#f59e0b (warning)"], "typography": "Inter, IBM Plex Sans", "principles": ["Clear data visualization", "Filter controls", "Export options", "Real-time updates"] }, "landing": { "style": "Conversion-focused, clear value prop", "colors": ["#6366f1 (CTA primary)", "#10b981 (trust)", "#1f2937 (text)"], "typography": "Poppins, Inter", "principles": ["Hero section", "Benefits grid", "Social proof", "Strong CTAs"] } }, "style": { "glassmorphism": { "description": "Frosted glass effect with blur and transparency", "css": "background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);", "colors": ["White with opacity", "Soft shadows", "Border with opacity"], "use_cases": ["Cards", "Modals", "Navigation", "Floating elements"], "considerations": ["Ensure contrast", "Test in dark mode", "Performance cost"] }, "minimalism": { "description": "Clean, simple, focus on content", "css": "Minimal decoration, ample whitespace, simple typography", "colors": ["Monochrome", "Single accent", "Neutral backgrounds"], "use_cases": ["Portfolios", "Editorial", "Luxury brands", "SaaS"], "considerations": ["Strong typography", "Clear hierarchy", "Purposeful white space"] }, "brutalism": { "description": "Bold, raw, high contrast", "css": "Thick borders, large shadows, bold colors, raw aesthetics", "colors": ["#000000", "#ffffff", "Primary accent", "High contrast"], "use_cases": ["Art portfolios", "Edgy brands", "Statement pieces"], "considerations": ["Not for everyone", "Accessibility challenges", "Use sparingly"] }, "neumorphism": { "description": "Soft UI, extruded shapes", "css": "background: #e0e5ec; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgb(255,255,255, 0.5);", "colors": ["Light gray backgrounds", "Soft shadows", "Low contrast"], "use_cases": ["Cards", "Buttons", "Inputs"], "considerations": ["Accessibility issues", "Limited to light themes", "Performance cost"] }, "dark mode": { "description": "Dark theme with reduced eye strain", "css": "background: #0f172a; color: #f8fafc; Ensure 4.5:1 contrast minimum", "colors": ["#0f172a (background)", "#1e293b (cards)", "#f8fafc (text)", "#6366f1 (accent)"], "use_cases": ["Developer tools", "Night reading", "Professional apps"], "considerations": ["Test with auto-detect", "Provide toggle", "Ensure all content visible"] }, "bento grid": { "description": "Modular grid layout like bento box", "css": "display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;", "colors": ["Varied by module", "Consistent spacing", "Soft borders"], "use_cases": ["Dashboards", "Portfolios", "Content aggregators"], "considerations": ["Responsive challenges", "Content prioritization", "Flexible modules"] }, "claymorphism": { "description": "3D clay-like elements", "css": "box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.1);", "colors": ["#e8e8e8", "#ffffff", "Soft shadows", "Inner highlights"], "use_cases": ["Playful apps", "Icons", "Buttons", "Cards"], "considerations": ["Performance cost", "Subtle effect", "Can look flat if overdone"] } }, "typography": { "elegant": { "fonts": ["Playfair Display", "Cormorant", "Crimson Pro"], "pairing": "Serif headings + Sans-serif body", "use": "Luxury brands, editorial, wedding sites", "sizes": "Headings: 2.5rem-4rem, Body: 1rem-1.125rem" }, "modern": { "fonts": ["Inter", "SF Pro Display", "Roboto"], "pairing": "Sans-serif throughout with weight variation", "use": "SaaS, tech, startups, professional services", "sizes": "Headings: 1.75rem-2.5rem, Body: 1rem-1.125rem" }, "playful": { "fonts": ["Poppins", "Nunito", "Quicksand"], "pairing": "Rounded sans-serif with geometric qualities", "use": "Kids products, gaming, lifestyle apps", "sizes": "Headings: 2rem-3rem, Body: 1rem-1.125rem" }, "professional": { "fonts": ["Source Sans Pro", "IBM Plex Sans", "Libre Franklin"], "pairing": "Corporate sans-serif with excellent legibility", "use": "B2B SaaS, financial, legal, healthcare", "sizes": "Headings: 1.75rem-2.25rem, Body: 1rem-1.125rem" }, "technical": { "fonts": ["JetBrains Mono", "Fira Code", "IBM Plex Mono"], "pairing": "Monospace for code, sans-serif for content", "use": "Developer tools, documentation, code editors", "sizes": "Code: 0.9rem-1rem, Text: 1rem-1.125rem" } }, "color": { "saas": { "primary": "#6366f1", "secondary": "#8b5cf6", "accent": "#10b981", "background": "#ffffff", "text": "#1f2937", "border": "#e5e7eb" }, "ecommerce": { "primary": "#ef4444", "secondary": "#f97316", "accent": "#22c55e", "background": "#ffffff", "text": "#1f2937", "border": "#e5e7eb" }, "healthcare": { "primary": "#0ea5e9", "secondary": "#06b6d4", "accent": "#10b981", "background": "#f8fafc", "text": "#1e293b", "border": "#e2e8f0" }, "fintech": { "primary": "#1e40af", "secondary": "#059669", "accent": "#dc2626", "background": "#ffffff", "text": "#1f2937", "border": "#e5e7eb" }, "blog": { "primary": "#2563eb", "secondary": "#7c3aed", "accent": "#db2777", "background": "#ffffff", "text": "#1f2937", "border": "#e5e7eb" } }, "ux": { "accessibility": { "principles": [ "Color contrast: 4.5:1 minimum for normal text", "Focus indicators: 3px solid outline, 2px offset", "Alt text: Descriptive text for all images", "ARIA labels: For icon-only buttons", "Keyboard navigation: Tab order matches visual order", "Form labels: Explicit labels with for attribute", "Skip links: For main content", "Error messages: Clear, specific, near the problem" ] }, "animation": { "principles": [ "Duration: 150-300ms for micro-interactions", "Easing: ease-out for entrances, ease-in for exits", "Transform: Use transform/opacity, not width/height", "Reduced motion: Check prefers-reduced-motion", "Loading: Skeleton screens or spinners", "Hover: Color/brightness changes, no scale unless purposeful", "Transitions: Group related animations", "Performance: Use will-change sparingly" ] }, "z-index": { "scale": [ "10: Tooltips, dropdowns", "20: Modals, slideovers", "30: Notifications, toasts", "50: Highest priority (confirmations, alerts)" ], "principles": [ "Keep z-index scale minimal", "Document all z-index values", "Use stacking context wisely", "Test with multiple components" ] }, "loading": { "patterns": [ "Skeleton screens: Better perceived performance", "Spinners: Use for indeterminate wait times", "Progress bars: For determinate operations", "Content transitions: Stagger for multiple items", "Optimistic UI: Show immediate feedback", "Placeholder content: During data fetch" ] }, "forms": { "principles": [ "Clear labels above inputs", "Help text below labels", "Inline validation feedback", "Error messages near fields", "Primary CTA prominent", "Group related fields", "Multi-step for complex forms" ] } }, "landing": { "hero": { "elements": [ "Headline: Clear value proposition", "Subheadline: Supporting benefit", "CTA: Primary action button", "Social proof: Trust indicators", "Hero image: Visual demonstration" ], "best_practices": [ "Above the fold content", "Strong contrast CTA", "Clear benefit statement", "Mobile-first approach", "Fast loading image" ] }, "hero-centric": { "focus": "Large hero section as primary focus", "ratio": "Hero: 60-80% of viewport height", "elements": ["Headline", "Subheadline", "CTA", "Image/Video"], "use": "SaaS launch pages, product announcements" }, "testimonial": { "placement": "After benefits, before pricing", "elements": ["Quote", "Author", "Role", "Company", "Photo"], "best_practices": [ "Real quotes from real customers", "Professional photos", "Specific results mentioned", "Diverse representation" ] }, "pricing": { "sections": ["Free tier", "Pro tier", "Enterprise tier"], "elements": ["Price", "Features", "CTA", "Period toggle", "Popular badge"], "best_practices": [ "Clear differentiation", "Most popular highlighted", "Annual/monthly toggle", "Feature comparison table" ] }, "social-proof": { "types": [ "Customer logos", "Testimonial quotes", "User counts", "Ratings", "Case studies", "Press mentions" ], "placement": "Throughout page, especially near CTAs" } }, "chart": { "trend": { "chart": "Line chart, area chart", "use": "Showing change over time", "best_for": ["Stock prices", "User growth", "Revenue trends"] }, "comparison": { "chart": "Bar chart, grouped bar", "use": "Comparing values across categories", "best_for": ["Sales by region", "Feature comparison", "Survey results"] }, "timeline": { "chart": "Gantt chart, timeline", "use": "Showing events over time", "best_for": ["Project schedules", "Roadmaps", "Milestones"] }, "funnel": { "chart": "Funnel chart", "use": "Showing progression through stages", "best_for": ["Conversion funnel", "Sales pipeline", "User journey"] }, "pie": { "chart": "Pie chart, donut chart", "use": "Showing parts of whole", "best_for": ["Market share", "Budget allocation", "Demographics"], "accessibility": "Also provide table for screen readers" } }, "stack": { "react": { "performance": [ "Use React.memo for expensive components", "Code splitting with React.lazy and Suspense", "Virtualization for long lists (react-window)", "Avoid inline functions in JSX", "Use useCallback and useMemo wisely", "Profile before optimizing" ], "patterns": [ "Compound components for flexible APIs", "Render props for code reuse", "Custom hooks for logic extraction", "Context for global state", "Error boundaries for graceful failures" ] }, "nextjs": { "ssr": "Use getServerSideProps sparingly", "ssg": "Use getStaticProps where possible", "images": "Use next/image for optimization", "routing": "File-based routing, shallow routing", "api": "API routes for backend logic", "performance": "Incremental Static Regeneration" }, "vue": { "composition": "Prefer Composition API over Options API", "reactivity": "Use ref for primitives, reactive for objects", "computed": "Computed properties for derived state", "watchers": "Watch for side effects", "performance": "v-memo for expensive components" }, "tailwind": { "responsive": "Mobile-first approach", "colors": "Use semantic color names", "spacing": "Use consistent spacing scale", "components": "Extract reusable components", "dark": "Use dark: prefix for dark mode", "a11y": "Use semantic HTML, proper ARIA" }, "shadcn": { "components": "Copy to src/components, don't npm install", "customization": "Edit component code directly", "styling": "Use Tailwind utilities with cn() helper", "themes": "Use next-themes for dark mode", "forms": "Use react-hook-form with zod validation" } } } def search_knowledge(keyword, domain=None, max_results=10): """Search the design knowledge base for matching entries""" results = [] if domain and domain in DESIGN_KNOWLEDGE: # Search within specific domain domain_data = DESIGN_KNOWLEDGE[domain] for key, value in domain_data.items(): if keyword.lower() in key.lower() or keyword.lower() in str(value).lower(): results.append({ 'domain': domain, 'key': key, 'data': value, 'match': 'exact' if keyword.lower() in key.lower() else 'partial' }) else: # Search all domains for domain_name, domain_data in DESIGN_KNOWLEDGE.items(): for key, value in domain_data.items(): if keyword.lower() in key.lower() or keyword.lower() in str(value).lower(): results.append({ 'domain': domain_name, 'key': key, 'data': value, 'match': 'exact' if keyword.lower() in key.lower() else 'partial' }) # Sort by exact matches first results.sort(key=lambda x: x['match'] == 'exact', reverse=True) return results[:max_results] def format_results(results, keyword): """Format search results for display""" if not results: return f"No results found for '{keyword}'\n\nTry different keywords or check spelling." output = [f"🎨 UI/UX Pro Max - Search Results for '{keyword}'"] output.append(f"Found {len(results)} result(s):\n") for i, result in enumerate(results, 1): output.append(f"{i}. [{result['domain'].upper()}] {result['key']}") if isinstance(result['data'], dict): for key, value in result['data'].items(): if isinstance(value, list): output.append(f" • {key}: {', '.join(str(v) for v in value[:3])}{'...' if len(value) > 3 else ''}") else: output.append(f" • {key}: {value}") else: output.append(f" {result['data']}") output.append("") return '\n'.join(output) def main(): parser = argparse.ArgumentParser( description='UI/UX Pro Max - Design Knowledge Search', formatter_class=argparse.RawDescriptionHelpFormatter, epilog=""" Examples: python search.py "dashboard" --domain product python search.py "glassmorphism" --domain style python search.py "responsive" --stack react python search.py "accessibility" --domain ux --max-results 5 """ ) parser.add_argument('keyword', help='Search keyword or phrase') parser.add_argument('--domain', choices=list(DESIGN_KNOWLEDGE.keys()), help='Search within specific domain') parser.add_argument('--stack', choices=['react', 'nextjs', 'vue', 'tailwind', 'shadcn'], help='Search within technology stack') parser.add_argument('-n', '--max-results', type=int, default=10, help='Maximum number of results (default: 10)') args = parser.parse_args() # If stack is specified, map to domain if args.stack: args.domain = 'stack' args.keyword = f"{args.stack} {args.keyword}" # Perform search results = search_knowledge(args.keyword, args.domain, args.max_results) # Output results print(format_results(results, args.keyword)) return 0 if __name__ == '__main__': sys.exit(main())