Personal Finance Tracker Mobile UI

What this prompt does

This prompt generates a complete personal finance tracker mobile app UI across six distinct screens — home dashboard, budget view, transaction list, goals tracker, insights, and quick-add flow. What makes it work is the embedded industry ruleset: the template explicitly bans shame-based UX patterns, mandates a green/amber/red traffic-light color system, and specifies animated progress rings rather than flat progress bars. The AI isn't just guessing at finance app conventions — it's constrained by them.

The final variable, [framework], triggers real implementation code for the home screen, including the animated budget ring and spending breakdown. That means you get both a design specification and working frontend code from a single run.

When to use it

• You're building an indie fintech app and need a production-ready UI reference before touching code.
• A client wants a personal finance feature added to an existing app and you need to spec it fast.
• You're pitching a fintech MVP to investors and need polished screen concepts within hours.
• You want to evaluate how React Native, Flutter, or SwiftUI handle animated ring components side-by-side.
• You're a designer prototyping in Figma and want structured copy + interaction logic for each screen.

Example output

For [features] = bank sync + recurring bills and [framework] = React Native:

Home Screen Spec:
- Monthly budget ring: 68% filled, color #4CAF50 (on-track green)
- Spending: $1,360 of $2,000 — "12 days left, $53.33/day"
- Quick stats row: Savings +$240 | Bills due: $340 (3 days) | Top spend: Food

React Native — AnimatedBudgetRing.tsx:
const radius = 80;
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference - (percentage / 100) * circumference;

<AnimatedCircle
  strokeDashoffset={animatedOffset}
  stroke={percentage > 90 ? '#F44336' : percentage > 75 ? '#FFC107' : '#4CAF50'}
  ...
/>

Pro tips

• Set [monetization] before designing — "subscription" vs "freemium" vs "bank partnership" changes which features get prominent placement. A subscription app should surface premium insights front-and-center; freemium should gate them with soft paywalls.
• Be specific in [features] — "bank sync + recurring bills" gives far tighter output than "all features." The template already covers six screens; adding too many features dilutes the code section.
• Run twice with different [framework] values — compare Flutter's CustomPainter ring against React Native's react-native-svg approach. The structural differences matter for team capability decisions.
• The anti-pattern list in the template is load-bearing — if you strip it to shorten the prompt, the AI will likely add a "You're overspending!" warning label. Leave the rules in.
• To get code for additional screens beyond the home screen, add an explicit instruction at the end of the prompt: "Also generate [framework] code for the [screen name] screen." The [framework] variable only targets the home screen by default; any other screen requires a direct instruction.