> 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/diseno-y-prototipado-con-ia.md).

# Diseño y Prototipado con IA

En el capítulo 3 nos detuvimos — con razón — antes de escribir una sola línea de código. Primero diseñamos. Primero prototipamos. Usamos Visual Studio y Blend para crear wireframes, definimos flujos de usuario y nos aseguramos de que la experiencia tenía sentido antes de construirla.

Esa disciplina sigue siendo fundamental. Pero las herramientas para llevarla a cabo han cambiado.

## El proceso sigue siendo humano

Antes de hablar de herramientas, una aclaración importante: la IA puede generar diseños, pero **no puede sustituir al diseñador**. Al menos, no hoy.

¿Por qué? Porque diseñar no es dibujar pantallas. Diseñar es:

* Entender al usuario y sus necesidades.
* Definir flujos que sean intuitivos y eficientes.
* Tomar decisiones sobre qué mostrar, qué ocultar y cuándo.
* Equilibrar estética y funcionalidad.
* Iterar basándose en feedback real.

La IA puede acelerar la parte visual — generar layouts, proponer combinaciones de colores, crear mockups — pero las decisiones de experiencia de usuario siguen siendo un trabajo profundamente humano.

## Herramientas de diseño con IA

Dicho esto, las herramientas actuales son impresionantes:

**V0 (Vercel).** Genera componentes de UI a partir de descripciones en lenguaje natural. Le describes "una pantalla de lista de tareas con filtros y barra de búsqueda" y te devuelve un componente React/Next.js funcional. No genera Angular directamente, pero el diseño visual y la estructura son trasladables.

**Figma con IA.** Figma, el estándar de diseño de interfaces, ha incorporado funcionalidades de IA para generar variaciones de diseño, sugerir layouts y autocompletar patrones de UI.

**Claude y ChatGPT para wireframes.** Puedes describir en texto el flujo de tu aplicación y pedirle a la IA que genere wireframes en ASCII, diagramas de flujo o incluso código HTML básico que sirva como prototipo navegable.

**Blend vs. hoy.** En el capítulo 3 usamos Blend para Visual Studio como herramienta de diseño XAML. Hoy, el equivalente sería una combinación de Figma (para el diseño visual) y Angular + Material (para el prototipo funcional). La ventaja es que el prototipo *es* código real, no un artefacto separado que hay que traducir.

## Un flujo de prototipado moderno

1. **Definir requisitos** — como hicimos en el capítulo 3, con historias de usuario y flujos.
2. **Boceto rápido** — papel, pizarra o herramienta digital. La IA puede ayudar a generar un primer boceto a partir de la descripción.
3. **Prototipo navegable** — generar componentes Angular con ayuda de IA, añadir Material Design para una estética consistente.
4. **Feedback temprano** — mostrar el prototipo a usuarios reales (o al equipo) antes de invertir en la implementación completa.
5. **Iterar** — refinar basándose en el feedback. La IA acelera cada iteración.

## ¿Tiene sentido usar IA para el diseño?

Mi respuesta honesta: **sí, pero con matices**.

Para generar una primera versión rápida de un layout o para explorar opciones visuales, la IA es magnífica. Te ahorra horas de trabajo mecánico.

Pero para decisiones de UX — ¿cómo debería fluir la creación de una tarea?, ¿cuántos pasos son demasiados?, ¿qué información es crítica y cuál es secundaria? — necesitas un ser humano que entienda al usuario. O mejor aún, necesitas *hablar* con el usuario.

Recordemos lo que dijimos en el capítulo 3: *"queremos representar justo lo que queremos, evitando flujos y acciones innecesarias"*. La IA no conoce a tus usuarios. Tú sí.

## La lección que permanece

Diseña antes de construir. Prototipa antes de implementar. La IA puede hacer que este proceso sea más rápido, pero no puede hacer que sea innecesario. Las mejores aplicaciones no son las que tienen más funcionalidades, sino las que resuelven el problema correcto de la forma más simple posible.