First push

README.md

@@ -1,2 +1,94 @@
-# mock_tool_image_gen
+# 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.
+
+![UI Mockup Generator](https://placeholder-image-url.com/ui-mockup-generator.png)
+
+## 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.