Tasarım için Kilo Code.

Kilo Code gerçekte ne

Kilo Code, Kilo Code, Inc. tarafından geliştirilen açık kaynaklı bir AI kodlama agent'ıdır. VS Code uzantısı, JetBrains IDE'leri ve komut satırı arayüzü olarak çalışır — deponuzu okur, dosyaları düzenler, komutları çalıştırır ve sadece satırları tamamlamak yerine doğal dil görevlerinden planlama ve doğrulama yapar. Belirleyici özelliği model-agnostik olmasıdır: hangi modelin onu yöneteceğini siz seçersiniz ve kendi sağlayıcı anahtarlarınızı getirirsiniz.

Tasarım çalışması için iki özellik öne çıkar. Model-agnostik olduğu için, referans ekran görüntüsünü en iyi okuyan ve düzen hakkında en iyi akıl yürüten güçlü, görsel yetenekli modele yönlendirebilirsiniz. Ve açık kaynak ve BYOK olduğu için, hangi bağlamın gönderildiğini tam olarak inceleyebilir ve kimlik bilgilerini ve maliyeti kendi kontrolünüz altında tutabilirsiniz.

• Agent modları: Kilo, özelleşmiş modlarla birlikte gelir — planlama için Architect, geliştirme için Code, hata düzeltme için Debug ve sorular için Ask — artı özel modlar, böylece bir tasarım planlayıp ardından ayrı, odaklanmış geçişlerde uygulayabilirsiniz.
• Özel kurallar + MCP: Kalıcı bağlam için proje düzeyinde özel kuralları okur ve MCP sunucularını (bir MCP marketplace ile) destekler, böylece canlı bir Figma dosyası veya tasarım araçları gibi harici bağlam ekleyebilirsiniz.
• Kendi anahtarlarınızı getirin: Kilo, Anthropic, OpenAI, Google, OpenRouter ve daha fazlası dahil birçok sağlayıcıda BYOK destekler — veya sağlayıcı maliyetiyle 500'den fazla modeli sunan Kilo'nun kendi gateway'ini kullanabilirsiniz.

• Tedarikçi: Kilo Code, Inc. (açık kaynak)
• Kimlik Bilgisi: kendi sağlayıcı API anahtarınız (BYOK — Anthropic, OpenAI, Google, OpenRouter ve daha fazlası) veya Kilo'nun kendi gateway'i
• Lisans: açık kaynak

Açık, model-agnostik bir ajanın tasarıma neden uygun olduğu

Kilo Code'un tasarım avantajı açıklık ve model seçiminden gelir — ancak her ajanda olduğu gibi, zevk yine de sizin tarafınızdan sağlanmalıdır.

• Tasarım gereği model-agnostik: Modeli siz seçtiğiniz için, Kilo'yu referans ekran görüntülerini en iyi okuyan görsel özellikli modelle yönlendirebilirsiniz — ve daha iyisi çıktığında, iş akışınızı değiştirmeden geçiş yapabilirsiniz.
• Açık ve incelenebilir: Kilo açık kaynaklıdır, dolayısıyla tam olarak hangi bağlam ve komut istemlerinin gönderildiğini görebilirsiniz — ajanın tek seferlik stiller icat etmek yerine gerçek tasarım ilkelerinizi yeniden kullanmasını istediğinizde kullanışlıdır.
• Özel kurallardaki konvansiyonlar: Proje özel kuralları (artı Figma için bir MCP sunucusu) ajanı tokens, bileşenler ve gerçek spec'lerinize yönlendirir, böylece varsayılan bir görünüm yerine bir marka ile çalışır.

Ders, her ajanın öğrettiği aynı derstir: Kilo Code varsayılan olarak zevk sahibi değildir. İyi tasarım üretir, ancak ona kısıtlamalar verdiğinizde — bir tasarım sistemi, estetik bir skill ve somut referanslar. Open Design tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (daha fazlası aşağıda).

Kilo Code'u sıfırdan tasarım işi için kurma

İşte temiz bir makineden UI oluşturup doğrulayabilen bir Kilo Code'a giden tam yol.

# 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

• Tasarım kurallarınızı kodlayın: tokens'larınızı, temel öğelerinizi ve konvansiyonlarınızı Kilo'nun özel kurallarına ekleyin ve ajansı bunlara yönlendirin, böylece çıktı jenerik bir görünüme varsayılan olmak yerine bir markaya uygun olsun.
• Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP bağlayın, böylece Kilo gerçek bir tarayıcıda render edilsin ve yalnızca build'in geçtiğini doğrulamak yerine çıktısını farklı breakpoint'lerde kontrol etsin.

