102.7K+İndir
Kilo OpenDesign

Kilo ile
OpenDesign’da
tasarlayın.

OpenDesign'da Kilo Code ile arayüz tasarlama: seçtiğiniz model, kendi kural ve modlarınız, ekran görüntüsünden incelenmiş dosyaya kadar bir ürün sayfası görevi ve başlamadan önce bilmeniz gereken sınırlar.

OpenDesign'ı indirin Kuruluma gidin

KILO KILAVUZUNA ÜÇ ROTA

Kilo İçin Başlangıç Noktanızı Belirleyin

BU KILAVUZ · UI TASARIMI

Kilo'da Bir Ürün Arayüzünü Brief'ten HTML'e Taşıyın

Bu sayfa brief'i, referansları, tasarım kurallarını ve gözden geçirilmiş bir HTML sonucunu kapsar.

Bu kılavuzu okuyun KURULUM

Kilo'yu Sıfırdan Kurun

Temiz bir makineden Kilo Code'un arayüz oluşturup doğrulamasına kadar eksiksiz rota.

Kuruluma git KARŞILAŞTIRMA

Kilo'yu Diğer Ajanlarla Karşılaştırın

Kilo'nun tasarım çalışmalarında Codex, Claude Code ve Cursor'dan ayrıldığı noktalar ve başka bir iş akışının ne zaman daha iyi bir tercih olduğu.

Karşılaştırmayı görün
Bu Sayfada Örnek
  1. Örnek
  2. Uygunluk
  3. Uyumluluk
  4. Kurulum
  5. İş Akışı
  6. Kaynaklar
  7. Sınırlamalar
  8. SSS

Tek Bir Tam Kilo Tasarım Görevi

Bir Kilo Tasarım Görevi: Brief'ten Arayüze

Görev, teslim ettiğiniz brief ve kısıtlardan başlar, Kilo'nun döndürdüğü çıktıdan geçer ve tamam demeden önce hâlâ çalıştırdığınız kontrollere kadar uzanır. Aşağıdaki arayüz, bu sayfa için hazırlanmış örnek bir çalışmadır; kaydedilmiş bir Kilo çalıştırması değildir.

1Tasarım Brief'i ve Kısıtlar

Brief

Ekteki ekran görüntüsünü kullanarak bir outdoor marka ürün detay sayfası tasarlayın: galeri, fiyat, beden ve renk seçenekleri, sepete ekle, ilgili ürünler. Masaüstü ve telefon.

  • Tasarım sistemiAlbert Sans ve OpenDesign kağıt tuvalinde bir yeşil vurgu
  • Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma olmadan
  • EtkileşimlerGaleri küçük resimleri, seçenek seçimi, sepete ekle, ilgili ürünler kaydırması
  • ÇıktıSabit data-od-id kancaları taşıyan tek, kendi kendine yeten bir HTML dosyası

2Kim Ne Yapar: Siz, Kilo, OpenDesign

  • Siz

    Brief'i siz yazarsınız, tasarım sistemini seçersiniz ve kabul kriterlerini belirlersiniz.

  • Kilo

    Kilo yerleşimi planlar, HTML, CSS ve JavaScript yazar, ardından istek üzerine revize eder.

  • OpenDesign

    OpenDesign tasarım sistemini ve beceriyi sağlar, önizlemeyi oluşturur ve her sürümü bir proje dosyası olarak saklar.

  • İnceleme

    Teslimden önce görsel hiyerarşiyi, 8px ızgara aralığını, her iki kırılma noktasını ve her etkileşimi kontrol edersiniz.

3Kilo'nun Çıktısı: 1440px ve 390px'te Ürün Sayfası

Kilo'nun Çıktısı: 1440px ve 390px'te Ürün Sayfası — Masaüstü
Örnek gösterim

4Teslimden Önce İnceleme

Düzen

Izgara ve Boşluklar

Galeri ve bilgi 8px ızgaraya hizalanır; 1440'ta bilgi sütunu galeri yüksekliği içinde kalır.

Hiyerarşi

Görsel Hiyerarşi

Önce ad ve fiyat gelir, ardından seçenekler; vurgu rengi sepete ekle düğmesine ayrılmıştır.

