Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application aimed at creating a realistic representation of a public square from a superior view, ensuring all elements are placed accurately and proportionally. The application will allow users to visualize the layout and design of the square while maintaining a clean and minimalist aesthetic.

## CORE FEATURES
1. **Interactive 3D Model**: Users can interact with a 3D model of the square, rotating and zooming to view different angles and details.
2. **Element Placement**: Users can add, move, and scale various elements like benches, trees, and fountains in real-time to see how they fit within the space.
3. **Measurement Tools**: Integrated tools to measure distances and areas within the square to maintain accurate proportions.
4. **Save & Share Designs**: Users can save their designs and share them with others via unique links.
5. **Feedback System**: A feature that allows users to leave comments or suggestions on designs, fostering community interaction.
6. **Export Options**: Ability to export designs as images or CAD files for further use or presentation.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will consist of a top navigation bar, a central interactive area for the 3D model, and a sidebar for tools and settings, ensuring an intuitive user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (if needed for managing application state)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Design Structure**: Create the main layout with a navigation bar, interactive area, and sidebar using Tailwind CSS for responsive design.
3. **Integrate 3D Model**: Use a library like Three.js to create and render the 3D model of the square.
4. **Implement Element Placement**: Develop functionality for adding and manipulating elements within the model.
5. **Add Measurement Tools**: Implement measurement tools that allow users to calculate distances and areas.
6. **Develop Feedback System**: Create a simple backend to store user feedback and comments on designs.
7. **Implement Save & Share Feature**: Allow users to save their designs in local storage or a database and generate shareable links.
8. **Export Functionality**: Integrate options for exporting designs to images or CAD formats.

## USER EXPERIENCE
Users will interact with the application through a clean and intuitive interface. They can easily navigate the tools from the sidebar to add elements, measure distances, and save their designs. The responsive design ensures usability across devices, providing a seamless experience whether on desktop or mobile. Users can share their designs for feedback, enhancing collaboration and creativity within the community.