i18n untuk bahasa.
KDF untuk desain.
Keduanya dalam JSON.
Fondasi desain berbasis JSON untuk aplikasi web dan antarmuka. Alih-alih mendefinisikan ulang tata letak, spasi, tipografi, dan komponen secara berulang di banyak halaman, semua aturan desain disatukan dalam satu sumber data tunggal untuk diimplementasikan secara konsisten oleh agen AI Anda.
{ "$layout": ["hero", "footer"], "hero": { "wrapper": "mx-auto max-w-6xl px-6 py-20", "title": "@typography.h1", "cta-primary": "@button.cta" } }
Satu referensi utama memastikan setiap halaman, komponen, dan sesi agen AI selalu selaras dan konsisten.
JSON sebagai panduan · kode sebagai perender · data-kdf sebagai penghubung
Desain melenceng di
komponenmu.
Ketika nama class hanya tersebar di dalam berkas .tsx, setiap halaman secara bertahap mulai tidak konsisten. Pendekatan ini mungkin masih masuk akal untuk dikelola satu orang, namun akan sangat berisiko ketika agen AI mulai memodifikasi UI Anda.
<section className="mx-auto max-w-6xl px-6 py-20"> <h1 className="text-5xl font-semibold tracking-tight"> // …and again, slightly different, on the next page
Satu komponen tombol sering kali berubah menjadi lima varian berbeda tanpa disadari. Jarak antar elemen menjadi tidak konsisten di setiap halaman, dan agen AI terpaksa merumuskan ulang aturan desain dari nol pada setiap sesi baru.
- — Agen AI sering menebak-nebak warna, spasi, tipografi, dan tata letak secara sepihak.
- — Pengguna harus terus-menerus mengoreksi hasil desain lewat chat pada setiap sesi baru.
- — Mengubah desain berarti harus membongkar dan mengedit kode di dalam banyak komponen.
- — Visi dan tujuan awal desain sering kali terlupakan di sesi percakapan yang baru.
→ iterasi "lebih besar" · "lebih biru" · "geser kiri" tanpa akhir
Buat panduan desain yang terpusat dan jelas.
Sama seperti i18n memisahkan teks dari kode, KDF memisahkan semua aturan desain yang berulang dari komponen ke dalam JSON. UI Anda tetap menggunakan CSS biasa, namun kini seluruh aturan desainnya terpusat dan mudah dikelola.
{ "hero": { "title": "text-5xl font-semibold tracking-tight" } }
const d = getDesign("homepage"); <h1 data-kdf="hero.title" className={d("hero.title")}>
Library memberi tahu komponen apa.
KDF memberi tahu gaya apa yang dipakai.
Library desain (seperti shadcn) menyediakan komponen Button. Sedangkan KDF mendefinisikannya sebagai homepage.hero.cta-primary, yang dirender sebagai Button dan diberi gaya sesuai token spesifik. KDF bertugas mengisi celah yang tidak dimiliki library komponen: memetakan elemen visual ke aturan desain yang tepat.
Enam simbol utama.
Satu bahasa desain terpadu.
KDF dirancang khusus untuk menyimpan nama class, referensi gaya, urutan elemen, dan custom properties CSS. KDF tidak mengatur logika bisnis, event handler, integrasi data, hak akses, atau fungsi aksesibilitas pada aplikasi Anda.
Setiap elemen yang menggunakan token KDF akan membawa identitas path-nya. Node DOM dapat dilacak langsung ke JSON, memudahkan proses pemindaian (scanning), pengujian, dan peninjauan oleh agen AI.
Mengubah path JSON menjadi string class untuk komponen. Fungsi d.css() digunakan untuk mengembalikan objek CSS custom properties.
Merujuk pada token di folder shared/ yang bisa digunakan berulang kali. Referensi ini dapat digabungkan dan diperluas dengan class tambahan.
Menyimpan urutan komponen dalam bentuk array. Komponen yang terdaftar akan ditampilkan secara berurutan, sementara yang tidak terdaftar akan disembunyikan secara otomatis.
Berisi metadata untuk agen AI—menjelaskan komponen mana yang memproses token desain ini, lengkap dengan informasi varian dan ukurannya.
Menyimpan nilai spesifik yang tidak bisa dijadikan class umum, dan diterapkan langsung sebagai variabel inline style menggunakan d.css().
Default bersama.
Override per halaman.
Aturan desain disimpan di dua tempat: konfigurasi bawaan yang dapat digunakan berulang kali di folder shared/, serta komposisi per halaman yang hanya menimpa aturan yang diperlukan. Terdapat dua file CSS milik pengguna untuk menangani proses render awal (first paint) dan kustomisasi ekstra (escape hatch).
kdf/ shared/ button.json ← reusable defaults card.json color.json typography.json homepage.json ← page composition konde-server.css ← critical, first paint konde.css ← non-critical tweaks
Referensi desain (misalnya @button.cta) akan dimuat mulai dari folder shared/ pada halaman, lalu shared/ utama, dan terakhir token spesifik halaman. Pendekatan ini memungkinkan template untuk hanya mengubah gaya yang diperlukan dan mewarisi sisanya.
Seluruh panduan desain diproses di server, sehingga browser hanya menerima string class yang sudah jadi. CSS utama akan langsung dimuat di tahap pertama, dan sisanya menyusul. Hal ini sangat meringankan beban render, bahkan untuk perangkat dengan spesifikasi rendah.
Diimpor oleh aplikasi agar variabel desain dan gaya utama dapat langsung dimuat sejak awal, mencegah terjadinya kedipan tampilan (FOUC).
/* konde-server.css */ :root { --kdf-primary: #1F8F47; } [data-kdf="hero.slider"] { display: none; }
Dimuat setelah CSS framework dan aplikasi utama selesai dirender. Digunakan khusus untuk kustomisasi detail yang tidak wajib memblokir proses render awal halaman.
/* konde.css */ [data-kdf="hero.title"] { letter-spacing: -0.02em; } [data-kdf="hero.wrapper"] { gap: 3rem; }
→ KDF hanya membuat kedua file ini satu kali dan tidak akan menimpanya secara otomatis. Anda memegang kendali penuh untuk mengimpornya di dalam aplikasi; tidak ada kode yang disisipkan secara diam-diam.
Mengganti desain,
semudah mengganti bahasa.
Layaknya i18n yang dapat mengubah bahasa secara instan, KDF memungkinkan Anda menukar seluruh template desain dengan cepat. Aplikasi, komponen, dan kode yang digunakan tetap sama—cukup arahkan KDF_DIR ke folder desain yang berbeda, dan seluruh tampilan antarmuka akan langsung berubah total.
designs/ lander/ shared/ homepage.json newlander/ shared/ homepage.json
// next.config.ts withKDF({ dir: "./designs/lander" })(nextConfig);
Selesaikan di server.
Teruskan string ke bawah.
Sistem inti KDF membaca data JSON langsung dari disk, sehingga berjalan optimal di sisi server. KDF akan memproses class desain di server dan hanya mengirimkan hasil string biasa ke komponen klien.
import { getDesign, cn } from "@kondeio/kdf"; const d = getDesign("homepage"); <button data-kdf="hero.cta" className={cn(d("hero.cta"), isActive)}>Start</button>
→ Mengembalikan string className yang sudah diproses.
→ Mengembalikan objek CSS custom-properties.
Menggabungkan class secara kondisional, membuang nilai yang tidak valid (falsy), dan menghapus duplikasi.
Sistem cache otomatis aktif di lingkungan produksi; sementara di mode development, validasi ulang dilakukan berdasarkan waktu dan ukuran file.
KDF berada di atas
stack-mu.
STYLING — MENYIMPAN NAMA CLASS, BUKAN CSS
KDF bukanlah mesin pemroses CSS. Token KDF hanya bertugas menyimpan string class yang sudah dikenali oleh sistem styling Anda. Jika framework Anda perlu memindai kode sumber, cukup arahkan pemindainya ke JSON KDF juga: @source "../kdf/**/*.json".
RUNTIME — JAVASCRIPT SERVER-SIDE
Install sekali.
Init mengurus sisanya.
Proses instalasi akan secara otomatis membuat dan menyusun struktur folder kdf/ apabila belum ada. File yang sudah Anda miliki tidak akan pernah ditimpa secara otomatis.
import withKDF from "@kondeio/kdf/plugin"; export default withKDF({ dir: "./designs" })(nextConfig);