Duyarlı

Mobil Düzen

Mobil sıralama: galeri, ad ve fiyat, seçenekler, tam genişlikte bir düğme; ilgili ürünler kaydırılır.

Etkileşim

Etkileşim Kontrolleri

Test edilecek etkileşimler: küçük resmi değiştir, beden seç, sepete ekle, ilgili öğeleri kaydır.

Uygunluk

Kilo Nereye Uyar — ve Nereye Uymaz

Kilo'nun Uygun Olduğu Durumlar

  • Ekran görüntüsü → arayüz için model seçimi. Kilo'yu, bir referans görselini en iyi şekilde duyarlı işaretlemeye dönüştüren görüntü yetenekli modele yönlendirin, ardından sonucu o görselle karşılaştırın.
  • Sağlayıcılar arasında BYOK. Anthropic, OpenAI, Google, OpenRouter ve diğerleri için kendi anahtarlarınızı veya Kilo'nun ağ geçidini kullanın; maliyeti ve kimlik bilgilerini kendi elinizde tutun.
  • Modlar, özel kurallar, MCP. Planlama için Architect modu, oluşturma için Code modu, konvansiyonlar için özel kurallar ve gerçek tasarım bağlamı için Figma MCP sunucusu.
  • Açık kaynak. İstemler ve bağlam yükleri incelenebilir, hiçbir şey gizli değildir ve Kilo IDE'nizde veya CLI'da çalışır.

Şu Durumlarda Başka Bir Workflow Seçin

  • Düzenlenebilir vektör dosyalarına ihtiyacınız var. Geri dönen şey HTML'dir, düzenlenebilir bir tasarım belgesi değil. İhtiyacınız olan varlık biçimi için ayrı bir vektör iş akışına bakın.
  • Referans ve kısıt yok. Tasarım sistemi veya örnek yoksa çıktı genelgeçer hale kayar; önce brief'i yazın.
  • Gerekli kimlik bilgisi eksik. Kilo'nun ya kendi sağlayıcı API anahtarınıza (BYOK) ya da Kilo'nun ağ geçidine ihtiyacı vardır. OpenDesign kimlik bilgilerini ne sağlar ne de vekil olarak sunar.
  • Ekibiniz OpenCode veya Aider'da çalışıyor. Bu ajanların kendi sayfaları var; kurulum farklı olsa da çalışma alanı taşınır. ilgili ajanlar bölümüne bakın.

Uyumluluk

Başlamadan Önce Kilo Gereksinimleri

Bu sayfa, OpenDesign masaüstü uygulaması üzerinden bağlanan Kilo'yu ele alır. Başvurular 6 Eylül 2026'da kontrol edilmiştir.

Araç KapsamıKilo, Kilo Code, Inc. tarafından

Kilo Code, Kilo Code, Inc. tarafından geliştirilen açık kaynaklı bir yapay zeka kodlama aracısıdır. VS Code, JetBrains IDE'lerinde ve terminalde çalışır: kod tabanınızı okur, dosyaları düzenler ve komutları çalıştırır. Buradaki konu, Kilo'nun kendi arayüzü değil, OpenDesign üzerinden Kilo ile arayüz tasarlamaktır. OpenDesign'in kurulum notları mevcut aracıları listeler.

Hesaplar ve Kimlik DoğrulamaSağladığınız bir sağlayıcı API anahtarı (BYOK) veya Kilo'nun

Kendi sağlayıcı API anahtarınız (BYOK) veya Kilo'nun ağ geçidi. Kendi sağlayıcı anahtarınızla (BYOK) veya Kilo'nun ağ geçidiyle kimlik doğrulayın; kimlik bilgileri makinenizde kalır. Burada hiçbir kota veya fiyat taahhüt edilmez.

Sistem ve SürümlerMasaüstü uygulama veya kaynak kod

Masaüstü sürümleri indirme sayfasında bulunur. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırırken geçerlidir; bir masaüstü paketi kurarken değil. Uyumlu minimum Kilo sürümü: bu sayfada doğrulanmamıştır.

Bağlantı KontrolüBaşarı sinyali

