Mart 2026'da moonshot.ai deneyimini platform genelinde yeniledik. Güncelleme ilk bakışta basitti: yeni bir renk paleti, daha sıkı tipografi ve güncellenmiş hareketler. Pratikte ise tüm site genelinde ortak bileşenlere, design token'lara, rotalara ve etkileşimli katmanlara dokundu.
Yeniden inşayı yürütmeye yardımcı olması için Kimi K2.5 destekli Kimi Code CLI'yi bir AI coding agent olarak kullandık. Bu proje, terminal tabanlı bir agent'ın demo ortamında değil, gerçek bir üretim iş akışında nasıl yer bulduğuna dair pratik bir sınav oldu. Bu yazıda onu nasıl kullandığımızı ve süreçte neler öğrendiğimizi anlatıyoruz.
Bu yenilemenin asıl meselesi neydi
moonshot.ai yenilemesi, markayı sıfırdan yeniden tasarlamakla ilgili değildi. Tasarım çalışmalarının çoğu Figma'da zaten hazırdı. Asıl zorluk, bu güncellemeleri mevcut bir codebase genelinde tutarlı biçimde uygulamaktı.
Bu da ortak token'ları izlemek, bileşenleri güncellemek, etkileşim davranışlarını kontrol etmek ve analytics ile erişilebilirliğin etkilenmediğinden emin olmak anlamına geliyordu. Pek çok değişiklik tek tek küçük olsa da sitenin birden fazla katmanına yayılıyordu.
Bu tür işler algoritmik karmaşıklık yüzünden zor değildir; kapsam ve tutarlılık yüzünden zordur. Asıl mesele, bir değişikliğin nerelere dokunduğunu bilmek ve hiçbir şeyin atlanmadığından emin olmaktır. Bunu desteklemek için, tasarım özelliklerini uygulamayla daha iyi hizalamak üzere Figma ile bir Model Context Protocol (MCP) bağlantısı kullandık; böylece agent'ın yapıyı anlamasına yardımcı olup manuel yorumlamayı azalttık.
Temel kurallar: agent'ı işe yarar hale getirmek
İlk adım prompt yazmak değil, bağlamı kurmaktı. /init komutunu kullanarak bir AGENTS.md dosyası oluşturduk, ardından yaklaşık bir saat boyunca dosyayı incelttik. Dosyada yenilemenin kapsamına nelerin girdiğini, nelerin değişemeyeceğini, projenin nasıl yapılandırıldığını ve build sürecinin nasıl işlediğini belgeledik. Ayrıca adlandırma kuralları, boşluklandırma ve kontrast gereksinimlerini kapsayan bir kural dosyası ekledik.
Bu kurulum, sonradan aynı açıklamaları tekrar tekrar yapma ihtiyacını azalttı ve Kimi Code CLI iş akışını daha tutarlı hale getirdi. Projeye özgü bağlam olmadan AI coding agent makul ama genel çıktılar üretme eğilimindedir. Bu bağlamla birlikte davranışı, codebase'i zaten tanıyan bir ekip arkadaşına yaklaşır.
Onu gerçekte nasıl kullandık
Bu bölüm, Kimi Code CLI'nin yenileme sırasında pratikte nasıl kullanıldığını ayrıntılandırıyor: bağımlılık izleme, tasarımla hizalama, davranış araştırması, performans kontrolleri ve entegrasyon riski incelemesi boyunca. Odak otomasyon değil, büyük ölçekli bir refactor'da belirsizliği azaltmaktı.
Değişikliğin nerelere dokunduğunu anlayın
Herhangi bir düzenleme yapmadan önce Kimi Code CLI'deki agent'tan hedef alanı okumasını ve ona başka nelerin bağlı olduğunu listelemesini istedik. Tek bir değişiklik —örneğin bir düğme rengi— hero bölümlerini, indirme bölümlerini, hover durumlarını ve ortak token'ları etkileyebilir; ortak bileşenler, hareket zamanlaması ve analytics hook'ları ise etki alanını daha da genişletebilir. Önce bir bağımlılık listesi almak, sonradan çıkacak sürprizleri azalttı ve düzenlemeleri daha öngörülebilir kıldı.
Kodu tasarım özellikleriyle eşleştirin
Ardından bileşenleri tasarım özellikleriyle bölüm bölüm karşılaştırdık: hero, navigasyon, ürün bölümleri, indirme CTA'sı ve footer. Agent, stilleri design token'lar ve yerleşim değerleriyle karşılaştırarak özellik düzeyinde değişiklik listeleri üretti. Bu süreç, manuel görsel kontrolden çok yapılandırılmış tasarım sistemi otomasyonuna daha yakın hissettirdi. Farkların çoğu boşluklandırma, border radius veya font weight gibi küçüktü; ancak zaman zaman, ortak varyantları paylaşması gereken bileşenlerin zaman içinde birbirinden koptuğu daha büyük tutarsızlıklar ortaya çıktı. Sonuç, görsel tahmine dayalı bir süreç yerine somut bir düzenleme listesi oldu.
Yeni davranışları araştırın
Yenileme, codebase'de daha önce uygulanmamış yeni UI davranışları getirdi: özel bir imleç, runtime odaklı hero, hover ile oynayan illüstrasyon kartları ve scroll ile tetiklenen girişler.
Her özellik için dokümanları ve repository durumunu birlikte yükleyerek Kimi Code CLI'yi bağlamsal bir ortam olarak kullandık. Kimi K2.5 burada önem kazandı: daha uzun bağlam, uygulama ve referanslar üzerinde tek yerde akıl yürütmeyi kolaylaştırdı.
Sorular pratikti:
Hover animasyonları çıkışta tamamlanmalı mı, iptal mi edilmeli?
İmleç durumu hero canvas ile etkileşime girmeli mi?
Birden fazla katman üst üste geldiğinde ne bozulur?
Geniş bağlam penceresi, tasarım niyeti ile kodun aynı oturumda yaşadığı daha kesintisiz bir kimi code iş akışını mümkün kıldı.
Ağırlık ve performansı kontrol edin
Yenileme yeni bir yazı tipi, daha fazla hareket ve ek asset'ler getirdi; bu da sayfa ağırlığını artırdı. Agent'ı mevcut font subsetting script'ini uyarlamak ve çıktıyı doğrulamak için kullandık; daha sonra Lighthouse raporlarını yorumlamaya da yardımcı oldu, böylece regresyonları erken belirleyebildik. Amaç her şeyi en sonda optimize etmek değil, değişiklikler hâlâ küçükken neyi tutup neyi çıkaracağımıza karar vermekti.
Birleştirmeden önce entegrasyon riskini izleyin
Birden fazla etkileşimli katman —giriş animasyonu, imleç, hero canvas— ayrı bileşenlerde yaşasalar da sıralamayı ve pointer davranışını paylaşır; bu yüzden bir katmandaki değişiklik diğerlerini yine de etkileyebilir. CSS ve render davranışının her zaman eşleşmeyebildiği tarayıcılar ve işletim sistemleri arası farkları da hesaba katmamız gerekiyordu. Değişiklik gruplarını birleştirmeden önce diff'leri Kimi Code CLI'ye verdik ve hangi etkileşimlerin etkilenebileceğini izlemesini istedik; ardından bu yolları tarayıcıda kontrol ettik ve ortamlar genelinde hafif bir geçiş yaptık.
MCP entegrasyonları ve Skills
Model Context Protocol (MCP), Kimi Code CLI'nin proje verilerini barındıran harici sistemlere doğrudan bağlanmasını sağladı. Tasarım token'larını, yerleşim verilerini ve tipografiyi doğrudan Figma'dan çekmek için mcp Figma kullandık; böylece tasarım ile kod arasındaki manuel çeviri azaldı. Ayrıca dahili araçları bağlayarak görevleri, özellikleri ve uç durumları bağlam değiştirmeden görünür kıldık.
Sunucu eklemek tek bir komutla yapılır:
Bu kalıp MCP ekosisteminin geneline uyarlanabilir. İlham için agent'ları şunlara bağlayabilirsiniz:
Figma — canvas'tan tasarım bağlamı, değişkenler ve yerleşim verileri için resmi MCP
Atlassian Cloud — Atlassian'ın uzaktan MCP giriş noktası üzerinden Confluence sayfaları ve Jira iş öğeleri (Rovo ile birlikte belgelenmiştir)
Veritabanları, CMS API'leri — tedarikçi veya topluluk MCP sunucuları; kayıt dizinleri kategoriye göre yüzlerce seçenek listeler
Sizin stack'iniz farklı görünebilir: özel bir dokümantasyon API'si, dahili bir design-token servisi veya bir veri ambarı. Fikir aynı: agent'ı ilgili veriyi zaten tutan sistemlere bağlamak. Kimi Code CLI'de MCP'yi yapılandırmanın config dosyaları, sunucu tanımları ve diğer yolları için platform kılavuzuna bakın.
Review Skill
Kod incelemesi için bir Skill de yazdık. Bu, Kimi Code CLI'ye bir merge request'i uçtan uca nasıl değerlendireceğini söyleyen bir kural dosyasıdır: diff'i okumak, etkilenen dosyaları ve bileşenleri izlemek, tasarım sistemi ihlallerini kontrol etmek (ham renk literalleri, grid dışı boşluklandırma, eksik erişilebilirlik fallback'leri), riski alana göre değerlendirmek ve yapılandırılmış bir rapor üretmek.
Rapor sabit bir format izler:
Niyet ve kapsam özeti
Önem derecesine göre gruplanmış bulgular (merge'i engelleyen kritik sorunlar, önerilen iyileştirmeler, küçük tutarlılık önerileri)
Her bulgu için: diff'ten kanıt, etki değerlendirmesi ve somut bir aksiyon maddesi
Skill ayrıca hızlı bir tarayıcı veya cihaz doğrulaması gerektirebilecek olası riskleri de işaretler; agent'ın emin olmadığı ama doğrulama maliyetinin düşük olduğu durumları.
Pratikte, moonshot.ai görsel yenilemesi sırasında her PR, inceleme tamamlanmadan önce bu yapılandırılmış geçişten geçti. Çıktıda her zaman niyet özeti, önem derecesine göre sıralanmış bulgular, kanıtlar ve düzeltmeler yer aldı.
Bu, son aşamadaki gidip gelmeleri azalttı ve Kimi Code iş akışı genelinde tutarlılığı artırdı; ortak sabitlerin yanında hardcoded URL'ler, hizalanması gereken analytics alanları ve mobil etkileşim uç durumları gibi sorunları görünür kıldı.
Beklemediğimiz şeyler
Refactor sırasında, başta belirgin olmayan birkaç örüntü ortaya çıktı.
Spec-to-code beklediğimizden hızlı ilerledi
Figma MCP ile Kimi Code CLI aynı akıştayken boyutlar ve design token'lar manuel olarak aktarılmak yerine yapılandırılmış girdi olarak geldi. Sonuç, her bölüm için daha kısa iterasyon döngüleriydi; özellik düzeyindeki değişiklikler ve düzeltmeler çoğu zaman araçlar arasında gidip gelmek yerine tek geçişte tamamlandı.
Araştırma prompt'ları beklediğimizden daha çok karşılık verdi
Yenileme, runtime dokümantasyonu ve referans uygulamaların repository ile birlikte uzun, doküman odaklı geçişlerle incelenmesine yoğun biçimde dayanıyordu. Bu materyalleri kodla aynı oturumda tutmak, çoğu zaman düzenlemelerin kendisi kadar değerli oldu.
Review Skill küçük tutarsızlıkları listeye dönüştürdü
Yapılandırılmış rapor, daha önce anlatılan aynı tür sorunları ortaya çıkardı: ortak sabitlerin yanında hardcoded URL'ler, hizalanması gereken analytics alanları ve mobil etkileşim uç durumları. Çoğu tek başına küçüktü; ancak tek bir geçişte gruplanınca ele almak kolaylaştı.
Uzun thread'lere dönmek düşük maliyetli kaldı
kimi --continue ve /compact gibi komutlar, günlere yayılan işlerde her sabah bağlamı yeniden kurma gereğini ortadan kaldırdı. Bu, yeniden prompt yazmayı azalttı ve aynı Kimi Code iş akışının tutarlı biçimde ilerlemesini sağladı.
Oturumları sürdürme, oturumlar arasında geçiş yapma ve /compact ile ilgili komutlarla bağlamı yönetme hakkında daha fazlası için Kimi Code CLI oturumları kılavuzuna bakın.
moonshot.ai'yi yeniden inşa ederken öğrendiklerimiz
Benzer bir moonshot.ai görsel yenilemesini tekrar yürütecek olsaydık, birkaç konuda farklı yaklaşırdık.
Kodla değil, bağlamla başlayın
İlk saati kapsamı, kısıtları ve konvansiyonları belgelemeye ayırmak, sonraki her türlü prompt'tan daha çok zaman kazandırdı. Bunu en baştan yapmak, Kimi Code CLI gibi araçların iş akışı genelinde daha tutarlı davranmasını sağladı.
Gerçek kaynağı erken bağlayın
Bizim durumumuzda bu Figma'ydı. Başka projelerde bir CMS, dahili API veya tasarım sistemi olabilir. Önemli olan, özellikle bir frontend refactor bağlamında AI coding agent kullanırken, sistemin varsayımlardan çıkarım yapmak yerine gerçek verilerle çalışmasını sağlamaktır.
Tasarım ve görev bağlamını aynı döngüde tutun
Token'ları, özellikleri ve uygulamayı ortak bir bağlama taşımak gidip gelmeleri azalttı ve iterasyon döngülerini daha istikrarlı hale getirdi. Figma MCP ve Kimi Code CLI içeren iş akışları burada özellikle etkili oldu; tasarım niyetini ve kod değişikliklerini kesintisiz tek bir döngüde hizalı tutmaya yardımcı oldular.
Kod yazmak istemiyorsanız: Kimi Websites
Yukarıdaki her şey geliştirici odaklı bir iş akışını anlatıyor: terminaller, diff'ler ve bağlam dosyaları. Ancak aynı sonuç —özenli, responsive bir web sitesi— hızın framework düzeyinde kontrolden daha önemli olduğu durumlarda bu stack olmadan da elde edilebilir.
Kimi Websites aynı Kimi K2.5 modeli üzerinde çalışır; ancak görsel, no-code bir arayüz üzerinden. Ne istediğinizi doğal dille anlatır, bölümleri sohbet içinde inceltir ve tek tıkla yayınlarsınız. Mevcut bir ekran görüntüsünü girdi olarak alıp yerleşim yapısını yeniden kurabilir.
Landing page prototiplemek isteyen kurucular veya sıkışık takvimlerde kampanya sitelerini yayına alan pazarlamacılar için bu, geleneksel bir frontend stack ile doğrudan çalışmaktan daha hızlı bir yol sunar.
Sonuç
Kimi Code CLI ve Kimi K2.5, projenin karmaşıklıktan çok geniş kapsam gerektiren bölümlerinde en faydalı oldu. Görsel yenilemeler çoğu zaman zor problemlerden ibaret değildir; bir sistem genelinde tutarlı kalması gereken çok sayıda küçük değişiklikten oluşur. Bu, insanlar için zaman alıcıdır; ancak dosyalar arasında iz sürebilen ve karşılaştırma yapabilen bir agent için oldukça uygun bir iştir.
Kararları yine biz verdik, her değişikliği inceledik ve nihai sonucu doğruladık. Agent ise tekrarlı iz sürme, karşılaştırma ve ilk inceleme işlerini üstlendi. Pratikte bu iş bölümü, bir AI coding agent'ı üretim iş akışına dahil etmenin uygulanabilir bir yolu oldu. Dosyalar arası refactor'lar, design-to-code doğrulaması ve büyük ölçekli tutarlılık işleri için bu yaklaşımın faydalı olduğu görüldü.