LLM Integration Guide for UI Mockup Generator

This document provides guidelines for integrating Large Language Models (LLMs) with the UI Mockup Generator to automatically generate UI mockups from natural language descriptions.

Overview

The UI Mockup Generator uses a standardized JSON schema to define mockups. This schema is designed to be both human-readable and machine-friendly, making it ideal for LLM integration. By providing appropriate prompts and examples, LLMs can generate valid JSON configurations that can be directly imported into the UI Mockup Generator.

Prompting Strategy

Best Practices for Prompting LLMs

Be Specific About Requirements
- Specify the exact type of UI mockup needed (e.g., "a funnel visualization showing conversion rates")
- Include details about colors, layout, and component types
- Mention any specific data that should be visualized
Use Structured Prompts
- Start with a clear request for a UI mockup in JSON format
- Specify that the output should follow the UI Mockup Generator schema
- Request specific components where appropriate
- Include any size/dimension constraints
Provide Schema Context
- Include a brief explanation of the schema structure
- Mention that the output should be valid JSON
- Reference specific component types available in the schema

Example Prompts

Basic Prompt Structure:

Generate a UI mockup in JSON format for the UI Mockup Generator that shows [description of desired mockup]. 
The mockup should include [specific component requirements].
Follow the UI Mockup Generator schema with version 1.0 format.

Specific Example (Funnel Visualization):

Generate a UI mockup in JSON format for the UI Mockup Generator that shows an e-commerce funnel visualization.
The funnel should show the conversion path from product view to purchase with the following steps:
1. Product View (1000 visitors)
2. Add to Cart (650 visitors)
3. Checkout Started (350 visitors)
4. Purchase Completed (200 visitors)

Use a clean, modern design with blue as the primary color.
Include a title at the top and show percentage dropoffs between steps.
Follow the UI Mockup Generator schema with version 1.0 format.

Schema Guidelines for LLMs

When prompting an LLM to generate a mockup, it's helpful to include these guidelines to improve the quality of the output:

Required Structure
- All mockups must include version, canvas, and components properties
- Each component must have a unique id, type, and position
- Follow the type-specific schema for each component type
Component Types
- Use appropriate component types (funnel, chart, text, card, etc.)
- Include all required properties for each component type
- Use consistent naming for component properties
Styling Guidelines
- Use hex color codes (e.g., "#1a2b47") or named colors
- Follow CSS-like conventions for styling properties
- Keep font choices consistent throughout the mockup
Data Representation
- Use realistic data values for visualizations
- Ensure chart data is properly formatted as arrays
- Match labels and values appropriately

Example LLM Interaction

User Prompt:

Generate a UI mockup in JSON format for the UI Mockup Generator that shows a product analytics dashboard.
It should include:
1. A header with the title "Product Analytics Dashboard"
2. A funnel showing the conversion flow from view to purchase
3. A bar chart showing top 5 products by revenue
4. A card showing key metrics (total revenue, conversion rate, average order value)
Use a professional color scheme with blue as the primary color.

Expected LLM Response:

