Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a visual problem-analysis tool for programmers. The main purpose is to help users plan and organize their logic before coding by allowing them to create connected blocks that represent different programming concepts, facilitating a structured thought process.

## CORE FEATURES
1. **Smart Logic Nodes**: Users can create nodes that represent conditions, loops, API calls, and state changes, allowing for a dynamic representation of logic.
2. **Automatic Pseudocode Conversion**: The application will automatically convert the visual logic into pseudocode, helping users to transition smoothly to coding.
3. **Syntax-Aware Suggestions**: As users build their logic flows, the tool will provide syntax-aware suggestions to enhance their coding accuracy.
4. **Expandable Subflows**: For more complex systems, users can create expandable subflows to manage large sets of logic without cluttering the main workspace.
5. **Color-Coded Logic Paths**: Different colors will be used to represent various logic paths, making it easier for users to visualize and follow their logic.
6. **Real-Time Collaboration**: Users can collaborate in real-time with other programmers, allowing for shared problem-solving and idea generation.

## 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 feature a central workspace for block creation, a sidebar for tools and options, and a top navigation bar for project management and user settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API may be used as needed for state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary libraries including Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create the main components: a central workspace for logic blocks, a sidebar for tools, and a top navigation bar.
3. **Develop Logic Nodes**: Implement the logic node component with drag-and-drop functionality using libraries like React DnD.
4. **Implement Pseudocode Conversion**: Develop the algorithm to convert visual logic flows into pseudocode.
5. **Add Collaboration Features**: Integrate real-time collaboration using WebSocket or Firebase.
6. **Test and Refine**: Conduct user testing to refine user experience and adjust features based on feedback.

## USER EXPERIENCE
The application will provide a fast and frictionless experience, allowing users to intuitively drag and drop blocks to sketch their thoughts. Users can easily connect blocks to create logical flows, switch between different views, and see real-time updates from collaborators. The minimalist design will help reduce mental overload, focusing users on problem-solving rather than navigating complex interfaces.