First push
This commit is contained in:
Sam Redfern committed
1 parent
db25d6dbda
commit
7299578599
48 files changed
+17513
-1
No files matched your search
@@ -0,0 +1,406 @@
|
||||
# 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
|
||||
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
```typescript
|
||||
// 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:
|
||||
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
```typescript
|
||||
// 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:
|
||||
|
||||
```typescript
|
||||
// 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.
|
||||
@@ -0,0 +1,638 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,354 @@
|
||||
# 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
|
||||
|
||||
1. **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
|
||||
|
||||
2. **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
|
||||
|
||||
3. **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:
|
||||
|
||||
1. **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
|
||||
|
||||
2. **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
|
||||
|
||||
3. **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
|
||||
|
||||
4. **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:**
|
||||
```json
|
||||
{
|
||||
"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
|
||||
|
||||
1. **Invalid JSON Structure**
|
||||
- Ensure the LLM outputs valid JSON format
|
||||
- Check for missing commas, brackets, or quotation marks
|
||||
- Validate the JSON structure before importing
|
||||
|
||||
2. **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
|
||||
|
||||
3. **Incorrect Component Types**
|
||||
- Verify that only supported component types are used
|
||||
- Check that component-specific properties follow the schema
|
||||
|
||||
4. **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:
|
||||
|
||||
1. Generate the basic structure and layout first
|
||||
2. Add detailed components one by one
|
||||
3. Refine styling and positioning iteratively
|
||||
|
||||
### Using Component Templates
|
||||
|
||||
Create templates for common components that the LLM can reference:
|
||||
|
||||
```json
|
||||
{
|
||||
"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:
|
||||
|
||||
1. **Layout-focused prompts**: Emphasize positioning and overall structure
|
||||
2. **Data-focused prompts**: Emphasize data visualization aspects
|
||||
3. **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.
|
||||
@@ -0,0 +1,204 @@
|
||||
# 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.
|
||||
Reference in new issue
Block a user