Saat menyuruh AI membuat UI, komponennya terlihat baik-baik saja, tetapi begitu digabung, kesannya langsung terasa seperti "hasil generatif".
Penyebabnya bukan komponen yang jelek, melainkan komponen-komponen yang tidak saling cocok — absennya koherensi.
Solusinya ternyata cukup sederhana — untuk tiap sumbu (sudut, warna aksen, jarak, bayangan), tetapkan hanya satu nilai, lalu sesuaikan semuanya ke sana.
Saya merangkumnya berdasarkan Refactoring UI, Material 3, Apple HIG, dan WCAG + CSS yang bisa langsung copy-paste.
Demo langsung: https://styleseed-demo.vercel.app/how-it-thinks
Open source (MIT): https://github.com/bitjaru/styleseed
7 komentar
Akan bagus juga kalau UX writing Toss didokumentasikan.
Saya akan menyiapkannya
Ini terasa seperti sesuatu yang sebenarnya cukup masuk akal, tetapi bagian yang tidak terpikirkan sebelumnya, jadi saya berharap kalau diterapkan hasilnya akan banyak membaik.
Silakan coba dan unggah umpan balik apa pun dengan bebas ke GitHub!
Bukankah bisa menerapkan hanya aturan agent ketika design system sudah tersedia?
Ya, aturannya bisa dipakai terpisah.
Aturan StyleSeed tidak memaksakan warna atau komponen tertentu, melainkan hanya berisi
kriteria penilaian seperti "dalam situasi seperti ini, lakukan seperti ini", sehingga bisa langsung ditumpangkan di atas sistem yang sudah ada.
Tanpa instalasi, cukup satu kalimat:
"Baca https://styleseed-demo.vercel.app/llms.txt lalu terapkan aturan desain ini"
Jika ingin mensistematisasi desain yang sudah ada, tuliskan keputusan yang sudah ditetapkan (jarak, radius sudut, warna penekanan, dll.)
satu per satu di file tersebut. Agen akan menggunakannya kembali di setiap layar baru
sehingga mengeras menjadi sistem yang konsisten. Aturan dasar adalah titik awal, dan yang tidak cocok bisa Anda ubah sesuai kebutuhan.
Sangat membantu. Terima kasih.