Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a powerfuli visualization tool designed to generate real work workflows, mind maps, and architectural roadmaps. Users can create and visualize complex workflows and processes, utilizing a clean interface that simplifies interaction and enhances the understanding of results.

## CORE FEATURES
1. **Workflow Generation**: Users can create workflows by inputting data in a structured format. The app will generate visual representations of workflows in real-time.
2. **Mind Map Creation**: A dedicated feature for users to build mind maps that visually organize ideas and projects, with easy drag-and-drop functionality.
3. **Archival Visualizations**: Users can access previous visualizations and workflows, allowing them to analyze and refine their work over time.
4. **Live Previews**: As users create or edit workflows, they can see immediate visual feedback in a live preview section, enhancing user experience and understanding.
5. **Export Options**: Users can export their workflows and visualizations in various formats (e.g., PDF, image files) for sharing or presentation purposes.
6. **User Accounts**: Secure user authentication system allowing users to save and manage their workflows and visualizations.

## 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**: A single-column layout with a prominent hero section at the top, followed by features, a live preview area, and a call-to-action section at the bottom.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Folder Structure**: Organize components, pages, and assets into a clear folder structure.
3. **Develop Core Components**: Build the main components including the workflow generator, mind map builder, and live preview area.
4. **Implement User Authentication**: Set up a secure authentication system, allowing users to create accounts and save their work.
5. **Add Functionality for Workflow Generation**: Develop the logic for creating and visualizing workflows based on user input.
6. **Integrate Live Preview**: Ensure that the live preview updates in real-time as users modify their workflows.
7. **Testing**: Conduct thorough testing, including unit tests and user acceptance testing (UAT).
8. **Deploy the Application**: Use a service like Vercel or Netlify to deploy the application.

## USER EXPERIENCE
Users will interact with the application through an intuitive interface. They will start by selecting the type of visualization they wish to create (workflow or mind map) and input their data. As they work, they will see live updates in the preview section, allowing for immediate feedback. The app will provide easy export options for sharing their completed visualizations. The design focuses on clarity and simplicity, ensuring users can navigate and utilize the app effectively.