# Professional Generated UI Art Plan

Este plan corrige el enfoque anterior: una pantalla premium no se da por terminada si solo usa Flutter, gradientes, `CustomPainter`, iconos Material y glows procedurales. Eso es estructura. La dirección visual profesional exige assets generados de alta calidad, integrados por capas.

## Reglas no negociables

- La UI real sigue en Flutter: textos, localización, botones, inputs, progreso, navegación y estado.
- El arte visual potente se genera como assets independientes.
- Todo asset que va encima de Flutter debe tener transparencia real: PNG/WebP con alpha.
- Si el generador no entrega alpha nativo, se usa chroma-key plano y eliminación local.
- Se valida tamaño, alpha en esquinas, centrado y peso antes de integrar.
- Se diseña para móvil, tablet, iPad y iPhone: fondos flexibles, contenido con ancho máximo, assets no estirados.

## Estructura de assets

```text
assets/ui/generated/
  shared/
  main/
  mode/
  create_game/
  join_lobby/
  final_rewards/
```

## Contrato de tamaños

| Tipo | Tamaño master | Uso |
| --- | ---: | --- |
| Fondo vertical móvil | 1080×1920 | `BoxFit.cover`, puede ser opaco |
| Fondo tablet | 1440×1920 o 2048×1536 | `BoxFit.cover`, opcional por lote |
| Hero principal | 768–1024 px | PNG transparente |
| Emblema / mascota | 512–1024 px | PNG transparente |
| Marco de card/botón | 1024×256 / 1024×512 | PNG transparente |
| Icono/medalla | 128–256 px | PNG transparente |
| Burst/glow/humo | 512–1024 px | PNG transparente |

## Manifiesto de assets inicial

| ID | Ruta | Pantallas | Rol | Alpha | Estado |
| --- | --- | --- | --- | --- | --- |
| `main_atmosphere_bg` | `assets/ui/generated/main/main_atmosphere_bg.png` | Principal | Fondo vertical premium | No | Falta generar |
| `main_lantern_hero` | `assets/ui/generated/main/main_lantern_hero.png` | Principal | Hero/emblema de farol | Sí | Falta generar |
| `main_cta_frame` | `assets/ui/generated/main/main_cta_frame.png` | Principal | Marco/texture CTA | Sí | Falta generar |
| `shared_glass_panel_frame` | `assets/ui/generated/shared/glass_panel_frame.png` | Varias | Marco panel premium | Sí | Falta generar |
| `mode_duel_hero` | `assets/ui/generated/mode/mode_duel_hero.png` | Elegir modo | Hero de decisión | Sí | Falta generar |
| `create_game_header_art` | `assets/ui/generated/create_game/header_art.png` | Crear partida | Cabecera visual | Sí | Falta generar |
| `join_lobby_signal_art` | `assets/ui/generated/join_lobby/signal_art.png` | Unirse/lobby | Arte conexión/QR | Sí | Falta generar |
| `final_rewards_cinematic` | `assets/ui/generated/final_rewards/cinematic_burst.png` | Fin partida | Burst recompensa | Sí | Falta generar |

## Prompts base

### Fondo principal

```text
Use case: stylized-concept
Asset type: mobile game background, opaque
Primary request: high-end cinematic night village background for a social deduction mobile game called Farolero, warm lantern light, mysterious alleys, premium game UI atmosphere, dark navy and amber palette, depth, subtle fog, no text, no UI, no characters, vertical composition.
Size intent: 1080x1920.
Avoid: logos, letters, readable signs, buttons, phone status bar, flat vector look.
```

### Hero farol principal transparente

```text
Use case: stylized-concept
Asset type: transparent hero emblem
Primary request: premium stylized lantern emblem for a mobile social deduction game, cinematic amber glow, polished 3D game icon quality, ornate but readable silhouette, centered, no text.
Transparency: must be isolated on flat chroma-key background if native transparency is unavailable; no shadows baked into the background.
Size intent: 1024x1024.
Avoid: white background, black background, letters, watermark.
```

### Marco CTA transparente

```text
Use case: stylized-concept
Asset type: transparent UI frame
Primary request: premium golden rounded mobile game CTA button frame, glossy amber material, subtle bevel, inner glow, transparent center area usable behind Flutter text, no text, no icons.
Transparency: transparent outside frame and transparent usable center.
Size intent: 1024x256.
Avoid: baked text, opaque rectangle background, excessive decorations.
```

## Validación técnica

Para overlays:

```powershell
Add-Type -AssemblyName System.Drawing
$bmp=[Drawing.Bitmap]::FromFile("asset.png")
@($bmp.GetPixel(0,0).A,$bmp.GetPixel($bmp.Width-1,0).A,$bmp.GetPixel(0,$bmp.Height-1).A,$bmp.GetPixel($bmp.Width-1,$bmp.Height-1).A)
$bmp.Dispose()
```

Resultado esperado: `0,0,0,0` salvo fondos opacos documentados.

## Rollout

1. Pantalla principal: corregir dirección visual base.
2. Elegir modo + crear partida: adaptar estilo sin perder usabilidad.
3. Unirse + lobby: QR y conexión como assets reales.
4. Final de partida: cinematográfica de recompensas.
5. Resto de pantallas: aplicar assets compartidos y ajustar responsive.

## Phase 2 generated assets

- `assets/ui/generated/mode/mode_duel_hero.png`: hero transparente 1024?1024 para selecci?n de modo.
- `assets/ui/generated/mode/mode_single_card_frame.png`: marco transparente 1400?520 para tarjeta de un m?vil.
- `assets/ui/generated/mode/mode_multi_card_frame.png`: marco transparente 1400?520 para tarjeta multidispositivo.
- `assets/ui/generated/create_game/create_game_header_art.png`: cabecera transparente 1400?620 para crear partida.
- `assets/ui/generated/shared/glass_panel_frame.png`: marco transparente compartido 1400?520 para paneles premium.

Validaci?n: todos los assets de Phase 2 son PNG RGBA y tienen alpha 0 en las cuatro esquinas.
## Phase 2 correction ? image generation, not procedural assets

La primera iteraci?n de Phase 2 fue descartada porque los PNG se hab?an producido con Python/Pillow. Eso NO cumple el est?ndar premium: eran composici?n program?tica, no arte generado de alta calidad.

Assets rehechos con el flujo correcto del skill `imagegen` + `premium-game-ui`:

- `assets/ui/generated/mode/mode_duel_hero.png` ? generado con `image_gen`, source chroma-key en `mode_duel_hero_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/mode/mode_single_card_frame.png` ? generado con `image_gen`, source chroma-key en `mode_single_card_frame_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/mode/mode_multi_card_frame.png` ? generado con `image_gen`, source chroma-key en `mode_multi_card_frame_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/create_game/create_game_header_art.png` ? generado con `image_gen`, source chroma-key en `create_game_header_art_source_chroma.png`, alpha removido localmente.
- `assets/ui/generated/shared/glass_panel_frame.png` ? generado con `image_gen`, source chroma-key en `glass_panel_frame_source_chroma.png`, alpha removido localmente.

Validaci?n: todos los PNG finales son RGBA y tienen alpha 0 en las cuatro esquinas.