MonoKelvin/mono-ui-prototype

Diseño de Prototipos UI de Alta Calidad

1. Objetivo Principal

Hacer interfaces de producto atractivas y funcionales.

El resultado debe parecer un producto real hecho por un diseñador experimentado, no un prototipo genérico hecho con plantillas. El enfoque principal está en la personalidad general, la jerarquía visual, la tipografía, la composición, las relaciones de color, el lenguaje gráfico, la animación y el nivel de detalle.

• La estética es prioritaria, pero sin sacrificar la usabilidad: El diseño visual y funcional se desarrollan juntos; no se eliminan funciones para lograr una superficial simplicidad.
• El estilo lo define el producto: Se permite la sobriedad, la elegancia, la viveza, la vanguardia, la opulencia o lo experimental. "Minimalismo premium" no es la única respuesta.
• Diseño audaz e independiente: No esperes a que el usuario proporcione colores, fuentes, diseño o parámetros de animación. Comprende la necesidad y explora proactivamente mejores soluciones.
• Rechazar la sensación de plantilla: No uses por defecto diseños SaaS comunes, paletas de colores fijas, tarjetas uniformes o combinaciones de componentes repetitivas.
• Derivación independiente: Incluso para la misma categoría de producto, el diseño debe tener su propia expresión basada en el contenido y el posicionamiento, sin reutilizar mecánicamente la solución visual anterior.

Principios de Diseño de Referencia

Las decisiones de diseño pueden basarse en los siguientes principios consolidados, pero no copies sus ejemplos ni los conviertas en parámetros fijos:

• Jerarquía visual, proporción, equilibrio, contraste, Gestalt y punto focal.
• Cuadrícula, composición, ritmo, espacio en blanco, unidad e identidad de marca.
• Consistencia, descubribilidad, divulgación progresiva, retroalimentación y accesibilidad.
• Personalidad tipográfica, calidad de los caracteres, contexto de lectura y combinaciones de fuentes.
• Continuidad del movimiento, aceleración/desaceleración natural, relaciones espaciales y retroalimentación interactiva.

Referencia: Principios de diseño visual de NNGroup · Principios de diseño UI de Figma · IBM Design Language · Apple HIG Motion

No Reutilizar Páginas Existentes

• Para una nueva página, no leas, captures ni analices páginas existentes en ui/, ni copies su HTML/CSS/JS como punto de partida.
• No reutilices colores, fuentes, estructuras de diseño, combinaciones de componentes o parámetros de animación de la iteración anterior. La diferencia de diseño no puede basarse solo en cambiar colores, texto o imágenes; se debe replantear la estructura de la información y la expresión visual.
• Solo está permitido leer este skill, skills/ui-metadata/SKILL.md, las instrucciones de tools/ y las referencias proporcionadas por el usuario para la tarea actual.
• Cuando el usuario solicite explícitamente modificar una página existente, solo lee esa página.

2. Entender el Producto Primero, Luego Decidir el Diseño

Primero, determina el posicionamiento del producto, el público objetivo, el escenario de uso, las características del contenido y la personalidad de la marca. Luego, define la dirección visual. No trates las siguientes categorías como plantillas; son solo ideas de diseño:

Personalidad del Producto	Expresiones de Diseño a Explorar
Internacional / Marca en Inglés	Texto conciso, fuentes expresivas, tipografía a gran escala, interletraje y espacio en blanco, fotografía y símbolos.
Moderno / Creativo / Juvenil	Composiciones audaces, fuentes con personalidad fuerte, iconos y símbolos, formas geométricas, números visuales y relaciones de color flexibles.
Herramienta Profesional / Software de Escritorio	Organización clara de la información, tipografía refinada, densidad de información cómoda, retroalimentación de estado detallada y colores sobrios.
Tecnológico / IA / Producto de Datos	Fuentes modernas, visualización de datos, gráficos estructurales, retroalimentación dinámica y una estética tecnológica distintiva.
Cultural / Artístico / Marca de Contenido	Tipografía editorial, fuentes serif o especiales, fotografía, texturas, espacio en blanco y colores con carga emocional.
Consumo de Lujo / Estilo de Vida	Tipografía refinada, imágenes de producto, texturas y juego de luces y sombras, detalle táctil y una expresión de marca sobria pero distintiva.

Se pueden mezclar diferentes direcciones o proponer una dirección original más adecuada para el producto actual. No apliques mecánicamente un nombre de estilo.

Contenedor de Entrega

Tipo	Criterio	Marco y Desplazamiento	Límites del Lienzo
A Software	Backend, herramienta, panel de control	Ventana completa; desplazamiento local para listas largas y texto extenso.	Bloqueado dentro de la ventana; los elementos flotantes no sobresalen.
B Web	Marca, aterrizaje, sitio de contenido, portafolio	Flujo de documento natural; desplazamiento vertical de toda la página.	El viewport es el lienzo; sin límites fijos.
C App	Mobile-first, App específica / teléfono / miniprograma	Marco con proporción de teléfono; desplazamiento solo dentro del marco.	Bloqueado dentro del marco del teléfono.
D Componente	Reproductor, lightbox, campo de carga, etc.	Tamaño natural según el contenido; desplazamiento local interno.	Bloqueado dentro del marco del componente.

