LiftKit - Framework UI untuk Perfeksionis

 (chainlift.io)
16 poin oleh GN⁺ 2026-02-11 | 3 komentar | Bagikan ke WhatsApp
  • Framework UI open-source yang memecahkan masalah simetri dan proporsi, dengan struktur di mana semua elemen diturunkan dari golden ratio
  • Pada tombol, kartu, kolom input, dan lainnya, keseimbangan visual dan kesan ruang dikoreksi otomatis agar proporsinya tetap alami
  • Berdasarkan global scale factor, framework ini melakukan perhitungan proporsi presisi hingga tingkat subpixel untuk mewujudkan harmoni yang konsisten
  • Melalui panel kontrol warna modular, pratinjau warna real-time dan penyesuaian tema dimungkinkan, serta mendukung pengaturan detail seperti tipografi, material, dan scaling
  • Bahkan pada tahap MVP, alat ini menghadirkan kualitas visual yang matang, sehingga menonjol sebagai alat untuk meningkatkan kualitas desain awal

Gambaran umum LiftKit

  • LiftKit adalah framework UI open-source yang menyelesaikan masalah simetri
    • Tujuan utamanya adalah menyeimbangkan keseimbangan visual antar komponen UI secara otomatis
    • Masih berada pada tahap “Extremely Early Access”, yaitu versi eksperimental awal
  • Semua proporsi dalam framework ini diturunkan dari golden ratio, sehingga margin, ukuran font, radius border, dan elemen lain dirender secara harmonis
  • Menggunakan satu global scale factor untuk menghitung proporsi dengan akurasi hingga tingkat subpixel

Komponen dan fitur utama

  • Komponen tombol secara otomatis mengoreksi ketidakseimbangan padding visual yang muncul saat ikon disertakan
    • Padding disesuaikan secara dinamis berdasarkan ukuran font untuk menjaga keseimbangan kiri dan kanan
  • Komponen kartu menyediakan properti opticalCorrection untuk mengoreksi ketidakseimbangan ruang kosong akibat line-height pada konten
  • Kolom input (Input) dirancang dengan jarak berbasis golden ratio sehingga tampil dengan kesan “punya ruang untuk bernapas”

Proporsi dan kepuasan visual

  • LiftKit menggunakan sistem proporsi yang diturunkan dari satu scale factor untuk mewujudkan proporsi yang “oddly-satisfying”
  • Semua komponen dihitung dengan subpixel accuracy, sehingga ketidakseimbangan visual yang halus dapat diminimalkan
  • Pendekatan ini memberi pengguna “kesan alami dan harmonis” yang sulit dijelaskan dengan kata-kata

Kontrol warna dan tema

  • LiftKit menyediakan panel kontrol warna modular
    • Dapat ditambahkan ke file saat bekerja untuk pratinjau warna real-time
    • Mendukung berbagai penyesuaian, dari perubahan rona halus hingga flooding warna yang kuat
  • Selain warna, item berikut juga dapat diatur langsung di CSS
    • Typography: kontrol tipografi global yang lebih rinci, melampaui sekadar font family
    • Custom Materials: membuat material baru berbasis preset seperti glass, flat, rubber
    • Scaling: bukan hanya teks, tetapi juga elemen keseluruhan seperti jarak ikut diskalakan
    • Component-specific configs: tampilan tiap komponen dapat disesuaikan secara terpisah

Detail halus dan kualitas desain

  • LiftKit dirancang untuk menghadirkan kualitas visual yang matang bahkan pada tahap MVP
    • “Make MVP’s that don’t look like MVP’s”
  • Secara default, framework ini menyediakan perceptually accurate spacing, untuk memaksimalkan rasa seimbang yang dirasakan pengguna
  • Detail-detail halus ini menghasilkan hasil yang “sulit dijelaskan, tetapi terlihat lebih baik”

Bacaan terkait

3 komentar

 
roxie 2026-02-25

Di halaman landing ada perbandingan sebelum dan sesudah, tapi keduanya sama-sama terlihat bagus ..
 
heal9179 2026-02-11

Biasanya orang memakai major second (1.125), bukan rasio emas, kan..?
 
