mock_tool_image_gen/specs/implementation_plan.md

UI Mockup Generator - Implementation Plan

This document outlines the technical implementation plan for building the UI Mockup Generator application.

Technology Stack

Frontend

• Framework: React.js (v18+) with TypeScript
• State Management: Redux Toolkit
• UI Component Library: Chakra UI
• Styling: Emotion (comes with Chakra UI)
• Canvas Management: react-konva or fabric.js
• Charts: recharts
• Color Picker: react-colorful
• Drag and Drop: react-dnd or react-beautiful-dnd
• Export Utilities: html-to-image, file-saver

Backend (Optional - for saving projects)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose
• Authentication: JWT
• File Storage: Local or AWS S3

Project Structure

ui-mockup-generator/
├── client/                      # Frontend
│   ├── public/
│   ├── src/
│   │   ├── assets/              # Static assets
│   │   ├── components/          # Reusable UI components
│   │   │   ├── canvas/          # Canvas and drawing components
│   │   │   ├── common/          # Common UI components
│   │   │   ├── editor/          # Editor-specific components
│   │   │   ├── mockups/         # Mockup component implementations
│   │   │   └── panels/          # Control panels and toolbars
│   │   ├── hooks/               # Custom React hooks
│   │   ├── store/               # Redux store setup
│   │   │   ├── slices/          # Redux slices
│   │   │   └── index.ts         # Store configuration
│   │   ├── types/               # TypeScript type definitions
│   │   ├── utils/               # Utility functions
│   │   ├── App.tsx              # Main app component
│   │   └── index.tsx            # Entry point
│   ├── package.json
│   └── tsconfig.json
├── server/                      # Backend (optional)
│   ├── src/
│   │   ├── controllers/         # Route controllers
│   │   ├── middleware/          # Express middleware
│   │   ├── models/              # Database models
│   │   ├── routes/              # API routes
│   │   ├── utils/               # Utility functions
│   │   └── index.ts             # Entry point
│   ├── package.json
│   └── tsconfig.json
├── package.json                 # Root package.json
└── README.md

Implementation Phases

Phase 1: Project Setup and Core Infrastructure (Week 1)

1. Project Initialization

   • Set up React project with TypeScript
   • Configure Chakra UI
   • Set up Redux store with Redux Toolkit
   • Create basic folder structure

2. Canvas Implementation

   • Implement basic canvas with react-konva or fabric.js
   • Set up zoom and pan functionality
   • Implement grid and snap-to-grid
   • Create base component class structure

3. Basic Component System

   • Implement component registration system
   • Create base component rendering framework
   • Develop component selection and highlighting
   • Basic property panel implementation

Phase 2: Core Components and Editor (Week 2)

1. Basic Shape Components

   • Rectangle/box component
   • Text component
   • Image component
   • Simple container component

2. Editor Features

   • Component drag-and-drop
   • Resize and rotation handles
   • Layer management
   • Copy, paste, delete operations

3. Property Panel

   • Component property editing
   • Style editing (colors, borders, etc.)
   • Position and size controls
   • Common property editors

Phase 3: Advanced Components (Week 3)

1. Funnel Component

   • Implement funnel visualization
   • Configure step management
   • Style customization
   • Dropoff percentage visualization

2. Chart Components

   • Bar chart implementation
   • Line chart implementation
   • Pie chart implementation
   • Data configuration

3. UI Components

   • Card component
   • Button component
   • Form elements
   • Navigation components

Phase 4: JSON Import/Export & Styling (Week 4)

1. JSON Schema

   • Finalize JSON schema
   • Implement validation
   • Create export functionality
   • Import from JSON

2. Style System

   • Color palette management
   • Theme support
   • Style presets
   • Responsive design tools

3. Export System

   • Export as PNG/SVG
   • Export JSON configuration
   • Clipboard support

Phase 5: LLM Integration & Documentation (Week 5)

1. LLM Integration

   • Create LLM-friendly schema documentation
   • Build example prompts
   • Implement schema validation for LLM outputs
   • Test with various prompts

2. Documentation

   • User documentation
   • API documentation
   • JSON schema documentation
   • Example gallery

3. Final Polish

   • Performance optimization
   • Bug fixes
   • UI/UX improvements
   • Accessibility audit

Component Implementation Details

Canvas System

The canvas will be the core of the application, responsible for:

• Rendering components
• Handling selection and focus
• Managing component hierarchy
• Implementing snap-to-grid
• Providing zoom and pan functionality

// Example Canvas component outline
interface CanvasProps {
  width: number;
  height: number;
  background: string;
  components: Component[];
  gridSize: number;
  showGrid: boolean;
}

