Selama ini penulis punya dua dunia yang tidak pernah benar-benar nyambung: file desain dan file kode. Desain tinggal di kanvas, kode tinggal di editor, dan di antaranya ada penerjemahan manual. Buka screenshot, hafalkan angkanya, ketik ulang di kode. Setiap iterasi pasti ada yang bergeser sedikit, dan yang bergeser itu baru ketahuan saat sudah jadi. Artikel ini tentang cara penulis menyambung kedua dunia itu: pen.dev sebagai kanvas desain, VS Code sebagai editor, dan MCP sebagai jembatannya, dengan Kilo Code yang membaca desainnya.

Dua Dunia yang Diterjemahkan Tangan

Masalahnya bukan alat desainnya, melainkan cara memindahkannya. Selama ini handoff desain berupa gambar: screenshot, ekspor PNG, atau file desain yang dibuka di satu layar sambil menulis kode di layar lain. Gambar itu diam, sementara kode terus bergerak. Spesifikasi yang tadinya jelas di kepala perlahan terurai saat diterjemahkan: spacing yang terasa meleset beberapa piksel, font yang tidak persis, komponen yang akhirnya dibikin baru padahal di codebase sudah ada.

Penulis mencatat ini setelah membaca ulang rencana-rencana lama: spesifikasi yang paling akurat selalu yang ditulis dari bacaan langsung, bukan dari ingatan melihat gambar. Karena itu pertanyaannya berubah. Bukan "bagaimana mendesain lebih rapi", tapi "bagaimana supaya desain yang sudah ada bisa dibaca oleh yang menulis kode, tanpa harus diterjemahkan tangan".

Jembatannya Bernama MCP

Jawaban penulis adalah MCP, singkatan dari Model Context Protocol. Konsepnya sederhana: sebuah standar yang membuat aplikasi bisa membuka dirinya ke agen AI di editor. Pen, aplikasi tempat penulis mendesain, membawa server MCP-nya sendiri. Server itu dijalankan di dalam VS Code dan diakses oleh Kilo Code, sehingga agen yang duduk di editor bisa menjangkau kanvas desain yang terbuka di aplikasi lain.

Dari sisi penulis, yang tersedia cuma empat kemampuan, dan semuanya cuma membaca: mengecek keadaan aplikasi (dokumen mana yang terbuka, frame apa saja yang tersedia), membaca dokumen cara pakainya, mengambil gaya sebuah node, dan mengeksekusi perintah untuk membaca struktur, mengekspor, atau mengambil screenshot. Tidak ada yang menulis. Desain tetap milik penulis; agen hanya diberi mata.

Syaratnya satu: Pen.app harus berjalan dan dokumen harus terbuka. Kalau aplikasinya tertutup, jembatannya memang tidak ada.

Membaca Desain, Bukan Menebak

Di sinilah aturan paling keras penulis pasang: file .pen tidak boleh pernah dibaca langsung. Bukan dengan perintah baca file, bukan dengan mencari teks di dalamnya. Formatnya memang bukan teks yang bermakna bagi yang membacanya, dan hasilnya pasti salah. Semua akses harus lewat MCP, tanpa kecuali.

Urutannya juga penting. Sebelum menyentuh kode, agen diminta mengecek dulu keadaan aplikasi, lalu membaca dokumen cara penggunaan yang disediakan MCP itu sendiri: skema datanya, cara mengeksekusi perintah, panduan untuk kode. Baru setelah itu struktur desain dibaca per bagian, dengan variabel dan instance yang sudah diselesaikan, sehingga yang dibaca adalah nilai akhirnya, bukan template-nya.

Prinsipnya satu: node dioperasi lewat identitas yang dikembalikan MCP, bukan ditebak. Nama frame yang terlihat di layar tidak dipakai sebagai asumsi. Kalau agen tidak yakin, ia mengecek ulang, bukan menerka. Kebiasaan kecil ini yang mencegah salah baca diam-diam, jenis kesalahan yang paling mahal karena tidak pernah mengeluarkan error.

Menerjemahkan ke Kode Tanpa Kehilangan Makna

Begitu desain terbaca, terjemahannya ke kode memakai dua aturan yang penulis tulis sebagai keputusan tetap.

Pertama, soal layout, teks, dan ukuran: desain yang menang. Jarak antarelemen, tinggi header, ukuran huruf, urutan konten, semuanya mengikuti apa yang ada di kanvas. Kode menyesuaikan desain, bukan sebaliknya.

Kedua, soal warna dan huruf: token proyek yang menang. Setiap variabel di pen.dev punya padanan di variabel CSS proyek, misalnya warna aksen desain disetarakan dengan token aksen yang sudah dipakai seluruh situs. Hasilnya, desain yang dirender tetap tampil sesuai kanvas, tapi tidak memperkenalkan warna atau font baru ke codebase. Konsistensi desain lama tidak dikorbankan demi kesetiaan pada satu layar.

Dua aturan ini membuat terjemahan berhenti jadi selera. Ada rujukan untuk mengadu, dan rujukannya bukan ingatan penulis terhadap gambar, melainkan bacaan langsung terhadap kanvas.

Alur yang Berjalan Dua Arah

Setelah beberapa kali pemakaian, penulis menyadari alurnya tidak satu arah.

Ke arah kode, urutannya: baca desain, implementasikan satu bagian, validasi, baru lanjut ke bagian berikutnya. Satu section sekaligus menjadi unit verifikasi, sehingga selisih ketahuan saat masih kecil.

Ke arah desain, justru sebaliknya: yang mengalir adalah brief. Penulis menulis kebutuhan visual dalam teks, memasukkannya ke pen.dev sebagai arahan pembuatan frame, lalu menilai hasilnya di kanvas sebelum satu baris kode pun ditulis. Desain yang jelek lebih murah dikoreksi di kanvas daripada di kode, dan tidak semua keputusan perlu melewati kode dulu untuk diketahui hasilnya.

Validasi di kedua arah memakai cara yang sama: screenshot dari kanvas dibandingkan dengan hasil di browser, per bagian, sampai cocok.

Jebakan yang Penulis Temui Sendiri

Alur ini tidak mulus sejak awal. Beberapa hal yang sempat memakan waktu:

  • Pen.app yang tidak berjalan membuat semua panggilan gagal diam-diam, dan gejalanya mudah disalahartikan sebagai masalah kode.
  • Konfigurasi MCP berisi path yang khusus untuk satu mesin. Kalau dikirim ke repo, orang lain langsung patah; konfigurasi seperti ini harus tinggal di pengaturan global.
  • Sesi editor perlu dimuat ulang sebelum tool MCP-nya muncul. Tanpa ini, terlihat seolah tool-nya tidak ada.
  • Menebak nama atau id node. Sekali nebak dan kebetulan cocok, kebiasaan itu akan terbawa ke bacaan berikutnya yang belum tentu cocok.

Penutup

Sejak memakai alur ini, desain penulis berhenti jadi gambar yang ditafsirkan dan mulai jadi sesuatu yang bisa dibaca. Kanvasnya tetap hidup, kodenya mengikuti, dan di antara keduanya tidak ada lagi ingatan yang menahan spesifikasi. Bagi penulis, itu inti dari menggabungkan pen.dev dengan VS Code lewat MCP: bukan mempercepat menulis kode, tapi menghapus terjemahan yang selama ini tidak pernah sempurna.