# UI Mockup Generator - Software Specifications

## Overview
The UI Mockup Generator is a web application that allows users to create, customize, and export mockup UI elements for various interfaces. Similar to the image provided (showing a Funnel Viewer with analytics), the tool will allow users to quickly create professional-looking UI mockups through a simple interface. The configuration for these mockups will be stored in JSON format, making it compatible with LLM-based generation.

## Core Features

1. **Component Library**
   - Funnel diagrams with drop-off percentages
   - Charts and graphs (bar, line, pie, area, scatter)
   - Data tables and lists
   - Form elements (inputs, dropdowns, checkboxes)
   - Navigation components (tabs, breadcrumbs, menus)
   - Cards and containers
   - Modal windows and dialogs
   - Alerts and notifications
   - User avatars and profiles

2. **Styling Options**
   - Color picker with standard palette and custom color support
   - Typography settings (font family, size, weight, style)
   - Spacing controls (margin, padding)
   - Border customization (width, style, radius)
   - Shadow and elevation effects
   - Background patterns and gradients
   - Responsive sizing options

3. **Layout Management**
   - Drag-and-drop interface
   - Grid layout system
   - Alignment and distribution tools
   - Layers panel for managing element stacking
   - Grouping and ungrouping elements

4. **Data and Interactions**
   - Sample data generation for charts and tables
   - Custom data input options
   - Basic interaction annotations
   - User flow connections between components
   - State variations (hover, selected, disabled)

5. **Export and Sharing**
   - Export as PNG, SVG, or PDF
   - Export JSON configuration
   - Share via URL
   - Project saving and loading

## Technical Architecture

### Frontend
- **Framework**: React.js with TypeScript
- **State Management**: Redux or Context API
- **UI Component Library**: Chakra UI
- **Styling**: Styled Components / Emotion
- **Canvas Rendering**: html-to-image or dom-to-image for exports
- **Charts**: recharts or Chart.js

### Backend
- **Runtime**: Node.js
- **Framework**: Express.js
- **Database**: MongoDB (for saving user projects)
- **Authentication**: JWT-based auth (optional)
- **File Storage**: Local or AWS S3 (for exports)

### Deployment
- **Containerization**: Docker
- **Hosting**: Vercel, Netlify, or AWS

## JSON Schema

The UI components will be configured using a standardized JSON format that includes:

```json
{
  "version": "1.0",
  "canvas": {
    "width": 1200,
    "height": 800,
    "background": "#f5f5f5"
  },
  "components": [
    {
      "id": "unique-id-1",
      "type": "funnel",
      "position": { "x": 50, "y": 100 },
      "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 }
        ],
        "colors": {
          "primary": "#1a2b47",
          "secondary": "#e0756b",
          "tertiary": "#d3d3d3",
          "success": "#4caf50"
        }
      },
      "style": {
        "borderRadius": 5,
        "fontFamily": "Arial",
        "fontSize": 14
      }
    }
  ]
}
```

## LLM Integration Guidelines

To ensure compatibility with LLM-based generation, the following guidelines will be followed:

1. **Component Types**: All components will have standardized types and properties
2. **Naming Conventions**: Consistent property naming across components
3. **Color References**: Support for both hex codes and named colors
4. **Documentation**: Comprehensive schema documentation
5. **Validation**: JSON schema validation to ensure correctness

## Development Roadmap

### Phase 1: Core Framework (Weeks 1-2)
- Set up project structure and build pipeline
- Implement basic canvas and component rendering
- Create essential UI components (rectangles, text, basic charts)
- Implement JSON export/import functionality

### Phase 2: Component Library (Weeks 3-4)
- Develop funnel diagram component
- Add various chart types 
- Create form elements and UI controls
- Implement styling options and property panel

### Phase 3: Advanced Features (Weeks 5-6)
- Build layer management and z-index control
- Add drag-and-drop functionality
- Implement export options
- Create preset templates and example mockups

### Phase 4: Refinement and Documentation (Weeks 7-8)
- Optimize performance
- Improve user experience
- Write comprehensive documentation
- Create example mockups and templates

## Detailed Component Specifications

### Funnel Component

```json
{
  "type": "funnel",
  "data": {
    "steps": [
      {
        "label": "Step Label",
        "value": 100,
        "dropoff": 25,
        "color": "#1a2b47"
      }
    ],
    "showPercentages": true,
    "showLabels": true,
    "orientation": "vertical" // or "horizontal"
  },
  "style": {
    // common style properties
  }
}
```

### Chart Component

```json
{
  "type": "chart",
  "chartType": "bar", // "line", "pie", "area", "scatter"
  "data": {
    "labels": ["Label 1", "Label 2", "Label 3"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [10, 20, 30],
        "backgroundColor": "#4287f5"
      }
    ]
  },
  "options": {
    "showLegend": true,
    "showGrid": true,
    "showTooltip": true
  },
  "style": {
    // common style properties
  }
}
```

Additional components will follow similar structured patterns.

## Conclusion

The UI Mockup Generator will provide a powerful yet intuitive platform for creating high-quality UI mockups with standardized JSON configuration. This will enable both manual creation through the web interface and automated generation through LLM integration, meeting the needs of designers, developers, and AI enthusiasts alike.