Bikin Design System Bareng AI: Warna, Font, Komponen

Pernah bikin aplikasi yang halaman depannya oranye, halaman profilnya biru, tombolnya kadang membulat kadang kotak? Itu penyakit klasik vibe coding: tiap halaman di-generate terpisah, tiap AI menebak gaya sendiri-sendiri. Hasilnya seperti rumah yang tiap kamarnya dicat warna beda tanpa rencana.

Solusinya adalah design system mini. Tenang, ini bukan dokumen 100 halaman ala perusahaan raksasa. Untuk aplikasimu, design system mini cukup berisi tiga hal: warna, font, dan komponen. Dan kabar baiknya, kamu bisa menyuruh AI membuatnya untukmu dalam satu prompt.

Kenapa Harus Ada Dulu Sebelum Halaman Dibuat

Urutannya penting: design system dulu, halaman kemudian. Kalau kamu generate halaman satu per satu tanpa sistem, setiap halaman jadi pulau sendiri. Tapi kalau kamu punya sistem dulu, setiap prompt halaman tinggal bilang "pakai design system yang sudah kita sepakati", dan AI akan konsisten dengan sendirinya.

Analoginya seperti seragam sekolah. Tanpa seragam, tiap murid pakai baju seenaknya dan kelas terlihat berantakan. Dengan seragam, cukup satu keputusan di awal, dan kerapian mengikuti otomatis. Design system adalah seragam untuk aplikasimu.

Langkah 1: Minta AI Menetapkan Warna

Jangan biarkan AI memilih warna tiap kali generate. Minta ia menetapkan palet sekali di awal: satu warna primer (aksi utama), satu warna aksen (sorotan), warna netral untuk teks dan background, plus warna status (sukses, peringatan, error). Minta dalam format kode hex supaya presisi.

Buatkan design tokens untuk aplikasi kasir warung.
Konteks: dipakai pemilik warung, harus terlihat
ramah dan mudah dibaca.
Tetapkan:
- 1 warna primer + kode hex (untuk tombol utama)
- 1 warna aksen + kode hex
- warna teks utama, teks sekunder, background
- warna sukses, peringatan, error
- 2 font: satu untuk judul, satu untuk isi
- radius sudut standar dan skala spacing (8,16,24,32,64)
Sajikan sebagai daftar rapi yang bisa saya
tempel di setiap prompt berikutnya.

Langkah 2: Kunci Komponen Dasarnya

Setelah warna dan font, minta AI membuat komponen dasar: tombol (primer, sekunder, bahaya), input form, kartu, dan badge. Satu contoh tiap komponen cukup. Simpan hasilnya sebagai referensi. Mulai sekarang, setiap kali butuh tombol, kamu tidak bilang "buatkan tombol", tapi "pakai komponen tombol primer dari design system kita".

Kalau proyekmu memakai framework seperti Tailwind, minta AI menerjemahkan design system ini menjadi kelas utilitas atau file konfigurasi. Satu file konfigurasi yang dipakai semua halaman jauh lebih kuat daripada instruksi yang diulang di tiap prompt.

Langkah 3: Tempel di Setiap Prompt Berikutnya

Ini langkah yang paling sering dilupakan. Design system yang tidak dipakai sama saja tidak ada. Setiap prompt halaman baru harus diawali dengan kalimat: "Ikuti design system berikut: [tempel tokens]". Memang sedikit repot di awal, tapi inilah yang membedakan aplikasi yang terlihat "dibuat satu tim" dengan yang terlihat "ditempel dari 10 generate berbeda".

Contoh Kasus: Dari Berantakan ke Seragam

