UI Mockup Generator JSON Schema

This document provides a detailed specification of the JSON schema used for configuring mockup UI elements in the UI Mockup Generator application.

Base Schema

All mockups follow this base schema:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "UI Mockup",
  "type": "object",
  "required": ["version", "canvas", "components"],
  "properties": {
    "version": {
      "type": "string",
      "description": "Schema version"
    },
    "canvas": {
      "type": "object",
      "description": "Canvas properties",
      "required": ["width", "height"],
      "properties": {
        "width": {
          "type": "number",
          "description": "Canvas width in pixels"
        },
        "height": {
          "type": "number",
          "description": "Canvas height in pixels"
        },
        "background": {
          "type": "string",
          "description": "Canvas background color (hex, rgb, or named)"
        },
        "gridSize": {
          "type": "number",
          "description": "Size of grid for snapping (if enabled)"
        },
        "showGrid": {
          "type": "boolean",
          "description": "Whether to display the grid"
        }
      }
    },
    "components": {
      "type": "array",
      "description": "Array of UI components",
      "items": {
        "type": "object",
        "required": ["id", "type", "position"],
        "properties": {
          "id": {
            "type": "string",
            "description": "Unique identifier for the component"
          },
          "type": {
            "type": "string",
            "description": "Component type",
            "enum": ["funnel", "chart", "table", "card", "text", "image", "button", "input", "container", "icon", "avatar", "navigation", "modal", "alert"]
          },
          "position": {
            "type": "object",
            "description": "Position on canvas",
            "required": ["x", "y"],
            "properties": {
              "x": {
                "type": "number",
                "description": "X coordinate"
              },
              "y": {
                "type": "number",
                "description": "Y coordinate"
              },
              "z": {
                "type": "number",
                "description": "Z-index/layer order"
              }
            }
          },
          "size": {
            "type": "object",
            "description": "Component dimensions",
            "properties": {
              "width": {
                "type": "number",
                "description": "Width in pixels"
              },
              "height": {
                "type": "number",
                "description": "Height in pixels"
              }
            }
          },
          "style": {
            "type": "object",
            "description": "Visual styling properties",
            "properties": {
              "backgroundColor": {
                "type": "string",
                "description": "Background color"
              },
              "borderRadius": {
                "type": "number",
                "description": "Border radius in pixels"
              },
              "borderWidth": {
                "type": "number",
                "description": "Border width in pixels"
              },
              "borderColor": {
                "type": "string",
                "description": "Border color"
              },
              "borderStyle": {
                "type": "string",
                "enum": ["solid", "dashed", "dotted", "none"],
                "description": "Border style"
              },
              "fontFamily": {
                "type": "string",
                "description": "Font family"
              },
              "fontSize": {
                "type": "number",
                "description": "Font size in pixels"
              },
              "fontWeight": {
                "type": "string",
                "description": "Font weight",
                "enum": ["normal", "bold", "lighter", "bolder", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
              },
              "fontStyle": {
                "type": "string",
                "description": "Font style",
                "enum": ["normal", "italic", "oblique"]
              },
              "textAlign": {
                "type": "string",
                "description": "Text alignment",
                "enum": ["left", "center", "right", "justify"]
              },
              "color": {
                "type": "string",
                "description": "Text color"
              },
              "opacity": {
                "type": "number",
                "description": "Opacity (0-1)"
              },
              "boxShadow": {
                "type": "string",
                "description": "Box shadow CSS value"
              },
              "padding": {
                "type": "string",
                "description": "Padding (CSS shorthand or object)"
              },
              "margin": {
                "type": "string",
                "description": "Margin (CSS shorthand or object)"
              }
            }
          }
        }
      }
    }
  }
}

Component-Specific Schemas

Funnel Component

