# Mkopo Bora: design handoff

This folder holds everything Claude Code needs to build the Mkopo Bora frontend on your existing backend.

## How to use it in VS Code

1. Unzip this folder into the **root of your backend project**, keeping the name `mkopo-bora-handoff/`.
2. Open the project in VS Code and start Claude Code.
3. Paste this prompt:

   > Read `mkopo-bora-handoff/CLAUDE.md` and follow it exactly. Start with step 1: inspect the backend, fill in `mkopo-bora-handoff/docs/API_MAPPING.md`, and show me the mapping before you build any screens.

4. Check the API mapping it shows you, then tell it to continue.
5. After each screen, compare it with the matching image in `design/screenshots/`.

## What's inside

| Path | What it is |
|---|---|
| `CLAUDE.md` | Rules and step-by-step build instructions for Claude Code |
| `design/screenshots/` | 10 PNGs, one per screen and state (the visual truth) |
| `design/html/` | The same 10 screens as static HTML with exact styles; open in a browser |
| `design/source/` | Original design files |
| `docs/DESIGN_TOKENS.md` | Colours, font, sizes and spacing |
| `docs/SCREENS.md` | What each screen shows, its data and its buttons |
| `docs/API_MAPPING.md` | Template that Claude Code fills in from your backend |

## Screens
1. Officer dashboard
2. Borrower profile and credit score
3. New loan application
4. Credit approval
5. Portfolio and arrears report
6. Mobile home (Swahili)
7. Mobile payment
8. Mobile payment success
9. Mobile loan request
10. Mobile loan approved