# Urbino polgári mobil — induló prompt

**Forrás.** Urbino Manager UI-projekt tapasztalata (2026.05.27).
**Cél olvasó.** Te magad, amikor egy új Claude design-projektet indítasz a polgári Flutter-applikáció tervezésére.
**Hogyan használd.** Másold be ezt a teljes szöveget a polgári design-projekt első Claude-üzenetébe (vagy szerkesztett változatban a `CLAUDE.md`-be), és csatold mellé a *„Mit csatolj a session-be"* részben felsorolt fájlokat.

---

## A projekt

A **Urbino polgári mobilalkalmazás** (Flutter) tervezési projektje. Egy önálló Claude design-projekt, ami a meglévő **Urbino Design System** projekttre épít.

A pilot scope:
- **Tenant:** Balatonalmádi (mid-2026, ~8 000 lakos)
- **Felület:** Flutter, iOS + Android, mobile-first
- **Funkciók:** bejelentés-felvétel (fotó + map + leírás), bejelentés-lista a sajátjaim, város-info-böngészés (hírek, programok, hasznos linkek), profil + push-beállítások
- **Másik fele:** a polgári-public web-app (Angular) — Phase 2-re halasztott; a pilot **csak a mobil**.
- **Spec:** `uploads/urbino-docs/10_polgari_felulet/` (a fejlesztő-projektből származtatva).

## Mi van mellettem (származtatott projektek)

### 1. Urbino Design System

A közös brand- és token-réteg. A polgári-világ már most külön token-szettet kap (`.urbino-cit` osztály + `tokens/world-cit.css` override-ok + `tokens/urbino_theme.dart` Flutter `ColorScheme` + `ThemeExtension`).

**Onnan származtatva, NEM újra-megírva:**
- Logo (`assets/logo-full.svg`, `logo-mark.svg`)
- Primary blue `#2E63EB`, cool slate canvas
- Plus Jakarta Sans (variable font, full HU diacritic support)
- Lucide icon-set (1.5px stroke, rounded)
- Status palette (Új / Jóváhagyva / Folyamatban / Megoldódott)
- Spacing / radius / shadow tokenek
- Tone-of-voice szabályok

### 2. Urbino Manager UI-projekt (testvér-projekt, lezárult)

A vezető-felület UI-tervezésének teljes csomagja. Az ebben felgyülemlett **tervezési minták és best practices** ide is alkalmazandóak, **de a citizen-specifikus eltéréseket l. alább.**

Hivatkozott dokumentumok onnan (a polgári-tervezés során olvashatóak referenciaként):
- `HANDOFF.md` — a fejlesztő-átadási csomag struktúrája
- `manager-system/DECISIONS.md` — 20 UX-döntés-példa
- `manager-system/ORGANISMS.md` — Tier-besorolás-példa
- `CITIZEN-LESSONS-LEARNED.md` — a manager-projektből kondenzált best-practice (külön fájl)

## 3 alapvető eltérés a manager-rel

### A. Vizuális minta-mód: HTML + iOS/Android frame, NEM Flutter

A Claude design-projektben **NEM Flutter-kódot írsz** — HTML+CSS mock-ot a Tools által biztosított starter-komponensekkel (`ios_frame.jsx`, `android_frame.jsx`). A Flutter-fejlesztő (vagy Claude Code) **ezután** képezi át a mockokat `widget`-ekre, a `urbino_theme.dart`-ot fogyasztva.

**A logika ugyanaz, mint a manager-projekten:** az UI-csapat **vizuális szerződést** szállít, NEM kódot. A HANDOFF.md cross-mapping-tábla itt a *„HTML-mock → Flutter widget"*-megfeleléseket adja, NEM React→Angular-t.

### B. Density + radius + spacing — citizen-tokenek

A DS már most külön set-eket ad:

| Token | Manager | Citizen |
|---|---|---|
| Radius xs/sm/md/lg/xl | 6/8/10/14/— | 8/10/14/18/22/28 |
| Spacing default | 4-16px | 16-32px |
| Min tap-target | nincs szigorú | **44×44px** |
| Type-skála | dense | breathing |
| Surface | white-on-slate | white-on-slate (azonos) |

