Building a banking application from Figma UI designs
- Figma designs (semantic variables / tokens, auto layout) 💰
- Claude subscription 💰💰💰
- Figma dev. subscription 💰💰
- Code editor of choice
brew install dartbrew install --cask flutter
- 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)
cd xerobank && flutter runI 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
Generate task.md against the plan
Generate stories.md in BDD / Gherkin format
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% |
View Generated Prompt
I have selected this Figma frame: [Figma Link]
Using the Figma MCP, analyze the UI and generate docs/features/home/plan.md covering:
- Widget tree hierarchy (screen → sections → widgets, with const/stateful annotations)
- State management strategy — one Cubit per logical concern (balance, pockets, flash sale countdown, transactions, nav), with state shape and events for each
- Design tokens to extract (colors, typography, spacing, radius) mapped to Dart class names
- Assets to export (images, SVGs, fonts) with their Figma node IDs and target paths under xerobank/assets/
- Third-party packages required (flutter_bloc, flutter_svg, intl, equatable) with minimum versions
- File structure under src/home/ (models, repositories, logic, widgets)
I have selected this Figma frame: [Figma Link]
Using the Figma MCP, analyze the UI and generate docs/features/transfer/plan.md covering:
- Widget tree hierarchy (screen → sections → widgets, with const/stateful annotations)
- State management strategy — Cubit with TransferTab enum, debounced search (300ms), and filter logic combining tab + query
- Design tokens needed beyond what already exists in src/core/theme/ (check for gaps only)
- Icons needed — confirm whether Material Icons suffice or SVG exports are required
- File structure under src/transfer/ (models, repositories, logic, widgets)
- Navigation wiring — how TransferScreen is pushed from HomeScreen menu and bottom nav bar
Generate docs/features/home/task.md from docs/features/home/plan.md
Structure tasks as a numbered checklist grouped by layer:
- Core theme tokens (colors, text styles, spacing, radius)
- Asset pipeline (download fonts, images, SVGs; register in pubspec.yaml)
- Data layer (models with Equatable, mock repository with Figma-matching seed data)
- Logic layer (one task per Cubit/State pair)
- Widget layer (one task per widget file, leaf → composite order)
- Screen assembly (BlocProvider tree, Stack layout with pinned header/nav)
- Navigation wiring (home screen menu + bottom nav bar → TransferScreen)
- 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.
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
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)
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)