Landing page pulida, paso 2: detalles de UI premium

---

name: ui-polish description: Especificaciones paramétricas de ingeniería para la calidad y los detalles de interacción del frontend UI (estratificación de tonos de color, compensación de peso de fuente, escritura en streaming, animación de resorte, límites de selección de componentes). Utilice cuando el usuario solicite escribir o modificar la interfaz de frontend, hacer páginas/componentes/estilos/animaciones, optimizar la "calidad/refinamiento/baratura" de la interfaz, o seleccionar componentes para capas emergentes o escenarios de retroalimentación. Adecuado para cualquier stack de frontend como React+AntD, Vite, HTML/CSS, etc. Engineering-grade UI polish rules: color-tier layering, font-weight compensation, streaming text, spring motion parameters, and component selection boundaries.

Especificaciones de calidad UI

La "sensación premium" de una interfaz proviene de parámetros de detalle cuantificables. Escriba estilos y animaciones de acuerdo con estas especificaciones; en caso de conflicto con los tokens de diseño existentes del proyecto o el tema de AntD, prevalece el proyecto. Para temas duales, implemente siempre con variables CSS de ámbito html[data-theme], no use light-dark() (incompatibilidades con kernels antiguos).

I. Reglas de calidad inquebrantables

1. Estratificación sin bordes: La jerarquía se expresa mediante diferencias de brillo de fondo del 1%–3%; prohibido el negro puro #000.
   • Tema claro: fondo de página #f5f5f3 / tarjeta #fcfcfb; tema oscuro: #0b0b0a / #151515 / #1a1a19 / #20201e (escalón jerárquico de oscuro a claro)
   • En proyectos AntD, alinee con los tokens (colorBgLayout/colorBgContainer), no codifique valores de color en cada lugar
2. Enfoque con sombra, no con outline: Use box-shadow de doble anillo (borde sólido interior + halo de color principal de baja opacidad exterior) para enfocar entradas/tarjetas, creando una "sensación de mordida"; elimine el outline predeterminado, pero :focus-visible debe mantener un foco visible
3. Compensación de peso de fuente en modo oscuro: En modo oscuro, reduzca el peso de la fuente un nivel (400→300, las fuentes variables pueden precisar 360) para contrarrestar el efecto de halo de las letras blancas que "engordan"; cambie con el tema usando variables CSS
4. Escritura en streaming con efecto de tinta acuarela: 90ms por carácter, transición de blur(6px) + semitransparente a nítido, con easing cubic-bezier(.215,.61,.355,1); caracteres adyacentes se separan 30ms para el efecto de tinta; prohibido salto rígido carácter por carácter o aparición instantánea de párrafo completo
5. Alineación de iconos en línea: vertical-align: -0.125em, o use flex + align-items: center para envolver
6. Anti-parpadeo numérico: Estadísticas, tiempos, precios siempre usan font-variant-numeric: tabular-nums para que el ancho no salte al actualizar o cambiar
7. Pliegue suave: Animación de altura sin calcular altura con JS, use display: grid + grid-template-rows: 0fr → 1fr para la transición (con overflow: hidden en el interior)
8. Anti-huérfanas: Texto del cuerpo con text-wrap: pretty, títulos con text-wrap: balance
9. Animaciones con personalidad diferenciada:
   • Arrastrar/ajustar/posicionar: resorte sobreamortiguado (stiffness 1200 / damping 80) o cubic-bezier(.2,0,0,1), cero rebote, se fija de una vez
   • Me gusta/marca de verificación/retroalimentación de éxito: subamortiguado (380 / 18), un pequeño rebote, elástico
   • Entrada 150–250ms, salida 100–150ms, rápido y contenido
10. Retroalimentación autoextinguible: La retroalimentación temporal (copiar, guardar, etc.) se muestra durante 2–2.5s y luego se desvanece automáticamente, no espere que el usuario la cierre manualmente

II. Lista inversa de "baratura" (autoverificación)

Cualquier elemento presente requiere reelaboración:

