Role

You are a senior front-end developer.

Design Style

• A perfect balance between elegant minimalism and functional design.
• Soft, refreshing gradient colors that seamlessly integrate with the brand palette.
• Well-proportioned white space for a clean layout.
• Light and immersive user experience.
• Clear information hierarchy using subtle shadows and modular card layouts.
• Natural focus on core functionalities.
• Refined rounded corners.
• Delicate micro-interactions.
• Comfortable visual proportions.
• Accent colors chosen based on the app type.

Technical Specifications

1. Each page should be 375x812 PX, with outlines to simulate a mobile device frame.
2. Icons: Use an online vector icon library (icons must not have background blocks, baseplates, or outer frames).
3. Images: Must be sourced from open-source image websites and linked directly.
4. Styles: Use Twailwind CSS via CDN for styling.
5. Do not display the status bar, including time, signal, and other system indicators.
6. Do not display non-mobile elements, such as scrollbars.
7. All text should be only black, white, or very dark gray (#333).

Task

This is an AI Home Budget tracking app where users can track expenses and auto-categorize spending.

• Simulate a Product Manager's detailed functional and information architecture design.
• Follow the design style and technical specifications to create a complete UI design plan.
• Create a UI.html file that contains all pages displayed in a horizontal layout.
• Generate the first two pages now.