LiftKit - framework de UI para perfeccionistas

(chainlift.io)

16 puntos por GN⁺ 2026-02-11 | 3 comentarios | Compartir por WhatsApp

Framework de UI open source que resuelve problemas de simetría y proporción, con una estructura donde todos los elementos se derivan de la proporción áurea
En botones, tarjetas, campos de entrada y más, corrige automáticamente el equilibrio visual y la sensación de espacio para mantener proporciones naturales
Basado en un factor de escala global, realiza cálculos de proporciones con precisión de subpíxel para lograr una armonía consistente
Mediante un panel de control de color modular, permite vista previa de color en tiempo real y ajuste de temas, además de configuraciones detalladas como tipografía, materiales y escalado
Incluso en etapa MVP, ofrece una alta calidad visual de acabado, por lo que destaca como una herramienta para elevar el nivel del diseño inicial

Resumen de LiftKit

LiftKit es un framework de UI open source que resuelve problemas de simetría
- Su objetivo principal es ajustar automáticamente el equilibrio visual entre componentes de UI
- Está en fase de “Extremely Early Access”, una versión inicial y experimental
Todas las proporciones del framework se derivan de la proporción áurea (golden ratio), por lo que márgenes, tamaños de fuente, radios de borde y demás elementos se renderizan de forma armónica
Usa un único factor de escala global (global scale factor) para calcular proporciones con precisión de subpíxel

Componentes y funciones principales

El componente de botón corrige automáticamente el desbalance visual del padding que aparece cuando se incluye un ícono
- Ajusta dinámicamente el padding según el tamaño de fuente para mantener el equilibrio entre ambos lados
El componente de tarjeta ofrece la propiedad opticalCorrection para compensar el desbalance de espacio causado por el interlineado (line-height) del contenido
El campo de entrada (Input) se presenta con una forma que “deja respirar” gracias a un diseño de espaciado basado en la proporción áurea

Proporciones y satisfacción visual

LiftKit usa un sistema de proporciones derivado de un único factor de escala para lograr proporciones “oddly satisfying”
Todos los componentes se calculan con precisión de subpíxel (subpixel accuracy), minimizando pequeños desbalances visuales
Este enfoque ofrece una “sensación natural y armoniosa” que a los usuarios les resulta difícil de describir

Control de color y temas

LiftKit ofrece un panel de control de color modular (modular control panel)
- Se puede agregar al archivo mientras se trabaja para tener vista previa de color en tiempo real
- Admite desde cambios sutiles de tono hasta ajustes intensos de color
Además del color, también se pueden ajustar directamente en CSS los siguientes elementos
- Typography: control tipográfico global detallado, más allá de la familia tipográfica
- Custom Materials: creación de nuevos materiales basados en presets como glass, flat y rubber
- Scaling: no solo escala el texto, también el espaciado y el resto de los elementos
- Component-specific configs: permite ajustar de forma independiente la apariencia de cada componente

Detalles finos y calidad de diseño

LiftKit está diseñado para ofrecer una alta calidad visual incluso en la etapa MVP
- “Make MVP’s that don’t look like MVP’s”
De forma predeterminada, proporciona espaciado perceptualmente preciso (perceptually accurate spacing) para maximizar la sensación de equilibrio que percibe el usuario
Estos detalles finos producen un resultado que “es difícil de explicar, pero se ve mejor”

3 comentarios

roxie 2026-02-25

En la landing page hay una comparación de antes y después, pero ambos se ven bien...

heal9179 2026-02-11

Normalmente, ¿no se usa más una segunda mayor (1.125) que la proporción áurea..?

GN⁺ 2026-02-11

Comentarios de Hacker News

Al diseñar Chrome, la simplicidad era la clave.
En esa época las pantallas eran pequeñas, así que se dedicó mucho tiempo a reducir el espacio vertical.
Decir que la proporción entre la tira de pestañas, la barra de herramientas y la barra de título era la proporción áurea ayudaba a evitar discusiones, pero en realidad no tenía nada de áurea.
Elementos como la luz, el color, los bordes redondeados y la intensidad visual eran mucho más importantes.
- Mi meme de diseño favorito es cuando hacen un logo y luego le agregan figuras de la proporción áurea diciendo que fue el resultado de una “reflexión profunda”.
  En realidad, si lo ajustas un poco, puedes hacer que casi cualquier cosa encaje con la proporción áurea. Este tipo de cosas funciona especialmente bien con la gente a la que le gusta esa estética “espiritual”.
- Me gustaba mucho la simplicidad del Chrome de antes.
  Aunque ahora las pantallas sean más grandes, sigo sin querer desperdiciar espacio.
- Irónicamente, muchas veces el sitio web que ponen como ejemplo de la proporción áurea tiene peor diseño que el que usan como comparación.
  Al final, parece ser una cuestión de gustos.
- Conceptos como “ritmo vertical” o “escala modular” en la web parecen casi una superstición sin sentido.
  En impresión pueden servir, pero en digital más bien dañan la legibilidad.
  Forzar a los íconos a tener la misma forma o quitarles el color también reduce la capacidad de distinguirlos.
