Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
“Планировщик накоплений” is a minimalist web application designed for budgeting and savings planning. It allows users to input their income, expenses, and savings goals, providing clear calculations and insights without the complexity of tracking transactions or user authentication.

## CORE FEATURES
1. **Budget Modes**: Users can switch between personal and joint budgeting modes, with a simple onboarding modal to choose their preferred mode.
2. **Income and Expense Input**: Seamless input for monthly income, savings goals, and various expense categories, including customizable options.
3. **Live Calculations**: Instant feedback on financial health, showing total expenses, leftover income, planned savings, and time to reach savings goals.
4. **Visual Summary for Screenshots**: A dedicated section that summarizes the user’s financial plan in a visually appealing format for easy sharing.
5. **Local Storage Persistence**: All user data, including selected modes and inputs, is saved in localStorage to ensure continuity after page refreshes.
6. **Responsive Design**: A clean, user-friendly interface that adapts to different screen sizes, providing a consistent experience on both desktop and mobile.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, focusing on clarity and ease of use.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: 
  - Desktop: Two-column layout with inputs on the left and calculations/results on the right.
  - Mobile: Vertical layout for a streamlined user experience.
- **Typography**: Use a modern sans-serif font for clarity, with a clear hierarchy for headings, inputs, and results.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive and utility-first styling
- **UI Components**: Utilize shadcn/ui for consistent and accessible component design
- **State Management**: Local state management with hooks, utilizing localStorage for persistence

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript.
2. **Install Tailwind CSS** and configure it for your project.
3. **Create the main components**:
   - Onboarding modal for mode selection
   - Input forms for personal and joint budgeting
   - Live calculation display for financial summaries
   - Summary card for screenshot purposes
4. **Implement localStorage functionality** to save and retrieve user inputs and selected modes.
5. **Design the layout** using Tailwind CSS to ensure responsiveness and aesthetics.
6. **Test user flows** for both personal and joint budgeting modes, ensuring all calculations are accurate and updates are reflected live.
7. **Optimize for mobile devices** to guarantee usability across all screen sizes.

## USER EXPERIENCE
Users will first encounter an onboarding modal to select their budgeting mode. They will then input their income, expenses, and savings goals. As they enter data, calculations will update in real time, providing them with insights into their financial situation. The interface will allow easy navigation between modes and ensure that all information is neatly organized for quick reference or sharing.

A dedicated section for screenshot summaries will allow users to capture and share their financial plan easily, while the use of localStorage ensures that all input data is retained across sessions, enhancing user convenience and satisfaction.
```