const Canvas: React.FC<CanvasProps> = ({ 
  width, 
  height, 
  background, 
  components,
  gridSize,
  showGrid 
}) => {
  // Canvas implementation using react-konva or similar
};

Component System

Each component will be implemented as a React component with:

• Standard props interface
• Rendering logic
• Property controls
• Selection handling
• Drag behavior

// Example base component interface
interface BaseComponentProps {
  id: string;
  type: string;
  position: { x: number; y: number; z?: number };
  size?: { width: number; height: number };
  style?: Record<string, any>;
  data?: Record<string, any>;
  selected?: boolean;
  onSelect?: (id: string) => void;
}

// Example component registration system
const componentRegistry = {
  funnel: FunnelComponent,
  chart: ChartComponent,
  text: TextComponent,
  // ...other components
};

const renderComponent = (component: BaseComponentProps) => {
  const Component = componentRegistry[component.type];
  if (!Component) return null;
  return <Component {...component} />;
};

Funnel Component Implementation

The funnel component will visualize conversion funnels:

// Example funnel component implementation outline
interface FunnelStep {
  label: string;
  value: number;
  dropoff?: number;
  color?: string;
  conversion?: boolean;
}

interface FunnelProps extends BaseComponentProps {
  data: {
    steps: FunnelStep[];
    options?: {
      showPercentages?: boolean;
      showLabels?: boolean;
      orientation?: 'vertical' | 'horizontal';
    };
    colors?: {
      primary: string;
      secondary: string;
      tertiary: string;
      success: string;
    };
  };
}

const FunnelComponent: React.FC<FunnelProps> = ({ id, position, size, data, style, selected, onSelect }) => {
  // Funnel rendering logic using SVG or Canvas
};

JSON Import/Export System

The JSON import/export system will handle:

• Converting the internal state to JSON
• Importing JSON into the application state
• Validating JSON against the schema
• Generating code for external use

// Example JSON export function outline
const exportToJson = (state: AppState): string => {
  const { canvas, components } = state;
  
  return JSON.stringify({
    version: '1.0',
    canvas: {
      width: canvas.width,
      height: canvas.height,
      background: canvas.background,
      gridSize: canvas.gridSize,
      showGrid: canvas.showGrid
    },
    components: components.map(component => ({
      id: component.id,
      type: component.type,
      position: component.position,
      size: component.size,
      style: component.style,
      data: component.data
    }))
  }, null, 2);
};

Redux Store Structure

The Redux store will manage the application state:

// Example Redux slice structure
interface AppState {
  canvas: {
    width: number;
    height: number;
    background: string;
    gridSize: number;
    showGrid: boolean;
    zoom: number;
    pan: { x: number; y: number };
  };
  components: Component[];
  selection: {
    selectedIds: string[];
    activeId: string | null;
  };
  history: {
    past: AppState[];
    future: AppState[];
  };
  ui: {
    activeTool: string;
    activePanel: string;
    sidebarWidth: number;
    colorPalette: string[];
    theme: 'light' | 'dark';
  };
}

API Endpoints (Optional Backend)

If implementing a backend for project saving:

POST /api/projects - Create a new project
GET /api/projects - List user projects
GET /api/projects/:id - Get a specific project
PUT /api/projects/:id - Update a project
DELETE /api/projects/:id - Delete a project

POST /api/auth/register - Register a new user
POST /api/auth/login - Login
POST /api/auth/logout - Logout

Development and Build Process

1. Development Setup

   • npm install - Install dependencies
   • npm run dev - Start development server
   • npm run test - Run tests

2. Build Process

   • npm run build - Build production version
   • npm run lint - Run linting
   • npm run format - Run code formatting

3. Deployment

   • Deploy frontend to Vercel or Netlify
   • Deploy backend to Heroku or similar (if implemented)

Testing Strategy

1. Unit Tests

   • Component rendering tests
   • Utility function tests
   • Redux reducer tests

2. Integration Tests

   • Component interaction tests
   • JSON import/export tests
   • Redux action flow tests

3. E2E Tests

   • User flow tests
   • Export functionality tests

Next Steps and Future Enhancements

1. Advanced Functionality

   • Collaboration features
   • Version history
   • Template marketplace
   • Custom component creation

2. Integration Options

   • API for programmatic access
   • Embed code generation
   • Plugin system

3. AI Enhancements

   • AI-assisted design suggestions
   • Automated layout optimization
   • Smart data generation

This implementation plan provides a roadmap for building the UI Mockup Generator application from initial setup through to completion, with a focus on creating a flexible, extensible system for generating UI mockups that can be easily integrated with LLMs.