Ekran görüntüsünden UI'ya iş akışı

Kilo Code ile en yüksek verimli tasarım döngüsü, bir referans görüntüyü çalışan, duyarlı UI'ya dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansa geri karşılaştırmak için görsel yetenekli bir modele dayanarak.

1. Elinizde olan en net görsel referanslardan başlayın — ve sadece bir hero çekim değil, birden fazla durum (masaüstü ve mobil, hover, boş, yükleniyor) ekleyin.
2. Promptta spesifik olun; belirsiz promptlar güçlü bir modelle bile jenerik UI üretir.
3. Tasarım sisteminizi ve konvansiyonlarınızı Kilo'nun özel kurallarında tutun ve ajansa tokens'ların ve kanonik temel öğelerin nerede olduğunu söyleyin.
4. Bir geliştirme sunucusu çalıştırın ve Kilo'nun gerçek bir tarayıcıda render etmesini sağlayın, sonucu kontrol etmek için breakpoint'lere yeniden boyutlandırın.
5. Kilo'nun implementasyonunu yalnızca build edildiğini doğrulamak yerine ekran görüntülerine geri karşılaştırmasını sağlayarak yineleyin.

Build'i planlamak için Architect modunu kullanın, ardından Code moduna geçin ve somut kısıtlamalarla referanslarınızı ekleyin:

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the
  references across breakpoints.

