Mengatasi Hutang Desain pada Alat Coding AI Hanya dengan Satu File Design.md
makedream٨ مايو ٢٠٢٦
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Hanya dengan beberapa prompt pada alat coding AI, halaman yang tampak meyakinkan pun muncul. Masalahnya muncul setelah itu. Kelengkungan tombol yang baru dibuat berbeda dengan halaman sebelahnya, dan saturasi warna brand sedikit melintir. Kecepatan pengembangannya tinggi, namun hasilnya berantakan. Ini terjadi karena AI akan memberikan nilai rata-rata yang paling umum jika tidak mengetahui konteksnya. Untuk mengatasi masalah ini, Anda harus memasukkan Design.md ke dalam root proyek dan memaksakan batasan yang ketat pada AI.
Meminta AI untuk menggunakan “warna biru yang elegan” adalah pemborosan waktu. AI hidup dari data yang ternormalisasi, bukan kata sifat. Spesifikasikan sistem desain dengan membaginya ke dalam tiga lapisan: Primitive, Semantic, dan Component.
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier] sehingga AI menggunakan nama seperti $color-background-hover.Menurut studi kasus kolaborasi UI tahun 2025, tim yang menggunakan token terstruktur seperti ini berhasil mengurangi tingkat bug UI dari 14 kasus menjadi 4 kasus per sprint. Ketika AI mulai memilih class berdasarkan fungsi alih-alih kode warna, 70% waktu revisi desain akan hilang. Jika Anda menggunakan Tailwind CSS, perintahkan AI untuk memetakan token-token ini satu-ke-satu dengan tailwind.config.js.
Semakin tinggi tingkat kebebasan yang dimiliki AI, semakin bodoh keputusan yang dibuatnya. Untuk menjaga margin yang konsisten di setiap halaman, Anda harus memasukkan angka-angka ke dalam spesifikasi dalam bentuk tabel.
| Properti | Nilai | Aturan Penerapan |
|---|---|---|
| Kelengkungan Tombol | 8px | Tetap rounded-lg, dilarang diubah sembarangan |
| Jarak Antar Seksi | 64px | Jarak vertikal di antara semua seksi utama |
| Lebar Maksimal | 1280px | Batas perataan tengah untuk konten utama |
Batasi unit jarak pada kelipatan 8px dan tetapkan padding kartu pada 24px. Membuat seksi anti-pattern sangatlah efektif. Dengan memasukkan klausul larangan seperti “Jangan memasukkan lebih dari 3 tombol CTA dalam satu layar” atau “Gunakan border 1px alih-alih bayangan”, AI akan menghapus kandidat jawaban yang salah terlebih dahulu sebelum mulai bekerja. Satu tabel sederhana ini mengurangi jumlah revisi manual hingga lebih dari setengahnya.
Jika gaya bicara berbeda-beda di setiap fitur dan gaya ikon tercampur, aplikasi akan terlihat murahan. Cantumkan persona brand dalam Design.md. Anda harus menentukan sebelumnya apakah pesan sukses akan ditulis sebagai “Pembaruan Selesai” atau “Siap Digunakan!”.
Untuk ikon, ikuti protokol berikut:
stroke-width semua ikon pada 1.5px.Hal yang sama berlaku untuk mode gelap. Sekadar membalikkan warna akan merusak keterbacaan. Seperti yang direkomendasikan oleh panduan Google Material Design, spesifikasikan penggunaan abu-abu tua (#121212) alih-alih hitam pekat sebagai latar belakang, dan masukkan rumus untuk menjaga rasio kontras tetap pada agar bug aksesibilitas terhindar secara otomatis.
Sekalipun spesifikasi ditulis dengan baik, tidak akan ada artinya jika AI tidak membacanya. Buat aturan khusus UI di direktori .cursor/rules/, dan paksakan AI untuk selalu merujuk ke Design.md sebelum melakukan pekerjaan apa pun. Berdasarkan data pengembangan tahun 2025, tim yang menerapkan rutinitas ini mempersingkat waktu pengembangan fitur dari rata-rata 12,5 jam menjadi 8,1 jam.
Sekarang, pengembang tidak lagi memperbaiki kode, melainkan mengubah kesan keseluruhan layanan hanya dengan menyesuaikan angka-angka dalam dokumen. Desain akan memiliki kecepatan jika dianggap sebagai ranah rekayasa presisi, bukan ranah sensibilitas. Dokumentasi selama 30 menit di awal akan mencegah puluhan jam kerja sia-sia di kemudian hari.