Yüklü sürümünüzün gösterdiği bağlantı talimatlarını kullanın, ardından küçük bir görev deneyin. Kilo'nun bunu tamamladığını ve çıktının açıldığını kontrol edin. Yalnızca indirmek, çalışan bir bağlantıyı kanıtlamaz.

Masaüstü uygulamasıyla başlayın

Üç Adımda Kilo Kurulumu

İndirmeyle başlayın, yüklü sürümünüz için Kilo kurulumunu tamamlayın, ardından küçük bir sonucu test edin. Bu yolu izlemek, OpenDesign'i kaynaktan derlemeyi gerektirmez.

  1. 1

    OpenDesign Masaüstü Uygulamasını İndirin

    Makineniz için paketi seçin, kurun ve uygulamayı başlatın.

    OpenDesign'ı indirin
    KONTROL NOKTASI
    Masaüstü uygulaması açılır. Zaten varsa sonraki adıma geçin; ikinci bir indirmeye gerek yoktur.
  2. 2

    Kilo Bağlantınızı Hazırlayın

    Yüklü sürümünüzle eşleşen Kilo talimatlarını kullanın. Kendi sağlayıcı anahtarınızla (BYOK) veya Kilo'nun ağ geçidiyle oturum açın; kimlik bilgileri makinenizde kalır.

    Kilo Code belgeleri 
    # 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

    Yayımlanmış kılavuzdaki Kilo kurulum notlarından alınmıştır; güncel komut için satıcı belgelerine bakın.

    KONTROL NOKTASI
    Aracının ve hesabın amaçladıklarınız olduğundan emin olun. Kullanılamıyorsa, daha büyük bir göreve başlamadan önce uyumluluğu gözden geçirin.
  3. 3

    Küçük Bir Kilo Görevi Çalıştırın

    Bir revizyon dahil tüm döngüyü değerlendirebilecek kadar küçük bir brief ile başlayın.

    Başlangıç brief’i

    Bir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluştur. Tasarım kurallarıma uy. Masaüstü ve mobil genişliklerde kontrol et.

    KONTROL NOKTASI
    Sonucu açın, kaydetme durumunu test edin, ardından belirli bir değişiklik isteyin. Oluşturulan dosya incelemeyi başlatır; onu bitirmez.

Bunun yerine OpenDesign'i kaynaktan çalıştırmak için teknik hızlı başlangıç bölümüne bakın.

Kilo tasarım iş akışı

Kilo Tasarım Görevinde Beş Adım

