Combine all HTML drafts in a project into a single file.

Simple concatenation of latest version of each component.

Design a component based on a reference image using Gemini Vision.

This tool analyzes a screenshot or design reference image and creates a similar component with matching visual style. Uses Gemini's vision capabilities to extract design tokens (colors, typography, spacing, etc.) and then generates HTML matching those tokens.

Two modes:

• extract_only=True: Only extract design tokens, don't generate HTML

• extract_only=False: Extract tokens AND generate matching component

Content language is configurable (default: Turkish).

Args: image_path: Path to the reference image file. Supported formats: PNG, JPG, JPEG, WEBP, GIF. Example: "/path/to/screenshot.png" component_type: Type of component to design based on the reference. If empty and extract_only=False, will auto-detect from image. Options: hero, navbar, card, pricing_card, footer, etc. instructions: Additional instructions for modifications. Examples: - "Buna benzer ama mavi tonlarında" - "Daha minimalist bir versiyon" - "Aynı stilde ama dark mode" - "Spacing'i daha geniş tut" context: Usage context for the component. Example: "Hero section for a Turkish restaurant website" project_context: Project-specific context for design consistency. Example: "Project: KokoreçUsta - Traditional restaurant. Target: Local customers. Tone: Warm, nostalgic." extract_only: If True, only extract and return design tokens. If False, also generate a matching HTML component. Default: False auto_fix: Apply JavaScript fallback fixes to generated HTML. Default: True content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German).

Returns: Dict containing: - design_tokens: Extracted design tokens from the reference image - colors: Color palette with hex codes - typography: Font sizes, weights, line heights - spacing: Padding, margin, gap patterns - borders: Border radius, border styles - shadows: Shadow styles - layout: Grid/flex patterns detected - aesthetic: Overall design aesthetic (minimal, bold, etc.) - component_hints: Detected UI component types in the image - html: Generated HTML (only if extract_only=False) - design_notes: How the reference was interpreted - modifications: Changes made based on instructions - model_used: Always gemini-3-pro-preview

Examples: # Extract only - useful for understanding a design design_from_reference( image_path="/path/to/inspiration.png", extract_only=True )

# Full design from reference
design_from_reference(
    image_path="/path/to/competitor-hero.png",
    component_type="hero",
    instructions="Buna benzer ama marka renklerimizle",
    project_context="Project: TeknoSoft - B2B SaaS"
)

# Match style but different component
design_from_reference(
    image_path="/path/to/navbar-design.png",
    component_type="footer",  # Use navbar's style for footer
    instructions="Aynı stilde footer tasarla"
)

Workflow: 1. Gemini Vision analyzes the reference image 2. Extracts design tokens (colors, typography, spacing, etc.) 3. Identifies aesthetic and component types 4. (If extract_only=False) Generates matching HTML with TailwindCSS 5. Applies JS fallback fixes if auto_fix=True

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
)

Design a full page layout using Gemini 3 Pro.

This tool generates complete page layouts with multiple sections. Content language is configurable (default: Turkish).

Args: template_type: Type of page template. Options: - landing_page: Marketing landing page with hero, features, CTA - dashboard: Admin dashboard with sidebar, stats, data views - auth_page: Login/signup page with form and branding - pricing_page: Pricing comparison with tiers and FAQ - blog_post: Blog article layout with content and sidebar - product_page: E-commerce product page with gallery - portfolio: Portfolio/showcase page with projects grid - documentation: Docs page with navigation and content - error_page: 404/500 error page with helpful actions - coming_soon: Coming soon/maintenance page with countdown context: Usage context explaining the page purpose. Example: "Landing page for a Turkish SaaS product" content_structure: JSON string with page content. Example: '{"title": "Hoş Geldiniz", "subtitle": "En iyi çözüm"}' theme: Visual style preset (same as design_frontend) dark_mode: Include dark mode support (default: True) project_context: Project-specific context for design consistency. content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German).

Returns: Dict containing: - page_id: Unique identifier for the page - template_type: The template used - html: Complete HTML with TailwindCSS - sections: List of sections included - design_notes: Gemini's explanation of design decisions - model_used: Always gemini-3-pro-preview

Design a single page section that matches previous sections.

Use this tool to build large pages section-by-section, where each section maintains visual consistency with previous ones. This solves the token limit problem by designing one section at a time.

Content language is configurable (default: Turkish).

Chain Workflow:

1. Design first section (e.g., hero) - no previous_html needed