**Konzisztencia-elv:** a polgári app **NEM warm sand**, hanem a manager-éval **azonos cool slate canvas**. A divergencia a spacing, radius és tone-on van, NEM a háttér-temperaturán.

### C. Felület-konvenciók

- **Mobile-first** — 375-414px szélesség (iPhone SE-től Pro Max-ig).
- **Bottom tab bar** (4 fő tab: Új bejelentés · Listám · Város · Profil) — 72px (incl. safe-area).
- **Top app bar** — 56px, csak címmel és opcionálisan vissza-gombbal.
- **Map-első** — minden bejelentés-felvétel map-widgetből indul.
- **Emoji-használat ENGEDÉLYEZETT** a kategóriákra (🛣️ 💡 🗑️ 🌿 🚧 📌) + a `👋` greeting-emoji a home-screen üdvözlőjén. DS explicit listázza a `CATEGORIES.md`-ben.
- **Tone-of-voice 70-80% warm** (manager: 30%). Pl. *„Köszönjük a bejelentést!"* (vs. manager: *„Kioszt és lezár"*).
- **Push notification UX** — a manager-en NEM volt; itt fő-feature.
- **Bottom-sheet** mintát (gyakori): kategória-választó, fotó-feltöltés-modal, megerősítő-dialógus.
- **Pull-to-refresh** — a lista-screeneken default minta.

## A 9-lépéses tervezési minta — citizen-szempontból szelídítve

A manager-projekt 9-lépéses terve **közvetlenül átemelhető**, de a Tier-szintekat egyszerűsíteni érdemes (a polgári app sokkal kisebb felület):

| Manager-lépés | Citizen-megfelelés |
|---|---|
| **0.** DS-patch (page-layout réteg) | DS-fixture + iOS/Android frame integráció felmérése (~30 perc) |
| **1.** Tervezési fázis — SITEMAP + ORGANISMS | A 10-15 polgári screen × 15-20 widget mátrixa |
| **2.** Tier 0 organism (AppShell + nav) | BottomTabBar + TopAppBar + ScreenScaffold |
| **3.** Tier 1 cross-cutting | BottomSheet · ConfirmDialog · ToastSnackbar · EmptyState · ListTile-mintap |
| **4.** Tier 2 lista-screen | TicketListItem · NewsCard · EventCard · CityInfoTile |
| **5.** Tier 3 ág-specifikus | ReportCreateFlow (3-step) · MapWidget · CameraSheet · PhotoGallery |
| **6.** Tier 3.5 cross-cutting infrastruktúra | PushPermissionPrompt · OfflineSnackbar · AuthFlow |
| **7.** Tier 4 screen-specifikus | OnboardingFlow · ProfileScreen · CategoryPickerSheet |
| **8.** 10-15 screen-mock | Bejelentés-felvétel · Saját bejelentések · Hírek · Programok · Város-info · Profil + edge-cases |
| **9.** Átadási csomag | HANDOFF.md (Flutter-cross-mapping) + i18n + seed-data (közös a manager-rel ahol lehet) |

## A polgári-specifikus 5 első kérdés (kérdezz a stakeholderektől induláskor)

Mielőtt az 1. lépésre rátérnél, kérdezz visszahívást ezekre:

1. **Auth-flow.** A polgár Zitadel-alapú OAuth2-vel jelentkezzen be, vagy egyszerű e-mail/jelszó? Magic-link? Anonim bejelentés is támogatott?
2. **Push notification scope.** Csak a saját bejelentésekre (státusz-változás, lezárás), vagy a városi-hírekre is? Opt-in vagy opt-out? Mikor kérdezzük meg az engedélyt?
3. **Offline-támogatás.** A bejelentés-felvétel offline-mód-ban is működjön (fotó + GPS + leírás cache-elve, később sync-elve), vagy a pilot online-only?
4. **Lokalizáció.** Csak magyar a pilot-on, vagy német/angol verzió is? (A balatoni nyári turizmus szempontjából érdemes.)
5. **Térkép-szolgáltatás.** OSM-tiles, Google Maps, Apple Maps? Native-int (`MKMapView` / `GoogleMap`-widget) vagy Mapbox/MapLibre Flutter-bekötés?