Açılış brief'inden gerçekten doğruladığınız bir dosyaya kadar izlenen tek bir ürün sayfası. Her adım; sizin girdinizi, Kilo'nun ne yaptığını, OpenDesign'in neyi katkıda bulunduğunu ve adımı kapatan kontrolü adlandırır.

  1. 1

    Tasarım Brief'i

    Sade ve kısa tutun — üç ila altı satır. Ekranın kimin için olduğunu, ne yapması gerektiğini ve hangi platformların önemli olduğunu söyleyin.

    • SizBrief'i siz yazarsınız ve varsa bir referans ekran görüntüsü eklersiniz.
    • KiloBrief'inizi ve projenin talimat dosyasını okur; bir ayrıntı belirsiz olduğunda tahmin etmek yerine sorar.
    • OpenDesignProjeyi, istem yüzeyini ve çıktı türüyle eşleşen beceriyi sağlar.
    • KontrolBrief'in kabul kriterlerini açıkça belirttiğini kontrol edin. Bunları şimdi yazmak, dosyayı sonradan düzeltmekten daha az maliyetlidir.
  2. 2

    Tasarım Kısıtları

    Bir tasarım sistemi artı birkaç kesin kural — markanızı taşıyan çıktı ile herhangi birine ait olabilecek çıktı arasındaki fark.

    • SizBir tasarım sistemi seçin, ardından kesme noktalarınızı ve görünmesi gereken bileşenleri adlandırın.
    • KiloHerhangi bir işaretleme yazmadan önce DESIGN.md token'larını ve duruş kurallarını bağlama yükler.
    • OpenDesignTasarım sistemi kitaplığını sunar ve seçtiğiniz sistemi beceri şablonuna bağlar.
    • KontrolToken'ların markanızla eşleştiğini doğrulayın: bir vurgu rengi, doğru yazı tipleri, doğru köşe yarıçapı.
  3. 3

    Arayüzü Oluştur

    Kilo tek bir kendi kendine yeten HTML dosyası yazar — düzen, stiller, etkileşimler, kararlı kancalar.

    • SizBuradaki işiniz beklemek veya açıklayıcı bir soruyu yanıtlamaktır. Yapılandırılacak bir şey yok.
    • KiloBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır, başarısız olanı onarır.
    • OpenDesignÇıktıyı proje klasörüne kaydeder ve önizlenebilmesi için indeksler.
    • KontrolHenüz bir şey yok — kaynağı okuyarak değil, render edilmiş halini değerlendirin.
  4. 4

    Önizleme

    OpenDesign dosyayı belirttiğiniz genişliklerde render eder. Değerlendirme burada, önizlemede gerçekleşir.

    • SizGenişlikleri değiştirin, etkileşimleri test edin ve belirli öğelere yorum yapın.
    • KiloÖnizlemede bıraktığınız yorumları okur ve bir sonraki revizyonu hazırlar.
    • OpenDesignÖnizlemeyi render eder ve yorumlar ile düzenlemelerin bunlara bağlanabilmesi için data-od-id hedeflerini sunar.
    • KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı ve odak durumlarını kontrol edin ve vurgunun ölçülü kalıp kalmadığını sorgulayın.
  5. 5

    Revize Et ve Doğrula

    Önizlemedeki öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosya olarak gelir; hiçbir şey sessizce üzerine yazılmaz.

    • SizYorumları isteklere dönüştürün ve görevin ne zaman bittiğine karar verin.
    • KiloDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
    • OpenDesignSürümleri yan yana tutar ve sonunda bir görüntü veya HTML'i dışa aktarır.
    • KontrolYalnızca değişen alanı yeniden kontrol edin, ardından her kesme noktası için tam sayfayı bir kez kontrol edin.

Kaynaklar

Kilo Tasarım Kaynakları

Skill'ler

Tasarım Skill'leri

Kilo'nun OpenDesign içinde üretebileceği çıktı türleri — her tür için bir beceri.

Skill'lere göz atın Tasarım sistemleri

Tasarım Sistemleri

Kilo bir şey üretmeden önce bağlanacak marka belirteçleri ve bileşenler.

Sistemlere göz atın Şablonlar

Şablonlar

Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.

Şablonlara göz atın

Sınırlamalar

Kilo'nun Durduğu Yer: Sınırlar, Manuel Kontroller, Yedekler

  • KapsamKilo, modelden bağımsızdır ve birçok sağlayıcıda BYOK'tur; Architect/Code/Debug/Ask modları ve MCP desteği vardır, böylece model seçimi ve kimlik bilgileri size ait kalır. Bu sayfa, OpenDesign içine bağlanmış bir ajan olarak Kilo hakkındadır, her Kilo özelliği hakkında değildir.
  • Kullanım SınırlarıMaliyet ve kullanım limitleri, kimlik doğrulaması yaptığınız kimlik bilgisine göre izlenir — kendi sağlayıcı API anahtarınız veya Kilo'nun ağ geçidi. Burada ücretsiz kota iddiasında bulunulmamaktadır.
  • AğProjenizde bulunan dosyalar çıkarımı çevrimdışı yapmaz. Hassas girdileri paylaşmadan önce, ajanın sağlayıcı ayarlarını ve veri politikalarını gözden geçirin.
  • Çıktı HTML'dirÜretilen çıktı bir HTML dosyasıdır; vektör tasarım dosyası değildir.
  • Manuel İncelemeÖnizlemede erişilebilirliği, gerçek içeriği, marka uyumunu ve etkileşim doğruluğunu siz incelersiniz. Ajanın yaptığı her öz denetim ilk geçiştir, onay değildir.
  • Yedek ÇözümAjan kullanılamadığında veya bir görev başarısız olduğunda, yüklü sürümünüz için bağlantı yönergelerine ve kimlik doğrulamaya başvurun. Yapılandırmayı değiştirmeden önce hatayı ve en son çalışan çıktıyı saklayın.

SSS

Kilo ve OpenDesign Hakkında Sık Sorulan Sorular