2. Design second section with previous_html from step 1

3. Continue chain, each section matches the previous style

4. Combine all sections into a complete page

Args: section_type: Type of section to design. Options: - hero: Hero/banner section with headline and CTA - features: Feature showcase grid or list - pricing: Pricing tiers/cards - testimonials: Customer testimonials/reviews - cta: Call-to-action section - footer: Page footer with links - stats: Statistics/metrics display - faq: FAQ accordion section - team: Team members grid - contact: Contact form section - gallery: Image/portfolio gallery - newsletter: Newsletter signup section context: Usage context explaining where/how the section will be used. Example: "Hero section for a Turkish SaaS landing page" previous_html: HTML from previous section for style matching. When provided, Gemini will analyze and match: - Color palette (primary, secondary, background) - Typography (fonts, weights, sizes) - Spacing patterns (padding, margins) - Border radius - Shadow styles - Animation patterns design_tokens: JSON string with explicit design tokens to use. If not provided but previous_html is given, tokens will be extracted automatically. Format: '{"colors": {...}, "typography": {...}, "spacing": {...}}' content_structure: JSON string with section content. Example: '{"headline": "Başlık", "subheadline": "Alt başlık", "cta": "Başla"}' theme: Visual style preset (modern-minimal, brutalist, etc.) 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 project_context: Project-specific context for design consistency. content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German).

Returns: Dict containing: - section_type: Type of section designed - html: Self-contained HTML with TailwindCSS classes - design_tokens: Extracted design tokens for next section in chain - 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 - design_notes: Gemini's design decisions explanation - model_used: Always gemini-3-pro-preview

Example Chain: # 1. Start with hero hero = design_section( section_type="hero", context="Landing page for B2B SaaS" )

# 2. Features section matching hero style
features = design_section(
    section_type="features",
    previous_html=hero["html"],
    design_tokens=json.dumps(hero["design_tokens"])
)

# 3. Pricing section continuing the chain
pricing = design_section(
    section_type="pricing",
    previous_html=features["html"],
    design_tokens=json.dumps(features["design_tokens"])
)

# 4. Combine all sections
full_page = hero["html"] + features["html"] + pricing["html"]

Generate design assets using Gemini or Imagen models.

Args: prompt: Description of the asset. model: Model name. aspect_ratio: Image ratio. output_format: base64 or file. output_dir: Save directory. number_of_images: Image count. output_resolution: Resolution (1K/2K).

List all saved design drafts for a given project.

Use this to recover lost work or see previous versions.

Args: project_name: Name of the project (folder in temp_designs)

List available frontend design options including advanced theme customization.

Returns all available component types, themes, templates, section types, and NEW: advanced theme factory options for deep customization.

Returns: Dict containing: - components: List of available component types (atoms, molecules, organisms) - themes: List of available theme presets with descriptions - templates: List of available page templates - sections: List of available section types for design_section - theme_factories: NEW - Advanced customization options for each theme - micro_interactions: Available interaction presets - visual_effects: Available visual effect presets - icons: Available SVG icons

List available Gemini models for design tasks.

Returns information about image generation models available on Vertex AI. This MCP server is design-focused - use image models for creating design assets like hero backgrounds, product images, and illustrations.

Returns: Dict containing image models with their specifications.

Abort and cleanup a MAESTRO session.

Use this to cancel an in-progress interview and free resources. Sessions automatically expire after 1 hour, but you can use this to immediately cleanup if needed.

Args: session_id: Session ID to abort

Returns: Dict containing: - success: True if session was aborted, False if not found - message: Human-readable status message

Example: # Abort an active session result = await maestro_abort(session_id="maestro_abc123") if result["success"]: print("Session aborted successfully")

Submit an answer to the current MAESTRO question.

Call this tool to answer each question during the MAESTRO interview. Returns either the next question or a design decision if the interview is complete.

Args: session_id: Active session ID from maestro_start_session question_id: ID of the question being answered (from question.id) selected_options: List of selected option IDs (e.g., ["opt_landing_page"]). Most questions require exactly one selection. free_text: Optional free text input for text-type questions

Returns: Dict containing EITHER: - question: Next question (if interview continues) - progress: Updated interview progress (0.0 to 1.0) - status: "interviewing"

OR:
- decision: Final design decision with mode, confidence, parameters
- progress: 1.0
- status: "decided"

Example: # Answer a question result = await maestro_answer( session_id="maestro_abc123", question_id="q_intent_main", selected_options=["opt_new_design"] ) if result["status"] == "decided": # Ready to execute! decision = result["decision"] else: # More questions to answer next_question = result["question"]