{
  "version": "1.0",
  "canvas": {
    "width": 1200,
    "height": 800,
    "background": "#f5f5f5",
    "gridSize": 8,
    "showGrid": false
  },
  "components": [
    {
      "id": "header",
      "type": "text",
      "position": { "x": 40, "y": 30, "z": 1 },
      "data": {
        "content": "Product Analytics Dashboard",
        "variant": "h1"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 32,
        "fontWeight": "bold",
        "color": "#1a2b47"
      }
    },
    {
      "id": "conversion-funnel",
      "type": "funnel",
      "position": { "x": 40, "y": 100, "z": 1 },
      "size": { "width": 500, "height": 300 },
      "data": {
        "title": "Conversion Funnel",
        "steps": [
          { "label": "Product View", "value": 5000, "dropoff": 30 },
          { "label": "Add to Cart", "value": 3500, "dropoff": 40 },
          { "label": "Checkout", "value": 2100, "dropoff": 25 },
          { "label": "Purchase", "value": 1575, "conversion": true }
        ],
        "options": {
          "showPercentages": true,
          "showLabels": true,
          "orientation": "vertical"
        },
        "colors": {
          "primary": "#2563eb",
          "secondary": "#ef4444",
          "tertiary": "#e5e7eb",
          "success": "#10b981"
        }
      },
      "style": {
        "borderRadius": 8,
        "backgroundColor": "#ffffff",
        "padding": "16px",
        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
      }
    },
    {
      "id": "top-products-chart",
      "type": "chart",
      "position": { "x": 580, "y": 100, "z": 1 },
      "size": { "width": 580, "height": 300 },
      "chartType": "bar",
      "data": {
        "title": "Top 5 Products by Revenue",
        "labels": ["Product A", "Product B", "Product C", "Product D", "Product E"],
        "datasets": [
          {
            "label": "Revenue",
            "data": [12000, 9500, 7200, 6800, 5400],
            "backgroundColor": "#2563eb"
          }
        ]
      },
      "options": {
        "showLegend": false,
        "showGrid": true,
        "showTooltip": true,
        "axisLabels": {
          "x": "Products",
          "y": "Revenue ($)"
        }
      },
      "style": {
        "borderRadius": 8,
        "backgroundColor": "#ffffff",
        "padding": "16px",
        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
      }
    },
    {
      "id": "key-metrics-card",
      "type": "card",
      "position": { "x": 40, "y": 420, "z": 1 },
      "size": { "width": 1120, "height": 160 },
      "data": {
        "header": {
          "title": "Key Metrics"
        },
        "body": {
          "content": ""
        }
      },
      "style": {
        "borderRadius": 8,
        "backgroundColor": "#ffffff",
        "padding": "16px",
        "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
      }
    },
    {
      "id": "revenue-metric",
      "type": "text",
      "position": { "x": 80, "y": 470, "z": 2 },
      "data": {
        "content": "Total Revenue",
        "variant": "body1"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 16,
        "color": "#6b7280"
      }
    },
    {
      "id": "revenue-value",
      "type": "text",
      "position": { "x": 80, "y": 500, "z": 2 },
      "data": {
        "content": "$157,500",
        "variant": "h3"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 28,
        "fontWeight": "bold",
        "color": "#2563eb"
      }
    },
    {
      "id": "conversion-metric",
      "type": "text",
      "position": { "x": 440, "y": 470, "z": 2 },
      "data": {
        "content": "Conversion Rate",
        "variant": "body1"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 16,
        "color": "#6b7280"
      }
    },
    {
      "id": "conversion-value",
      "type": "text",
      "position": { "x": 440, "y": 500, "z": 2 },
      "data": {
        "content": "31.5%",
        "variant": "h3"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 28,
        "fontWeight": "bold",
        "color": "#2563eb"
      }
    },
    {
      "id": "aov-metric",
      "type": "text",
      "position": { "x": 800, "y": 470, "z": 2 },
      "data": {
        "content": "Average Order Value",
        "variant": "body1"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 16,
        "color": "#6b7280"
      }
    },
    {
      "id": "aov-value",
      "type": "text",
      "position": { "x": 800, "y": 500, "z": 2 },
      "data": {
        "content": "$100.00",
        "variant": "h3"
      },
      "style": {
        "fontFamily": "Inter",
        "fontSize": 28,
        "fontWeight": "bold",
        "color": "#2563eb"
      }
    }
  ]
}

Common Issues and Troubleshooting

Invalid JSON Structure
- Ensure the LLM outputs valid JSON format
- Check for missing commas, brackets, or quotation marks
- Validate the JSON structure before importing
Missing Required Properties
- Verify that all components have the required properties (id, type, position)
- Check that the canvas has width and height properties
- Ensure nested objects have their required properties
Incorrect Component Types
- Verify that only supported component types are used
- Check that component-specific properties follow the schema
Inconsistent Styling
- Look for inconsistent color formats or values
- Check for missing or invalid style properties
- Ensure font properties are consistent

Advanced LLM Integration

Incremental Mockup Generation

For complex mockups, consider using an incremental approach:

Generate the basic structure and layout first
Add detailed components one by one
Refine styling and positioning iteratively

Using Component Templates

Create templates for common components that the LLM can reference:

{
  "funnel_template": {
    "type": "funnel",
    "position": { "x": 0, "y": 0 },
    "size": { "width": 500, "height": 300 },
    "data": {
      "steps": [
        { "label": "Step 1", "value": 100, "dropoff": 20 },
        { "label": "Step 2", "value": 80, "dropoff": 25 },
        { "label": "Step 3", "value": 60, "conversion": true }
      ]
    }
  }
}

Specialized Prompting

For specialized mockups, use prompts that focus on specific aspects:

Layout-focused prompts: Emphasize positioning and overall structure
Data-focused prompts: Emphasize data visualization aspects
Style-focused prompts: Emphasize colors, typography, and visual design

Conclusion

By following these guidelines, LLMs can effectively generate UI mockups that are compatible with the UI Mockup Generator. The structured JSON schema provides a clear framework for the LLM to follow, while the flexibility of the schema allows for creative design variations. As LLM capabilities continue to improve, the quality and complexity of generated mockups will increase, making this integration increasingly valuable for rapid prototyping and design exploration.

11 KiB Raw Blame History