Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based workflow tool that facilitates user idea submission and iterative clarification through an AI agent. The main purpose is to create a clear draft user journey and flow diagram based on user inputs while ensuring that all necessary details are captured and understood.

## CORE FEATURES
1. **User Idea Submission**: Users can input their ideas or statements along with a preferred framework for design through a simple text input interface.
2. **Agent Checklist Verification**: An AI agent checks the user's submission against a predefined checklist to determine if more information is needed.
3. **Clarification Queries**: The agent communicates with the user, asking for clarification until the checklist is satisfied.
4. **Draft User Journey Creation**: Once all information is confirmed, the agent generates a detailed user journey description outlining each stage.
5. **Flow Diagram Generation**: The agent creates a flow diagram using markdown syntax, which is then rendered on the frontend using the mermaid.js library.
6. **Improvement Recommendations**: Based on the context, the agent suggests enhancements and optimizations that align with platform capabilities.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, emphasizing clarity and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure optimal legibility.
- **Layout**: A single-column layout with a header, main content area for user submissions and agent interactions, and a footer for additional resources or links. Spacing between elements will be generous to enhance focus.
- **Typography**: Use sans-serif fonts such as Inter or Roboto for a modern look. The font hierarchy will include larger headers for titles, medium-sized text for descriptions, and smaller text for supplementary information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for component-based architecture and type safety.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design adjustments.
- **UI Components**: Use shadcn/ui for accessible and customizable components.
- **State Management**: Utilize React's Context API or Zustand for global state management as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Develop the main components for user input, agent responses, and diagram display.
3. **Implement Agent Logic**: Program the AI agent's workflow, including checklist verification, clarification queries, user journey generation, and markdown creation for diagrams.
4. **Integrate Mermaid.js**: Set up the rendering of markdown flow diagrams on the frontend using the mermaid.js library.
5. **Design Layout**: Apply Tailwind CSS to achieve the minimalist design with proper typography and spacing.
6. **Test User Flows**: Conduct user testing to ensure the application handles various input scenarios effectively and iteratively refines the user experience.

## USER EXPERIENCE
Users will interact with a straightforward interface where they submit their ideas and receive contextual prompts for clarification. The agent will guide them through the iterative process until all necessary details are confirmed. Once the user journey and flow diagram are generated, users can visualize their ideas and receive actionable recommendations, ensuring a seamless and informative experience. The application will be responsive, adapting to various screen sizes to enhance usability across devices.