design_frontend

Design a frontend UI component using Gemini 3 Pro.

This tool generates high-quality, production-ready HTML components with TailwindCSS. Always uses gemini-3-pro-preview for best design quality. Perfect for creating UI components that Claude Code can then integrate into a larger application.

IMPORTANT: Content language defaults to Turkish (tr). Use content_language parameter to generate content in other languages (en, de).

ADVANCED THEME CUSTOMIZATION: Each theme now supports deep customization via factory parameters. See theme-specific parameters below.

Workflow:

1. Claude analyzes the feature requirements

2. Claude breaks down into atomic components (atoms, molecules, organisms)

3. Claude calls design_frontend for each component with the same theme

4. Gemini 3 Pro generates high-quality HTML with TailwindCSS

5. Claude assembles the components into a complete page

Args: component_type: Type of component to design. Options: Atoms: button, input, badge, avatar, icon, dropdown, toggle, tooltip, slider, spinner, progress, chip, divider Molecules: card, form, modal, tabs, table, accordion, alert, breadcrumb, pagination, search_bar, stat_card, pricing_card, carousel, stepper, timeline, file_upload, rating, color_picker Organisms: navbar, hero, sidebar, footer, data_table, login_form, signup_form, contact_form, feature_section, testimonial_section, pricing_table, dashboard_header, kanban_board, calendar, chat_widget, notification_center, user_profile, settings_panel context: Usage context explaining where/how the component will be used. Example: "Primary CTA button for newsletter signup on landing page" content_structure: JSON string with component content. Example: '{"text": "Abone Ol", "icon": "mail"}' '{"tier": "Pro", "price": "₺299/ay", "features": ["Sınırsız kullanıcı"]}' theme: Visual style preset. Options: - modern-minimal: Clean, professional (default) - brutalist: Bold, high-contrast, sharp edges - glassmorphism: Frosted glass, transparency - neo-brutalism: Playful with bold colors - soft-ui: Neumorphic, soft depth - corporate: Professional, trustworthy - gradient: Gradient-heavy modern design - cyberpunk: Neon colors, dark background - retro: 80s/90s inspired - pastel: Soft pastel colors - dark_mode_first: Dark mode optimized - high_contrast: WCAG AAA accessible - nature: Earth tones, organic feel - startup: Tech startup aesthetic vibe: Optional design spirit / persona. Options: - elite_corporate: Precise, luxury corporate - playful_funny: High energy, bouncy, witty - cyberpunk_edge: High contrast, neon, industrial - luxury_editorial: Elegant, spacious, serif-heavy dark_mode: Include dark: variants for dark mode support (default: True) border_radius: Custom border radius override (e.g., "rounded-xl") responsive_breakpoints: Comma-separated breakpoints (default: "sm,md,lg") accessibility_level: WCAG level - "AA" or "AAA" (default: "AA") micro_interactions: Include hover/focus animations (default: True) max_width: Maximum width constraint (e.g., "1280px", "max-w-7xl") project_context: Project-specific context for design consistency. auto_fix: Apply JS fallback fixes automatically (default: True) content_language: Language for generated content (default: "tr") use_trifecta: Enable multi-agent Trifecta Engine pipeline for higher quality output. Uses 4 specialized agents (Architect, Alchemist, Physicist, QualityGuard) instead of single API call. Produces separate HTML/CSS/JS outputs. (default: False)

--- THEME-SPECIFIC CUSTOMIZATION ---

MODERN-MINIMAL:
    brand_primary: Hex color for brand (e.g., "#E11D48"). Auto-generates palette.
    neutral_base: Gray family - "slate", "gray", "zinc", "neutral", "stone"

BRUTALIST:
    contrast_mode: "standard" (4.5:1), "high" (7:1), "maximum" (10:1+)

GLASSMORPHISM:
    blur_intensity: "sm", "md", "lg", "xl", "2xl", "3xl"
    glass_opacity: 0.3 to 0.95 (default: 0.7)
    performance_mode: "quality", "balanced", "performance" (Safari optimization)

NEO-BRUTALISM:
    gradient_preset: "sunset", "ocean", "forest", "candy", "fire"
    gradient_animation: "none", "flow", "pulse", "shimmer", "wave"

SOFT-UI:
    neumorphism_intensity: "subtle", "medium", "strong"

CORPORATE:
    industry: "finance", "healthcare", "legal", "tech", "manufacturing", "consulting"
    layout_style: "traditional", "modern", "editorial"
    formality: "formal", "semi-formal", "approachable"

