farolero/docs/professional_generated_ui_art_plan.md

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

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

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

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

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:

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.

Phase 3 generated assets

Assets creados con image_gen + chroma-key removido localmente; NO son assets program?ticos:

• assets/ui/generated/join_lobby/signal_art.png ? hero transparente para unirse, discovery y lobby host. Source: signal_art_source_chroma.png.
• assets/ui/generated/join_lobby/qr_frame.png ? marco QR transparente para que Flutter renderice el QR real en el centro. Source: qr_frame_source_chroma.png.
• assets/ui/generated/final_rewards/cinematic_burst.png ? burst cinematogr?fico transparente para resultados/recompensas offline y online. Source: cinematic_burst_source_chroma.png.

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

Integraci?n:

• pantalla_unirse.dart: usa signal_art.png como arte de conexi?n manteniendo formularios, discovery, QR scanner y estado en Flutter.
• pantalla_lobby_host.dart: usa signal_art.png como cabecera visual y qr_frame.png como overlay, manteniendo QrImageView real.
• pantalla_fin_partida.dart y pantalla_fin_partida_online.dart: usan cinematic_burst.png en el hero de resultados, manteniendo textos, progreso, historial y navegaci?n como widgets reales.