Pada Maret 2026, kami menyegarkan pengalaman moonshot.ai di seluruh platform. Sekilas pembaruan ini tampak sederhana: palet warna baru, tipografi yang lebih rapat, dan motion yang diperbarui. Namun dalam praktiknya, perubahan ini menyentuh komponen bersama, design token, route, dan layer interaktif di seluruh situs.
Kami menggunakan Kimi Code CLI, yang ditenagai oleh Kimi K2.5, sebagai AI coding agent untuk membantu menjalankan pembangunan ulang ini. Proyek ini menjadi uji praktik tentang bagaimana agent berbasis terminal masuk ke alur kerja produksi yang nyata—bukan lingkungan demo. Artikel ini mengulas cara kami menggunakannya dan pelajaran yang kami petik sepanjang prosesnya.
Inti sebenarnya dari penyegaran ini
Penyegaran moonshot.ai bukanlah upaya mendesain ulang brand dari nol. Sebagian besar pekerjaan desain sudah tersedia di Figma. Tantangan sebenarnya adalah menerapkan pembaruan tersebut secara konsisten di codebase yang sudah ada.
Artinya, kami perlu menelusuri token bersama, memperbarui komponen, memeriksa perilaku interaktif, serta memastikan analytics dan aksesibilitas tidak terdampak. Banyak perubahan tampak kecil jika dilihat satu per satu, tetapi menjangkau banyak layer situs.
Pekerjaan semacam ini tidak sulit karena kompleksitas algoritmik. Yang membuatnya sulit adalah cakupan dan konsistensi. Tantangannya terletak pada memahami apa saja yang tersentuh oleh sebuah perubahan dan memastikan tidak ada yang terlewat. Untuk mendukungnya, kami menggunakan koneksi Model Context Protocol (MCP) dengan Figma agar spesifikasi desain lebih selaras dengan implementasi, membantu agent memahami struktur, dan mengurangi interpretasi manual.
Aturan dasar: membuat agent benar-benar berguna
Langkah pertama bukan menulis prompt—melainkan menyiapkan konteks. Kami menggunakan perintah /init untuk membuat file AGENTS.md, lalu menghabiskan sekitar satu jam untuk menyempurnakannya. Di dalamnya, kami mendokumentasikan cakupan penyegaran, hal-hal yang tidak boleh berubah, struktur proyek, dan cara kerja proses build. Kami juga menambahkan file aturan yang mencakup konvensi penamaan, spacing, dan persyaratan kontras.
Penyiapan ini mengurangi kebutuhan untuk mengulang penjelasan di kemudian hari dan membuat alur kerja Kimi Code CLI lebih konsisten. Tanpa konteks khusus proyek, AI coding agent cenderung menghasilkan keluaran yang masuk akal tetapi generik. Dengan konteks tersebut, perilakunya menjadi lebih mirip rekan satu tim yang sudah memahami codebase.
Cara kami benar-benar menggunakannya
Bagian ini menguraikan bagaimana Kimi Code CLI digunakan selama penyegaran dalam praktiknya—mencakup penelusuran dependensi, penyelarasan desain, riset perilaku, pemeriksaan performa, dan peninjauan risiko integrasi. Fokusnya bukan otomatisasi, melainkan mengurangi ketidakpastian dalam refactor berskala besar.
Memahami apa saja yang tersentuh perubahan
Sebelum mengedit apa pun, kami meminta agent di Kimi Code CLI membaca area target dan mencantumkan hal lain yang bergantung padanya. Satu perubahan saja—misalnya warna tombol—dapat memengaruhi hero section, bagian unduhan, hover state, dan token bersama, sementara komponen bersama, timing motion, dan analytics hook dapat memperluas dampaknya lebih jauh. Mendapatkan daftar dependensi di awal mengurangi kejutan belakangan dan membuat pengeditan lebih terprediksi.
Mencocokkan kode dengan spesifikasi desain
Kami lalu membandingkan komponen dengan spesifikasi desain per bagian: hero, navigasi, bagian produk, CTA unduhan, dan footer. Agent menghasilkan daftar perubahan sampai tingkat properti dengan membandingkan style terhadap design token dan nilai layout. Proses ini terasa lebih dekat dengan otomatisasi design system yang terstruktur daripada pengecekan visual manual. Sebagian besar perbedaannya kecil, seperti spacing, border radius, atau font weight, tetapi sesekali muncul inkonsistensi yang lebih besar ketika komponen yang seharusnya berbagi varian ternyata telah menyimpang seiring waktu. Hasilnya adalah daftar edit yang konkret, bukan proses menebak secara visual.
Meneliti perilaku baru
Penyegaran ini memperkenalkan perilaku UI baru yang sebelumnya belum diimplementasikan di codebase: custom cursor, hero yang digerakkan saat runtime, kartu ilustrasi yang berjalan saat hover, dan entrance yang dipicu oleh scroll.
Untuk setiap fitur, kami menggunakan Kimi Code CLI sebagai lingkungan kontekstual dengan memuat dokumentasi dan status repository secara bersamaan. Di sinilah Kimi K2.5 berperan: konteks yang lebih panjang membuat penalaran lintas implementasi dan referensi lebih mudah dilakukan dalam satu tempat.
Pertanyaannya praktis:
Apakah animasi hover harus selesai atau dibatalkan saat kursor keluar?
Apakah state cursor perlu berinteraksi dengan hero canvas?
Apa yang rusak ketika beberapa layer saling bertumpuk?
Jendela konteks yang besar memungkinkan alur kerja Kimi Code yang lebih berkesinambungan, dengan intensi desain dan kode berada dalam sesi yang sama.
Memeriksa bobot dan performa
Penyegaran ini memperkenalkan typeface baru, motion yang lebih banyak, dan aset tambahan, sehingga bobot halaman meningkat. Kami menggunakan agent untuk mengadaptasi skrip subsetting font yang sudah ada dan memverifikasi output-nya, lalu kemudian agent membantu menafsirkan laporan Lighthouse agar kami dapat mengidentifikasi regresi sejak dini. Tujuannya bukan mengoptimalkan semuanya di akhir, melainkan mengambil keputusan mana yang dipertahankan atau dipangkas saat perubahan masih kecil.
Menelusuri risiko integrasi sebelum merge
Beberapa layer interaktif—entrance animation, cursor, hero canvas—berbagi urutan dan perilaku pointer meskipun berada di komponen terpisah, sehingga perubahan pada satu layer tetap dapat memengaruhi yang lain. Kami juga harus memperhitungkan perbedaan lintas browser dan lintas OS, karena perilaku CSS dan rendering tidak selalu sama. Sebelum melakukan merge atas batch perubahan, kami memasukkan diff ke Kimi Code CLI dan memintanya menelusuri interaksi mana yang mungkin terdampak, lalu memeriksa jalur tersebut di browser dan melakukan pengecekan ringan di berbagai lingkungan.
Integrasi MCP dan Skills
Model Context Protocol (MCP) memungkinkan Kimi Code CLI terhubung langsung ke sistem eksternal yang berisi data proyek. Kami menggunakan mcp Figma untuk menarik design token, data layout, dan tipografi langsung dari Figma, sehingga mengurangi penerjemahan manual antara desain dan kode; kami juga menghubungkan alat internal untuk membuka akses ke tugas, spesifikasi, dan edge case tanpa perlu berpindah konteks.
Menambahkan server cukup dengan satu perintah:
Pola ini berlaku luas di seluruh ekosistem MCP. Sebagai inspirasi, Anda dapat menghubungkan agent ke:
Figma — MCP resmi untuk konteks desain, variable, dan data layout dari canvas
Atlassian Cloud — halaman Confluence dan item kerja Jira melalui entry point MCP jarak jauh milik Atlassian (didokumentasikan bersama Rovo)
Database, CMS API — server MCP dari vendor atau komunitas; registry mencantumkan ratusan opsi berdasarkan kategori
Stack Anda mungkin berbeda—API dokumentasi privat, layanan design-token internal, atau data warehouse. Gagasannya tetap sama: hubungkan agent ke sistem yang sudah menyimpan data relevan. Untuk file konfigurasi, definisi server, dan cara lain menghubungkan MCP di Kimi Code CLI, lihat panduan platform.
Review Skill
Kami juga menulis Skill untuk code review. Ini berupa file aturan yang memberi tahu Kimi Code CLI cara mengevaluasi merge request dari awal hingga akhir: membaca diff, menelusuri file dan komponen terdampak, memeriksa pelanggaran design system (literal warna mentah, spacing yang keluar dari grid, fallback aksesibilitas yang hilang), menilai risiko per area, dan membuat laporan terstruktur.
Laporan mengikuti format tetap:
Ringkasan tujuan dan cakupan
Temuan yang dikelompokkan berdasarkan tingkat keparahan (masalah kritis yang memblokir merge, perbaikan yang direkomendasikan, saran konsistensi minor)
Untuk setiap temuan: bukti dari diff, penilaian dampak, dan item tindakan yang konkret
Skill juga menandai potensi risiko yang mungkin memerlukan validasi cepat di browser atau perangkat—kasus ketika agent belum yakin, tetapi biaya verifikasinya rendah.
Dalam praktiknya, setiap PR selama penyegaran visual moonshot.ai melewati pemeriksaan terstruktur ini sebelum review selesai. Output-nya selalu mencakup rekap tujuan, temuan yang diurutkan berdasarkan tingkat keparahan, bukti, dan perbaikan.
Ini membantu mengurangi bolak-balik di tahap akhir dan meningkatkan konsistensi di seluruh alur kerja Kimi Code, dengan memunculkan isu seperti URL hardcoded yang berdampingan dengan konstanta bersama, field analytics yang perlu diselaraskan, serta edge case interaksi mobile.
Hal-hal yang tidak kami duga
Selama refactor, muncul beberapa pola yang tidak terlihat jelas di awal.
Dari spesifikasi ke kode ternyata lebih cepat dari perkiraan
Dengan Figma MCP dan Kimi Code CLI dalam thread yang sama, dimensi dan design token masuk sebagai input terstruktur, bukan hasil transkripsi manual. Hasilnya, loop iterasi per bagian menjadi lebih singkat—perubahan dan perbaikan tingkat properti sering selesai dalam satu pass, tanpa bolak-balik antar alat.
Prompt riset memberi hasil lebih besar dari perkiraan
Penyegaran ini sangat bergantung pada pass panjang berbasis dokumentasi melalui dokumentasi runtime dan implementasi referensi bersama repository. Menjaga materi-materi ini tetap berada dalam sesi yang sama dengan kode sering kali terbukti sama berharganya dengan edit itu sendiri.
Review Skill mengubah inkonsistensi kecil menjadi daftar
Laporan terstruktur memunculkan kelas isu yang sama seperti dijelaskan sebelumnya—URL hardcoded yang berdampingan dengan konstanta bersama, field analytics yang perlu diselaraskan, dan edge case interaksi mobile. Sebagian besar kecil jika dilihat sendiri-sendiri, tetapi lebih mudah ditangani setelah dikelompokkan dalam satu pass.
Thread panjang tetap mudah dilanjutkan
Perintah seperti kimi --continue dan /compact membuat pekerjaan multi-hari tidak perlu membangun ulang konteks setiap pagi. Ini mengurangi kebutuhan re-prompt dan menjaga alur kerja Kimi Code tetap bergerak konsisten.
Untuk informasi lebih lanjut tentang melanjutkan sesi, berpindah antar sesi, dan mengelola konteks dengan /compact serta perintah terkait, lihat panduan sesi Kimi Code CLI.
Pelajaran dari membangun ulang moonshot.ai
Jika kami menjalankan penyegaran visual moonshot.ai serupa lagi, ada beberapa hal yang akan kami lakukan dengan pendekatan berbeda.
Mulai dari konteks, bukan kode
Menghabiskan satu jam pertama untuk mendokumentasikan cakupan, batasan, dan konvensi menghemat lebih banyak waktu daripada prompt apa pun di tahap berikutnya. Menetapkan hal ini sejak awal membuat alat seperti Kimi Code CLI berperilaku lebih konsisten di seluruh alur kerja.
Hubungkan sumber kebenaran sejak awal
Dalam kasus kami, sumber itu adalah Figma. Di proyek lain, bisa berupa CMS, API internal, atau design system. Kuncinya adalah memastikan sistem bekerja dengan data nyata, bukan asumsi yang disimpulkan, terutama saat menggunakan AI coding agent dalam konteks refactor frontend.
Satukan konteks desain dan tugas dalam loop yang sama
Membawa token, spesifikasi, dan implementasi ke dalam konteks bersama mengurangi bolak-balik dan membuat siklus iterasi lebih stabil. Di sinilah alur kerja yang melibatkan Figma MCP dan Kimi Code CLI terbukti sangat efektif, karena membantu menjaga intensi desain dan perubahan kode tetap selaras dalam satu loop berkesinambungan.
Jika Anda tidak ingin menulis kode: Kimi Websites
Semua di atas menggambarkan alur kerja yang berpusat pada developer—terminal, diff, dan file konteks. Namun, hasil yang sama—website yang rapi dan responsif—juga dapat dicapai tanpa stack tersebut ketika kecepatan lebih penting daripada kontrol di tingkat framework.
Kimi Websites berjalan di model Kimi K2.5 yang sama, tetapi melalui antarmuka visual tanpa kode. Anda menjelaskan yang diinginkan dengan bahasa alami, menyempurnakan bagian-bagian melalui percakapan, lalu menerbitkannya dengan sekali klik. Kimi Websites juga dapat menerima screenshot yang sudah ada sebagai input dan merekonstruksi struktur layout-nya.
Bagi founder yang membuat prototipe landing page atau marketer yang harus meluncurkan situs kampanye dengan tenggat ketat, ini menawarkan jalur yang lebih cepat daripada bekerja langsung dengan stack frontend tradisional.
Kesimpulan
Kimi Code CLI dan Kimi K2.5 paling berguna pada bagian proyek yang lebih menuntut keluasan cakupan daripada kompleksitas. Penyegaran visual jarang berkutat pada masalah yang sulit—lebih sering tentang banyak perubahan kecil yang harus tetap konsisten di seluruh sistem. Bagi manusia, ini memakan waktu; tetapi relatif cocok untuk agent yang dapat menelusuri dan membandingkan lintas file.
Kami tetap mengambil keputusan, meninjau setiap perubahan, dan memvalidasi hasil akhirnya. Agent menangani pekerjaan penelusuran, perbandingan, dan review awal yang repetitif. Dalam praktiknya, pembagian kerja ini terbukti menjadi cara yang praktis untuk mengintegrasikan AI coding agent ke dalam alur kerja produksi. Untuk refactor lintas file, verifikasi desain-ke-kode, dan pekerjaan konsistensi berskala besar, pendekatan ini terbukti bermanfaat.