Skip to content

faxad/xero-bank

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Xero Bank

Building a banking application from Figma UI designs

Prerequisites

  • Figma designs (semantic variables / tokens, auto layout) 💰
  • Claude subscription 💰💰💰
  • Figma dev. subscription 💰💰
  • Code editor of choice
  • brew install dart
  • brew install --cask flutter

TODOs

  • Generate source code from Figma design (home, transfer)
  • Generate plan, tasks, user stories
  • Organize each component separately (docs, src)
  • Execute plan independently for each component
  • Modify user stories to change application behavior
  • Introduce claude best practices (*.md)
  • Optimize claude context window
  • Include additional components (e.g. auth)
  • Complete E2E journey (e.g. payment / transfers)
  • Generate automated tests against user stories
  • Generate backend (go/ python)

Instructions

cd xerobank && flutter run

Prompts (Original)

Plan

I have selected this Figma frame: [Figma Link]. Using the Figma MCP, analyze the UI components and layout. Generate a plan.md that outlines the technical implementation strategy for Flutter. Include:

  • The widget tree hierarchy.
  • Required State Management (providers / blocs).
  • A list of required assets (icons / images) to be exported

Task

Generate task.md against the plan

Stories

Generate stories.md in BDD / Gherkin format

Usage (Claude Context)

Model: claude-sonnet-4-6

Tokens: 40.3k / 200k (20%)

Category Tokens Percentage
System prompt 6.5k 3.2%
System tools 7.9k 3.9%
MCP tools (deferred) 10k 5.0%
System tools (deferred) 10.4k 5.2%
Skills 1.2k 0.6%
Messages 25.2k 12.6%
Free space 138.3k 69.2%
Autocompact buffer 21k 10.5%

Prompts (Claude Optimized)

View Generated Prompt

Phase 1 - Plan

Home

I have selected this Figma frame: [Figma Link]

Using the Figma MCP, analyze the UI and generate docs/features/home/plan.md covering:

  1. Widget tree hierarchy (screen → sections → widgets, with const/stateful annotations)
  2. State management strategy — one Cubit per logical concern (balance, pockets, flash sale countdown, transactions, nav), with state shape and events for each
  3. Design tokens to extract (colors, typography, spacing, radius) mapped to Dart class names
  4. Assets to export (images, SVGs, fonts) with their Figma node IDs and target paths under xerobank/assets/
  5. Third-party packages required (flutter_bloc, flutter_svg, intl, equatable) with minimum versions
  6. File structure under src/home/ (models, repositories, logic, widgets)

Transfer

I have selected this Figma frame: [Figma Link]

Using the Figma MCP, analyze the UI and generate docs/features/transfer/plan.md covering:

  1. Widget tree hierarchy (screen → sections → widgets, with const/stateful annotations)
  2. State management strategy — Cubit with TransferTab enum, debounced search (300ms), and filter logic combining tab + query
  3. Design tokens needed beyond what already exists in src/core/theme/ (check for gaps only)
  4. Icons needed — confirm whether Material Icons suffice or SVG exports are required
  5. File structure under src/transfer/ (models, repositories, logic, widgets)
  6. Navigation wiring — how TransferScreen is pushed from HomeScreen menu and bottom nav bar

Phase 2 - Tasks

Home

Generate docs/features/home/task.md from docs/features/home/plan.md

Structure tasks as a numbered checklist grouped by layer:

  1. Core theme tokens (colors, text styles, spacing, radius)
  2. Asset pipeline (download fonts, images, SVGs; register in pubspec.yaml)
  3. Data layer (models with Equatable, mock repository with Figma-matching seed data)
  4. Logic layer (one task per Cubit/State pair)
  5. Widget layer (one task per widget file, leaf → composite order)
  6. Screen assembly (BlocProvider tree, Stack layout with pinned header/nav)
  7. Navigation wiring (home screen menu + bottom nav bar → TransferScreen)
  8. Sync to Flutter project (cp -r src/ xerobank/lib/ and run flutter analyze)

Each task must specify: file path, what to create/modify, and acceptance criteria.

Transfer

Generate docs/features/transfer/task.md from docs/features/transfer/plan.md

Same structure as home tasks. Explicitly include:

  • A task to extend src/core/theme/ only for tokens not already present (e.g. AppColors.divider)
  • A task to update src/home/widgets/bottom_nav_bar.dart to push TransferScreen
  • A task to update src/home/home_screen.dart MenuSection to push TransferScreen
  • A final task to run flutter analyze and resolve all warnings

Phase 3 - Stories

Home

Generate BDD user stories for the home component and write to docs/features/home/stories.md

Source of truth: docs/features/home/plan.md and the implemented widgets in src/home/.

Cover every user-visible behaviour as Gherkin scenarios (Feature / Scenario / Given / When / Then / And):

  • App header (greeting, masked account number, copy to clipboard, notifications)
  • Balance card (visibility toggle hide/reveal, gradient + pattern display)
  • Quick action menu (Transfer, Top Up, Cash Out, Request, More taps)
  • My Pockets (empty state with CTA, populated list with progress bars)
  • Flash sale (countdown ticking, timer expiry, product card content, horizontal swipe, open deposit tap)
  • Recent transactions (list display, debit styling in disabled color with minus prefix, credit styling in primary color with plus prefix, empty state)
  • Bottom nav bar (active tab on load, tab switching, QR button)
  • Screen loading (all cubits load on init, pinned header/nav while scrolling)

Transfer

Generate BDD user stories for the transfer component and write to docs/features/transfer/stories.md

Source of truth: docs/features/transfer/plan.md and the implemented widgets in src/transfer/.

Cover every user-visible behaviour as Gherkin scenarios:

  • Screen entry (via home menu, via bottom nav, back navigation)
  • Transfer type selection (Xerobank card display, Other Bank card display, tapping each)
  • Recipient list loading (load on init, "or select from" divider)
  • Recipient tabs (All default active, switch to Favorites, switch back, empty favorites)
  • Search (by name, by bank, by account number, no results, clear, search scoped to active tab)
  • Recipient list items (avatar, name, bank, masked account, Xerobank badge, favorite star, tap to select)
  • Scroll behaviour (pinned header and nav bar)

Resources

Demo

xero-bank-demo.mov

About

Prototype of a banking application engineered by next-generation AI

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors