to UI Design Automation with Gemini API and Figma Make

import json
from google import genai
from typing import TypedDict
 
client = genai.Client(api_key="YOUR_GEMINI_API_KEY")
 
class DesignRequirement(TypedDict):
    """Unified design requirement schema"""
    project_id: str
    business_context: dict
    user_personas: list
    design_principles: list
    color_system: dict
    typography_system: dict
    component_library: list
    accessibility_requirements: dict
    performance_constraints: dict
 
def structure_design_requirements(prd_text: str, brand_guide: str) -> DesignRequirement:
    """
    Transform PRD + brand guidelines into structured JSON
    """
 
    prompt = f"""
As a senior design lead, structure the following requirements into unified JSON format.
 
Required sections:
1. **business_context**: Revenue targets, engagement KPIs, market positioning
2. **user_personas**: 3-5 detailed personas with jobs-to-be-done
3. **design_principles**: Core 5 design philosophies
4. **color_system**: Primary, secondary, neutral colors with WCAG contrast validation
5. **typography_system**: Font families, sizes, line-heights with readability scores
6. **component_library**: Reusable components (buttons, cards, forms, modals)
7. **accessibility_requirements**: WCAG 2.1 AA/AAA specific requirements
8. **performance_constraints**: Page load budget, CLS target, bundle size limits
 
PRD:
{prd_text}
 
Brand Guidelines:
{brand_guide}
 
Return JSON only.
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

def merge_stakeholder_requirements(
    requirements_list: list,
    weight_config: dict
) -> dict:
    """
    Merge multiple stakeholder opinions with weighted importance
 
    Args:
        weight_config: {"product": 0.4, "design": 0.3, "engineering": 0.2, "research": 0.1}
 
    Returns:
        Merged requirements with conflict resolution proposals
    """
 
    stakeholders_json = json.dumps(requirements_list, indent=2)
 
    prompt = f"""
Merge these conflicting stakeholder requirements:
{stakeholders_json}
 
Weights: {json.dumps(weight_config)}
 
For each conflict, propose 3 resolution options with trade-offs explained.
Return as JSON with structure:
{{
  "merged_requirements": {{}},
  "conflicts": [
    {{"stakeholder_a": "...", "stakeholder_b": "...", "solutions": [...]}}
  ]
}}
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

def generate_figma_make_scenario(design_requirement: dict) -> str:
    """
    Auto-generate Figma Make scenario definition from design requirements
    """
 
    req_json = json.dumps(design_requirement, indent=2)
 
    prompt = f"""
Generate a Figma Make scenario for this design requirement:
 
{req_json}
 
Scenario structure:
1. **Trigger**: Webhook receiving JSON payload
2. **Steps**:
   - Frame creation based on color_system
   - Component instance insertion
   - Auto-layout application
   - Responsive variant generation
   - Slack notification
   - Cloud storage export
 
Output: JavaScript/JSON importable into Figma Make
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return response.text

def generate_design_matrix(design_req: dict) -> dict:
    """
    Create design variations across multiple dimensions:
    - Color density: light, normal, dark
    - Information density: minimal, balanced, dense
    - Typography style: clean, playful, formal
    - Animation level: none, subtle, prominent
 
    Total: 3^4 = 81 unique combinations with guidelines
    """
 
    prompt = f"""
Create a design matrix with 81 variations (3x3x3x3) for this design:
 
{json.dumps(design_req, indent=2)}
 
For each variant, provide:
- Variant ID
- Dimension values
- Use case description
- Component library selection
- Figma implementation checklist
 
Output JSON with structure:
{{
  "matrix": [
    {{
      "variant_id": "v001",
      "dimensions": {{"color": "light", "info": "minimal", "typography": "clean", "animation": "none"}},
      "description": "Minimal medical app interface",
      "use_cases": ["healthcare", "HIPAA-compliant"],
      "component_guidelines": [...]
    }}
  ]
}}
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

async def sync_figma_to_design_tokens(figma_file_key: str) -> dict:
    """
    Extract design tokens from Figma and sync with codebase
    """
 
    # Fetch latest from Figma API
    figma_data = await fetch_figma_components(figma_file_key)
 
    # Use Gemini to analyze and normalize
    analysis_prompt = f"""
Extract design tokens from these Figma components:
 
{json.dumps(figma_data['components'])}
 
Normalize:
- Colors: Figma HEX → semantic names (primary, success, alert)
- Typography: Font configs → reusable definitions
- Spacing: Individual values → unified scale (xs, sm, md, lg, xl)
- Shadows: Shadow definitions → standardized set
 
Output: JSON design tokens compatible with Tailwind, CSS variables, etc.
"""
 
    response = await client.models.generate_content(
        model="gemini-2.0-flash",
        contents=analysis_prompt
    )
 
    design_tokens = json.loads(response.text)
 
    # Calculate diff, save history, trigger rebuild
    return {
        "tokens": design_tokens,
        "diff": calculate_diff(previous_tokens, design_tokens),
        "status": "synced"
    }

def auto_organize_design_components(figma_components: list) -> dict:
    """
    Classify components using Atomic Design hierarchy:
    Atoms → Molecules → Organisms → Templates
    """
 
    components_json = json.dumps(figma_components, indent=2)
 
    prompt = f"""
Organize these Figma components into Atomic Design hierarchy:
 
{components_json}
 
For each component, provide:
- Hierarchy level (atom, molecule, organism, template)
- Component name and description
- Props (type, default value)
- Variants (size, color, state)
- Accessibility attributes
- Usage examples
 
Output: JSON organized by hierarchy
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

def generate_component_guidelines(component: dict) -> str:
    """
    Generate complete component usage guide including:
    - When to use / when NOT to use
    - Props reference
    - States (default, hover, active, disabled, loading, error)
    - Accessibility requirements
    - Responsive behavior
    - Performance notes
    """
 
    prompt = f"""
