Capítulo 11 de 20 · 200 ideas de apps web para practicar con agentes de IA
Creación visual y diseño (101-110)
Diez aplicaciones web de creación visual y diseño con su UI y un reto de implementación para el agente.
| N.º | Aplicación | Nivel | Descripción | UI que implementar y probar | Reto para el agente |
|---|---|---|---|---|---|
| 101 | Generador de paletas | I | Construye y guarda combinaciones de colores. | Muestras editables, selectores, bloqueo de colores y vista de contraste. | Validar códigos y actualizar contraste mientras se edita. |
| 102 | Editor de diagramas | A | Crea diagramas de flujo mediante bloques y conexiones. | Lienzo, biblioteca de formas, conectores, inspector y exportación. | Implementar selección múltiple, deshacer y guardado recuperable. |
| 103 | Compositor de afiches | A | Diseña piezas con texto, imágenes y formas. | Lienzo, capas, controles de tipografía, alineación y vista de exportación. | Preservar proporciones y renderizar igual en pantalla y exportación. |
| 104 | Tablero de inspiración | I | Reúne referencias visuales con notas. | Mosaico de imágenes, carga, tarjetas reordenables y etiquetas. | Gestionar imágenes de tamaños distintos sin romper la cuadrícula. |
| 105 | Probador de tipografías | I | Compara estilos tipográficos en contenido editable. | Paneles de muestra, selectores de fuente, tamaño e interlineado. | Mantener contenido idéntico al comparar y mostrar fallos de carga. |
| 106 | Editor de iconos en cuadrícula | I | Dibuja pequeños iconos mediante celdas coloreadas. | Cuadrícula, paleta, herramientas, vista ampliada y exportación. | Agrupar una pincelada en una sola acción de deshacer. |
| 107 | Constructor de patrones | I | Diseña motivos repetidos para fondos. | Lienzo de motivo, controles de repetición, escala y vista de mosaico. | Evitar discontinuidades en los bordes de la repetición. |
| 108 | Laboratorio de componentes UI | A | Permite ajustar y comparar componentes de interfaz. | Biblioteca, controles de propiedades, ejemplos de estados y vista adaptable. | Propagar variables de diseño manteniendo foco y accesibilidad. |
| 109 | Anotador de imágenes | I | Agrega observaciones sobre regiones de una imagen. | Visor con zoom, rectángulos o puntos, panel de notas y filtros. | Mantener coordenadas correctas al cambiar escala. |
| 110 | Constructor de historietas | A | Compone páginas con viñetas, imágenes y diálogos. | Editor de página, plantillas, globos de texto y orden de lectura. | Ajustar texto sin ocultar contenido y exportar páginas completas. |