Execute the design decision from the MAESTRO session.

This generates the actual design output (HTML, CSS, JS) based on the mode and parameters determined during the interview.

You must have a decided session (either from completing the interview or calling maestro_get_decision) before calling this tool.

Args: session_id: Active session ID with a decision ready use_trifecta: Use multi-agent Trifecta pipeline for higher quality. When True, uses Architect → Alchemist → Physicist → QualityGuard agents for superior output. (default: False) quality_target: Quality level for output. Options: - "draft": Quick output (threshold: 6.0, 1 iteration) - "production": Standard quality (threshold: 7.0, 2 iterations) - "high": High quality with Critic (threshold: 8.0, 3 iterations) - "premium": Premium quality (threshold: 8.5, 4 iterations) - "enterprise": Enterprise-grade (threshold: 9.0, 5 iterations) (default: "production")

Returns: Dict containing: - html: Generated HTML output - mode: Design mode that was executed - trifecta_enabled: Whether Trifecta pipeline was used - quality_target: Quality level used - css_output: Separate CSS (only if trifecta=True) - js_output: Separate JS (only if trifecta=True) - design_notes: Explanation of design decisions - status: "complete" | "failed"

Example: # Execute with Trifecta for high quality result = await maestro_execute( session_id="maestro_abc123", use_trifecta=True, quality_target="premium" ) if result["status"] == "complete": html = result["html"]

Get MAESTRO session analytics and usage metrics.

Phase 6 feature: Provides comprehensive analytics including:

• Session tracking (duration, questions asked)

• Cost analysis (API token usage, estimated costs)

• Quality metrics (design scores, dimension breakdowns)

Returns: Dict containing: - session_tracker: Session statistics - cost_summary: Token usage and cost estimates - quality_summary: Quality score aggregations

Example: # Get analytics after running several sessions analytics = await maestro_get_analytics() print(f"Toplam oturum: {analytics['session_tracker']['total_sessions']}") print(f"Tahmini maliyet: ${analytics['cost_summary']['total_cost']:.4f}")

Force a design decision with current answers (skip remaining questions).

Use this tool when you want to proceed with partial information and skip the remaining interview questions. MAESTRO will make the best decision based on the answers provided so far.

Args: session_id: Active session ID from maestro_start_session

Returns: Dict containing: - decision: Design decision with: - mode: Selected design mode (design_frontend, design_page, etc.) - confidence: Confidence score (0.0 to 1.0) - parameters: Mode-specific parameters - reasoning: Human-readable explanation - alternatives: Other viable modes - status: "decided" | "failed"

Example: # Force decision after answering some questions result = await maestro_get_decision(session_id="maestro_abc123") if result["status"] == "decided": print(f"Mode: {result['decision']['mode']}") print(f"Confidence: {result['decision']['confidence']}")

Get rich formatted progress display for a session.

Phase 6 feature: Returns visual progress information including:

• Progress bar with percentage

• Current step indicator

• Category-specific tips

Args: session_id: Active session ID

Returns: Dict containing: - progress_bar: Visual ASCII progress bar - percentage: Progress as percentage string - current_step: Current step number - total_steps: Estimated total steps - category_tip: Helpful tip for current category

Example: progress = await maestro_get_progress(session_id="maestro_abc123") print(progress["progress_bar"]) # ████████░░░░░░░░ 50%

Get smart design recommendations based on user preferences.

Phase 6 feature: Uses AI-powered recommendation engine to suggest optimal theme, mode, and quality settings based on:

• User preference history

• Project context analysis

• Industry best practices

Returns: Dict containing: - theme: Theme recommendation with confidence and alternatives - mode: Design mode recommendation - quality: Quality level recommendation - defaults: Recommended default values for all parameters

Example: # Get recommendations before starting a session recs = await maestro_get_recommendations() print(f"Önerilen tema: {recs['theme']['value']}") print(f"Güven: {recs['theme']['confidence']:.0%}")

Start a new MAESTRO design wizard session.

MAESTRO asks intelligent questions to understand your design needs and automatically selects the best design mode and parameters.

This is the entry point for the guided design workflow. MAESTRO will ask a series of questions about your intent, scope, theme preferences, and then generate a design decision.

NEW in v2: If a design_brief is provided, MAESTRO uses AI to extract the project's "soul" (brand personality, target audience, visual language) and generates dynamic, context-aware questions to fill gaps.