Promptları küçük ve odaklı tutun, iyi yinelemeleri commit edin ve kötü olanları geri alın (Kilo'ya ne zaman geri aldığınızı söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilsin.

Modlar, özel kurallar ve MCP

Üç genişletme noktası Kilo Code'u sürekli tasarım çalışması için pratik hale getirir ve her üçü de açık bir tasarım iş akışına temiz bir şekilde eşlenir.

• Modlar (Architect → Code): Bir ekranın yapısını Architect modunda planlayın, ardından Code modunda uygulayın ve sorunları Debug modunda düzeltin — tasarım amacını implementasyondan ayırarak. Özel modlar, kendinize ait bir tasarım-inceleme geçişi kodlamanıza olanak tanır.
• Özel kurallar: Proje özel kuralları, tasarım kurallarınız için kalıcı bir evdir — tokens, ilkeler ve inceleme kontrol listeleri — her çalıştırmada okunur, böylece ajan markanıza uygun çalışır.
• MCP sunucuları: Kilo, pazaryeri üzerinden MCP sunucularını destekler — tasarım bağlamını ve harici araçları, özellikle Figma MCP sunucusunu getirmenin taşınabilir yolu, sadece Kilo'da değil, tüm ajanlarda çalışır.

Bunlar taşınabilir, çok-ajanlı yeteneklerdir — tam olarak Open Design'ın her proje için yeniden oluşturmak yerine düzenlediği türden şeyler.

Tasarım için Kilo Code vs Codex vs Claude Code vs Cursor vs Gemini CLI

Tasarım işi için tek bir kazanan yok — her ajan farklı bir güce sahip ve deneyimli ekipler bunları birlikte kullanır. Adil bir özet:

Toplulukta tekrar eden ortak kanı, zevkin insanlardan geldiğidir: tüm bunlar skill, referans ve kısıtlamalar olmadan jenerik bir estetiğe varsayılan olarak döner. Asıl çözülmesi gereken sorun budur — ve bu model şeklinde değil, tasarım-aracı şeklinde bir sorundur.

Tuzaklar ve "AI slop" görünümünden nasıl kaçınılır

AI tarafından oluşturulan tasarımla ilgili en yaygın şikayet, jenerik görünmesidir — yumuşak degradeler, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, "bunu bir AI yaptı" diye bağıran bir Inter-ve-mor hava. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI kopyasına sızan talimatlar bulunur. Bunların hiçbiri Kilo Code'a özgü değildir; herhangi bir agent küratörlü bir tasarım bağlamı olmadan çalıştığında olan şey budur.

• Estetik bir skill ekleyin: Küratörlü bir tasarım skill'i, agent'ı varsayılan görünüm yerine gerçek bir yöne yönlenmeye zorlar.
• Gerçek bir tarayıcıda doğrulayın: Mobilde düzenler sessizce bozulmasın diye, görüş özellikli bir model kullanarak kırılma noktaları genelinde render edin ve kendi kendini kontrol ettirin.
• Token'lar ve referanslar sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük kaldıraçtır.
• Kuralları özel kurallarda kodlayın: "Kahramanlık kartları yok, maksimum iki yazı tipi, marka öncelikli hiyerarşi" gibi stil kurallarını agent'ın her çalıştırmada okuduğu yere koyun.

Dikkat edin ki her bir risk azaltma yöntemi, agent'a küratörlü bir tasarım bağlamı sağlamakla ilgili. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmetli iştir.

Open Design içinde Kilo Code ile tasarım yapmak

Open Design, yukarıdaki iş akışının talep ettiği açık kaynak tasarım katmanıdır. Kilo Code'u birinci sınıf bir adaptör olarak ele alır ve onu küratörlü bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render pipeline'ı ve yerel bir masaüstü kullanıcı arayüzüyle sarar — böylece Kilo'yu iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren orada olur, her seferinde elle bir araya getirilmez. Her ikisi de açık kaynak ve local-first'tür, bu da eşleşmeyi doğal bir uyum haline getirir.

1. Open Design'ı kurun ve agent'ınız olarak Kilo Code'u seçin.
2. Kendi sağlayıcı anahtarınızla (BYOK) veya Kilo'nun gateway'iyle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy edilmez.
3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir beğeniyle desteler, prototipler ve açılış sayfaları oluşturun.
4. Her artifact ve DESIGN.md dosyası kendi repo'nuzda yaşar, barındırılan bir bulutta değil.

Aynı Kilo Code agent'ı, aynı anahtarlar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Local-first ve açık kaynak olduğu için işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizi terk etmez.

Sık sorulan sorular

1. 01 Kilo Code gerçekten tasarım işi yapabilir mi? +

   Evet — estetik bir skill, bir tasarım sistemi ve bağlamda gerçek referans görüntülerle Kilo Code, üretim kalitesinde, duyarlı UI üretir ve görme yeteneğine sahip bir model, çıktıyı referanslara karşı doğrular. Bu bağlam olmadan genel bir görünüme varsayılan olma eğilimindedir, ki Open Design'ın doldurduğu boşluk budur.

2. 02 Kilo Code ile tasarım yapmak için ödeme yapmam gerekir mi? +

   Kilo Code açık kaynak ve kurmak ücretsizdir. Kendi sağlayıcı API anahtarınızı getirirsiniz (BYOK) ve doğrudan o sağlayıcıya ödeme yaparsınız veya sağlayıcı maliyeti üzerinden Kilo'nun kendi gateway'ini kullanırsınız. Open Design her iki şekilde de kimlik bilgilerinizi asla proxy etmez.

3. 03 Kilo Code'u özellikle tasarım için iyi yapan nedir? +

   Model-agnostic ve açık kaynaktır, böylece hangi görme yeteneğine sahip model referans ekran görüntülerini en iyi okuyorsa onunla çalıştırabilir, tam olarak hangi bağlamın gönderildiğini inceleyebilir ve maliyet ile kimlik bilgilerini kontrolünüz altında tutabilirsiniz. Beğeni yine de sağladığınız tasarım sistemi, skill ve referanslardan gelir.

4. 04 Frontend tasarımı için Kilo Code mu Claude Code mu? +

   İkisi de güçlü. Claude Code, spesifik, kod tabanı farkında tasarım kararlarıyla tanınır; Kilo Code'un avantajı açık kaynak ve BYOK ile model-agnostic olmasıdır, böylece modeli siz seçersiniz. Birçok ekip her ikisini de kullanır — Open Design, tasarım iş akışınızı değiştirmeden agent'lar arasında geçiş yapmanıza olanak tanır.

5. 05 Kilo Code'u Figma'ya nasıl bağlarım? +

   Kilo'nun MCP pazarından veya MCP ayarlarından bir Figma MCP sunucusu ekleyin. Kilo daha sonra gerçek tasarım bağlamını — bileşenler, değişkenler, düzen verileri — çekerek oluşturulan kodun kaynağı yaklaşık olarak yansıtmak yerine tam olarak eşleştirmesini sağlar.

6. 06 Open Design, Kilo Code ile bağlantılı mı? +

   Hayır. Kilo Code, Kilo Code, Inc.'in bir ürünüdür; Open Design ise bunu birinci taraf adaptör olarak destekleyen bağımsız bir açık kaynak projesidir. Her ikisi de açık kaynak olmakla birlikte, ayrı projelerdir.

7. 07 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel öncelikli ve açık kaynaktır. Dosyalarınız, yapıtlarınız ve DESIGN.md kendi repo'nuzda kalır ve sağlayıcı kimlik bilgileriniz doğrudan temsilciniz tarafından kullanılır, hiçbir zaman Open Design sunucuları üzerinden yönlendirilmez.