{
  "type": "funnel",
  "data": {
    "title": {
      "type": "string",
      "description": "Funnel title"
    },
    "steps": {
      "type": "array",
      "description": "Funnel steps",
      "items": {
        "type": "object",
        "required": ["label", "value"],
        "properties": {
          "label": {
            "type": "string",
            "description": "Step label"
          },
          "value": {
            "type": "number",
            "description": "Step value"
          },
          "dropoff": {
            "type": "number",
            "description": "Dropoff percentage"
          },
          "color": {
            "type": "string",
            "description": "Custom color for this step"
          },
          "icon": {
            "type": "string",
            "description": "Icon identifier for this step"
          },
          "conversion": {
            "type": "boolean",
            "description": "Whether this step represents conversion"
          }
        }
      }
    },
    "options": {
      "type": "object",
      "properties": {
        "showPercentages": {
          "type": "boolean",
          "description": "Whether to show percentages"
        },
        "showLabels": {
          "type": "boolean",
          "description": "Whether to show step labels"
        },
        "showValues": {
          "type": "boolean",
          "description": "Whether to show absolute values"
        },
        "orientation": {
          "type": "string",
          "enum": ["vertical", "horizontal"],
          "description": "Funnel orientation"
        },
        "stepNumbering": {
          "type": "boolean",
          "description": "Whether to show step numbers"
        }
      }
    },
    "colors": {
      "type": "object",
      "properties": {
        "primary": {
          "type": "string",
          "description": "Primary color"
        },
        "secondary": {
          "type": "string",
          "description": "Secondary color (dropoff)"
        },
        "tertiary": {
          "type": "string",
          "description": "Tertiary color (background)"
        },
        "success": {
          "type": "string",
          "description": "Success color (conversion)"
        }
      }
    }
  }
}

Chart Component

{
  "type": "chart",
  "chartType": {
    "type": "string",
    "enum": ["bar", "line", "pie", "area", "scatter", "radar", "bubble", "heatmap"],
    "description": "Type of chart to display"
  },
  "data": {
    "title": {
      "type": "string",
      "description": "Chart title"
    },
    "labels": {
      "type": "array",
      "description": "Labels for data points",
      "items": {
        "type": "string"
      }
    },
    "datasets": {
      "type": "array",
      "description": "Data series",
      "items": {
        "type": "object",
        "required": ["label", "data"],
        "properties": {
          "label": {
            "type": "string",
            "description": "Dataset label"
          },
          "data": {
            "type": "array",
            "description": "Data points",
            "items": {
              "type": "number"
            }
          },
          "backgroundColor": {
            "type": ["string", "array"],
            "description": "Background color(s)"
          },
          "borderColor": {
            "type": ["string", "array"],
            "description": "Border color(s)"
          },
          "borderWidth": {
            "type": "number",
            "description": "Border width"
          },
          "fill": {
            "type": "boolean",
            "description": "Whether to fill area (for area charts)"
          },
          "tension": {
            "type": "number",
            "description": "Line tension (for line and area charts)"
          },
          "pointRadius": {
            "type": "number",
            "description": "Point radius (for line and scatter charts)"
          }
        }
      }
    }
  },
  "options": {
    "type": "object",
    "properties": {
      "showLegend": {
        "type": "boolean",
        "description": "Whether to show legend"
      },
      "legendPosition": {
        "type": "string",
        "enum": ["top", "bottom", "left", "right"],
        "description": "Legend position"
      },
      "showGrid": {
        "type": "boolean",
        "description": "Whether to show grid lines"
      },
      "showTooltip": {
        "type": "boolean",
        "description": "Whether to show tooltips"
      },
      "stacked": {
        "type": "boolean",
        "description": "Whether to stack data (bar, area)"
      },
      "aspectRatio": {
        "type": "number",
        "description": "Aspect ratio of the chart"
      },
      "axisLabels": {
        "type": "object",
        "properties": {
          "x": {
            "type": "string",
            "description": "X-axis label"
          },
          "y": {
            "type": "string",
            "description": "Y-axis label"
          }
        }
      }
    }
  }
}

Card Component

{
  "type": "card",
  "data": {
    "header": {
      "type": "object",
      "properties": {
        "title": {
          "type": "string",
          "description": "Card title"
        },
        "subtitle": {
          "type": "string",
          "description": "Card subtitle"
        },
        "icon": {
          "type": "string",
          "description": "Icon identifier"
        },
        "avatar": {
          "type": "string",
          "description": "Avatar image URL"
        }
      }
    },
    "body": {
      "type": "object",
      "properties": {
        "content": {
          "type": "string",
          "description": "Text content"
        },
        "image": {
          "type": "string",
          "description": "Image URL"
        },
        "imagePosition": {
          "type": "string",
          "enum": ["top", "bottom", "left", "right", "background"],
          "description": "Image position"
        }
      }
    },
    "footer": {
      "type": "object",
      "properties": {
        "content": {
          "type": "string",
          "description": "Footer content"
        },
        "actions": {
          "type": "array",
          "description": "Action buttons",
          "items": {
            "type": "object",
            "properties": {
              "label": {
                "type": "string",
                "description": "Button label"
              },
              "icon": {
                "type": "string",
                "description": "Button icon"
              },
              "variant": {
                "type": "string",
                "enum": ["primary", "secondary", "outline", "ghost", "link"],
                "description": "Button variant"
              }
            }
          }
        }
      }
    }
  },
  "options": {
    "type": "object",
    "properties": {
      "elevation": {
        "type": "number",
        "description": "Card elevation level (0-5)"
      },
      "hoverable": {
        "type": "boolean",
        "description": "Whether card has hover effect"
      },
      "outlined": {
        "type": "boolean",
        "description": "Whether to use outline style"
      }
    }
  }
}

