Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
TacticalWeb AI is a comprehensive, production-ready full-stack web application designed to help users engineer dominant web experiences using AI-driven methodologies, including SMART objectives, SWOT diagnostics, and UX power laws. The platform will provide an interactive project generator, allowing users to create tailored web applications while leveraging tactical UX strategies.

## CORE FEATURES
1. **Guided Builder Workflow**: A stateful, multi-step wizard that enables users to specify their project style, niche, SWOT analysis, and tactical UX patterns, with persistent local storage for seamless navigation.
2. **Dynamic Readiness Metrics**: Real-time visual indicators for SMART metrics, including an interactive SWOT matrix and a readiness score that evolves as users adjust their inputs.
3. **Modular UX Patterns Selection**: A grid of UX pattern cards that highlight various design strategies aimed at enhancing user engagement and conversion rates.
4. **AI Blueprint & Code Generation**: Users can preview generated UI wireframes and export code in various formats (React/Tailwind, PDF reports), with toast notifications confirming successful actions.
5. **User Dashboard**: A personal space for users to manage saved projects, view export logs, and access API keys, fostering an organized workflow.
6. **Live AI Assistant - ARIANE**: An integrated AI chat feature that offers real-time suggestions and code snippets to enhance user experience and project outcomes.

## 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 application will feature a responsive layout with a structured header, a multi-step wizard section, a user dashboard, and a footer with essential links and status indicators.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for global state management.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript, Tailwind CSS, and required dependencies (e.g., React Router for navigation).
2. **Create the Header Component**: Develop the header including logo, navigation links, AI quick launcher button, user profile menu, and CTAs.
3. **Implement the Footer**: Create a multi-column footer layout with product links, legal information, social links, and a system status badge.
4. **Build the Guided Builder Wizard**: Design the wizard with local storage capabilities to hold user inputs across four steps.
5. **Develop the Dynamic Metrics**: Integrate the real-time SMART scoring system and SWOT matrix with visual progress indicators.
6. **Design UX Pattern Cards**: Create a grid layout for selectable UX patterns, ensuring high-contrast states for active selections.
7. **Set Up AI Blueprint & Code Export**: Implement the live preview functionality and export options, ensuring a smooth user experience with toast notifications.
8. **User Dashboard Creation**: Build the dashboard to display saved projects, export logs, and API key management.
9. **Integrate Live AI Assistant - ARIANE**: Develop the chat interface for ARIANE, incorporating features for user support and interaction.
10. **Test & Optimize**: Conduct thorough testing for functionality, responsiveness, and user experience, making adjustments as necessary.

## USER EXPERIENCE
Users will engage with TacticalWeb AI through an intuitive interface that guides them step-by-step in building their web applications. The dynamic metrics will provide instant feedback, while the modular UX patterns will empower users to make informed design choices. The live AI assistant will be readily available for support, making the entire process seamless and efficient. This minimalist design will ensure users can navigate easily, focusing on their project goals without distraction.