638 lines
16 KiB
Markdown
638 lines
16 KiB
Markdown
# 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:
|
|
|
|
```json
|
|
{
|
|
"$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
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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. |