Ezek a válaszok 4-7 cross-cutting döntést **alapból megoldanak** — a manager-projektnél a hasonló kérdéseket UX-explorerrel deríthettük volna fel, de a stakeholderek azt jól kommunikálják ha jól kérdezed.

## Az iter-térkép a 0-1. lépésre

### 0. lépés: DS-fixture-felmérés (~30 perc)
- Másold be a `design-system/` mappát a polgári-projektbe (read-only fixture; Q5-mintán).
- Próbáld ki az `ios_frame.jsx` + `android_frame.jsx` starter-komponenseket egy üres screennel.
- Verify: a `urbino-cit` osztály betöltődik, a tokens jól rendereződnek a frame-ben.

### 1. lépés: SITEMAP + ORGANISMS draft (1-2 iter)
- Olvasd be a `uploads/urbino-docs/10_polgari_felulet/`-spec-fájljait.
- Vázold a screen-listát (~10-15 screen): Bejelentés-felvétel (3-step flow), Saját bejelentések lista, Bejelentés-adatlap (csak olvasható), Hírek, Programok, Város-info, Profil, Onboarding, Push-engedély-kérés.
- Lépj át a Tier-besorolásra (Tier 0/1/2/3/4 a manager-mintán, de redukálva).
- Output: `citizen-system/SITEMAP.md` + `citizen-system/ORGANISMS.md` v0 draft.

### 2. lépés: Tier 0 organism (1 iter)
- BottomTabBar (4 tab) · TopAppBar · ScreenScaffold.
- Validációs screen: a Home (ami csak üdvözlő-cím + 4 tab-szerkezet) + iOS frame megjelenítése.
- Output: `citizen-system/preview/tier-0.html`.

(Innen ugyanaz a minta, mint a manager-en.)

## Mit csatolj a session-be

Az új polgári Claude design-projekt induló session-jébe csatold a következőket:

1. **Ezt a fájlt** (`CITIZEN-PROJECT-STARTER.md`)
2. `CITIZEN-LESSONS-LEARNED.md` (a manager-projekt best-practice)
3. **A polgári-spec rész** (`uploads/urbino-docs/10_polgari_felulet/` mappa — vagy közvetlenül a fő spec-fájlokra mutató hivatkozás, ha már létezik kódbázis)
4. **A DS-projekt** (a Claude design-projekt indításakor mint design-system, kapcsold csatlakozónak — a tokens, brand, screen-PNG-k és a `urbino_theme.dart` mind onnan érkezik)

## Mit NE csatolj

- A teljes manager-projektet **NE** csatold mellé — túl nagy zaj. A 2-3 hivatkozott manager-fájlt (HANDOFF.md, DECISIONS.md, ORGANISMS.md) szükség esetén külön említsd hivatkozásként.
- A `seed-data-balatonalmadi-pilot.json`-t **majd később** kapcsold be — a 4-5. lépésnél, amikor a screen-mockok realisztikus tartalmat kérnek.

## Pilot-target

A polgári Flutter-projekt szintén **mid-2026 Balatonalmádi pilot**ra megy ki. A manager-projektnél tapasztalt iter-volumen (~9 lépés × 3-5 chat / lépés = ~30-45 chat) **valószínűleg redukálható ~20-25 chat-re** a polgári-app kisebb scope-ja miatt.

---

*Ez a starter-prompt a Urbino Manager UI-csapat 2026.05.27-i tapasztalatából kondenzálva. Az új polgári-projekt szabadon eltérhet ezektől, ha indokolt — de mind a 9-lépéses minta, mind a 3 alapvető eltérés (HTML-mock / citizen-tokenek / mobile-konvenciók) tapasztalat-alapúak.*