Bayangkan aplikasi kasir dengan tiga halaman yang digenerate terpisah: dashboard biru, halaman stok hijau, halaman laporan ungu. Setelah design system ditetapkan (primer oranye #E8590C, background krem, font Inter, radius 12px), ketiga halaman di-generate ulang dengan instruksi "ikuti design system". Hasilnya: tiga halaman yang terlihat seperti satu aplikasi. Tidak ada yang diubah dari fungsinya, hanya konsistensinya. Dan konsistensi itulah yang membuat pengguna percaya.

Menyimpan Design System di File Proyek

Design system yang cuma ada di chat akan hilang saat chat ditutup. Simpan di file agar permanen. Kalau tools AI-mu mendukung file aturan proyek (seperti AGENTS.md atau CLAUDE.md), taruh ringkasan design system di sana: palet warna, font, radius, spacing, dan aturan komponen. Setiap session baru otomatis membacanya, dan kamu tidak perlu menempel manual tiap kali.

Kalau tidak ada fitur itu, simpan sebagai design-system.txt di folder proyek dan tempel isinya di awal tiap prompt penting. Butuh 10 detik, menghemat jam revisi. File ini juga berguna saat kamu kolaborasi dengan manusia: cukup kirim file-nya, dan semua orang langsung paham aturan visual proyekmu.

Kapan Memperbarui Design System

Design system bukan kitab suci yang tidak boleh berubah. Ia boleh berkembang, tapi dengan aturan. Perbarui ketika: ada kebutuhan baru yang berulang (misalnya butuh varian tombol keempat), audit menemukan inkonsistensi sistemik, atau rebranding. Jangan perbarui karena "iseng pengen coba warna baru" di satu halaman, itu jalan kembali ke kekacauan.

Prosedur perubahannya: ubah di file design system dulu, baru terapkan ke halaman. Jangan pernah ubah di halaman dulu dengan niat "nanti disamakan". Nanti itu tidak pernah datang, dan kamu kembali punya 5 versi tombol.

Contoh Design Tokens Lengkap

Biar tidak abstrak, ini contoh tokens lengkap untuk aplikasi kasir warung yang bisa kamu tiru strukturnya:

Warna: primer #E8590C (tombol utama, harga), aksen #F4A261 (sorotan sekunder), teks-utama #1A1A1A, teks-sekunder #6B7280, background #FFF8F0, kartu #FFFFFF, border #E5E7EB, sukses #2F9E44, peringatan #F59F00, error #E03131. Font: judul Inter Bold, isi Inter Regular, maksimal 2. Radius: tombol 8px, kartu 12px, input 8px. Spacing: 8, 16, 24, 32, 64. Bayangan: kartu memakai shadow lembut 0 2px 8px rgba(0,0,0,0.08).

Perhatikan: cuma 10 warna, 1 keluarga font, 3 radius, 5 spacing. Sedikit tapi cukup untuk seluruh aplikasi. Design system yang baik itu minimal: semakin sedikit pilihan, semakin konsisten hasilnya. Kalau tokens-mu ada 30 warna, itu bukan sistem, itu katalog.

Minta AI membuatkan versi untuk aplikasimu dengan prompt: "Buatkan design tokens lengkap seperti contoh ini untuk [aplikasiku]: 10 warna maksimal dengan kode hex dan perannya, 1 keluarga font, radius standar, skala spacing, dan gaya bayangan. Sajikan dalam format yang bisa saya tempel ke prompt."

Tanya Jawab Singkat

Q: Aplikasi saya kecil, cuma 3 halaman. Perlu design system?
A: Justru aplikasi kecil paling diuntungkan karena biayanya murah (15 menit) dan manfaatnya langsung terasa. Tiga halaman yang konsisten terlihat jauh lebih profesional daripada tiga halaman yang masing-masing bagus tapi beda gaya. Anggap ini investasi 15 menit yang bunganya dibayar tiap halaman baru.

Q: Bagaimana kalau di tengah jalan saya ingin ganti warna brand?
A: Inilah keajaiban token: kalau warnamu memakai token (bukan hardcode), ganti warna brand berarti mengubah satu nilai di file design system, dan seluruh aplikasi ikut berubah. Bandingkan dengan tanpa sistem: kamu harus berburu satu per satu di tiap halaman. Inilah alasan kenapa langkah "token dulu" tidak boleh dilewati.

Q: Apakah design system membunuh kreativitas?
A: Sebaliknya, ia membebaskan kreativitas. Tanpa sistem, energimu habis untuk keputusan kecil yang berulang (warna tombol ini apa ya?). Dengan sistem, keputusan kecil sudah otomatis, dan energimu bisa dipakai untuk hal yang benar-benar butuh kreativitas: alur pengguna, fitur unik, pengalaman berkesan.

Q: Saya pakai CSS biasa, bukan Tailwind. Masih bisa?
A: Sangat bisa. Terjemahkan tokens menjadi CSS variables (:root { --warna-primer: #E8590C; }). Semua komponen memakai var(--warna-primer), bukan kode hex langsung. Prinsipnya sama persis, cuma sintaksnya beda.

Latihan Hari Ini

Jalankan prompt Langkah 1 di atas untuk aplikasimu (atau aplikasi impianmu). Simpan hasilnya di satu file teks bernama design-system.txt. Lalu generate ulang satu halaman lamamu dengan tambahan "Ikuti design system berikut: [tempel isi file]". Bandingkan dengan versi lamanya. Folder "inspirasi" dari episode 3 plus file ini adalah fondasi visual aplikasimu. Besok kita bedah komponennya satu per satu.

Besok kita bahas "Komponen UI yang Rapi: Button, Form, Card, Modal", yaitu anatomi empat komponen paling sering dipakai plus prompt spesifik untuk masing-masing supaya hasilnya selalu rapi. Sampai jumpa jam 21:00. Bakar semangat kodingmu seperti api kompor.