MCP UI/UX Prompt Refiner

export const DESIGN_PRINCIPLES = { gestalt: { proximity: "Elements close together are perceived as related. Use consistent spacing to group related items and separate distinct sections.", similarity: "Similar elements are perceived as a group. Use consistent styling for related components (same colors, shapes, sizes).", continuity: "The eye follows smooth paths. Use alignment and visual flow to guide users through content naturally.", closure: "The mind completes incomplete shapes. Use negative space strategically to create implied boundaries.", figureGround: "We perceive objects as either foreground or background. Create clear contrast between content and its container.", commonFate: "Elements moving in the same direction are perceived as grouped. Use coordinated animations for related items." }, visualHierarchy: { sizeContrast: "Larger elements draw attention first. Make headlines 2-3x larger than body text for clear hierarchy.", colorContrast: "High contrast elements stand out. Use your accent color sparingly for maximum impact on CTAs.", spatialPosition: "Top-left draws attention first (in LTR languages). Place primary content in natural reading paths.", whitespace: "Empty space creates breathing room and emphasis. Don't fear generous margins and padding.", typography: "Font weight and style create hierarchy without size changes. Use bold for emphasis, regular for body.", depth: "Shadows and overlapping create z-axis hierarchy. Elevate interactive elements above static content." }, colorTheory: { complementary: "Colors opposite on the wheel create vibrant contrast. Use for accent colors against neutrals.", analogous: "Adjacent colors create harmony. Use for cohesive, calming palettes.", triadic: "Three evenly spaced colors create balanced variety. Use one dominant, others as accents.", splitComplementary: "A color plus two adjacent to its complement. Safer than complementary with similar contrast.", the60_30_10: "60% dominant color (backgrounds), 30% secondary (containers), 10% accent (CTAs, highlights)." }, layoutPrinciples: { goldenRatio: "1.618:1 ratio creates naturally pleasing proportions. Use for image dimensions and layout divisions.", ruleOfThirds: "Divide space into 3x3 grid. Place key elements at intersections for dynamic compositions.", zPattern: "Users scan in Z-shape for unfamiliar content. Place logo top-left, CTA bottom-right.", fPattern: "Users scan in F-shape for text-heavy content. Front-load important information.", gutenberg: "Divide into 4 quadrants: primary optical (top-left), terminal (bottom-right) are key zones." }, modernTrends: { brokenGrids: "Elements that break out of traditional grids create visual interest and modern feel.", overlappingElements: "Layering images, text, and shapes creates depth and sophistication.", asymmetricLayouts: "Intentional imbalance creates dynamic tension and draws attention.", boldTypography: "Oversized, expressive type as visual element, not just information carrier.", customIllustrations: "Unique illustrations over stock photos create brand identity and warmth.", microInteractions: "Small, purposeful animations that provide feedback and delight.", darkModeFirst: "Designing for dark mode creates sophisticated, modern aesthetic.", gradientMeshes: "Complex, multi-point gradients create organic, dynamic backgrounds.", glassmorphism: "Frosted glass effect with transparency and blur creates depth.", neumorphism: "Soft shadows creating extruded or inset appearance for subtle depth.", claymorphism: "3D, clay-like elements with soft shadows for playful, modern feel." } }; export const VISUAL_TECHNIQUES = { depthCreation: [ "Layered shadows with multiple blur values", "Subtle background gradients that shift on scroll", "Overlapping elements with varying opacity", "Parallax effects at different speeds", "3D transforms with perspective", "Backdrop blur for floating elements" ], textureAndPattern: [ "Subtle noise/grain overlays (opacity 3-8%)", "Geometric patterns in negative space", "Gradient meshes behind content", "Dotted or lined grids as visual anchors", "Organic blob shapes for backgrounds", "Halftone effects for modern retro feel" ], dynamicElements: [ "Cursor-following elements", "Magnetic button effects", "Text that reacts to mouse proximity", "Scroll-velocity-based animations", "Interactive 3D objects", "Generative/procedural backgrounds" ], typographicEffects: [ "Variable font animations", "Text stroke/outline effects", "Gradient text fills", "Text masks revealing images/videos", "Kinetic typography", "Split-character animations" ] }; export const COMPOSITION_PATTERNS = { heroSections: [ "Split hero: text left, media right (or vice versa) with diagonal divide", "Centered hero: bold headline, subtext, CTA stack with background media", "Full-bleed video hero with text overlay and scroll indicator", "Bento-box hero: asymmetric grid of images/text blocks", "Interactive hero: 3D element or animation as focal point", "Layered hero: foreground CTA, midground content, background media" ], contentSections: [ "Card grid: uniform or varied heights (masonry)", "Alternating layout: content/media switching sides", "Feature list: icon + text in creative arrangements", "Timeline: vertical or horizontal progression", "Comparison: side-by-side or toggle views", "Testimonial: carousel, grid, or featured single" ], navigationPatterns: [ "Sticky header with transparency on scroll", "Full-screen overlay navigation", "Side drawer with animated hamburger", "Tab bar (mobile) with active indicator animation", "Breadcrumb with micro-interactions", "Mega menu with visual hierarchy" ] }; export function getDesignPrinciplePrompt(): string { return ` ## Core Design Principles to Apply ### Gestalt Principles - **Proximity**: Group related elements with consistent spacing - **Similarity**: Use consistent styling for related components - **Continuity**: Guide users through content with visual flow - **Closure**: Use negative space to create implied boundaries ### Visual Hierarchy - Size contrast: Headlines 2-3x larger than body - Color contrast: Accent color sparingly for maximum impact - Whitespace: Generous margins create breathing room - Depth: Shadows and overlapping for z-axis hierarchy ### Modern Design Techniques - Broken grids and asymmetric layouts for dynamic tension - Overlapping elements for depth and sophistication - Custom illustrations over stock imagery - Micro-interactions for feedback and delight - Gradient meshes and glassmorphism for modern feel ### The 60-30-10 Rule - 60% dominant color (backgrounds, large areas) - 30% secondary color (containers, cards) - 10% accent color (CTAs, highlights, interactive elements) `; }