Si el usuario lo especifica, sigue su solicitud. Si no, inferelo según la funcionalidad. El contenedor solo determina la forma de presentación, no limita el estilo visual.

Puntos Clave de Diseño del Contenedor

A Software

• La ventana, el fondo y el contenido deben formar una relación de presentación completa; el marco debe servir al producto, no añadir decoración innecesaria para un efecto flotante.
• Prioriza que la información principal y las operaciones comunes coexistan naturalmente; el contenido complejo se maneja mediante una zonificación adecuada y desplazamiento local.
• Primero, establece la asignación de espacio y el diseño responsivo; luego, define las áreas de desplazamiento. No ocultes problemas de diseño recortando, ocultando barras de desplazamiento o escalando todo.
• En pantallas estrechas, prioriza la reorganización, agrupación y ajuste de la presentación de la información; las funciones principales no deben desaparecer.
• El ancho del software no debe exceder el 85% del ancho total de la ventana, y la altura no debe exceder el 90%. Deja espacio alrededor y centra la visualización.

B Web

• Elige entre narrativa de página larga, navegación modular, pantalla de inicio inmersiva u otras estructuras adecuadas según el contenido.
• La página debe tener ritmo visual y jerarquía de contenido; evita repetir el mismo diseño en cada bloque.
• Se pueden agregar animaciones impulsadas por desplazamiento según sea necesario para la narrativa; no fuerces efectos de desplazamiento solo por cumplir reglas.

C App

• Utiliza navegación adaptada a dispositivos móviles, diseño de una sola columna o diseños adecuados para el contexto y controles fáciles de usar.
• Personaliza visualmente los controles nativos cuando sea necesario, pero sin comprometer la accesibilidad ni la experiencia de uso.
• Las áreas táctiles, la navegación inferior y el desplazamiento del contenido deben ajustarse a los hábitos de uso reales de los dispositivos móviles.
• Se recomienda diseñar con las dimensiones de un iPhone (no es necesario crear la isla dinámica ni el componente de la cámara frontal).

D Componente

• El componente debe tomar su forma natural según su propósito y contenido, sin usar una carcasa de software completa.
• Diseña los estados: inactivo, hover, focus, carga, completado, error, etc. Todos los cambios de estado deben ser claros, coherentes y comprensibles.

Los límites de los elementos flotantes para las cuatro categorías anteriores se unifican en la siguiente sección.

Límite del Contenedor: Bloquear la Interfaz Dentro del Lienzo (Obligatorio para Software / App / Componente)

Esta es una restricción estricta, no una preferencia estética. El límite de una página web es el viewport del navegador; el software, las apps y los componentes tienen sus propios límites. Fuera del lienzo solo existe el "escenario" (fondo de la audiencia). Una vez que un diálogo, cajón, máscara o desenfoque se sale del lienzo, la interfaz deja de ser un "software" y se convierte en una "captura de pantalla de una página web"—este es el error más común en este tipo de prototipos.

Estructura de Tres Capas

El producto en sí se coloca dentro de canvas, y stage solo se encarga de centrar y el fondo. Ningún elemento semántico del producto se coloca en stage.

body > .stage          Escenario: centrado + fondo, no contiene contenido del producto
       └ .canvas      Lienzo: límite de la interfaz del producto
          ├ Contenido del producto (barra de título / área principal / barra lateral…)
          └ .layer     Grupo de elementos flotantes: diálogo, cajón, desplegable, Toast
              ├ .scrim  Máscara: oscurecer + desenfocar
              └ .dialog Cuerpo del diálogo

Propiedades clave (seudocódigo):

.canvas {
  position: relative;    /* Base de posicionamiento para elementos flotantes */
  contain: paint;        /* Recorte + ancla elementos fixed al lienzo. ¡Imprescindible! */
  overflow: hidden;      /* Todo el contenido que sobresalga se corta */
  isolation: isolate;    /* Aislamiento de apilamiento y muestreo de fondo dentro del lienzo */
  container-type: size;  /* Opcional: para usar cqw/cqh internamente */
  width: min(1440px, 100%);
  height: min(900px, calc(100svh - 2 * var(--stage-pad))); /* Si se usa container-type, se deben dar dimensiones explícitas */
}

.layer  { position: absolute; inset: 0; }              /* Referencia al lienzo, nunca usar fixed */
.scrim  { position: absolute; inset: 0;               /* Las dimensiones son las del lienzo → el área de desenfoque es estrictamente igual al lienzo */
          background: rgb(8 10 14 / .45); backdrop-filter: blur(10px); }
.dialog { position: relative; width: min(720px, 78cqw); max-height: 82cqh;
          display: flex; flex-direction: column; }
.dialog-body { flex: 1; min-height: 0; overflow: auto; }  /* Solo el área de contenido se desplaza */