- También salió el chiste de que “la proporción áurea era el amigo que hicimos en el camino”.
Soy el creador de LiftKit.
Este proyecto aún está en una etapa muy temprana y lo estoy haciendo solo como hobby.
Es open source y gratis → enlace a GitHub
La mayor parte del feedback ya se está discutiendo en este hilo de Reddit.
Ahora mismo, la prioridad es reconstruirlo con Radix primitives y mejorar la documentación.
También se puede ver un resumen en este video de YouTube.
- Me parece que el proyecto está genial. Incluso las críticas deberían tomarse como feedback profesional, o sea, casi como un elogio.
  Es impresionante haber hecho realidad ese “sistema de diseño perfectamente consistente” con el que sueña la mayoría de los desarrolladores frontend.
- En Reddit dijiste hace 7 meses que “el renderizado de componentes es la siguiente prioridad”, pero ahora ya no se menciona.
  Cuesta confiar en un framework de UI que no puede renderizar componentes en su propia documentación.
- La idea es buena y la página principal resulta visualmente satisfactoria.
  Intenté aplicar la proporción áurea en una app de iOS y me gustaría que compartieras el proceso de creación.
- En lugar de Radix, también recomendaría revisar Base UI o React Aria.
- En las imágenes comparativas, no es justo que los frameworks rivales estén intencionalmente mostrados con bajo contraste.
Al mostrar capturas comparativas de antes y después, sería mejor permitir cambiar al instante con botones en vez de usar un slider arrastrable.
Así, con cada clic, el ojo puede percibir directamente la diferencia.
Referencia relacionada: respuesta de Quora de Andrei Herasimchuk
- Incluso como creador, a mí también me parece que el slider actual es un desastre en pantallas táctiles.
  Cuando intentas moverlo a izquierda y derecha, se desliza hacia arriba y abajo. Gracias por el feedback; definitivamente lo voy a corregir.
- Para comparar fotos, el slider sí es el estándar, pero podría mejorarse agregando etiquetas izquierda/derecha y mostrando brevemente el original al hacer clic.
  Video de ejemplo: LUTLab Viewer
- Yo también al principio me confundí sobre cuál lado era LiftKit.
- Se sintió como un juego de “¿cuál se ve mejor?”.
- Si cada imagen tuviera etiquetas como “material-style” y “liftkit”, y estas quedaran ocultas según se mueve el slider, quedaría más claro.
Al principio pensé que este sitio era una parodia.
Me sorprendió saber que era real, y los componentes se veían descentrados y con un peso visual desequilibrado.
- A mí también me pasaba que cada vez pensaba “este se ve mejor”, y luego resultaba que siempre era la versión anterior (before).
- Una proporción matemáticamente perfecta no siempre se ve bien.
  En la práctica, hay que mover las cosas unos cuantos píxeles para que se vean naturales.
- En general, todo se siente un poco fuera de lugar.
- La proporción 1.618 deja espacios demasiado grandes en diseño real.
Sobre “optical correction none/top”, me da curiosidad si están midiendo directamente la altura de las mayúsculas para ajustarla, o si simplemente usan las métricas de la fuente tal cual.
Cuesta confiar en los valores internos de una tipografía, y los glifos reales no siempre los siguen.
Ese tipo de cosas es una pesadilla en el trabajo con fuentes.
Cuesta confiar en un framework de UI que muestra todos los componentes solo como imágenes.
- Hice clic en el dropdown y ni siquiera había una imagen.
- Quizá no quieren publicar el CSS real para que la gente no lo copie y así proteger su “código secreto de la proporción áurea”.
- También da la impresión de que deberían contratar a un profesional para que los ayude.
- Al hacer scroll en Firefox hay caídas de frames.
- Que la UI no se renderice directamente y dependa de React o Next.js se siente inadecuado para un UI kit.
Busqué el precio, pero solo aparecía “Contact Sales” y tuve que usar la calculadora.
Al calcular 10 páginas principales + 5 subpáginas, me salió $16,500 y me sorprendió.
- Esa es una calculadora para servicios de agencia. LiftKit en sí es gratis.
  ¿Por casualidad tú fuiste quien envió el formulario con “FUCK_YOU@DUMB.COM”?
- Sí, en realidad es una librería open source y se puede usar gratis.
Hay algo que la mayoría de las librerías de UI pasa por alto.
Cuando se anidan cajas con esquinas redondeadas, hay que sumar el border-radius según el espaciado.
Si no, queda una sensación de desalineación visual.
Ejemplos: componente Snackbar, captura del layout de pestañas de Chrome
También hay un artículo de investigación relacionado → enlace al paper en PMC)
En la descripción de LiftKit decía algo como “todos los elementos se derivan de la proporción áurea para lograr una armonía perfecta”, y no sé si era ironía o si iba en serio.
- Pero apenas abrí la página, el botón se sintió extrañamente visualmente satisfactorio.
  Parece que hay algún tipo de armonía sensorial más allá de la teoría.