Fintech App Dashboard UI Designer

What this prompt does

This prompt generates a complete fintech dashboard specification and component code by enforcing the design rules that separate trusted financial software from amateur finance apps. The template hard-codes the conventions that took the industry decades to standardize: tabular figures so digits align in columns, color semantics locked to positive/negative meaning (not brand expression), and balance-first information hierarchy so users never have to hunt for what matters most.

What makes it work structurally is the anti-pattern list. By explicitly forbidding purple/pink gradients, playful fonts, hidden decimals, and skeleton loaders on balances, the prompt prevents the AI from defaulting to generic "modern app" aesthetics that feel wrong the moment a user sees their mortgage payment in Comic Sans-adjacent typography. The stale-balance-plus-updating-badge instruction alone reflects a real production decision most dashboards get wrong.

The output is deliberately layered: balance card first, then actions, then feed, then analytics — because that is the user's mental model when opening a money app. Regulatory and compliance fields are first-class inputs, not afterthoughts.

When to use it

• Building a personal finance tracker and needing a complete component hierarchy before writing a single line of code.
• Designing a neobank MVP dashboard that needs to pass internal UX review without hiring a dedicated fintech designer.
• Creating a demo or investor prototype where the UI needs to read as credible and trustworthy immediately.
• Adding a spending analytics module to an existing app and needing the chart, category breakdown, and month-over-month comparison spec together.
• Generating React, Vue, or Flutter component scaffolding for the balance card and transaction feed as a starting point.
• Auditing an existing fintech UI by running it against the anti-patterns the prompt explicitly calls out.

Example output

For app_type: personal budget tracker, features: multi-account balance, transaction history, category budgets, compliance: GDPR, PSD2, framework: React:

BalanceCard component
─────────────────────
Total Balance:     £4,821.00   (tabular figures, GBP symbol explicit)
Available:         £4,306.50
Pending:           £514.50     (neutral grey — not yet settled, not a negative event)
[USD] [EUR] toggle — locale-formatted on switch

TransactionFeed
───────────────
Today
  Tesco Metro      Groceries    –£34.20    ● Completed
  Salary — Acme   Income       +£2,850.00  ● Settled

18 Jun
  Netflix          Subscriptions –£10.99   ● Completed

SecurityIndicators (separate section)
──────────────────────────────────────
Last login: 19 Jun 14:32 GMT · 2FA ✓ · KYC Verified

Pro tips

• Set [compliance] precisely — PSD2 + FCA versus GLBA + FinCEN changes which security indicators the AI generates and what disclosure copy appears near balance fields. Vague compliance entries produce generic "secure" badges with no meaningful content.
• For [framework], specify version: React 18 produces hooks-based components; Flutter 3.22 produces widget trees with explicit TextStyle for monospace figures. Vague framework names produce vague scaffolding.
• The donut chart in spending analytics needs real category names in your [features] field — "groceries, transport, subscriptions" produces a labeled chart; "spending data" produces a placeholder ring with no segments.
• If your app is multi-currency, add the base currency and secondary currencies to [features] explicitly. The balance card toggle only formats correctly when the AI knows the currency pair — otherwise it defaults to bare numbers with no locale formatting.
• After generating, run the anti-pattern list as a manual checklist. AI assistants sometimes reintroduce skeleton loaders or gradient cards on regeneration — the template guards against this on first pass but human review catches regressions.