• Dividir todas las áreas con bordes de 1px; fondos grandes de negro puro o blanco puro
• Outline azul predeterminado del navegador al enfocar
• Usar pesos de fuente del modo claro en modo oscuro (letras blancas engordan)
• Salto rígido carácter por carácter o aparición instantánea en salida en streaming
• Números que saltan al cambiar; todas las animaciones comparten el mismo ease, sin diferenciación de velocidad/personalidad
• Retroalimentación temporal que nunca desaparece, requiere cierre manual
• Decoración sin información: etiquetas de ceja en ALL-CAPS, cadenas separadas por punto medio, sufijos → en botones, halos degradados por todas partes

III. Límites de selección de componentes (capas emergentes y retroalimentación)

Escenario	Usar	Puntos clave
Navegación de contenido en media pantalla inferior, ajustable arrastrando (móvil)	Bottom Sheet (AntD Drawer placement="bottom")	Gesto con amortiguación, ajuste por niveles, tres alturas peek/half/full ≈ 25/50/90%
Selección de pocas acciones mutuamente excluyentes (móvil)	Action Sheet	Botones planos, elemento de cancelación independiente, acciones peligrosas en rojo y separadas de cancelar
Aviso ligero después de una acción, con posibilidad de deshacer	Snackbar (AntD message + botón de deshacer)	Barra flotante inferior, con tiempo de espera y desaparición automática, deshacer debe revertir realmente la operación
Confirmación de alto riesgo/bloqueante	AlertDialog (AntD Modal)	Fondo de pantalla bloqueado; solo para acciones irreversibles deshabilitar Esc; mantenerlo en otros casos
Guía para nuevas funciones/nuevos usuarios	Tour (AntD Tour)	Resaltado de posición + recorrido por pasos, se puede saltar
Ampliación de imágenes/media	Lightbox (antd-image o personalizado)	Zoom con rueda del mouse, cerrar con Esc
Validación de campos de formulario	Inline Alert (validación de Form de AntD)	Texto rojo debajo del campo de entrada, validación inmediata, desaparece al corregir; no use message global para errores de campo

Nivel de bloqueo de menor a mayor: Snackbar < Inline Alert < Sheet < Action Sheet < Dialog. En escritorio, priorice Modal/message; en móvil, priorice la familia Sheet; si no está seguro, elija el de menor bloqueo.

IV. Biblioteca de personalidades de animación (use según sea necesario, no acumule todas)

• Botón de retroalimentación de finalización: Al hacer clic, se contrae en un círculo → se dibuja una marca de verificación con stroke → partículas estallan, 300–400ms
• Vinculación de selección: Seleccionar → crece un anillo de progreso + desplazamiento numérico + fondo superior cambia con el progreso
• Expansión de tarjetas apiladas: Las tarjetas se expanden secuencialmente (cada una con un stagger de 50ms), al hacer clic de nuevo se recogen y apilan
• Tarjeta de ajuste + dibujo de línea: Deslizar horizontalmente y soltar para ajustar a la tarjeta más cercana (resorte 1200/80); al cambiar, la línea de tiempo se dibuja segmento por segmento con stroke-dashoffset
• Desplazamiento con inercia: El selector gira por inercia → desacelera → se ajusta a la escala; si se pasa, rebota (subamortiguado 380/18)
• Transición de difusión circular: Desde la posición de presión del dedo/cursor con clip-path: circle() que se expande para cubrir, 400–500ms

Priorice CSS transition/animation y Web Animations para la implementación; los parámetros de resorte deben seguir la semántica de framer-motion (stiffness/damping); todas las animaciones deben tener una degradación para prefers-reduced-motion (transición directa o desvanecimiento).

V. Autoverificación de entrega

• Estratificación mediante tonos de color, sin fondos grandes de negro puro o blanco puro, sin división con bordes completos
• Foco de teclado visible (sombra de doble anillo), objetivos táctiles ≥ 44px
• Peso de fuente compensado en modo oscuro
• Números con tabular-nums; texto del cuerpo con text-wrap: pretty
• Dos personalidades de animación, duración dentro del rango especificado; degradación para prefers-reduced-motion
• Retroalimentación temporal desaparece automáticamente en 2–2.5s; errores de formulario van en indicaciones en línea

Fuente

Parámetros extraídos de tres videos de Douyin (octubre 2026): Ludi "Desmantelando el código fuente del cliente de IA de una gran empresa, la calidad depende de estos 5 trucos" y "6 componentes王牌 ocultos", y Compañero Sandía "Episodio 14: 6 interacciones para hacer que las aplicaciones hechas por IA sean más refinadas".