Text Component

{
  "type": "text",
  "data": {
    "content": {
      "type": "string",
      "description": "Text content"
    },
    "variant": {
      "type": "string",
      "enum": ["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2", "caption", "overline"],
      "description": "Text variant"
    },
    "truncate": {
      "type": "boolean",
      "description": "Whether to truncate with ellipsis"
    },
    "maxLines": {
      "type": "number",
      "description": "Maximum number of lines"
    }
  }
}

Additional Components

Additional component schemas will follow similar patterns for:

Table/Data Grid
Button
Input (text, checkbox, select, etc.)
Container/Box
Icon
Avatar
Navigation (tabs, breadcrumbs, etc.)
Modal/Dialog
Alert/Notification
Image
Progress indicators

Example Complete Mockup

{
  "version": "1.0",
  "canvas": {
    "width": 1200,
    "height": 800,
    "background": "#f5f5f5",
    "gridSize": 8,
    "showGrid": true
  },
  "components": [
    {
      "id": "header-1",
      "type": "text",
      "position": { "x": 40, "y": 40, "z": 1 },
      "data": {
        "content": "FUNNEL VIEWER",
        "variant": "h2"
      },
      "style": {
        "fontFamily": "Arial",
        "fontWeight": "bold",
        "color": "#1a2b47"
      }
    },
    {
      "id": "steps-label",
      "type": "text",
      "position": { "x": 40, "y": 100, "z": 1 },
      "data": {
        "content": "STEPS",
        "variant": "body2"
      },
      "style": {
        "fontFamily": "Arial",
        "fontWeight": "bold",
        "color": "#666666"
      }
    },
    {
      "id": "funnel-1",
      "type": "funnel",
      "position": { "x": 100, "y": 140, "z": 1 },
      "size": { "width": 500, "height": 400 },
      "data": {
        "steps": [
          { "label": "Product Details - Viewed", "value": 100, "dropoff": 36 },
          { "label": "Add to Cart - Clicked", "value": 64, "dropoff": 27 },
          { "label": "Details - Entered", "value": 37, "dropoff": 33 },
          { "label": "Place Order - Clicked", "value": 16, "conversion": true }
        ],
        "options": {
          "showPercentages": true,
          "showLabels": true,
          "orientation": "vertical",
          "stepNumbering": true
        },
        "colors": {
          "primary": "#1a2b47",
          "secondary": "#e0756b",
          "tertiary": "#d3d3d3",
          "success": "#4caf50"
        }
      },
      "style": {
        "borderRadius": 5,
        "fontFamily": "Arial",
        "fontSize": 14
      }
    },
    {
      "id": "segments-card",
      "type": "card",
      "position": { "x": 650, "y": 140, "z": 1 },
      "size": { "width": 400, "height": 250 },
      "data": {
        "header": {
          "title": "SEGMENTS & FILTERS"
        },
        "body": {
          "content": ""
        }
      },
      "style": {
        "backgroundColor": "#f0f4ff",
        "borderRadius": 8,
        "padding": "16px"
      }
    },
    {
      "id": "replay-card",
      "type": "card",
      "position": { "x": 650, "y": 410, "z": 1 },
      "size": { "width": 400, "height": 250 },
      "data": {
        "header": {
          "title": "ANALYSIS REPLAY"
        },
        "body": {
          "content": ""
        }
      },
      "style": {
        "backgroundColor": "#e6fff0",
        "borderRadius": 8,
        "padding": "16px"
      }
    }
  ]
}

This schema provides a foundation for defining UI mockups in a structured, consistent format that can be easily generated by LLMs or created through the UI Mockup Generator application.

16 KiB Raw Permalink Blame History