GRADIENT:
    primary_gradient: "aurora", "sunset", "ocean", "forest", "fire", 
                     "slate_subtle", "mesh_purple", "dark_aurora", etc. (20+ options)

CYBERPUNK:
    primary_neon: "cyan", "fuchsia", "yellow", "green", "pink", "blue", "purple", "red", "orange"
    neon_intensity: "subtle", "medium", "strong", "intense", "extreme"
    scanline_effect: True/False for CRT-style scanlines

RETRO:
    retro_era: "80s_tech", "80s_neon", "90s_grunge", "90s_web", "retro_futurism", "vintage_americana"
    retro_color_scheme: "neon", "pastel", "earthy", "chrome"

PASTEL:
    primary_pastel: "rose", "pink", "sky", "violet", "teal", "amber", "lime"
    wcag_level: "AA" (4.5:1) or "AAA" (7:1) contrast

DARK_MODE_FIRST:
    primary_glow: "emerald", "cyan", "violet", "amber"
    light_mode_style: "minimal", "warm", "cool", "inverted"

HIGH_CONTRAST:
    softness_level: "sharp" (no radius), "balanced", "smooth"
    hc_color_scheme: "blue", "purple", "green", "neutral"

NATURE:
    season: "spring", "summer", "autumn", "winter"
    organic_shapes: True for blob-like rounded corners
    eco_friendly_mode: True for simpler visuals (less energy)

STARTUP:
    archetype: "disruptor", "enterprise", "consumer", "fintech",
              "healthtech", "ai_ml", "sustainability"
    startup_stage: "seed" (bold), "growth" (balanced), "scale" (refined)

--- CORPORATE QUALITY ENHANCEMENT ---

corporate_preset: One-click enterprise configuration. Options:
    - "enterprise_bank": Finance, formal, WCAG AAA, premium quality
    - "fintech_startup": Finance, semi-formal, modern layout
    - "hospital_portal": Healthcare, formal, WCAG AAA
    - "law_firm": Legal, editorial layout, luxury_editorial vibe
    - "saas_enterprise": Tech, semi-formal, premium quality
    - "developer_tools": Tech, approachable, cyberpunk_edge vibe
    - "industrial_b2b": Manufacturing, traditional layout
    - "management_consulting": Consulting, editorial, luxury_editorial
    - "boutique_agency": Consulting, modern, semi-formal

quality_target: Quality level for validation strictness. Options:
    - "draft": Fast output (threshold: 6.0, 1 iteration)
    - "production": Standard (threshold: 7.0, 2 iterations) [default]
    - "standard": Same as production
    - "high": With Critic (threshold: 8.0, 3 iterations)
    - "premium": With Professional Validator (threshold: 8.5, 4 iterations)
    - "enterprise": Full corporate evaluation (threshold: 9.0, 5 iterations)

Returns: Dict containing: - component_id: Unique identifier for the component - atomic_level: atom, molecule, or organism - html: Self-contained HTML with TailwindCSS (ready to use) - tailwind_classes_used: List of Tailwind classes used - accessibility_features: A11y features implemented - responsive_breakpoints: Breakpoints used - dark_mode_support: Whether dark mode is supported - micro_interactions: Animation/transition classes - design_notes: Gemini's explanation of design decisions - theme_config: Advanced theme configuration used - model_used: Always gemini-3-pro-preview

When use_trifecta=True, additional fields:
- trifecta_enabled: True
- agents_executed: List of agents that ran (e.g., ["architect", "alchemist"])
- css_output: Separate CSS generated by Alchemist agent
- js_output: Separate JS generated by Physicist agent

Examples: # Custom Brand Colors (Modern-Minimal) design_frontend( component_type="button", theme="modern-minimal", brand_primary="#E11D48", # Rose brand color neutral_base="zinc" )

# High Contrast Brutalist
design_frontend(
    component_type="card",
    theme="brutalist",
    contrast_mode="maximum"  # WCAG AAA+
)

# Corporate Preset - One-Click Enterprise Setup
design_frontend(
    component_type="hero",
    corporate_preset="enterprise_bank",  # Auto-sets: finance, formal, premium
    use_trifecta=True  # Recommended for enterprise quality
)

# Enterprise Quality with Custom Settings
design_frontend(
    component_type="pricing_table",
    theme="corporate",
    industry="healthcare",
    formality="formal",
    quality_target="enterprise",  # WCAG AAA, 5 iterations, full validation
    use_trifecta=True
)