Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to manage wall positioning without creating unintended nodes on adjacent walls. The application focuses on providing a streamlined user experience, allowing users to manipulate wall positions efficiently while maintaining a clean and intuitive interface.

## CORE FEATURES
1. **Wall Manipulation Tool**: Users can drag and reposition walls within the application. The tool ensures that moving a wall does not create additional nodes on adjacent walls.
2. **Real-Time Feedback**: As users move walls, the application provides instant visual feedback, indicating potential issues or confirmations of successful moves.
3. **Undo/Redo Functionality**: Users can easily revert changes or restore previous positions of walls to facilitate experimentation and corrections.
4. **Save and Load Configurations**: Users can save their wall configurations and load them later, providing flexibility in managing different layouts.
5. **Responsive Design**: The application is fully responsive, ensuring usability across various devices and screen sizes.
6. **User Guide/Help Section**: A built-in help section provides guidance on using the wall manipulation tool effectively.

## 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 consists of a central workspace for the wall manipulation tool, flanked by a sidebar for controls and a top navigation bar for saving/loading configurations.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's Context API or Zustand for managing application state

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React application with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS for styling and shadcn/ui for UI components, along with any other necessary libraries (e.g., Zustand for state management).
3. **Create the Layout**: Develop the main layout structure comprising the workspace, sidebar, and navigation bar using Tailwind CSS for styling.
4. **Implement the Wall Manipulation Tool**: Create a component that allows users to drag and drop walls. Ensure it integrates with the state management system to reflect real-time changes.
5. **Add Undo/Redo Functionality**: Implement a mechanism to track changes and enable undo/redo actions.
6. **Develop Save/Load Features**: Create functions that allow users to save their current wall configuration and load previously saved layouts.
7. **Build the Help Section**: Design a user guide that explains how to use the wall manipulation tool effectively.
8. **Test the Application**: Perform thorough testing to ensure all functionalities work as intended across different devices and browsers.

## USER EXPERIENCE
Users will interact with the application primarily through the wall manipulation tool. They can click and drag walls to reposition them, receiving real-time feedback that shows the impact of their actions. The sidebar allows for quick access to save/load features and the help section. The responsive design ensures that users have a seamless experience, whether on a desktop or mobile device, enhancing usability and accessibility.