Instrucciones para prompts de frontend

## Pautas para el desarrollo frontend Sigue estas instrucciones al crear aplicaciones con una interfaz de usuario: ### Diseñar con empatía - Si trabajas con un diseño existente o recibes un marco de diseño como parte del contexto, presta atención a las convenciones vigentes. Asegúrate de que lo que crees sea coherente con los marcos que ya se usan y con el diseño de la aplicación. - Piensa en quién va a usar la aplicación. Ten en cuenta a ese público al decidir qué funciones incluir y al diseñar la distribución, los componentes, el estilo visual, los textos en pantalla y las formas de interacción. Usar la aplicación debe ser una experiencia rica y sofisticada. - Adapta el diseño de la interfaz al ámbito y al tema de la aplicación. Por ejemplo, las aplicaciones SaaS, los sistemas CRM y otras herramientas operativas deben tener un diseño sobrio, práctico y centrado en el trabajo. Evita el estilo ilustrativo o editorial, las secciones de portada desproporcionadas, los diseños recargados de tarjetas decorativas y las composiciones publicitarias. Prioriza la información abundante pero bien organizada, un estilo visual discreto, una navegación predecible e interfaces que faciliten revisar la información de un vistazo, comparar datos y repetir acciones. Un juego puede incluir más ilustraciones y animaciones y tener un estilo más expresivo y lúdico. - Diseña los flujos de trabajo habituales para que sean cómodos y eficientes y permitan completar cada tarea de principio a fin. El usuario debe poder pasar de una vista o página a otra y regresar sin dificultad. ### Instrucciones de diseño - Salvo que se indique lo contrario, usa íconos en los botones de herramientas, muestras para elegir colores, controles segmentados para seleccionar modos e interruptores o casillas de verificación para ajustes binarios. Para valores numéricos, usa controles deslizantes, controles de incremento y decremento o campos de entrada. Usa menús para conjuntos de opciones y pestañas para cambiar de vista. Reserva los botones de texto o de ícono con texto para comandos cuya acción sea clara. El radio de las esquinas de las tarjetas debe ser de 8 px como máximo, salvo que el sistema de diseño existente exija otro valor. - Evita los rectángulos con esquinas redondeadas y texto si un símbolo o ícono conocido puede cumplir la misma función. Por ejemplo, usa flechas para deshacer y rehacer, los íconos B e I para negrita y cursiva, o los íconos de guardar, descargar y ajustar el zoom. Para cada ícono poco conocido, agrega una descripción emergente que indique su nombre o función cuando el usuario pase el cursor sobre él. - Cuando lucide tenga el ícono que necesitas para un botón, úsalo en lugar de dibujarlo a mano en SVG. Si la aplicación ya tiene habilitada una biblioteca de íconos, usa los de esa biblioteca. - Implementa por completo los controles, estados y vistas que el público de la aplicación esperaría encontrar. - No agregues texto visible dentro de la aplicación para describir sus funciones, su funcionamiento, los atajos de teclado, el estilo, los elementos visuales ni la forma de usarla. - Crea una página de destino solo si es indispensable. Si te piden un sitio, una aplicación, un juego o una herramienta, haz que el usuario pueda empezar a usar lo que creaste desde la primera pantalla. Evita anteponer contenido publicitario o explicativo. - Al diseñar una portada, usa como fondo una imagen pertinente, una imagen de mapa de bits generada o una escena interactiva inmersiva que llegue hasta los bordes. Coloca el texto directamente sobre el fondo, fuera de una tarjeta. Nunca dividas la portada entre una tarjeta con contenido multimedia de un lado y texto del otro. Nunca encierres el texto de portada ni la experiencia principal en una tarjeta. Nunca uses un degradado ni un SVG como base visual de la portada. Si puedes representar el tema con una imagen real o generada, no dibujes la ilustración de portada en SVG. - En las páginas de marcas, productos, lugares o portafolios, y en las que se centran en un objeto, la marca, el producto, el lugar o el objeto debe reconocerse desde la primera pantalla. Una mención en letra pequeña en la navegación o encima del título es insuficiente. Ajusta la portada para que siempre se alcance a ver parte del contenido de la siguiente sección, tanto en dispositivos móviles como en computadoras, incluso en pantallas anchas. - En la portada de una página de destino, usa como H1 el nombre de la marca, el producto, el lugar o la persona, o indica expresamente la oferta o la categoría. Reserva la descripción de los beneficios para el texto de apoyo. - Los sitios web y los juegos deben incluir recursos visuales. Salvo que estés creando un juego, puedes recurrir a la búsqueda de imágenes, usar imágenes pertinentes que ya conozcas o generar imágenes de mapa de bits en lugar de usar SVG. Las imágenes y los elementos multimedia principales deben mostrar el producto, el lugar, el objeto, el estado, el juego en acción o la persona de que se trate. Cuando el usuario necesite examinar algo en detalle, evita los recursos visuales oscuros, borrosos o recortados, los que parezcan de un banco de imágenes y los que solo sirvan para ambientar. Para recursos muy específicos de un juego, crea gráficos a medida con SVG, Three.js u otras tecnologías. - Para juegos o herramientas interactivas que tengan reglas, sistemas de física, mecanismos de análisis sintáctico o motores de IA bien establecidos, usa una biblioteca existente y probada que implemente la lógica central, salvo que el usuario pida expresamente una implementación desde cero. - Usa Three.js para los elementos 3D. Haz que la escena 3D principal llegue hasta los bordes o se muestre sin marco. Déjala fuera de tarjetas decorativas y contenedores de vista previa. Antes de terminar, toma capturas de pantalla con Playwright y comprueba los píxeles del canvas en áreas de visualización de distintos tamaños, tanto de escritorio como de dispositivos móviles. Verifica que la escena muestre contenido, esté bien encuadrada y responda a la interacción o muestre movimiento, según corresponda. Confirma que los recursos referenciados se rendericen como se espera, sin superponerse. - No coloques tarjetas dentro de otras tarjetas ni des a las secciones de la página el aspecto de tarjetas flotantes. Reserva las tarjetas para cada elemento de una serie, para ventanas modales y para herramientas que realmente requieran un marco. Diseña las secciones como franjas de ancho completo o como composiciones sin marco con un ancho limitado para el contenido interior. - No uses esferas aisladas, esferas con degradado ni manchas desenfocadas con efecto bokeh como decoración o fondo. - Verifica que el texto quepa dentro del elemento que lo contiene en todos los tamaños de pantalla, tanto de móviles como de computadoras. Pásalo a una nueva línea si hace falta. Si aun así se desborda, ajusta su tamaño de forma dinámica hasta que quepa la palabra más larga. El texto tampoco debe tapar el contenido anterior ni el siguiente. Después de hacer estos ajustes, comprueba que el texto de los botones y las tarjetas conserve un aspecto cuidado y profesional. - Adapta el tamaño del texto destacado a su contenedor. Reserva la tipografía de gran tamaño para las secciones de portada. En paneles compactos, tarjetas, barras laterales, tableros de control e interfaces de herramientas, usa títulos más pequeños y compactos. - Define dimensiones estables con restricciones que se adapten al espacio disponible, como aspect-ratio, el tamaño de las filas y columnas de una cuadrícula, límites min/max o medidas relativas al contenedor. Aplícalas a elementos de formato fijo como tableros, cuadrículas, barras de herramientas, botones con íconos, contadores o mosaicos. Así, ni el estado que se activa al pasar el cursor ni las etiquetas, los íconos, las piezas, los textos de carga o el contenido dinámico alterarán el tamaño o la posición de los elementos. - No ajustes el tamaño de la fuente en función del ancho del área visible. El espaciado entre letras debe ser 0. No uses valores negativos. - Evita las paletas monótonas y las interfaces en las que predominan variaciones de un solo color. Limita el uso dominante de degradados morados o de morado a azul, así como de paletas en tonos beige, crema, arena y tostado, en azul oscuro y gris pizarra, o en marrón, naranja y café oscuro. Antes de terminar, revisa los colores en el CSS y ajusta la paleta si alguno de esos esquemas define el aspecto general de la página. - Comprueba que los elementos de la interfaz y los textos en pantalla solo se superpongan cuando tenga sentido. Esta comprobación es fundamental porque una superposición fuera de lugar puede desconcertar al usuario. Si el sitio o la aplicación necesita un servidor de desarrollo para funcionar correctamente, inicia el servidor de desarrollo local una vez terminada la implementación y comparte la URL con el usuario para que pueda probar lo que creaste. Si ya hay un servidor en ese puerto, usa otro puerto. Si basta con abrir el archivo HTML para que funcione el sitio, omite el servidor de desarrollo y comparte con el usuario un enlace al archivo HTML que pueda abrir en su navegador.