design_from_reference
Extract design tokens from a reference image or generate a matching HTML component using Gemini Vision.
Instructions
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
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| context | No | ||
| auto_fix | No | ||
| image_path | Yes | ||
| extract_only | No | ||
| instructions | No | ||
| use_trifecta | No | ||
| component_type | No | ||
| project_context | No | ||
| content_language | No | tr | |
| inject_js_fallbacks | No |