Kilo Code Gerçekten Tasarım İşi Yapar mı?
Evet — bir estetik skill, bir tasarım sistemi ve bağlamda gerçek referans görselleriyle Kilo Code, üretim kalitesinde, duyarlı (responsive) UI üretir ve görsel yeteneğe sahip bir model çıktıyı referanslara karşı doğrular. Bu bağlam olmadan genellikle jenerik bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Kilo Code ile Tasarım Yapmanın Bir Maliyeti Var mı?
Kilo Code açık kaynaklıdır ve kurulumu ücretsizdir. Kendi sağlayıcı API anahtarınızı getirirsiniz (BYOK) ve ödemeyi doğrudan o sağlayıcıya yaparsınız ya da Kilo'nun kendi gateway'ini sağlayıcı maliyetiyle kullanırsınız. OpenDesign her iki durumda da kimlik bilgilerinizi asla proxy'lemez.
Kilo Code'u Tasarıma Uygun Kılan Nedir?
Model bağımsızdır ve açık kaynaklıdır; bu sayede referans ekran görüntülerini en iyi okuyan görsel yeteneğe sahip modeli seçebilir, gönderilen bağlamı tam olarak inceleyebilir ve maliyeti ile kimlik bilgilerini kendi kontrolünüzde tutabilirsiniz. Beğeni (taste) yine de sağladığınız tasarım sisteminden, skill'den ve referanslardan gelir.
Frontend Tasarım İçin Kilo Code mu Claude Code mu?
İkisi de güçlüdür. Claude Code, kod tabanına özgü, spesifik tasarım kararlarıyla tanınır; Kilo Code'un farkı, BYOK ile açık kaynaklı ve model bağımsız olmasıdır, böylece modeli siz seçersiniz. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.
Kilo Code Figma'ya Nasıl Bağlanır?
Kilo'nun MCP marketplace'inden veya MCP ayarlarından bir Figma MCP sunucusu ekleyin. Kilo daha sonra bileşenler, değişkenler, düzen verileri gibi gerçek tasarım bağlamını çekebilir; böylece üretilen kod kaynağa yaklaşmak yerine onunla eşleşir.
Kilo Code Nedir
Kilo Code, Kilo Code, Inc. tarafından geliştirilen açık kaynaklı bir yapay zeka kodlama ajanıdır. VS Code eklentisi, JetBrains IDE'leri ve komut satırı arayüzü olarak çalışır — deponuzu okur, dosyaları düzenler, komutları çalıştırır ve yalnızca satırları tamamlamak yerine doğal dil görevlerinden işi planlar ve doğrular. Tanımlayıcı özelliği modelden bağımsız olmasıdır: onu hangi modelin yönlendireceğini siz seçersiniz ve kendi sağlayıcı anahtarlarınızı getirirsiniz.

Tasarım çalışmaları için iki özellik öne çıkar. Modelden bağımsız olduğu için, bir referans ekran görüntüsünü en iyi okuyan ve düzen hakkında akıl yürüten güçlü görsel yetenekli modeli ona yöneltebilirsiniz. Açık kaynaklı ve BYOK olduğu için de tam olarak hangi bağlamın gönderildiğini inceleyebilir, kimlik bilgilerini ve maliyeti kendi kontrolünüz altında tutabilirsiniz.

Ajan modları: Kilo özelleştirilmiş modlar sunar — planlama için Architect, inşa etmek için Code, düzeltmek için Debug ve sorular için Ask — ayrıca özel modlar; böylece bir tasarımı planlayıp ardından onu ayrı, odaklı geçişlerde uygulayabilirsiniz.

Özel kurallar + MCP: Kalıcı bağlam için proje düzeyindeki özel kuralları okur ve MCP sunucularını (bir MCP pazarıyla birlikte) destekler; böylece canlı bir Figma dosyası veya tasarım araçları gibi harici bağlam ekleyebilirsiniz.

Kendi anahtarlarınızı getirin: Kilo birçok sağlayıcıda BYOK'tur — Anthropic, OpenAI, Google, OpenRouter ve daha fazlası — veya sağlayıcı maliyetinden 500+ modeli sunan Kilo'nun kendi ağ geçidini kullanabilirsiniz.

