Beberapa waktu terakhir, makin banyak designer mulai mencoba AI untuk bantu bikin UI, generate layout, sampai bantu coding frontend. Tools seperti Google Stitch, Claude Code, Cursor, dan beberapa AI UI generator lainnya mulai terasa bukan lagi sekadar eksperimen, tapi mulai masuk ke workflow kerja sehari-hari.
Tapi ada satu masalah yang sering muncul.
AI bisa membuat UI yang kelihatan bagus, tapi belum tentu sesuai dengan design system yang sudah kita punya.
Kadang warnanya berubah sendiri. Spacing terasa tidak konsisten. Button terlihat beda dari komponen utama. Typography-nya “hampir mirip”, tapi tetap terasa off. Kalau dibiarkan, hasilnya bisa bikin design system pelan-pelan kehilangan arah.
Di sinilah DESIGN.md untuk designer mulai menarik untuk dibahas.
Secara sederhana, DESIGN.md adalah file markdown yang berisi panduan visual, design tokens, aturan komponen, dan alasan di balik keputusan desain. File ini bisa membantu AI memahami bagaimana sebuah produk seharusnya terlihat dan bekerja.
Bukan cuma untuk manusia. Tapi juga untuk AI.
Saya pernah coba ber-experimen dengan AI untuk membuat sebuah UI dalam versi HTML, hasilnya kadang masih belum sesuai apa yang dihaparkan, dan itu membuat saya frustrasi, dengan adanya design.md itu mengurangi ke tidak konsistenan itu.
Apa Itu DESIGN.md?
DESIGN.md adalah file teks berbasis markdown yang menjelaskan identitas visual sebuah produk. Isinya bisa mencakup warna, typography, spacing, radius, design tokens, prinsip visual, sampai aturan penggunaan komponen.
Kalau saya sederhanakan, DESIGN.md itu seperti brief desain yang bisa dibaca oleh manusia dan AI.
Biasanya, kita sebagai designer menyimpan aturan desain di Figma, design system documentation, atau file handoff. Masalahnya, AI belum tentu bisa memahami semua konteks itu dengan baik. AI butuh arahan yang lebih jelas, terstruktur, dan mudah dibaca.
Nah, DESIGN.md membantu menjembatani hal itu.
Daripada hanya memberi prompt seperti:
Buatkan UI dashboard yang modern, clean, dan minimal.
Kita bisa memberi AI context seperti:
Gunakan warna primary hanya untuk CTA utama. Gunakan spacing 16px untuk jarak antar card. Gunakan radius 12px untuk card. Jangan gunakan warna primary untuk background besar karena akan terlalu dominan.
Hasilnya, AI tidak hanya menebak style. AI punya aturan yang bisa diikuti.
Kenapa DESIGN.md Mulai Penting untuk Designer?
Menurut saya, DESIGN.md menjadi penting karena cara kerja designer mulai berubah.
Dulu, designer banyak bekerja langsung di Figma. Kita membuat frame, komponen, variants, auto layout, tokens, lalu melakukan handoff ke developer.
Sekarang, workflow-nya mulai melebar.
Designer bisa menggunakan AI untuk:
- membuat ide layout awal,
- generate UI screen,
- membuat komponen frontend,
- menulis UI copy,
- membuat design system documentation,
- bahkan membantu membangun prototype.
Masalahnya, AI hanya sebagus context yang kita berikan.
Kalau context-nya lemah, hasilnya juga akan generic.
Misalnya kita bilang “buat UI finance app yang clean”, AI mungkin akan membuat sesuatu yang terlihat rapi. Tapi belum tentu cocok dengan brand kita. Belum tentu warna, spacing, dan komponennya sesuai. Belum tentu sesuai dengan sistem yang sudah kita desain di Figma.
Dengan DESIGN.md, kita bisa memberi AI aturan seperti:
- warna utama dipakai untuk action penting,
- surface color dipakai untuk background dan card,
- typography title harus punya hierarchy yang jelas,
- spacing mengikuti sistem 4px atau 8px,
- button harus punya state default, hover, disabled, loading, dan focus,
- komponen tidak boleh dibuat dengan style random.
Jadi AI tidak bekerja dari halaman kosong. AI bekerja dari design system yang sudah punya arah.
Struktur Dasar DESIGN.md
Secara umum, DESIGN.md bisa dibagi menjadi dua bagian besar:
- YAML frontmatter
- Markdown body
Keduanya punya fungsi yang berbeda.
YAML frontmatter biasanya berisi data yang lebih teknis dan terstruktur. Misalnya nama design system, warna, typography, spacing, dan radius.
Contoh sederhananya seperti ini:
name: Acme Design System
colors:
primary: '#2563EB'
surface: '#F8FAFC'
surface-dim: '#E2E8F0'
text-primary: '#0F172A'
text-muted: '#64748B'
spacing:
base: 4px
sm: 8px
md: 16px
lg: 24px
rounded:
sm: 4px
md: 8px
lg: 12px
Bagian ini membantu AI membaca nilai token secara jelas.
Lalu setelah itu, ada Markdown body. Bagian ini menjelaskan konteks dan aturan penggunaan token tersebut.
Contohnya:
## Colors
Primary color digunakan untuk CTA utama, selected state, dan action penting.
Jangan gunakan primary color untuk background besar karena bisa membuat tampilan terlalu berat.
Surface color digunakan untuk background utama dan area card agar interface terasa ringan dan mudah dibaca.
Bagian Markdown body ini penting karena token saja belum cukup.
AI tidak hanya perlu tahu warna apa yang tersedia. AI juga perlu tahu kapan warna itu dipakai, kenapa dipakai, dan kapan sebaiknya tidak dipakai.
Token Bukan Cuma Variable, Tapi Keputusan Desain
Ini salah satu poin yang menurut saya paling penting.
Design tokens sering dianggap hanya sebagai variable. Misalnya warna, font size, spacing, atau radius. Padahal dalam design system, token bukan cuma nilai teknis. Token adalah keputusan desain.
Contoh token seperti ini kurang membantu:
blue: '#2563EB'
gray1: '#F8FAFC'
gray2: '#64748B'
Kenapa kurang membantu?
Karena nama seperti blue atau gray1 hanya menjelaskan tampilan warna. Tapi tidak menjelaskan fungsi warna tersebut.
Lebih baik menggunakan nama token berdasarkan peran:
primary: '#2563EB'
surface: '#F8FAFC'
text-muted: '#64748B'
border-subtle: '#E2E8F0'
Dengan nama seperti ini, AI bisa lebih mudah memahami fungsi token, disini saya ambil sample penggunaan nama token seperti di material design, penamaan bisa bebas asalkan mudah, dan fungsi nama tokenya spesifik.
primary berarti warna utama untuk action penting.surface berarti area background atau card.text-muted berarti teks sekunder atau informasi pendukung.border-subtle berarti border yang tidak terlalu menarik perhatian.
Nama token yang baik membantu menjaga konsistensi desain.
Ini juga bisa menjadi momen untuk melakukan audit pada design system kita. Kadang setelah dicek lagi, ada warna yang sebenarnya tidak dipakai, ada warna yang terlalu mirip, atau ada token yang fungsinya tumpang tindih.
Dengan membuat DESIGN.md, kita dipaksa untuk berpikir ulang:
- token ini masih dibutuhkan atau tidak?
- token ini punya fungsi yang jelas atau hanya variasi warna saja?
- apakah token ini dipakai secara konsisten di UI?
- apakah AI dan developer bisa memahami token ini dengan mudah?
Berikut contoh penamaan yang saya buat di dalam projek di figma:
Setiap Keputusan Desain Perlu Alasan
DESIGN.md yang bagus tidak hanya berisi daftar token. DESIGN.md juga perlu menjelaskan alasan di balik token tersebut.
Cara berpikirnya bisa seperti ini:
Raw value → Intent → Reasoning → Constraint
Artinya:
- Raw value: nilai asli, misalnya HEX color atau spacing.
- Intent: tujuan penggunaan nilai tersebut.
- Reasoning: kenapa nilai itu dipakai.
- Constraint: kapan nilai itu tidak boleh dipakai.
Contoh sederhana:
## Colors
Primary color digunakan untuk CTA utama seperti Add Expense, Save, dan Continue.
Warna ini dipilih karena memberikan kontras yang kuat dan mudah dikenali sebagai action utama.
Jangan gunakan primary color untuk background besar, karena bisa membuat tampilan terlalu dominan dan mengurangi fokus user.
Bagian constraint ini sering dilupakan.
Padahal untuk AI, ini penting banget.
AI tidak hanya perlu tahu apa yang boleh digunakan. AI juga perlu tahu apa yang tidak boleh dilakukan.
Misalnya:
- jangan gunakan warna brand untuk semua elemen,
- jangan gunakan shadow terlalu kuat,
- jangan membuat card dengan radius berbeda-beda,
- jangan gunakan font size kecil untuk data penting,
- jangan membuat button tanpa focus state.
Hal-hal seperti ini membantu mengurangi design drift.
Design drift adalah kondisi ketika output desain mulai menjauh dari design system. Awalnya sedikit, lama-lama makin terasa. Button berubah, spacing berubah, style card berubah, sampai akhirnya UI terasa seperti dibuat dari beberapa sistem yang berbeda.
Dengan DESIGN.md, kita bisa memberi batasan yang lebih jelas agar AI tetap berada di jalur yang sama.
Komponen Harus Dibangun dari Token dan Aturan Desain
Bagian terakhir yang tidak kalah penting adalah komponen.
Dalam DESIGN.md, komponen tidak cukup hanya ditulis seperti:
Button menggunakan warna primary.
Itu terlalu pendek.
AI perlu tahu bagaimana komponen itu digunakan dalam kondisi nyata.
Contoh yang lebih baik:
## Buttons
Primary button digunakan untuk action utama di sebuah screen, seperti Save, Continue, Add Expense, atau Create Report.
Primary button menggunakan warna `primary` dengan teks putih.
Gunakan height minimal 44px agar mudah di-tap di mobile.
Gunakan radius `md` agar terlihat konsisten dengan card dan input.
Hover state menggunakan warna primary yang sedikit lebih gelap.
Disabled state menggunakan warna `surface-dim` dengan teks `text-muted`.
Loading state tetap menjaga ukuran button agar layout tidak bergeser.
Focus state harus terlihat jelas untuk mendukung aksesibilitas.
Ini lebih berguna karena AI mendapat aturan yang lebih lengkap.
Dalam UI nyata, komponen tidak hanya punya satu kondisi. Button bisa hover, disabled, loading, active, dan focus. Input bisa error, success, filled, empty, disabled. Card bisa selected, default, atau expanded.
Kalau semua state ini tidak dijelaskan, AI bisa membuat versi sendiri. Dan biasanya, versi sendiri itu tidak selalu konsisten dengan design system kita.
Jadi, saat membuat DESIGN.md, bagian komponen sebaiknya menjelaskan:
- fungsi komponen,
- token yang digunakan,
- spacing dan ukuran dasar,
- behavior atau interaction,
- semua state penting,
- batasan penggunaannya.
Contoh Praktis: DESIGN.md untuk App Finance
Supaya lebih kebayang, kita ambil contoh sederhana.
Misalnya saya sedang membuat aplikasi finance tracker bernama Acme. Aplikasi ini membantu user mencatat pengeluaran, melihat laporan, dan bertanya ke AI tentang kondisi keuangan pribadi mereka.
Untuk produk seperti ini, tampilan UI sebaiknya terasa:
- clean,
- calm,
- mudah dibaca,
- tidak terlalu ramai,
- trustworthy,
- fokus pada data keuangan.
Maka contoh isi DESIGN.md-nya bisa seperti ini:
## Brand & Style
Acne menggunakan gaya visual yang clean, calm, dan trustworthy.
Interface harus terasa ringan dan mudah dipahami oleh user yang ingin mengatur keuangan harian.
Gunakan whitespace yang cukup agar data pengeluaran, kategori, dan laporan bulanan mudah dibaca.
Hindari tampilan yang terlalu ramai karena data keuangan sudah cukup membutuhkan fokus.
## Colors
Primary color digunakan untuk action utama seperti Add Expense, Save, dan View Report.
Jangan gunakan primary color untuk background besar agar tampilan tetap calm.
Success color digunakan untuk income atau kondisi positif.
Warning color digunakan untuk budget alert atau pengeluaran yang mendekati limit.
Danger color digunakan untuk kondisi yang butuh perhatian, seperti budget sudah lewat batas.
## Components
Expense card harus menampilkan kategori, nominal, tanggal, dan payment method.
Nominal pengeluaran harus menjadi elemen paling mudah dibaca.
Gunakan spacing yang cukup agar user bisa scan data dengan cepat.
Report card harus menampilkan insight utama terlebih dahulu, lalu detail pendukung di bawahnya.
Jangan menampilkan terlalu banyak warna dalam satu card agar visual hierarchy tetap jelas.
Contoh seperti ini membantu AI memahami bukan hanya style, tapi juga konteks produk.
AI jadi tahu bahwa finance app perlu terasa tenang dan mudah dibaca. AI juga tahu bahwa warna tidak boleh dipakai sembarangan karena warna dalam finance app sering membawa makna tertentu: income, expense, warning, atau danger.
DESIGN.md Bukan Pengganti Designer
Satu hal yang perlu saya garisbawahi disini: DESIGN.md bukan pengganti designer.
Menurut saya, DESIGN.md justru membuat peran designer menjadi lebih penting.
Kenapa?
Karena AI bisa membuat banyak output, tapi designer tetap perlu menentukan arah, kualitas, batasan, dan alasan desainnya.
AI bisa membantu mempercepat proses. Tapi keputusan seperti brand feel, hierarchy, accessibility, spacing, dan behavior komponen tetap perlu dikontrol oleh designer.
Jadi, peran designer bukan hanya membuat screen. Tapi juga membuat sistem, aturan, dan context yang bisa dipakai oleh manusia, developer, dan AI.
Ini menurut saya menarik.
Karena di era AI, dokumentasi desain tidak lagi hanya dibaca oleh tim design atau engineering. Dokumentasi desain juga perlu bisa dibaca oleh AI agent.
Dan DESIGN.md adalah salah satu format yang bisa membantu ke arah sana.
Cara Mulai Membuat DESIGN.md Sendiri
Kalau kamu ingin mencoba membuat DESIGN.md, tidak perlu langsung sempurna.
Mulai dari versi sederhana dulu.
Kamu bisa mulai dengan struktur seperti ini:
# Product Design Guidelines
## Brand & Style
Jelaskan karakter visual produk.
## Colors
Jelaskan warna utama, warna pendukung, dan aturan penggunaannya.
## Typography
Jelaskan font, hierarchy, dan gaya penulisan.
## Spacing
Jelaskan sistem spacing yang dipakai.
## Shapes
Jelaskan radius, border, shadow, dan gaya container.
## Components
Jelaskan aturan button, input, card, modal, navigation, dan state penting.
Setelah itu, ambil beberapa elemen dari design system yang sudah ada di Figma.
Mulai dari:
- warna utama,
- text color,
- background,
- spacing,
- radius,
- button,
- input,
- card.
Jangan langsung menulis terlalu panjang.
Yang penting, setiap aturan punya fungsi yang jelas.
Misalnya:
- warna ini dipakai untuk apa,
- spacing ini dipakai di mana,
- radius ini untuk komponen apa,
- button ini digunakan untuk action seperti apa,
- style ini tidak boleh dipakai untuk apa.
Setelah itu, baru coba gunakan DESIGN.md tersebut saat bekerja dengan AI.
Kamu bisa test dengan prompt sederhana seperti:
Use this DESIGN.md as the design guidance. Create a mobile dashboard screen for a finance tracker app. Follow the color, spacing, typography, and component rules strictly.
Lalu cek output-nya.
Apakah hasilnya lebih konsisten?
Apakah AI mengikuti warna dan spacing?
Apakah button dan card terasa lebih sesuai?
Apakah masih ada bagian yang melenceng?
Dari situ, kamu bisa update DESIGN.md secara bertahap.
Penutup
DESIGN.md untuk designer adalah topik yang menurut saya akan makin penting ke depan.
Karena AI semakin sering masuk ke workflow design, kita tidak bisa hanya mengandalkan prompt pendek seperti “buat UI yang clean dan modern”. Prompt seperti itu terlalu umum.
AI butuh context.
Dan designer adalah orang yang paling tepat untuk memberi context tersebut.
Dengan DESIGN.md, kita bisa membantu AI memahami design system, design tokens, komponen, dan alasan di balik keputusan desain. Hasilnya, output AI bisa lebih konsisten, lebih dekat dengan brand, dan lebih mudah dikembangkan ke tahap berikutnya.
Buat saya, DESIGN.md bukan sekadar file markdown.
Ini adalah cara baru untuk mendokumentasikan design system agar bisa dipahami oleh manusia dan AI.
Kalau kamu adalah UI/UX Designer yang mulai menggunakan AI dalam workflow, coba mulai buat DESIGN.md versi kecil dulu. Tidak perlu sempurna. Yang penting, mulai tulis aturan desain yang selama ini mungkin hanya ada di kepala kamu atau tersebar di Figma.
Karena semakin jelas context yang kamu berikan, semakin baik juga hasil yang bisa AI bantu buatkan.