Create comprehensive guidelines for this component:
 
{json.dumps(component, indent=2)}
 
Include sections:
1. Purpose: Role and design philosophy
2. When to use: 3-5 concrete use cases
3. When NOT to use: Common mistakes and alternatives
4. Props reference: Full parameter documentation
5. States: Visual and behavioral changes
6. Accessibility: WCAG AA/AAA requirements
7. Responsive design: Mobile→tablet→desktop behavior
8. Performance: Bundle size, render time
9. FAQ: Common designer/engineer questions
 
Output: Markdown format suitable for Storybook
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return response.text

async def design_to_code(
    figma_file_url: str,
    component_name: str,
    output_format: str = "react"
) -> dict:
    """
    Figma screenshot → HTML/CSS/React JSX with automated quality checks
    """
 
    # Step 1: Get screenshot
    screenshot = await generate_figma_screenshot(figma_file_url, component_name)
 
    # Step 2: Gemini analyzes and generates code
    if output_format == "react":
        prompt = f"""
Generate React (TypeScript) code for this design:
 
Requirements:
- Tailwind CSS styling
- Responsive (320px to 2560px)
- Full accessibility (WCAG AAA)
- Props must be fully customizable
- Storybook compatible
 
Output:
```tsx
interface {component_name}Props {{
  // Props
}}
 
export const {component_name}: React.FC<{component_name}Props> = (props) => {{
  // Implementation
}};

async def generate_component_tests(code: str, component_name: str) -> str:
    """
    Generate Jest + React Testing Library test suite
    """
 
    prompt = f"""
Generate comprehensive test suite for:
 
{code}
 
Test coverage:
1. Props rendering
2. User interactions
3. Accessibility (jest-axe)
4. Edge cases (empty, loading, error)
5. Responsive behavior
 
Output: Jest test file with 80%+ coverage target
"""
 
    response = await client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return response.text

def generate_ab_test_setup(design_variants: list, personas: list) -> dict:
    """
    Auto-generate A/B test plan with:
    - Variant assignments
    - Hypothesis per variant
    - Success metrics and targets
    - Sample size calculation
    - Duration estimation
    """
 
    prompt = f"""
Design comprehensive A/B test for these variants:
 
Variants: {json.dumps(design_variants)}
Personas: {json.dumps(personas)}
 
Generate:
1. Test name and duration
2. Sample size (95% confidence)
3. Success metrics per persona
4. Statistical power calculation
5. Decision criteria
 
Output JSON with full test specification
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

async def analyze_ab_test_results(
    test_results: dict,
    design_variants: list
) -> dict:
    """
    Auto-analyze quantitative + qualitative results
    → Generate improvement recommendations
    """
 
    prompt = f"""
Analyze A/B test results and recommend next steps:
 
Results: {json.dumps(test_results)}
Variants: {json.dumps(design_variants)}
 
Analysis:
1. Statistical significance (p < 0.05)
2. Segment-specific winners
3. Qualitative insight themes
4. Consolidated improvement recommendations
5. Next test hypothesis
 
Output: Strategic recommendations for next design iteration
"""
 
    response = await client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    return json.loads(response.text)

class DesignSystemOrchestrator:
    """
    Manage design systems across multiple products/teams
    """
 
    async def detect_consistency_issues(self) -> list:
        """
        Find inconsistencies across all products:
        - Color palette differences
        - Typography misalignment
        - Component API differences
        - Naming convention violations
        """
 
        prompt = f"""
Compare design systems across products and identify inconsistencies:
 
{json.dumps(self.all_products)}
 
Issues to detect:
1. Color inconsistencies
2. Typography misalignment
3. Spacing scale differences
4. Component API variations
5. Naming convention violations
 
Output: List of actionable consolidation opportunities
"""
 
        response = await self.client.models.generate_content(
            model="gemini-2.0-flash",
            contents=prompt
        )
 
        return json.loads(response.text)

response = client.models.generate_content(
    model="gemini-2.0-flash",
    contents=prompt,
    generation_config=genai.types.GenerationConfig(
        temperature=0.0,
        top_p=1.0
    )
)

async def generate_with_verification(design_requirement):
    max_retries = 3
    for attempt in range(max_retries):
        code = await generate_component_code(design_requirement)
        test_result = await run_automated_tests(code)
 
        if test_result["passed"]:
            return code
 
        # Request revision from Gemini
        fix_prompt = f"Fix these test failures: {test_result['failures']}"
        design_requirement["context"] = fix_prompt

def resolve_design_conflict(opinion_a, opinion_b, criteria) -> dict:
    prompt = f"""
Resolve this design conflict:
Team A: {json.dumps(opinion_a)}
Team B: {json.dumps(opinion_b)}
 
Decision criteria: {json.dumps(criteria)}
 
Provide: Resolution + reasoning + audit trail
"""
 
    response = client.models.generate_content(
        model="gemini-2.0-flash",
        contents=prompt
    )
 
    # Log decision for accountability
    save_decision_audit({
        "timestamp": datetime.now(),
        "conflict": {"a": opinion_a, "b": opinion_b},
        "resolution": response.text
    })