Kimlik bilgisi: kendi sağlayıcı API anahtarınız (BYOK — Anthropic, OpenAI, Google, OpenRouter ve daha fazlası) veya Kilo'nun kendi ağ geçidi

Üretici: Kilo Code, Inc. (açık kaynak)

Lisans: açık kaynak
Açık, Modelden Bağımsız Bir Ajan Neden Tasarıma Uygundur?
Kilo Code'un tasarım avantajı açıklıktan ve model seçiminden gelir — ancak her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.

Tasarım gereği modelden bağımsız: Modeli siz seçtiğiniz için, Kilo'yu referans ekran görüntülerini en iyi okuyan görsel yetenekli modelle yönlendirebilir — 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, böylece tam olarak hangi bağlamın ve istemlerin gönderildiğini görebilirsiniz — ajanın tek seferlik stiller uydurması yerine gerçek tasarım yapı taşlarınızı yeniden kullanmasını istediğinizde kullanışlıdır.

Özel kurallardaki konvansiyonlar: Proje özel kuralları (artı Figma için bir MCP sunucusu) ajanı tokenlarınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.

Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.

Ders her ajanın öğrettiği aynı ders: Kilo Code varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler; bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Kilo Code'u Tasarım İçin Sıfırdan Kurma
Kurulum sırası: yükle → bir sağlayıcı bağla → özel kurallar ekle → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.

Tasarım kurallarınızı kodlayın: Token'larınızı, primitive'lerinizi ve konvansiyonlarınızı Kilo'nun özel kurallarına koyun ve ajanı bunlara yönlendirin; böylece çıktı genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.

Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP'si bağlayın; böylece Kilo gerçek bir tarayıcıda render eder ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını farklı kesme noktalarında kontrol eder.

Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.

# 1. Kilo Code uzantısını VS Code # (veya JetBrains) marketinden yükleyin ya da CLI'yi kurun. # 2. Projenizi açın ve oturum açın / bir sağlayıcı anahtarı ekleyin cd your-project kilo # sağlayıcınızı (BYOK) veya Kilo'nun ağ geçidini bağlayın # 3. Proje bağlamı ekleyin # bu projenin tasarım konvansiyonları için özel kurallar oluşturun # 4. Figma MCP sunucusunu bağlayın (isteğe bağlı, tasarım teslimi için) # MCP marketinden / MCP ayarlarından ekleyin
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Ekran Görüntüsünden Arayüze Döngü
Kilo Code ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüsünü çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemek — çıktıyı referansa karşılaştırmak için görü yeteneğine sahip bir modelden yararlanmaktır.

Elindeki en net görsel referanslardan başlayın — yalnızca tek bir ana görsel değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.

İstemde spesifik olun; belirsiz istemler güçlü bir modelle bile genel kullanıcı arayüzü üretir.

Tasarım sisteminizi ve konvansiyonlarınızı Kilo'nun özel kurallarında tutun ve ajana token'ların ve kanonik primitive'lerin nerede olduğunu söyleyin.

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 kesme noktalarına göre yeniden boyutlandırın.

Kilo'nun uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.

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

İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda Kilo'ya söyleyin); böylece her geçiş temiz bir temel üzerine inşa eder.

# Architect modunda planlayın, ardından Code modunda oluşturun: > Bu tasarımı @reference-desktop.png ve @reference-mobile.png dosyalarından React + Vite + Tailwind + TypeScript ile uygulayın. Mevcut tasarım sistemi bileşenlerimi ve token'larımı özel kurallardan yeniden kullanın. Boşluk, düzen ve hiyerarşiyi eşleştirin; duyarlı hale getirin. Tarayıcıda render edin ve kesme noktaları boyunca referanslarla eşleşene kadar yineleyin.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Modlar, özel kurallar ve MCP
Üç uzantı noktası, Kilo Code'u sürdürülebilir tasarım çalışması için pratik hale getirir ve üçü de açık bir tasarım iş akışına temiz biçimde oturur.

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 niyetini uygulamadan ayırın. Özel modlar, kendi tasarım inceleme geçişinizi kodlamanıza olanak tanır.

