LiftKit – Ein UI-Framework für Perfektionisten

 (chainlift.io)
16 Punkte von GN⁺ 2026-02-11 | 3 Kommentare | Auf WhatsApp teilen
  • Ein Open-Source-UI-Framework zur Lösung von Symmetrie- und Proportionsproblemen, dessen gesamte Struktur aus dem goldenen Schnitt abgeleitet ist
  • Korrigiert bei Buttons, Karten, Eingabefeldern usw. automatisch visuelles Gleichgewicht und räumliche Wirkung, damit natürliche Proportionen erhalten bleiben
  • Führt auf Basis eines globalen Skalierungsfaktors präzise Proportionsberechnungen mit Subpixel-Genauigkeit durch und erzeugt so eine konsistente Harmonie
  • Über ein modulares Farbkontrollpanel sind Echtzeit-Farbvorschau und Theme-Anpassungen möglich; unterstützt außerdem Detailkonfigurationen für Typografie, Materialien, Skalierung usw.
  • Bietet selbst in der MVP-Phase eine hochwertige visuelle Qualität und gilt als Werkzeug, das die gestalterische Qualität früher Designs verbessert

Überblick über LiftKit

  • LiftKit ist ein Open-Source-UI-Framework zur Lösung von Symmetrieproblemen
    • Das Hauptziel ist, das visuelle Gleichgewicht zwischen UI-Komponenten automatisch auszubalancieren
    • Es befindet sich in der Phase „Extremely Early Access“, also einer frühen experimentellen Version
  • Alle Proportionen des Frameworks werden aus dem goldenen Schnitt (golden ratio) abgeleitet, sodass Margins, Schriftgrößen, Border-Radien und alle anderen Elemente harmonisch gerendert werden
  • Es verwendet einen einzigen globalen Skalierungsfaktor (global scale factor), um Proportionen mit Subpixel-Genauigkeit zu berechnen

Zentrale Komponenten und Funktionen

  • Die Button-Komponente korrigiert automatisch visuelle Ungleichgewichte beim Padding, die entstehen, wenn Icons enthalten sind
    • Das Padding wird abhängig von der Schriftgröße dynamisch angepasst, um links und rechts im Gleichgewicht zu halten
  • Die Karten-Komponente bietet die Eigenschaft opticalCorrection, um Ungleichgewichte bei Abständen zu korrigieren, die durch den Zeilenabstand (line-height) des Inhalts entstehen
  • Eingabefelder (Input) werden durch ein auf dem goldenen Schnitt basierendes Abstandsdesign mit einer Form dargestellt, die „Luft zum Atmen“ lässt

Proportionen und visuelle Zufriedenheit

  • LiftKit verwendet ein von einem einzelnen Skalierungsfaktor abgeleitetes Proportionssystem, um „oddly satisfying“-Proportionen umzusetzen
  • Alle Komponenten werden mit Subpixel-Genauigkeit (subpixel accuracy) berechnet, um minimale visuelle Ungleichgewichte zu reduzieren
  • Dieser Ansatz vermittelt Nutzern ein „natürliches und harmonisches Gefühl“, das sich nur schwer in Worte fassen lässt

Farb- und Theme-Steuerung

  • LiftKit bietet ein modulares Farbkontrollpanel (modular control panel)
    • Es kann während der Arbeit zu Dateien hinzugefügt werden und ermöglicht eine Echtzeit-Farbvorschau
    • Unterstützt vielfältige Anpassungen von feinen Tonwertänderungen bis hin zu starkem Color Flooding
  • Zusätzlich zu Farben lassen sich die folgenden Punkte direkt in CSS anpassen
    • Typography: Feingranulare globale Typografie-Steuerung über die reine Font-Family hinaus
    • Custom Materials: Erstellung neuer Materialien auf Basis von Presets wie glass, flat, rubber usw.
    • Scaling: Nicht nur Text, sondern auch Abstände und andere Elemente skalieren gemeinsam
    • Component-specific configs: Das Erscheinungsbild einzelner Komponenten kann unabhängig angepasst werden