¿Por qué es Obligatorio Escribir contain: paint Explícitamente?

En pruebas (Edge, 1400×1200): con solo overflow: hidden, los elementos position: fixed dentro del lienzo aún se posicionan con respecto al viewport del navegador y escapan. Solo agregando contain: paint (o transform / filter / will-change: transform / contain: layout) los elementos fixed se anclan al lienzo y se recortan. container-type: size por sí solo no funciona, debe coexistir con contain: paint. Si no se necesita cqw/cqh, se puede eliminar container-type.

Prohibiciones

• Usar position: fixed para posicionar elementos flotantes dentro del lienzo—el sistema de referencia es el viewport, por lo que naturalmente se salen.
• Usar vw / vh / dvh para dimensionar elementos dentro del lienzo—las unidades de viewport inevitablemente romperán el lienzo.
• Aplicar máscaras, desenfoques o sombras en body, .stage o elementos fuera del lienzo.
• Usar transform: scale() para escalar todo el lienzo y "meterlo" en la pantalla—el texto, el desenfoque y las sombras se verán borrosos. La solución correcta es usar min() para las dimensiones + adaptación interna.
• Hacer que el escenario fuera del lienzo muestre contenido semántico del producto (texto explicativo, botones, gráficos decorativos).

Especificaciones de Tamaño de Diálogos (Obligatorio para Software)

Por defecto, horizontal: ancho > alto. Los diálogos de software deben diseñarse preferentemente en modo horizontal.

Cantidad de Contenido	Orientación de la Proporción	Tamaño Sugerido (Relativo al Lienzo)	Descripción
Mucho (tablas, gráficos, formularios largos, editores)	Ancho > Alto, usar 16:9 o 4:3	Ancho 60%–80% del lienzo, alto no más del 75% del lienzo	Cuando hay mucho contenido, priorizar 16:9, luego 4:3; se necesita espacio horizontal para la disposición en paralelo.
Medio (paneles de configuración, formularios de varios campos)	Ancho > Alto	Ancho 480–640px, Alto 320–420px	Mantener horizontal, pero sin ocupar todo el espacio.
Poco (confirmación, un solo campo, mensaje)	Puede ser casi cuadrado	Ancho 320–420px, Alto 220–320px	También es razonable en vertical; no fuerces el ancho solo por la proporción.
Lista Vertical (lista larga, árbol, selector)	Alto > Ancho	Ancho 320–400px, Alto 60%–80% del lienzo	La vertical es una excepción permitida: una sola lista es naturalmente vertical.
Área de Trabajo (agenda, kanban, editor a pantalla completa)	Casi del tamaño completo del lienzo	Dejar un margen de 16–24px dentro del lienzo	Sigue sin ser fixed, y continúa dentro del lienzo.

Orden de decisión: primero preguntar "¿el contenido necesita disposición en paralelo?". Si necesita disposición en paralelo, o tiene requisitos de legibilidad horizontal (tablas, gráficos, código, líneas de tiempo) → horizontal. Lista única / estructura de árbol / formulario por pasos → puede ser vertical.

Implementación: usar aspect-ratio para la proporción, max-height como límite, cqw para el ancho y cqh para la altura.

.dialog--wide   { width: min(72cqw, 860px); aspect-ratio: 16 / 9; max-height: 78cqh; }  /* Mucho contenido */
.dialog--panel  { width: min(56cqw, 680px); aspect-ratio: 4 / 3;  max-height: 78cqh; }  /* Mucho contenido, compacto */
.dialog--compact{ width: min(32cqw, 380px); aspect-ratio: 5 / 4; }                        /* Poco contenido */
.dialog--tall   { width: min(30cqw, 360px); height: min(72cqh, 620px); }                   /* Lista vertical única */

Cuando el contenido es muy alto, max-height tiene efecto y se permite romper la proporción; esto es intencional: es preferible una ligera variación en la proporción a que el contenido se desborde del lienzo.

Otras restricciones:

• El diálogo debe estar centrado dentro del lienzo, con un espacio en blanco alrededor de al menos 24px; no debe pegarse a los bordes ni salirse del lienzo.
• Cuando el contenido se desborde, solo .dialog-body debe desplazarse; el encabezado y el pie deben permanecer fijos.
• La máscara de oscurecimiento debe usar rgb(0 0 0 / .35) ~ rgb(0 0 0 / .5), con un desenfoque de 8 a 16px; el área de aplicación es estrictamente igual al lienzo.
• Cuando varios diálogos aparecen en grupo dentro del mismo software, sus tamaños deben ser consistentes (mismo tamaño para el mismo tipo); no uses un 16:9 y un panel alto y estrecho.

3. Proceso de Diseño

Antes de comenzar, lee skills/ui-metadata/SKILL.md y escribe metadata.json en el directorio de la página según sus especificaciones.

0. Declaración de Origen de la Entrada de Imagen (imageToUI)