Özel kurallar: Proje özel kuralları, tasarım konvansiyonlarınızın kalıcı evidir — token'lar, temel öğeler ve inceleme kontrol listeleri — her çalıştırmada okunur, böylece ajan markanıza göre çalışır.

MCP sunucuları: Kilo, MCP sunucularını pazar yeri aracılığıyla destekler — tasarım bağlamını ve harici araçları getirmenin taşınabilir yolu; en alakalı olarak bir Figma MCP sunucusu, yalnızca Kilo'da değil, ajanlar arasında çalışır.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam olarak OpenDesign'in her proje için yeniden oluşturmak yerine düzenlemek için inşa edildiği türden şeyler.
Tasarım İçin Kilo Code, Codex, Claude Code, Cursor ve Gemini CLI Karşısında
Tasarım çalışmaları için tek bir kazanan yoktur — her ajanın farklı bir gücü vardır ve deneyimli ekipler onları üst üste kullanır. Adil bir özet:

Kilo Code — Açık kaynaklı ve birçok sağlayıcıda BYOK ile modelden bağımsız; Architect/Code modları ve MCP — Görev başına kendi modelinizi seçmek ve maliyet ile kimlik bilgilerini kontrolünüz altında tutmak

Codex — Bir frontend becerisiyle güçlü görsel cilalama; sanal alanda asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları

Claude Code — Belirli tasarım kararları (hex, aralık, tipografi) ve kod tabanına duyarlı UX — Frontend akıl yürütme ve büyük bağlamlı refaktörler

Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması

Gemini CLI — Güçlü çok kipli görüntü anlama ve 1M token bağlam — Ekran görüntüsü ağırlıklı işler ve tüm bir tasarım sistemini bağlamda tutmak

Yinelenen topluluk kararı, zevkin insanlardan geldiğidir: hepsi beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak geçer. Çözülmesi gereken gerçek sorun budur — ve bu model biçimli değil, tasarım aracı biçimlidir.

Ajan — Tasarım gücü — En uygun olduğu yer
Tuzaklar ve “AI slop” Görünümünden Kaçınma
AI tarafından üretilen tasarımla ilgili en yaygın şikâyet, genel görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, abartılı gölgeler, “bunu bir AI yaptı diye bağıran” bir Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve arayüz metnine sızan talimatlar yer alır. Bunların hiçbiri Kilo Code'a özgü değildir; bunlar, herhangi bir ajanın özenle hazırlanmış bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.

Estetik bir beceri ekleyin: Özenle hazırlanmış bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yön belirlemeye zorlar.

Gerçek bir tarayıcıda doğrulayın: Düzenlerin mobilde sessizce bozulmaması için, kesme noktaları boyunca işleyip özdenetim yapabilen görü yeteneğine sahip bir model kullanın.

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 tek kaldıraçtır.

Kuralları özel kurallara kodlayın: “hero kart yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.

Her hafifletmenin, ajana özenle hazırlanmış bir tasarım bağlamı sağlamakla ilgili olduğuna dikkat edin. Bu bağlamı her projede elle sürdürmek, OpenDesign tarafından ortadan kaldırılan zahmettir.
OpenDesign İçinde Kilo Code ile Tasarım Yapma
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Kilo Code'u birinci taraf adaptör olarak ele alır ve onu özenle hazırlanmış bir beceri ve tasarım sistemi kitaplığı, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar — böylece Kilo'yu iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. İkisi de açık kaynaklı ve yerel önceliklidir; bu da eşleşmeyi doğal bir uyum haline getirir.

Kendi sağlayıcı anahtarınızla (BYOK) veya Kilo'nun ağ geçidiyle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.

Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.

Her artefakt ve DESIGN.md dosyası barındırılan bir bulutta değil, kendi deponuzda yaşar.

Aynı Kilo Code ajanı, aynı anahtarlar — üstelik etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışıyla. Yerel öncelikli ve açık kaynaklıdır; bu yüzden işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden çıkmaz.

OpenDesign kurun ve ajanınız olarak Kilo Code'u seçin.
OpenDesign Kilo Code ile bağlantılı mı?
Hayır. OpenDesign bağımsız bir projedir; her ikisi de açık kaynaklıdır, ancak ayrıdırlar.