What this prompt does
This prompt generates a complete online banking portal UI specification with working code — not a generic fintech dashboard, but a system built around the specific psychology of institutional financial trust. The template enforces non-negotiable industry rules directly in its instructions: navy authority colors, serif heritage typography, always-visible secure session timers, and mandatory confirmation modals for every transfer. These constraints exist because "modern" UI redesigns frequently erode user confidence in banking apps by borrowing aesthetics from consumer apps that hold no financial liability.
What makes it structurally sound is the six-screen flow it covers — account overview, transfer flow, transaction history, statements, security center, and notification preferences — which maps to how actual banking users move through a session. It is not generating isolated components; it is generating a coherent interaction model. The anti-patterns list is equally important: it explicitly prevents the AI from producing gamified UX, AI-style gradients, or single-click high-value transfers that would get flagged in a compliance review.
The [framework] variable means you get framework-specific, runnable code scoped to the two highest-risk screens: account overview and transfer confirmation modal. The code is a starting point — compliance language and backend authentication logic require in-house review before shipping.
When to use it
- Building an MVP banking portal for a fintech startup seeking regulatory approval and needing to demonstrate UX compliance to auditors
- Redesigning a credit union or community bank's web portal that currently uses early-2010s UI patterns
- Generating a reference implementation to pitch a banking client — shows domain knowledge before you write a line of production code
- Prototyping a neobank white-label product where institutional credibility matters as much as speed
- Teaching fintech UI/UX to junior developers by showing what "trust-first" means in concrete component terms
Example output
For bank_type: regional credit union, customer_segments: retail members aged 35-65, services: savings, checking, auto loans, framework: Vue 3 + Tailwind:
Account Overview Card (Vue 3):
- Partially masked account number: •••• •••• 4821
- Available balance in Inter/16px bold, navy (#1B2A6B)
- Session timer: "Session expires in 14:32" — top-right, amber on idle
- Quick actions: Transfer | Pay Bill | Download Statement
Transfer Confirmation Modal:
- Two-column summary: From / To accounts, Amount, Fee, Estimated arrival
- OTP input field with resend option (timing controlled by your backend)
- CTA: "Confirm Transfer" (green) | "Cancel" (ghost, secondary position — deliberate visual weight difference)
- Summary screen repeats all transfer details before the OTP step so users review before committing
Pro tips
- Set
customer_segmentsprecisely — "retail members aged 35-65" produces different typography hierarchy choices than "SME treasury teams". The AI uses it to calibrate information density and which quick actions surface first. - If your bank type is Islamic or cooperative, say so explicitly. It changes what quick actions appear and removes interest-rate display patterns entirely.
- The
[framework]variable is where most engineers underspecify. "React" gives generic output. "Next.js 14 App Router with Shadcn UI and Zod validation" gives code you can drop into an existing repo. - Pair the generated transfer flow with your compliance team's checklist — the prompt generates UX patterns and interaction structure, not legal disclosure language. OTP wording and regulatory copy need in-house review.
- Run the security center output past a penetration tester before shipping. The UI for 2FA management and active session termination looks sound visually but is a common attack surface with logic-level vulnerabilities that no UI prompt can catch.