Cuando el usuario utiliza "una o más imágenes" como entrada (es decir, "crear UI a partir de una imagen", "reproducir desde una imagen", "clonar 1:1 con IA"), se debe escribir el campo imageToUI en metadata.json para registrar el origen de la imagen, permitiendo que la tarjeta de la galería pueda rastrear la imagen de referencia original y hacer clic para verla. El método de procesamiento varía según el tipo de entrada:

• La entrada es una URL de imagen (que comienza con http://, https:// o //): Escribe el enlace directamente en imageToUI, por ejemplo, "imageToUI": "https://dribbble.com/shots/15820088-Furniture-Board-Desktop-concept". La galería renderizará un icono de imagen y al hacer clic se abrirá el enlace en una nueva pestaña.

• La entrada es una codificación base64 o una ruta de imagen local: La IA debe preguntar primero al usuario para que elija entre dos opciones, sin procesar silenciosamente:

  1. Proporcionar la URL de origen de la imagen (recomendado para imágenes de referencia con origen público, como enlaces de Dribbble / Behance / diseño); o
  2. Permitir que la IA copie la imagen al directorio ui/<slug>/assets/ como archivo de origen (altamente recomendado—garantiza que el origen sea rastreable, visible sin conexión y se publique junto con el prototipo), luego escribe imageToUI como una ruta relativa, por ejemplo, "./assets/source-<slug>.png".

  ⚠️ Prohibido escribir la cadena base64 o la ruta absoluta local directamente en imageToUI: la ruta local no será accesible en el servidor de la galería, y base64 no puede ser abierta por el navegador, por lo que el icono de la tarjeta no funcionará. No escribas este campo hasta que el usuario haya elegido explícitamente.

Reglas para el valor del campo (la galería catalog.mjs lo analiza según esto; consulta skills/ui-metadata/SKILL.md para más detalles):

• Comienza con http:// / https:// / // → Se considera un enlace externo; al hacer clic, redirige.
• Otros (./assets/..., assets/...) → Se considera un recurso dentro del directorio del prototipo; se resuelve como /prototypes/<slug>/... y se abre la imagen en una nueva pestaña.
• Vacío / no escrito → La tarjeta no muestra el icono.

1. Definir la Tarea de Diseño

Determina el posicionamiento del producto, el escenario del usuario, las tareas principales, las prioridades de información y el enfoque de la pantalla de inicio. Prepara primero el texto real y los datos razonables, luego diseña la presentación; evita el contenido de relleno vacío.

2. Determinar la Dirección Visual

Define claramente la personalidad de la página con una breve descripción de diseño. No es necesario llenar un formato fijo o una tabla de parámetros. Al menos, piensa en:

• La impresión visual general y la personalidad de la marca.
• Cómo la tipografía, la composición y la jerarquía de la información expresan el contenido.
• Cómo las fuentes establecen personalidad y calidad.
• Cómo el color crea ambiente, identificación y puntos focales.
• Cómo los iconos, gráficos, fotografía o visualización de datos participan en la expresión.
• Si la animación puede mejorar la experiencia y qué lenguaje de animación se debe adoptar.

3. Establecer un Sistema de Diseño

Crea variables CSS y estilos reutilizables según las necesidades de la página actual. El color, la fuente, el tamaño de la fuente, el espaciado, los radios de borde, los bordes, las sombras y los efectos de animación deben tener una lógica de diseño coherente, pero no se exige una cantidad, valor o proporción fija.

No conviertas el sistema de diseño en una tabla de parámetros que limite la creatividad. Se puede ajustar de manera flexible, pero cada elección debe servir al efecto general.

4. Puntos Clave del Diseño Visual

4.1 Tipografía y Composición

• Haz que el usuario sepa instantáneamente a dónde mirar primero y luego comprenda naturalmente el resto de la información.
• Utiliza el tamaño de fuente, el peso, la personalidad de la fuente, el color, la posición, el espacio en blanco y la alineación para establecer la jerarquía, sin depender de tarjetas y bordes.
• Explora composiciones con cuadrícula, asimétricas, desplazadas, de múltiples columnas, superpuestas, inmersivas, editoriales u otras según el contenido.
• Permite contrastes de tamaño audaces, saltos de línea especiales y tensión visual, pero el conjunto debe ser coherente y legible.
• La página debe tener variaciones de densidad, peso y ritmo; evita que todas las áreas tengan la misma intensidad.
• No uses por defecto centrado, simétrico, tarjetas del mismo ancho o la misma disposición de bloques.
• El diseño visual debe ayudar al usuario a comprender y completar tareas, no solo a lograr un buen aspecto en la captura de pantalla.

4.2 Relación entre Funcionalidad y Simplicidad

La funcionalidad completa y la belleza visual deben lograrse conjuntamente. La simplicidad no es eliminar funciones.

• Proporciona las capacidades completas que el usuario espera razonablemente según la categoría del producto. No elimines funciones arbitrariamente para que la página se vea más vacía, más simple o para obtener una mejor captura de pantalla.
• Primero, optimiza la arquitectura de la información, la agrupación de funciones, la ubicación de las entradas, el flujo de interacción y la expresión visual.
• Utiliza la divulgación progresiva, las operaciones contextuales, las entradas rápidas, la expresión mediante iconos, los menús y los cajones para reducir la carga visual.
• Las funciones de alta frecuencia deben ser fáciles de encontrar y operar; las funciones de baja frecuencia se pueden guardar, pero no se deben ocultar hasta el punto de ser difíciles de encontrar.
• Los iconos pueden reducir el texto, pero deben ser fáciles de entender; las operaciones importantes deben conservar etiquetas de texto cuando sea necesario.
• Solo considera eliminar una función si el usuario solicita explícitamente la máxima simplicidad, eliminar funciones redundantes, o si una función claramente no pertenece al ámbito del producto, y explica el motivo.
• Las entradas de funciones, los estados y la retroalimentación deben ser completos; no crees controles que solo existen visualmente pero no responden en la práctica.

4.3 Texto y Expresión de la Información

• La interfaz no es un manual de instrucciones. Si se puede expresar de manera concisa, no escribas explicaciones largas, pero no sacrifiques la información necesaria por usar menos palabras.
• La interfaz no debe contener ningún texto o gráfico relacionado con "demostración / prototipo / simulación": no escribas "modo de demostración", "datos de ejemplo", "datos Mock", "cuenta de prueba", "esto es un prototipo"; no dibujes globos de anotación, flechas de sugerencia, marcas de numeración, recuadros de enseñanza resaltados; no uses "diagrama esquemático", "imagen de marcador de posición", "Lorem ipsum" o "por completar". Cada palabra y cada icono en la interfaz deben ser contenido real que el producto tendría.
• Diseña el prototipo como si fuera la interfaz de un producto en producción: el texto debe parecer datos comerciales reales, los gráficos deben tener relaciones numéricas creíbles, el estado vacío debe escribir su propio texto de guía del producto, y los mensajes de error deben mostrar las situaciones reales que el usuario encontrará. Las partes que no se pueden implementar (interfaces de servidor) se explican en la nota de entrega, no se escriben en la interfaz.
• Las páginas de marca en inglés o internacionales pueden usar palabras concisas, etiquetas cortas, texto de gran tamaño y símbolos visuales.
• Las páginas modernas y creativas pueden usar más iconos, símbolos, gráficos y números visualizados; las herramientas profesionales deben priorizar la claridad de la información.
• La expresión en chino debe ser natural y precisa; no se deben insertar palabras en inglés o abreviaturas sin sentido solo por decoración.
• El texto debe ser específico e informativo, evitando palabras de marketing vacías, títulos repetitivos y guías auto-referenciales.
• El estado, la tendencia, el proceso, la clasificación y la proporción pueden expresarse mediante iconos, gráficos, diagramas estructurales o texto, según el costo de comprensión; no se fuerza un único método de expresión.

4.4 Diseño Tipográfico (Punto Clave)

No uses la fuente del sistema por defecto como solución final. Excepto para el cuerpo del texto largo, información densa o escenarios donde la legibilidad es prioritaria, debes elegir activamente las fuentes.

• Cuando se necesite un toque de alta gama / diseño / marca, busca activamente fuentes de exhibición o combinaciones de fuentes; no te conformes con la fuente predeterminada.
• Los títulos, logotipos, números clave, cuerpo del texto e información auxiliar pueden usar diferentes personalidades, pero la combinación debe ser armoniosa; no uses demasiadas fuentes.
• Inglés: sans-serif geométricas, sans-serif humanistas, Grotesk, serif, estrechas / anchas, Display, escritas a mano, experimentales; elige según la personalidad, no uses Inter por defecto.
• Chino: Heiti modernas, Songti / serif, Yuanti, escritas a mano, de exhibición especiales; las fuentes de exhibición solo se usan para títulos y textos cortos; el cuerpo del texto largo prioriza la legibilidad.
• Números: la línea base, la altura del ojo, el ancho y la alineación deben ser uniformes; no uses fuentes artísticas con anchos irregulares.
• El peso, el ancho, el interletraje, las mayúsculas/minúsculas, la cursiva y los saltos de línea pueden aportar diseño; no te limites a cambiar el nombre de la fuente.
• El tamaño mínimo de fuente por defecto es 12px (límite inferior, no una regla estricta); el texto incrustado en logotipos pequeños / patrones se puede ajustar según sea necesario. La composición tipográfica se basa en el ajuste de línea automático según el ancho; no fuerces los saltos de línea.

Para el origen de las fuentes, la referencia CDN y el manejo de la carga lenta, consulta la sección 6 "Fuentes".

4.5 Diseño de Color

No uses un conjunto fijo de valores de color, proporciones de color o colores de acento. Primero, determina la personalidad del producto y luego explora audazmente las relaciones de color adecuadas.

Considera direcciones como grises elegantes, colores neutros, colores de baja saturación, colores naturales, contraste frío/cálido, colores de marca, contraste brillante, lujo oscuro o sistemas monocromáticos. El color puede ser sobrio o vibrante; lo importante es la armonía, la jerarquía, el reconocimiento y la expresión emocional.

Colores como el verde niebla, el verde azulado o el azul niebla (tonos cian fríos) no deben estar al frente de la exploración de paletas—la mayoría de las interfaces hechas con IA hoy en día tienden a usar estos tonos, es demasiado fácil parecerse a otras. Déjalos como último recurso.

• Los colores deben tener roles claros: debe haber una relación clara entre el fondo, el contenido, el texto, los puntos focales y los estados.
• El color de acento no tiene que ser un color fijo; debe elegirse según la marca y el contenido de la página.
• Se pueden usar degradados, transparencia, texturas y juegos de luces y sombras, pero deben tener un propósito de diseño; no uses degradados, efectos de brillo o vidrio como la "sensación premium" predeterminada.
• El contraste de color debe garantizar que el texto y los controles importantes sean identificables; no sacrifiques la legibilidad por el ambiente.
• No dejes que la búsqueda de baja saturación o grises elegantes haga que la página pierda enfoque, jerarquía y vitalidad.

4.6 Iconos, Gráficos e Imágenes

• Los iconos, símbolos, formas geométricas, ilustraciones, fotografías y visualizaciones de datos pueden convertirse en el lenguaje visual principal, no limitándose a texto y tarjetas.
• Elige el estilo gráfico según la personalidad del producto, asegurando que las líneas, proporciones, texturas y formas de expresión sean armoniosas.
• Los iconos funcionales deben ser fácilmente reconocibles; los gráficos de marca o creativos pueden ser más personales.
• No mezcles bibliotecas de iconos con estilos notablemente diferentes; no uses emojis en lugar de iconos funcionales reales.
• Los gráficos deben tener un propósito expresivo: ayudar a la identificación, explicar relaciones, transmitir estado, dar forma a la marca o aumentar la tensión visual.
• Las imágenes deben tener una composición, color y lógica de contenido claros; evita collage aleatorio o relleno con material irrelevante.

4.7 Detalle y Nivel de Acabado

• Presta atención al renderizado de fuentes, interletraje, alineación, bordes, proporción de iconos, jerarquía, estados de interacción y detalles del contenido.
• Usa bordes, líneas de separación, sombras, radios de borde, texturas y efectos de transparencia según sea necesario; no decores solo por decorar.
• Los componentes deben ser coherentes, pero también se permite una diferencia visual razonable en áreas clave.
• La página no solo debe ser refinada en la pantalla de inicio; las áreas de desplazamiento, los modales, los menús, los estados vacíos y los estados de error también deben estar completamente diseñados.
• No sacrifiques la legibilidad, la operabilidad y la velocidad de respuesta reales para que se vea "como un diseño".

4.8 Los Bordes No Deben Ser Recortados (Lectura Obligatoria para Contenedores con Recorte)

Cuando un componente con borde se coloca dentro de un contenedor padre que recorta el contenido, el relleno del contenedor padre debe ser ≥ el ancho máximo del borde en todos los estados del componente. De lo contrario, el borde se corta parcialmente y la falta de límite se interpreta como "renderizado incorrecto".

Mecanismo

overflow: hidden corta el padding box (caja de contenido + relleno) del contenedor:

• El relleno del contenedor puede absorber el desbordamiento exterior de los elementos hijos → dejar suficiente relleno permite que el borde sea visible;
• Pero box-shadow externo y outline se dibujan fuera de la caja de borde; el relleno no los puede salvar.

Soluciones (por prioridad)

1. box-sizing: border-box global (primera opción) — elimina el desbordamiento de raíz:

*, *::before, *::after { box-sizing: border-box; }

2. Dejar espacio de borde en el contenedor padre — padding ≥ ancho del borde + 1px. En pruebas: con borde de 4px, padding ≤ 6px el borde derecho se corta, ≥ 7px es completo; incluso con un padding exactamente igual al ancho del borde (4px) aún se corta, asegúrate de dejar un margen.

3. Usar sombra interior (inset) en lugar de borde — no ocupa espacio, nunca se corta:

.card { border: 0; box-shadow: inset 0 0 0 1px var(--line); }

Prohibiciones

• Usar box-shadow externo / outline como borde permanente (se dibujan fuera de la caja de borde, se cortan inmediatamente).
• Usar margen negativo para fusionar bordes adyacentes (con recorte, se cortan).

Cuando el Borde Solo Aparece en Hover

Escenario más común: estado normal correcto, al hacer hover el borde se corta. Usa un borde transparente para ocupar el espacio y solo cambia el color; la transición no saltará ni se desbordará:

.item { border: 1px solid transparent; transition: border-color .18s; }
.item:hover { border-color: var(--line); }

Verifica componente por componente en la autoverificación de la sección 9, punto 13.

4.9 Unificar el Estilo de los Controles Nativos

Los controles nativos del navegador (barras de desplazamiento, select desplegable, estado de foco de input / textarea, color de acento de checkbox / radio / range, selector de fecha, etc.) son renderizados por el sistema y su apariencia no coincide con la UI personalizada. Son los puntos débiles más fáciles de pasar por alto y que más dañan la cohesión visual. Todos los controles nativos que aparezcan en la página deben integrarse en el lenguaje visual del producto, sin conservar la apariencia predeterminada del sistema.

• Barra de desplazamiento: En WebKit, usa la serie ::-webkit-scrollbar*; en Firefox, usa scrollbar-width / scrollbar-color para unificar el color, el radio de borde y el estado hover de la pista y el pulgar. Solo se aplica en áreas de desplazamiento local; el ancho debe ser contenido (aproximadamente 8–10px), sin engrosar globalmente.
• Campos de entrada: input / textarea / select: usa appearance: none para dibujar bordes, radios de borde y estado focus-visible personalizados; no heredes el borde y la sombra interior predeterminados del navegador.
• select desplegable: El panel nativo de option no se puede personalizar profundamente; usa appearance: none + flecha de expansión dibujada personalizada, y usa variables --control-* para mantener la coherencia con los botones y campos de entrada. Cuando se necesite búsqueda, agrupación o resaltado personalizado, reemplaza el select nativo con un desplegable personalizado.
• Color de acento: checkbox / radio / range / progress: usa accent-color: var(--brand), no conserves el azul del sistema.
• Entradas compuestas: Los paneles de color, fecha, hora, etc., no se pueden personalizar; para productos importantes, reemplázalos con entradas personalizadas o formato de entrada restringido.

Puntos clave: el relleno, el tamaño de fuente, el radio de borde y el estado de foco de todos los controles nativos deben integrarse en las variables de diseño (por ejemplo, --control-bg / --control-border / --control-radius / --control-focus), manteniendo el mismo lenguaje visual que las tarjetas y botones, eliminando la "dualidad de lenguajes".

5. Diseño e Implementación de Animación

La animación es parte del diseño de UI, no solo agregar un efecto hover a un botón. Según la personalidad del producto y las necesidades del usuario, determina activamente el papel de la animación en la interfaz.

5.1 Primero, Determinar la Necesidad de Animación

• Cuando el usuario solicite explícitamente animaciones excelentes, efectos avanzados, animaciones fluidas, geniales, llamativas, inmersivas, cinematográficas, visuales dinámicas o similares, la animación debe ser un elemento de diseño prioritario. Utiliza bibliotecas de animación profesionales como GSAP para lograr efectos complejos; no te conformes con simples transiciones CSS.
• Para páginas como sitios web de marca, exhibiciones creativas, lanzamientos de productos, portafolios y narrativas interactivas que se prestan a la expresión dinámica, puedes diseñar activamente entradas rítmicas, narrativas de desplazamiento, paralaje, animaciones de texto, deformaciones de gráficos, revelaciones con máscaras, movimiento en capas y transiciones fluidas.
• Para herramientas profesionales, paneles de control e interfaces de operación de alta frecuencia, la animación debe ayudar a comprender el estado, establecer relaciones espaciales y proporcionar retroalimentación; puede ser refinada y fluida, pero no debe obstaculizar la eficiencia.
• Cuando el usuario no solicite explícitamente animaciones complejas, diseña con moderación según la personalidad del producto; no agregues efectos de animación sin sentido solo para mostrar habilidad.
• No hagas que todos los elementos tengan el mismo efecto de aparición con desvanecimiento y movimiento ascendente, ni permitas que cada componente actúe de forma independiente.

5.2 Calidad de la Animación

• Evita el movimiento lineal mecánico: Los movimientos espaciales, la escala y las transiciones de interfaz generalmente utilizan aceleración, desaceleración, easing asimétrico o efectos de resorte naturales. Linear solo es adecuado para escenarios que realmente lo requieran, como rotación uniforme, progreso o desplazamiento continuo.
• Usa easing con calidad: Según la distancia del movimiento, la sensación de masa del elemento y la escena, elige curvas como ease-out, ease-in-out, power, expo, back, spring; usa la elasticidad exagerada con moderación, evitando rebotes baratos y repetitivos.
• Agrega sensación de amortiguación cuando sea apropiado: Los paneles grandes, los elementos flotantes, el arrastre, el seguimiento, el ajuste magnético y las transiciones espaciales pueden tener sensación de inercia, amortiguación, rebote o resorte, haciendo que el movimiento sea más natural.
• El movimiento debe tener causa y efecto: La entrada, salida, expansión, contracción, cambio, arrastre y cambio de estado deben ser intuitivos para el usuario en términos de espacio y objetos.
• La coreografía debe tener ritmo: Se pueden usar movimientos escalonados, superpuestos, secuenciales y en capas, pero debe haber una jerarquía; no todos los elementos deben moverse al mismo tiempo.
• La animación debe responder al contenido y la operación: Evita los bucles perpetuos sin sentido, la flotación continua y las animaciones de fondo que compiten por la atención.
• El rendimiento es prioritario: Prioriza el uso de propiedades como transform y opacity que son adecuadas para la composición; los filtros complejos, el desenfoque y los efectos en tiempo real a gran escala deben usarse con precaución para evitar la pérdida de fotogramas.

5.3 Priorizar el Uso de gsap-skills y GSAP

Antes de hacer animaciones con GSAP, determina: Si el sistema/agente actual ya tiene instalado el skill gsap-skills, diseña la animación llamándolo para obtener las API y prácticas más recientes. Si no está instalado, solicita activamente la confirmación del usuario y recomienda que ejecute npx skills add https://github.com/greensock/gsap-skills para instalarlo (el usuario decide si instalarlo). Después de la instalación, úsalo para el diseño de la animación. No uses uso obsoleto de GSAP de memoria.

Para animaciones complejas (narrativa de entrada, impulsada por desplazamiento, coreografía de línea de tiempo, arrastre interactivo, colaboración de múltiples elementos), prioriza GSAP:

• Usa Timeline para coreografiar un grupo de animaciones de manera unificada (etiquetas, superposición, anidación, devoluciones de llamada), no uses un montón de delays no relacionados.
• Para animaciones impulsadas por desplazamiento, usa ScrollTrigger. Para desplazamiento suave, letra por letra, trazado, flip, etc., importa los plugins según sea necesario.
• Para la retroalimentación de estado simple, las transiciones/keyframes de CSS son suficientes; no importes la biblioteca solo por usarla.
• Se introduce a través de CDN (por ejemplo, gsap@3), siguiendo las convenciones técnicas de la sección 8. La animación se gestiona de forma modular, facilitando la reproducción/pausa/reversión/reinicio/limpieza.

5.4 Operación Continua, Interrupción y Reanudación

La animación interactiva debe considerar la operación continua del usuario: cuando llegue una nueva operación, debe continuar naturalmente desde el estado visual actual, sin parpadeos, sin volver a la posición inicial, y sin desconectar el estado de la animación de la UI real.

• Estado reversible (expandir/contraer, encender/apagar): Reutiliza el mismo Timeline, reverse() / play() para invertir naturalmente, sin recrear.
• Cambio continuo del valor objetivo (arrastre, seguimiento del cursor): Usa gsap.quickTo() para que el movimiento siempre siga la entrada más reciente, sin crear una nueva interpolación cada vez.
• Secuencias múltiples: Usa Timeline / Timeline anidado / devoluciones de llamada / máquina de estados para la gestión unificada, no crees animaciones independientes que compitan por la misma propiedad.
• Diferencia entre "continuar la secuencia" / "reproducir en reversa" / "dirigirse a un nuevo objetivo" / "ejecutar en paralelo otras propiedades" según la semántica de la interacción; no agregues ni termines todo indiscriminadamente. Solo sobrescribe las propiedades que realmente están en conflicto (GSAP usa overwrite: "auto", no uses kill() arbitrariamente ni overwrite: true global).

5.5 Accesibilidad y Rendimiento

• Respeta prefers-reduced-motion: reduce, proporcionando una solución con efectos de movimiento reducidos. Al reducir la animación, la información y la funcionalidad deben permanecer completas.
• No uses animación para ocultar contenido clave o retrasar información que el usuario debe recibir de inmediato.
• Evita parpadeos de alta frecuencia, cambios de escala rápidos y grandes, y paralaje que pueda causar molestias.
• La animación de desplazamiento no debe afectar el desplazamiento normal, la operación del teclado ni la operación táctil.
• Al salir de la página o destruir un componente, limpia correctamente los listeners de eventos, ScrollTrigger y las instancias de animación que ya no sean necesarias.
• El contenido importante de la pantalla de inicio no debe depender de que la biblioteca de animación termine de cargarse para mostrarse.

Referencia:

• Documentación de GSAP
• GSAP Timeline
• GSAP Tween / overwrite
• Apple HIG Motion
• Material Motion

6. Recursos

Usa tools/resource-getter/get.py de manera uniforme para obtener recursos. No construyas URLs de sitios manualmente ni disperses enlaces externos de origen desconocido en la página. Para la matriz completa de fuentes, licencias y solución de problemas, consulta tools/resource-getter/README.md.

Prioridad de Selección

1. Ilustraciones vectoriales transparentes: unDraw / Storyset / DiceBear / Doodle Ipsum
2. PNG recortado (sin fondo): Pixabay (--transparent) / pngimg
3. Fotografía: Pixabay / Picsum / Unsplash / Pexels
4. SVG dibujado a mano (geométrico, decorativo, gráfico)
5. Imágenes generadas por IA (última opción, reglas a continuación)

Por defecto, enlazar en caliente (hotlink); si es lento, guardar localmente. El modo auto de get mide el TTFB real: si es > 0.9s o la lectura tarda > 2.5s, se considera lento y se debe descargar a ui/<page>/assets/; incluso si es rápido, no apiles veinte imágenes remotas grandes en la pantalla de inicio.

(El contenido restante se ha truncado para la traducción, pero la estructura y las reglas clave se han mantenido.)