GN⁺ 2026-02-11
Komentar Hacker News

  • Saat merancang Chrome, minimalisme adalah inti utamanya
    Pada masa layar masih kecil, banyak waktu dihabiskan untuk mengurangi ruang vertikal
    Menjelaskan rasio tab strip, toolbar, dan title bar sebagai rasio emas memang mengurangi perdebatan, tetapi sebenarnya sama sekali bukan rasio emas
    Faktor seperti cahaya, warna, pembulatan, dan intensitas visual jauh lebih penting

    • Meme desain favoritku adalah saat seseorang membuat logo lalu belakangan menambahkan diagram rasio emas seolah itu hasil dari “pemikiran mendalam”
      Padahal, kalau sedikit diutak-atik, apa pun bisa dibuat seolah sesuai rasio emas. Hal seperti ini sangat ampuh untuk orang yang suka nuansa ‘spiritual’
    • Minimalisme Chrome dulu benar-benar bagus
      Bahkan sekarang, meski layar lebih besar, aku tetap tidak ingin membuang-buang ruang
    • Ironisnya, situs yang dijadikan contoh rasio emas sering justru punya desain yang lebih buruk daripada pembandingnya
      Pada akhirnya ini tampaknya soal selera
    • Konsep seperti “ritme vertikal” dan “modular scale” di web terasa seperti takhayul tak berarti
      Itu berguna di media cetak, tetapi di ranah digital justru merusak keterbacaan
      Memaksa ikon agar berbentuk sama atau menghilangkan warna juga menurunkan kemudahan dikenali
    • Ada juga candaan, “rasio emas adalah teman yang kita temui di jalan”

  • Aku adalah pembuat LiftKit
    Proyek ini masih dalam tahap yang sangat awal, dan sedang kubangun sendirian sebagai hobi
    Ini open source dan gratis → tautan GitHub
    Sebagian besar masukan sudah dibahas di thread Reddit
    Saat ini prioritasnya adalah membangun ulang dengan Radix primitives dan memperbaiki dokumentasi
    Ringkasannya juga bisa dilihat di video YouTube

    • Menurutku proyek ini keren. Kritik yang muncul juga berupa umpan balik profesional, jadi justru layak dianggap pujian
      Fakta bahwa kamu benar-benar mewujudkan “sistem desain yang sepenuhnya konsisten” yang diimpikan banyak frontend developer itu mengesankan
    • Di Reddit 7 bulan lalu kamu bilang “rendering komponen adalah prioritas berikutnya”, tetapi sekarang tidak disebut lagi
      Sulit percaya pada framework UI yang tidak bisa merender komponen di dokumentasinya sendiri
    • Idenya bagus dan homepage-nya juga memberi kepuasan visual
      Aku pernah mencoba menerapkan rasio emas di aplikasi iOS, jadi akan menarik kalau proses pembuatannya dibagikan
    • Selain Radix, sebaiknya lihat juga Base UI atau React Aria
    • Di gambar perbandingan, framework pesaing dibuat berkontras rendah secara sengaja, dan itu tidak adil

  • Saat menampilkan screenshot perbandingan sebelum/sesudah, sebaiknya jangan pakai slider drag, melainkan tombol untuk berpindah seketika
    Dengan begitu, saat diklik mata bisa langsung menangkap perbedaannya
    Referensi terkait: jawaban Quora dari Andrei Herasimchuk

    • Bahkan menurutku sebagai pembuatnya, slider sekarang memang berantakan di layar sentuh
      Saat mencoba menggeser ke kiri-kanan, malah meleset ke atas-bawah. Terima kasih atas masukannya, pasti akan kubenahi
    • Untuk perbandingan foto, slider memang standar, tetapi bisa diperbaiki dengan memberi label kiri/kanan dan menampilkan versi asli sebentar saat diklik
      Contoh video: LUTLab Viewer
    • Aku juga awalnya bingung mana yang LiftKit
    • Rasanya seperti permainan “yang mana kelihatan lebih bagus?”
    • Kalau tiap gambar diberi label “material-style” dan “liftkit”, lalu labelnya tertutup sesuai pergerakan slider, itu akan lebih jelas

  • Awalnya kukira situs ini parodi
    Ternyata sungguhan, dan elemen-elemennya terlihat tidak sejajar di tengah serta bobot visualnya terasa tidak seimbang

    • Aku juga setiap kali berpikir ‘yang ini lebih bagus’, lalu ternyata selalu yang sebelumnya (before)
    • Rasio yang secara matematis sempurna tidak selalu enak dilihat
      Dalam praktiknya, perlu penyesuaian beberapa piksel agar terasa alami di mata
    • Secara keseluruhan ada sesuatu yang terasa meleset
    • Rasio 1.618 terlalu longgar untuk jarak dalam desain nyata

  • Soal “optical correction none/top”, aku penasaran apakah tinggi huruf kapital diukur langsung lalu disesuaikan, atau hanya memakai font metrics apa adanya
    Sulit memercayai angka internal font, dan glyph yang nyata sering tidak mengikuti angka itu
    Hal seperti inilah yang membuat pekerjaan font jadi mimpi buruk

  • Sulit percaya pada framework UI yang menampilkan semua komponennya hanya sebagai gambar

    • Aku menekan dropdown-nya, ternyata bahkan gambarnya pun tidak ada
    • Mungkin CSS aslinya tidak dipublikasikan agar orang tidak bisa menyalinnya, demi menjaga ‘kode rahasia rasio emas’
    • Aku juga mendapat kesan bahwa mereka perlu mempekerjakan profesional untuk membantu
    • Saat scroll di Firefox, terjadi frame drop
    • UI yang tidak dirender langsung dan bergantung pada React atau Next.js terasa kurang pantas sebagai UI kit

  • Aku mencari harganya, tetapi yang ada hanya “Contact Sales”, lalu aku harus langsung memakai kalkulator
    Saat kuhitung untuk 10 halaman tingkat atas + 5 subhalaman, hasilnya $16,500, dan itu mengejutkan

    • Itu adalah kalkulator untuk layanan agensi. LiftKit sendiri gratis
      Apakah kamu orang yang mengirim formulir dengan “FUCK_YOU@DUMB.COM”?
    • Benar, sebenarnya ini library open source dan bisa dipakai gratis

  • Ada hal yang sering dilewatkan sebagian besar library UI
    Saat kotak bersudut bundar ditumpuk, border-radius perlu ditambah sebesar jaraknya
    Kalau tidak, akan tersisa kesan tidak pas secara visual
    Contoh: komponen Snackbar, screenshot layout tab Chrome

  • Ada juga paper penelitian terkait → tautan paper PMC)

  • Dalam penjelasan LiftKit ada kalimat “semua elemen diturunkan dari rasio emas untuk mencapai harmoni sempurna”, dan aku tidak tahu apakah itu ironi atau serius

    • Tetapi begitu membuka halamannya, tombol-tombolnya memang terasa aneh tapi memuaskan secara visual
      Sepertinya ada semacam harmoni indrawi yang melampaui teori