> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-11-backstage-y-un-futuro-prometedor/primeras-pantallas-con-ia.md).

# Primeras Pantallas con IA

En el capítulo 5 dimos vida al prototipo. Creamos la Splash Screen, configuramos los tiles e iconos, y construimos las primeras pantallas reales de nuestra aplicación: Home, About y Settings. Cada pantalla requirió crear su View (XAML), su ViewModel, registrar dependencias y configurar la navegación.

Hoy, ese proceso se ha simplificado considerablemente, tanto por la evolución de los frameworks como por la asistencia de la IA.

## Generando componentes con Angular CLI

Donde antes necesitábamos crear manualmente varios archivos (Page.xaml, Page.xaml.cs, ViewModel, interfaz, registro en el contenedor), Angular CLI genera la estructura completa con un solo comando:

```bash
ng generate component pages/home
ng generate component pages/about
ng generate component pages/settings
```

Cada comando crea el componente (TypeScript), su plantilla (HTML), sus estilos (CSS/SCSS) y su archivo de test. La estructura está lista para trabajar.

Y con IA, ni siquiera necesitas recordar los comandos. Puedes decirle a Claude Code:

```
> Crea los componentes Home, About y Settings con Angular CLI.
  Home debe tener una lista de tareas, About debe mostrar información
  de la app, y Settings debe tener un formulario de configuración.
```

La IA no solo ejecuta los comandos, sino que genera una primera versión del contenido de cada componente.

## Angular Material como sistema de diseño

En el capítulo 5 usamos los controles nativos de UWP siguiendo el Microsoft Design Style. Hoy, **Angular Material** ofrece un catálogo completo de componentes que siguen Material Design:

* `mat-toolbar` para barras de navegación.
* `mat-card` para tarjetas de contenido.
* `mat-list` para listados.
* `mat-form-field` para campos de formulario.
* `mat-icon` para iconografía.
* `mat-sidenav` para navegación lateral.

La ventaja es que estos componentes son responsive por defecto, accesibles y coherentes visualmente. No necesitas Blend para ajustar los layouts: CSS Flexbox y Grid se encargan de la disposición.

## Responsive sin VisualStateManager

Recordemos que en UWP usábamos `VisualStateManager` y `AdaptiveTrigger` para adaptar la interfaz a diferentes tamaños de pantalla. En la web, esto se resuelve con CSS:

```css
/* Pantallas pequeñas (móvil) */
@media (max-width: 768px) {
  .task-grid {
    grid-template-columns: 1fr;
  }
}

/* Pantallas grandes (escritorio) */
@media (min-width: 769px) {
  .task-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

Angular Material va un paso más allá con su **CDK Layout** (`BreakpointObserver`), que permite reaccionar a cambios de tamaño de pantalla directamente en TypeScript:

```typescript
export class HomeComponent {
  private breakpointObserver = inject(BreakpointObserver);

  isMobile = toSignal(
    this.breakpointObserver
      .observe("(max-width: 768px)")
      .pipe(map((result) => result.matches)),
  );
}
```

## Splash Screen y PWA

La Splash Screen del capítulo 5 era una imagen estática que se mostraba mientras la aplicación cargaba. En una PWA moderna, el equivalente es el **Web App Manifest**, que define el icono, el color de fondo y el nombre de la aplicación que se muestran cuando el usuario la "instala" en su dispositivo:

```json
{
  "name": "Task[in] 2.0",
  "short_name": "Task[in]",
  "theme_color": "#512BD4",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192" },
    { "src": "icons/icon-512.png", "sizes": "512x512" }
  ]
}
```

## El rol de la IA en la construcción de UI

La IA es especialmente útil en la fase de construcción de pantallas:

* **Genera layouts iniciales** a partir de descripciones en lenguaje natural.
* **Sugiere componentes de Material** adecuados para cada caso de uso.
* **Crea estilos responsive** adaptados a las necesidades.
* **Genera contenido de ejemplo** (datos mock) para poder visualizar la interfaz rápidamente.

Pero cuidado: la IA tiende a generar interfaces "funcionales pero genéricas". El toque personal, la atención al detalle y la coherencia con la identidad visual de tu aplicación siguen siendo tu responsabilidad.

## La lección que permanece

Las primeras pantallas son las que marcan el tono de la aplicación. Dedícales tiempo y cariño, ya sea con XAML y Blend o con Angular y Material. Una buena experiencia inicial engancha al usuario; una mala lo aleja para siempre. La IA puede acelerar la construcción, pero la sensibilidad de saber qué se siente "bien" al usarlo es tuya.