95 lines
3.0 KiB
Markdown
95 lines
3.0 KiB
Markdown
# UI Mockup Generator
|
|
|
|
A web application for creating UI mockups with standardized JSON configuration that can be generated by LLMs.
|
|
|
|
## Overview
|
|
|
|
The UI Mockup Generator allows users to create, customize, and export mockup UI elements for various interfaces. The tool provides a simple yet powerful interface for designing professional-looking UI mockups, with a specific focus on making the configuration format LLM-friendly.
|
|
|
|
|
|
|
|
## Features
|
|
|
|
- **Component Library**: Funnel diagrams, charts, cards, form elements, and more
|
|
- **Style Customization**: Color pickers, typography settings, spacing controls
|
|
- **Layout Management**: Drag-and-drop interface, grid alignment, layers
|
|
- **Export Options**: PNG, SVG, PDF, and JSON configuration
|
|
- **LLM Integration**: Schema designed to be easily generated by language models
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 16.x or higher
|
|
- npm 8.x or higher
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
```
|
|
git clone https://github.com/yourusername/ui-mockup-generator.git
|
|
cd ui-mockup-generator
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```
|
|
npm install
|
|
```
|
|
|
|
3. Start the development server:
|
|
```
|
|
npm run dev
|
|
```
|
|
|
|
4. Open your browser and navigate to `http://localhost:3000`
|
|
|
|
## Usage
|
|
|
|
### Creating a Mockup
|
|
|
|
1. Select components from the sidebar and drag them onto the canvas
|
|
2. Customize component properties using the property panel
|
|
3. Style components using the style panel
|
|
4. Arrange components using drag-and-drop
|
|
|
|
### Exporting a Mockup
|
|
|
|
1. Click the "Export" button in the toolbar
|
|
2. Choose your preferred export format (PNG, SVG, PDF, JSON)
|
|
3. Save the file to your computer
|
|
|
|
### Using with LLMs
|
|
|
|
The UI Mockup Generator uses a standardized JSON schema that is designed to be both human-readable and machine-friendly. This makes it ideal for integration with Large Language Models.
|
|
|
|
See the [LLM Integration Guide](./specs/llm_integration_guide.md) for details on how to prompt LLMs to generate compatible mockups.
|
|
|
|
## Documentation
|
|
|
|
Detailed documentation is available in the `specs` directory:
|
|
|
|
- [Software Specification](./specs/software_specification.md): Detailed overview of the application
|
|
- [JSON Schema](./specs/json_schema.md): Specification of the JSON configuration format
|
|
- [Implementation Plan](./specs/implementation_plan.md): Technical implementation details
|
|
- [LLM Integration Guide](./specs/llm_integration_guide.md): Guidelines for using with LLMs
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
ui-mockup-generator/
|
|
├── client/ # Frontend React application
|
|
├── server/ # Backend Node.js server (optional)
|
|
├── specs/ # Specifications and documentation
|
|
├── package.json # Root package.json
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
|