StyleSeed – Open Source yang Menanamkan Sense Desain ke Alat Coding AI (2.200 baris aturan desain)

 (github.com/bitjaru)
26 poin oleh bitjaru0402 2026-04-07 | 4 komentar | Bagikan ke WhatsApp

Saat membuat UI dengan vibe coding, ada masalah "fungsinya jalan, tapi desainnya jelek".

StyleSeed adalah open source yang menanamkan aturan desain ke alat coding AI (seperti Claude Code). Cukup salin file ke proyek, lalu AI akan menghasilkan UI dengan kualitas setara aplikasi Toss.

Termasuk:

  • 60 aturan desain visual dalam 2.200 baris (filosofi warna, hierarki tipografi, struktur kartu, pola yang dilarang, dll.)
  • 47 komponen React (31 berbasis shadcn/ui + 16 pola dashboard)
  • 10 skill Claude Code (pembuatan UI, audit UX, pembuatan microcopy, dll.)
  • Tema Tailwind CSS v4 (mode terang/gelap)

Jika DESIGN.md dari awesome-design-md (23K bintang) menyediakan token brand, StyleSeed adalah "otak desain" yang juga mencakup aturan layout, panduan UX, hingga komponen.

Seed pertama adalah gaya Toss. Seed Apple, Linear, dan Stripe akan ditambahkan. Lisensi MIT.

Bacaan terkait

4 komentar

 
bitjaru0402 2026-04-13

▎ Ini pembaruan — saya sudah mengunggah demo live yang bisa diklik. ▎
▎ 🎬 https://styleseed-demo.vercel.app ▎
▎ Ini adalah layar yang memorph UI chat yang sama menjadi tiga brand, Toss → Raycast → Arc, sekaligus. Warna, radius, motion, bayangan, dan gradasi semuanya berubah hanya dengan satu atribut data-skin. Hanya dengan token, tanpa percabangan kode. ▎
▎ Saya juga menaruh pratinjau GIF di bagian atas README: https://github.com/bitjaru/styleseed ▎
▎ Terima kasih kepada semua yang memberi masukan saat posting pertama 🙏
 
kurthong 2026-04-08

Perluasan pengetahuan domain melalui open source, ironisnya, tampaknya justru semakin bersinar di era AI. Terima kasih banyak atas berbagi pengetahuan yang sangat keren ini!
 
aldlfkahs 2026-04-08

Terima kasih sudah berbagi. Sepertinya ini akan berguna untuk dipakai saat mengerjakan proyek pribadi.
 
kaydash 2026-04-07

Keren!