- Sebuah format Markdown portabel untuk mengatasi masalah "slop" pada UI buatan AI yang cenderung menjadi generik tanpa identitas merek, dengan cara memuat elemen inti sistem desain dalam satu file dan menyertakannya ke prompt
- DESIGN.md terdiri dari dua bagian: token desain yang dapat dibaca mesin dan alasan desain (rationale) yang dibaca manusia maupun agen; isinya menampung niat (intent), bukan spesifikasi teknis lengkap sistem
- Dalam demo keynote Team '26, saat diterapkan untuk membuat dashboard Figma Make, hasilnya warna, jarak, bentuk, dan tipografi selaras dengan sistem Atlassian, dengan performa yang baik pada prototipe sekali jalan
- Namun, pada codebase produksi, dibanding server MCP dan skills internal, konsumsi token sekitar 92% lebih tinggi, waktu generasi lebih lama, dan variasi konsumsi token antar-run sekitar 2,7x lebih besar, sehingga efisiensinya menurun
- Kekuatan khasnya berupa portabilitas dan keringkasan tetap bernilai untuk portabilitas lintas platform, theming pelanggan, dan pembuatan prototipe di lingkungan baru, sehingga posisinya lebih sebagai pelengkap daripada pengganti alat sistem desain yang lebih kaya
Latar belakang — masalah "slop" pada AI UI
- Saat AI menghasilkan UI, hasilnya cenderung serupa: tombol gradasi, judul huruf kapital, tata letak kartu yang umum, animasi hover yang tidak perlu, dan sebagainya; fungsinya berjalan, tetapi identitas visualnya hilang
- Komunitas desain menyebut hasil seperti ini sebagai "slop": keluaran yang fungsional tetapi tanpa keputusan desain yang disengaja
- Penyebabnya adalah tidak adanya konteks tentang merek, komponen, dan pola, sehingga AI kembali ke rata-rata data latihnya → "Generic in, generic out"
- Tim sistem desain Atlassian sedang membangun mesin konteks untuk era AI, dan melalui server ADS MCP serta AI skills yang detail, mereka memberi agen konteks desain yang kaya
- Melalui ini, mereka mengonfirmasi pengurangan biaya token AI serta peningkatan akurasi dan kualitas hasil yang dibuat oleh ribuan pembangun produk
Ringkasan DESIGN.md
- Sebuah format Markdown open source yang dirancang Google untuk alat desain Stitch miliknya, berupa snapshot portabel yang memuat merek dan pola UI sebuah tim
- Jika file ini dimasukkan ke prompt, hasil generasi mulai tampak seperti produk milik organisasi tersebut—prinsip kerjanya sederhana
-
Apa itu (What it is)
- File Markdown portabel yang menjelaskan hanya elemen inti sistem desain
- Bagian pertama mencantumkan token desain agar dapat dibaca mesin
- Bagian kedua menjelaskan alasan desain seperti warna, jarak, layout, elevation, dan komponen agar dapat dibaca manusia maupun agen
-
Apa yang bukan (What it isn't)
- Bukan spesifikasi teknis lengkap tentang cara sistem desain bekerja di produksi, juga bukan detail penuh dari sistem tersebut
- Tidak mencakup library kode yang sudah ada, linter untuk menjaga standar coding, atau spesifikasi desain detail di Figma
- Spesifikasi ini mendefinisikan format tersebut bukan sebagai keseluruhan detail sistem, melainkan untuk menangkap niat (intent)
Membangun DESIGN.md internal
- Atlassian sudah menyiapkan sistem desainnya untuk dikonsumsi AI melalui server MCP, pipeline konten terstruktur, dan berbagai agent skills
- Mereka membuat DESIGN.md sendiri dari pipeline konten terstruktur yang sama yang menggerakkan MCP dan agent skills
- Format ini diuji di alat vibe coding umum, lalu ditambahkan instruksi yang lebih ketat untuk kesalahan umum yang sebelumnya tidak ada di panduan
Pengujian di Team '26
- Demo keynote Team '26 yang selesai sebulan lalu di Anaheim digunakan sebagai kasus uji yang cocok
- Dalam salah satu demo keynote, Figma Make membuat dashboard kustom menggunakan Teamwork Graph, dengan target menyelaraskan bahasa desain dalam sekali jalan tanpa bergantung pada server dan alat MCP internal
- Saat DESIGN.md diterapkan, hasilnya bergeser dari "slop" generik menjadi keluaran yang dapat dikenali sebagai Atlassian, misalnya dengan memakai ekspektasi untuk warna, jarak, bentuk, dan tipografi, serta menerapkan elevation komponen yang selaras dengan sistem
- Instruksi dan spesifikasi tingkat tinggi dalam file ini cocok untuk menyesuaikan library umum seperti Tailwind dan Shadcn lalu membangun UI dari nol
Trade-off saat diterapkan di produksi
- Codebase produksi sangat berbeda dari lingkungan terisolasi yang dibangun dari nol: ia sudah memiliki token dan library komponen, serta aturan lint dan pemeriksaan tipe yang ketat
- Dalam tugas sederhana seperti layar login pengguna, saat DESIGN.md digunakan sebagai satu-satunya panduan desain, tercatat konsumsi token sekitar 92% lebih tinggi, waktu generasi lebih lama, dan variasi konsumsi token antar-run sekitar 2,7x
- Namun, ditegaskan bahwa hasil ini tidak final dan dapat berubah tergantung model, prompt, sistem desain, lingkungan, dan kualitas konteks
-
Batasan 1 — konteks tidak diberikan on-demand, melainkan sekaligus
- Server MCP mengambil instruksi hanya untuk komponen tertentu secara on-demand lewat tool call seperti
ads_plan - Ini mencegah pemuatan item yang tidak perlu pada bagian yang berat seperti ratusan ikon dan token desain semantik yang besar
- DESIGN.md memuat semuanya setiap kali, sehingga sejak awal biayanya tinggi dan respons lebih lambat; pada jumlah turn yang sedikit, konteks juga bisa terpotong dan menurunkan akurasi
- Server MCP mengambil instruksi hanya untuk komponen tertentu secara on-demand lewat tool call seperti
-
Batasan 2 — menjaga file tetap pendek berarti kehilangan konteks
- Sistem desain adalah objek kompleks yang memadatkan bahasa bersama dari ribuan view, file Figma, dan komponen frontend
- MCP dan skills on-demand disuling menjadi instruksi sekitar 2,5 MB, sedangkan DESIGN.md harus dimuat sekaligus sehingga perlu dipadatkan jauh lebih agresif
- File hasilnya berukuran 80 KB, sekitar 19.800 token LLM (sekitar 10.700 jika frontmatter dikecualikan), relatif besar dibanding contoh komunitas
- Untuk mencapai ukuran itu, sebagian besar panduan penggunaan dari lebih dari 50 komponen dihapus, panduan dasar dipangkas besar-besaran, dan sebagian token desain yang jarang dipakai juga dibuang
- Karena konteks yang hilang, diamati bahwa agen yang menargetkan kualitas produksi menjadi kurang akurat atau mencoba mengumpulkan konteks sendiri, bahkan membaca langsung implementasi komponen untuk mencari panduan penggunaan yang tidak ada di spesifikasi
-
Batasan 3 — spesifikasi mengekspos bagian dalam sistem desain
- DESIGN.md adalah snapshot portabel yang menulis ulang sistem desain dalam bentuk prosa, dengan tujuan memberi prinsip, spesifikasi, dan panduan untuk mereplikasi implementasi sistem dari nol
- Di lingkungan produksi yang sudah mapan, informasi ini tidak perlu atau bahkan dapat mendorong agen menghasilkan utang teknis (tech debt), terutama pada komponen
- Daripada membaca dan menafsirkan seluruh detail styling tombol (
backgroundColor,textColor,borderColor, dan sebagainya), lebih baik mengimpor dan memakai komponen yang sudah ada- Contoh:
import Button from '@atlaskit/button';lalu<Button appearance="primary" spacing="compact" />
- Contoh:
- Penggunaan komponen bersama sangat penting untuk pemeliharaan; jika tombol diubah di satu tempat, perubahan itu akan tercermin di seluruh codebase dan memudahkan code review serta maintenance
- Karena DESIGN.md sengaja mengecualikan panduan kode dan hanya memberi spesifikasi reimplementasi, dalam pengujian ia lebih sering mendorong pembuatan ulang komponen dibanding penggunaan sistem yang sudah ada
- Server MCP dan skills memberi tingkat abstraksi yang lebih baik karena berlandaskan fondasi teknis, berfungsi sebagai panduan penggunaan sistem yang ada alih-alih petunjuk reimplementasi
- Jika digabungkan dengan aturan lint yang menegakkan standar coding tanpa biaya token, ini membentuk loop umpan balik positif bagi agen
Kapan DESIGN.md paling berguna
-
Arah artistik tingkat tinggi (High-level artistic direction)
- DESIGN.md paling sederhana berfokus pada arah visual dan nuansa sistem; jika hal ini belum pernah didokumentasikan, itu bisa menjadi artefak yang berguna
- Namun, frontmatter tetap menduplikasi hal-hal yang sudah ada di codebase
-
Pembuatan prototipe cepat di lingkungan yang tidak familiar
- Untuk prototipe blue-sky atau pengujian alat baru, ia membantu menghasilkan UI yang tetap sesuai merek tanpa beban menyiapkan seluruh tech stack atau batasan komponen yang sudah ada
-
Interoperabilitas dengan alat desain (Interoperability)
- Beberapa alat AI merakit UI dengan menyesuaikan komponen siap pakai yang sudah diselaraskan dengan bahasa desain, dan DESIGN.md memberi tingkat panduan yang cocok untuk alat seperti ini
-
Theming pelanggan untuk UI adaptif (Customer theming)
- Pada produk yang perlu membuat antarmuka dinamis seperti laporan, grafik, dan dashboard, ini dapat membantu pelanggan mendeskripsikan merek mereka sendiri dengan mudah, sehingga output AI terasa seperti milik merek mereka
- Ini dapat dibayangkan sebagai opsi yang diunggah admin atau tim merek ke alat kerja
- Kesamaan di antara semuanya adalah lingkup UI buatan agen di lingkungan tempat keluaran sistem desain yang sudah ada tidak bisa dipakai atau tidak praktis
Memulai dan berkontribusi pada standar
- Atlassian merilis file DESIGN.md miliknya di atlassian.design/DESIGN.md agar tidak sekadar bereaksi terhadap standar, tetapi ikut membentuknya
- File mereka saat ini agak berbeda dari standar dan mencakup properti nonstandar untuk rendering komponen; karena standar belum mendukung theming, mereka juga menyediakan varian dark mode terpisah
- Mereka membagikan masukan di GitHub, dan sebagian usulan mereka sudah tercermin dalam spesifikasi; industri secara luas juga didorong untuk ikut berpartisipasi
Kesimpulan
- DESIGN.md berguna sebagai format portabel untuk snapshot sistem desain, tetapi bukan pengganti alat sistem desain yang lebih kaya
- Jika agen mendukung MCP atau skills, hasilnya bisa lebih baik dengan biaya yang lebih rendah
- Untuk portabilitas lintas platform, theming pelanggan, dan prototipe blue-sky, DESIGN.md yang terstruktur baik dapat memberi peningkatan yang berarti
- Saat sistem desain menjadi dapat dibaca AI, seluruh ekosistem memperoleh manfaat
Belum ada komentar.