Feine Details und Designqualität

  • LiftKit wurde so konzipiert, dass es selbst in der MVP-Phase eine hochwertige visuelle Qualität liefert
    • „Make MVP’s that don’t look like MVP’s“
  • Standardmäßig bietet es wahrnehmungsgenaue Abstände (perceptually accurate spacing), um das empfundene Gleichgewicht für Nutzer zu maximieren
  • Diese feinen Details führen zu Ergebnissen, die sich „schwer erklären lassen, aber besser aussehen“

Verwandte Beiträge

3 Kommentare

 
roxie 2026-02-25

Auf der Landingpage gibt es einen Vorher-Nachher-Vergleich, aber beide sehen gut aus ..
 
heal9179 2026-02-11

Verwendet man normalerweise nicht eher eine Major Second (1.125) als den Goldenen Schnitt..?
 
GN⁺ 2026-02-11
Hacker-News-Kommentare

  • Bei der Entwicklung von Chrome war Minimalismus zentral.
    Damals waren die Bildschirme klein, daher wurde viel Zeit darauf verwendet, vertikalen Platz zu sparen.
    Wenn man das Verhältnis von Tab-Leiste, Toolbar und Titelleiste als goldenen Schnitt erklärte, gab es weniger Diskussionen, aber tatsächlich war es überhaupt nicht der goldene Schnitt.
    Dinge wie Licht, Farbe, Rundungen und visuelle Stärke sind viel wichtiger.

    • Eines meiner liebsten Design-Memes ist, dass jemand erst ein Logo erstellt und später Goldene-Schnitt-Geometrie darüberlegt und behauptet, das sei das Ergebnis „tiefen Nachdenkens“.
      In Wahrheit kann man mit ein wenig Anpassung fast alles an den goldenen Schnitt anpassen. So etwas wirkt besonders gut bei Leuten, die auf eine „spirituelle“ Ästhetik stehen.
    • Der Minimalismus des früheren Chrome war wirklich großartig.
      Ich möchte auch heute keinen Platz verschwenden, nur weil die Bildschirme größer geworden sind.
    • Ironischerweise ist bei Websites, die als Beispiel für den goldenen Schnitt genannt werden, das Design oft schlechter als das der Vergleichsseite.
      Am Ende scheint es eine Frage des Geschmacks zu sein.
    • Konzepte wie „vertikaler Rhythmus“ oder „modulare Skala“ wirken im Web fast wie bedeutungslose Aberglauben.
      Im Print sind sie nützlich, aber digital schaden sie eher der Lesbarkeit.
      Auch Icons zwanghaft auf dieselbe Form zu bringen oder Farben zu entfernen, verschlechtert die Unterscheidbarkeit.
    • Es gab auch den Witz: „Der goldene Schnitt war der Freund, den wir unterwegs getroffen haben.“

  • Ich bin der Entwickler von LiftKit.
    Das Projekt ist noch in einem sehr frühen Stadium und wird von mir allein als Hobby entwickelt.
    Es ist Open Source und kostenlos → GitHub-Link
    Das meiste Feedback wird bereits im Reddit-Thread diskutiert.
    Derzeit haben der Neuaufbau auf Radix-Primitives und die Verbesserung der Dokumentation Priorität.
    Einen Überblick gibt es auch im YouTube-Video.

    • Ich finde das Projekt cool. Die Kritik ist sogar professionelles Feedback und sollte eher als Kompliment verstanden werden.
      Es ist beeindruckend, dass hier das umgesetzt wurde, wovon die meisten Frontend-Entwickler träumen: ein „perfekt konsistentes Design-System“.
    • Vor 7 Monaten stand auf Reddit noch, „Component Rendering ist die nächste Priorität“, jetzt wird es gar nicht mehr erwähnt.
      Ein UI-Framework, das in seiner eigenen Dokumentation keine Komponenten rendern kann, ist schwer vertrauenswürdig.
    • Die Idee ist gut, und die Homepage ist visuell befriedigend.
      Ich habe versucht, den goldenen Schnitt in einer iOS-App anzuwenden, und würde gern mehr über den Entstehungsprozess erfahren.
    • Ich würde empfehlen, sich statt Radix auch Base UI oder React Aria anzusehen.
    • In den Vergleichsbildern konkurrierende Frameworks absichtlich kontrastarm darzustellen ist nicht fair.

  • Wenn man Vorher-Nachher-Screenshots zeigt, wäre es besser, statt eines Drag-Sliders per Button sofort umzuschalten.
    So nimmt das Auge den Unterschied bei jedem Klick direkt wahr.
    Siehe auch: Quora-Antwort von Andrei Herasimchuk

    • Selbst aus Sicht des Entwicklers ist der aktuelle Slider auf Touchscreens eine Katastrophe.
      Wenn man ihn nach links oder rechts bewegen will, rutscht er nach oben oder unten. Danke für das Feedback, ich werde das auf jeden Fall beheben.
    • Für Bildvergleiche ist ein Slider zwar Standard, aber man könnte ihn verbessern, etwa mit Links-/Rechts-Labels und indem beim Klicken kurz das Original eingeblendet wird.
      Beispielvideo: LUTLab Viewer
    • Ich war anfangs auch verwirrt, welche Seite LiftKit sein sollte.
    • Es fühlte sich an wie ein Spiel nach dem Motto: „Welche Seite sieht besser aus?“
    • Wenn man jede Grafik mit „material-style“ bzw. „liftkit“ labelt und die Labels je nach Slider-Position verdeckt, wäre es klarer.

  • Anfangs dachte ich, die Website sei eine Parodie.
    Dass sie echt ist, hat mich überrascht, und die Komponenten wirkten nicht sauber zentriert, außerdem schien das visuelle Gewicht unausgewogen.

    • Ich dachte auch jedes Mal: „Das ist besser“, und am Ende war es immer die Vorher-Seite.
    • Mathematisch perfekte Proportionen sehen nicht immer gut aus.
      In der Praxis muss man oft um ein paar Pixel nachjustieren, damit es fürs Auge natürlich wirkt.
    • Insgesamt wirkt irgendetwas verschoben.
    • Ein 1,618-Verhältnis erzeugt in echtem Design zu große Abstände.

  • Bei „optical correction none/top“ würde mich interessieren, ob dafür die Versalhöhe direkt gemessen und angepasst wird oder ob einfach die Font-Metriken verwendet werden.
    Den internen Werten eines Fonts ist schwer zu trauen, und die tatsächlichen Glyphen folgen ihnen oft nicht.
    Genau solche Dinge machen die Arbeit mit Fonts zum Albtraum.

  • Ein UI-Framework, das alle Komponenten nur als Bilder zeigt, ist schwer vertrauenswürdig.

    • Ich habe auf das Dropdown geklickt, aber es gab nicht einmal ein Bild.
    • Vielleicht will man den eigentlichen CSS-Code nicht veröffentlichen, damit niemand den „geheimen Goldene-Schnitt-Code“ kopieren kann.
    • Es wirkt auch so, als sollte professionelle Hilfe eingekauft werden.
    • Beim Scrollen in Firefox gibt es Frame-Drops.
    • Dass das UI nicht direkt gerendert wird, sondern von React oder Next.js abhängt, wirkt für ein UI-Kit unpassend.

  • Ich habe nach dem Preis gesucht, aber da stand nur „Contact Sales“, und ich musste direkt den Rechner benutzen.
    Mit 10 Top-Level-Seiten und 5 Unterseiten kam ich auf 16.500 $, was mich überrascht hat.

    • Das ist der Rechner für Agenturleistungen. LiftKit selbst ist kostenlos.
      Warst du vielleicht die Person, die das Formular mit „FUCK_YOU@DUMB.COM“ abgeschickt hat?
    • Ja, tatsächlich ist es eine Open-Source-Bibliothek und kostenlos nutzbar.

  • Den meisten UI-Bibliotheken entgeht ein wichtiger Punkt.
    Wenn Boxen mit abgerundeten Ecken ineinander verschachtelt sind, muss der border-radius um den Abstand vergrößert werden.
    Sonst bleibt ein visuell verschobener Eindruck.
    Beispiele: Snackbar-Komponente, Screenshot des Chrome-Tab-Layouts

  • Es gibt auch eine passende Forschungsarbeit → PMC-Paper-Link)

  • In der Beschreibung von LiftKit stand, „alle Elemente leiten sich vom goldenen Schnitt ab und erreichen dadurch perfekte Harmonie“, und ich konnte nicht sagen, ob das ironisch oder ernst gemeint war.

    • Aber direkt beim Öffnen der Seite wirkten die Buttons seltsam visuell befriedigend.
      Es scheint da eine Art sensorische Harmonie jenseits der Theorie zu geben.