Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
TacticalWeb AI is a full-stack web application designed to empower users to create impactful web experiences using AI-driven strategies. This platform enables users to engineer customized web applications through a guided builder workflow enhanced by interactive elements, real-time metrics, and support from an integrated AI assistant.

## CORE FEATURES
1. **Guided Builder Workflow**: A multi-step wizard that helps users define their project style, niche, SWOT analysis, and tactical UX patterns, maintaining persistent local storage for seamless navigation.
2. **Dynamic Readiness Metrics**: Real-time visual indicators for SMART metrics, featuring an interactive SWOT matrix and a readiness score that updates as user inputs change.
3. **Modular UX Patterns Selection**: A grid of UX pattern cards showcasing various design strategies aimed at improving user engagement and conversion rates.
4. **AI Blueprint & Code Generation**: Users can preview generated UI wireframes and export code in different formats (React/Tailwind, PDF), with toast notifications confirming successful actions.
5. **User Dashboard**: A personal area for users to manage saved projects, view export logs, and access API keys, enhancing organization and workflow.
6. **Live AI Assistant - ARIANE**: An integrated chat feature that provides real-time suggestions and code snippets to boost 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 necessary dependencies (e.g., React Router for navigation).
2. **Create the Header Component**: Build the header to include the logo, navigation links, AI quick launcher button, user profile menu, and CTAs.
3. **Implement the Footer**: Design a multi-column footer with product links, legal information, social links, and a system status badge.
4. **Build the Guided Builder Wizard**: Develop the wizard with local storage capabilities to hold user inputs across its multi-step process.
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 for active selections.
7. **Set Up AI Blueprint & Code Export**: Implement 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 manage API keys.
9. **Integrate Live AI Assistant - ARIANE**: Develop the chat interface for ARIANE, adding support features and real-time interaction capabilities.
10. **Test & Optimize**: Conduct thorough testing for functionality, responsiveness, and user experience, making adjustments as necessary.

## USER EXPERIENCE
Users will interact with TacticalWeb AI through an intuitive interface that guides them step-by-step in building their web applications. Dynamic metrics will provide immediate feedback, while modular UX patterns will enable informed design decisions. The live AI assistant will offer support at every stage, ensuring a seamless and efficient experience. The minimalist design will facilitate easy navigation, allowing users to focus on their project goals without distractions.