Args: project_context: Project description for context (e.g., "B2B SaaS dashboard for Turkish fintech startup"). Helps MAESTRO make better design decisions. existing_html: Optional existing HTML for refinement or style matching. If provided, MAESTRO may suggest refine_frontend or design_section modes. design_brief: Optional design brief for soul extraction (v2 feature). When provided, MAESTRO analyzes the brief to understand brand personality, target audience, and visual preferences, then asks only the questions needed to fill gaps. Example: "Modern fintech app for millennials. Professional but approachable. Blue/purple gradient theme preferred."

Returns: Dict containing: - session_id: Unique session identifier (use this for subsequent calls) - question: First interview question with id, text, category, options - progress: Interview progress (0.0 to 1.0) - status: "interviewing" | "decided" | "failed" - v2_enabled: Whether soul-aware v2 mode is active (only if design_brief provided) - soul_confidence: Confidence score of soul extraction (0.0-1.0, only in v2)

Example: # Start a new design session with design brief (v2) result = await maestro_start_session( design_brief="E-commerce product page for Turkish market. " "Target: young professionals. Tone: modern, trustworthy.", project_context="E-commerce product page" ) session_id = result["session_id"] # Answer the first question using maestro_answer

Refine an existing component design based on feedback.

Use this tool to iterate on a design without starting from scratch. Send the previous HTML and describe the changes you want. All content will be generated in Turkish.

Args: previous_html: The existing HTML code to refine. This should be the complete HTML from a previous design_frontend or design_page call. modifications: Natural language description of desired changes. Examples: - "Buton rengini maviden yeşile çevir" - "Header'ı daha kompakt yap" - "Dark mode desteği ekle" - "Mobil responsive sorunlarını düzelt" - "Hover efektlerini daha belirgin yap" project_context: Optional project context for consistency.

Returns: Dict containing: - component_id: Identifier for the refined component - html: The modified HTML with TailwindCSS - changes_made: Summary of changes applied - design_notes: Explanation of modifications - model_used: Always gemini-3-pro-preview

Example: refine_frontend( previous_html='Gönder', modifications="Buton boyutunu büyüt ve hover efekti ekle" )

Replace a single section in an existing page with an improved version.

This tool enables iterative design improvement by replacing only the specified section while preserving all other sections. The new section maintains visual consistency with the rest of the page.

CRITICAL: The page HTML must use section markers in this format:

Args: page_html: Full HTML of the existing page with section markers. section_type: Section to replace. Valid types: - navbar: Navigation bars, headers - hero: Hero sections, landing areas - stats: Statistics, metrics sections - features: Feature grids, benefit lists - testimonials: Customer reviews, social proof - pricing: Pricing tables, plans - cta: Call-to-action sections - footer: Site footers modifications: Detailed description of desired changes. Example: "Add mega menu, search bar, and announcement banner" preserve_design_tokens: Keep colors/typography consistent with page (default: True) theme: Visual style preset for the new section content_language: Language code for content (default: "tr")

Returns: Dict containing: - html: Updated full page HTML with only the target section changed - modified_section: Which section was replaced - preserved_sections: List of sections that were NOT modified - design_notes: Explanation of design decisions - error: Error message if the operation failed

Example: # Update only the navbar in an existing landing page result = replace_section_in_page( page_html=existing_page, section_type="navbar", modifications="Add mega menu with 4 columns, search bar, dark mode toggle" )

# The result contains the complete updated page
updated_page = result["html"]
# Hero, Features, Pricing, Footer etc. are unchanged

Initialize a new design project folder.

Args: project_name: Name of the project (e.g. 'burger_landing')

Validate color contrast ratio for WCAG compliance.

Use this tool to check if your color combinations meet accessibility standards before using them in designs.

Args: foreground: Foreground (text) color in hex format (e.g., "#000000") background: Background color in hex format (e.g., "#FFFFFF") wcag_level: Target WCAG level - "AA" or "AAA" text_size: Text size category - "normal" or "large" (large = 18pt+ or 14pt+ bold)

Returns: Dict containing: - passes: Boolean indicating if contrast meets requirements - ratio: Calculated contrast ratio (e.g., 7.5) - required_ratio: Minimum required ratio for the level/size - message: Human-readable result message - recommendations: Suggestions if contrast fails

Example: validate_theme_contrast( foreground="#FFFFFF", background="#3B82F6", # blue-500 wcag_level="AA" )