DAHA FAZLA OKUMA
Kiro İçin Ek Okumalar
Kiro tasarım çalışmaları için eğitimler, dokümantasyon ve adım adım anlatımlar; yayımlanmış kılavuzda toplandığı şekilde.
Kiro 
OpenDesign Kiro ile
OpenDesign’da
tasarlayın.
OpenDesign'da Kiro ile arayüz tasarlama: herhangi bir koddan önce bir spec, metin ve hata yönetimi için steering dosyaları, brief'ten incelenmiş dosyaya kadar tek bir checkout görevi ve başlamadan önce bilinmesi gereken sınırlar.
KIRO İÇİN ÜÇ BAŞLANGIÇ NOKTASI
Kiro ile Nereden Başlamalı
BU KILAVUZ · UI TASARIMI
Kiro ile Bir Ürün Arayüzü Oluşturun
Bu kılavuz bir brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucunu kapsar.
Bu kılavuzu okuyun KURULUMKiro'yu Sıfırdan Kurun
Temiz bir makineden UI oluşturan ve doğrulayan bir Kiro CLI'ye giden tam yol.
Kuruluma git KARŞILAŞTIRMAKiro'yu Diğer Ajanlarla Karşılaştırın
Kiro'nun tasarım işleri için Codex, Claude Code ve Cursor ile nasıl karşılaştırıldığı—ve ne zaman başka bir iş akışının seçileceği.
Karşılaştırmayı görünTek Bir Eksiksiz Kiro Tasarım Görevi
Brief'ten Arayüze: Bir Kiro Tasarım Görevi
Baştan sona ele alınan tek bir görev: teslim ettiğiniz brief ve kısıtlamalar, geri dönen çıktı ve bitmiş saymadan önce yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir; kaydedilmiş bir Kiro çalışması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkteki spesifikasyona göre iki sayfalık bir ödeme akışı tasarlayın: kargo ve ödeme, görünür kalan bir sipariş özetiyle. Metin ve hata yönetimi için yönlendirme dosyalarını kullanın. Masaüstü ve telefon.
- Tasarım sistemiOpenDesign kağıt tuvali: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma çubuğu yok
- EtkileşimlerAdım navigasyonu, adres otomatik tamamlama, kart doğrulama ve bir promosyon kodu alanı
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Bölümü: Siz, Kiro ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Kiro
Yerleşimi planlar, HTML, CSS ve JavaScript'i yazar ve istek üzerine revize eder.
- OpenDesign
Tasarım sistemini ve yeteneği sağlar, önizlemeyi oluşturur ve her sürümü bir proje dosyası olarak saklar.
- İnceleme
Teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edin.
3Kiro Çıktısı: 1440px ve 390px'te Ödeme Akışı
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Form ve özet 8px ızgaraya hizalandı; özet masaüstünde sabit kalır ve telefonda daralır.
Hiyerarşi
Görsel Hiyerarşi
Soru, ardından alanlar, ardından düğme; vurgu yalnızca geçerli adımı vurgular.
Duyarlı
Mobil Düzen
Özet, formun üzerinde bir toplam satırına daralır; düğme tam genişliğe yayılır.
Etkileşim
Etkileşim Kontrolleri
Bir adres hatası tetikleyin, bir promosyon kodu uygulayın ve sepete dönün.
Uygunluk
Kiro'nun Göreve Uyduğu ve Uymadığı Durumlar
Kiro'nun Uygun Olduğu Durumlar
- Koddan önce spesifikasyon. Kiro önceden gereksinimleri, bir tasarım belgesini ve bir görev listesini hazırlar; böylece derleme başlamadan önce yerleşimi ve kapsamı düzeltebilirsiniz.
- Yönlendirme dosyaları. Standartlarınız, kurallarınız ve token'larınız her çalıştırmaya taşınır, böylece çıktı varsayılan bir görünüm yerine bir markayla eşleşir.
- Aracı kancaları. Otomasyonlar, dosya kaydetme gibi olaylarda tetiklenir—belleğe güvenmeden bir doğrulama veya inceleme adımını zorunlu kılmak için bir yer.
- MCP ve başlaması ücretsiz. Kiro CLI, harici bağlam için MCP sunucularını yönetir, Builder ID, Google, GitHub veya kuruluşunuz üzerinden oturum açar ve önizlemede başlaması ücretsizdir.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Çıktı HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gerekli varlık biçiminiz için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlamalarınız yok. Bir tasarım sistemi veya örnekler olmadan çıktı genel bir görünüme kayar; önce brief'i yazın.
- Bu aracının ihtiyaç duyduğu kimlik bilgisine sahip değilsiniz. Gerekli: AWS Builder ID, Google, GitHub veya AWS IAM Identity Center (AWS hesabı gerekmez). OpenDesign kimlik bilgilerini ne sağlar ne de vekillik eder.
- Ekibiniz Cursor veya Antigravity'de çalışıyor. Bu aracıların kendi sayfaları var; çalışma alanı aynı kalır, ancak kurulum farklıdır. Bkz. ilgili aracılar.
Uyumluluk
Başlamadan Önce Kiro Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Kiro'ya odaklanır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıKiro, Amazon tarafından
Kiro, Amazon (AWS) tarafından geliştirilen, IDE, CLI ve web arayüzü olarak sunulan, prototipten üretime kadar spesifikasyon odaklı geliştirme için tasarlanmış bir aracı yapay zekadır. Önizleme aşamasındadır. Bu sayfa, Kiro'nun kendi arayüzünü değil, OpenDesign aracılığıyla Kiro ile arayüz tasarlamayı kapsar. OpenDesign'ın kurulum notları mevcut aracıları listeler.
Hesaplar ve Kimlik DoğrulamaAWS Builder ID, Google, GitHub veya AWS IAM
Kimlik doğrulama seçenekleri: AWS Builder ID, Google, GitHub veya AWS IAM Identity Center (AWS hesabı gerekmez). AWS Builder ID'niz veya başka bir yöntemle oturum açın—kimlik bilgileri makinenizde kalır. Bu sayfa kotalar veya fiyatlandırma hakkında hiçbir taahhütte bulunmaz.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü derlemeleri için indirme sayfasına bakın. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri yalnızca kaynaktan çalıştırma için geçerlidir, bir masaüstü paketi yüklemek için değil. Minimum uyumlu Kiro sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Yüklü sürümünüzdeki bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Kiro'nun bunu ele aldığını ve çıktının açıldığını doğrulayın. Tek başına indirme, çalışan bir bağlantıyı garanti etmez.
Masaüstü uygulamasıyla başlayın
Üç Adımda Kiro Kurulumu
İndirerek başlayın, yüklü sürümünüz için Kiro kurulumunu tamamlayın, ardından küçük bir sonucu doğrulayın. Bu yol için OpenDesign'ı kaynaktan derlemek gerekli değildir.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınız için paketi seçin, yükleyin ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten yüklü mü? Sonraki adıma geçin; yeniden indirmeye gerek yok. - 2
Kiro Bağlantınızı Hazırlayın
Yüklü sürümünüzde sağlanan Kiro talimatlarını izleyin. AWS Builder ID'niz veya başka bir oturum açma yöntemiyle kimlik doğrulayın—kimlik bilgileri makinenizde kalır.
Kiro CLI belgeleri# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command) # 2. Authenticate — opens your browser to complete sign-in kiro-cli login # choose Builder ID, Google, GitHub, or your organization # 3. Confirm you are signed in kiro-cli whoamiYayımlanmış kılavuzdaki Kiro kurulum notlarından; güncel komut için satıcı belgelerine bakın.
KONTROL NOKTASIHedeflenen aracıyı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir göreve başlamadan önce uyumluluğu kontrol edin. - 3
Küçük Bir Kiro Görevi Çalıştırın
Tüm döngüyü, bir revizyon dahil, değerlendirebilmek için kısa bir brief ile başlayın.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluştur. Tasarım kurallarımı kullan. Masaüstü ve mobil genişliklerde doğrula.
KONTROL NOKTASISonucu açın, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya inceleme sürecini başlatır; sonuçlandırmaz.
OpenDesign'ı kaynaktan çalıştırmak için bunun yerine teknik hızlı başlangıç bölümüne bakın.
Kiro tasarım iş akışı
Kiro'nun Beş Adımlı Tasarım İş Akışı
Tek bir ödeme görevi, brief'inizden doğrulanmış bir dosyaya giden yolu izler. Her adım, ne sağladığınızı, Kiro'nun ne yaptığını, OpenDesign'ın ne katkıda bulunduğunu ve neyi kontrol ettiğinizi gösterir.
- 1
Tasarım Brief'i
Sade tutun: hedef kitleyi, ekranın işini ve platformları belirten üç ila altı satır.
- SizBrief'i siz yazarsınız; varsa bir referans ekran görüntüsü ekleyin.
- KiroKiro brief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda sorar.
- OpenDesignOpenDesign projeyi, istem yüzeyini ve çıktı türü için yeteneği sağlar.
- KontrolBrief'in kabul kriterlerini belirttiğini kontrol edin. Bunları şimdi eklemek, oluşturmadan sonra eklemekten daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi artı birkaç kesin kural. Bu kombinasyon çıktıyı genel yerine markaya uygun tutar.
- SizBir tasarım sistemi seçin; kırılma noktalarını ve kullanılması gereken bileşenleri belirtin.
- KiroKod yazmadan önce Kiro, DESIGN.md token'larını ve duruş kurallarını bağlama yükler.
- OpenDesignOpenDesign tasarım sistemi kitaplığını sunar ve seçileni yetenek şablonuna bağlar.
- KontrolToken'lar markanızla eşleşir. Bir vurgu rengi, doğru fontlar, doğru radius.
- 3
Arayüzü Oluştur
Kiro kendi kendine yeten bir HTML dosyası üretir: yerleşim, stiller, etkileşimler ve kararlı kancalar.
- SizBekleyin veya açıklayıcı bir soruyu yanıtlayın. Yapılandırma gerekmez.
- KiroKiro bölümleri planlar, HTML, CSS ve JavaScript yazar, dosyayı çalıştırır ve başarısız olanı düzeltir.
- OpenDesignOpenDesign çıktıyı proje klasörüne kaydeder ve önizleme için dizinler.
- KontrolHenüz bir şey yok. Dosyayı oluşturulduktan sonra değerlendirin, kaynağından değil.
- 4
Önizleme
Dosya, istediğiniz genişliklerde OpenDesign içinde oluşturulur. Tasarım yargısının gerçekleştiği yer burasıdır.
- SizGenişlikleri değiştirin, etkileşimlerde tıklayın, öğelere yorum bırakın.
- KiroKiro önizlemedeki yorumlarınızı okur ve bir sonraki revizyonu hazırlar.
- OpenDesignOpenDesign önizlemeyi oluşturur ve yorumlar ile düzenlemeler için
data-od-idhedeflerini kullanıma sunar. - KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
- 5
Revize Et ve Doğrula
Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
- SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
- KiroKiro değişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignOpenDesign sürümleri yan yana tutar; işiniz bittiğinde bir görsel veya HTML'yi dışa aktarır.
- KontrolÖnce sadece değişen alanı, ardından her bir kırılma noktasında sayfanın tamamını bir kez yeniden kontrol edin.
Kaynaklar
Kiro Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Kiro'nun OpenDesign içinde üretebileceği yapıt türleri; her tür için bir beceri.
Tasarım Sistemleri
Kiro herhangi bir şey oluşturmadan önce bağlanması gereken marka token’ları ve bileşenleri.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Kiro Sınırları, Manuel Kontroller ve Yedekler
- KapsamKiro CLI ajanı terminalinize koyar — etkileşimli sohbet oturumu, özel ajanlar, yönlendirme dosyaları, ajan kancaları ve Model Context Protocol sunucuları. Bu sayfa, OpenDesign hizmetine bağlanan bir ajan olarak Kiro'yu ele alır; tüm Kiro özelliklerini değil.
- Kullanım LimitleriKullanım limitleri ve maliyet, kullandığınız kimlik bilgisine (AWS Builder ID, Google, GitHub veya AWS IAM Identity Center (AWS hesabı gerekmez)) göre değişir. Bu sayfa ücretsiz kotalar hakkında herhangi bir iddiada bulunmaz.
- AğYerel proje dosyaları, çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
- Çıktı HTML'dirArtifact'lar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin tarafınızdan incelenir. Ajan tarafından yapılan herhangi bir kendi kendini kontrolü ilk geçiş olarak değerlendirin.
- Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, kurulu sürümün bağlantı talimatlarını ve kimlik doğrulamasını kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan üretilen dosyayı koruyun.
SSS
Kiro ve OpenDesign Hakkında Sık Sorulan Sorular
Kiro CLI Gerçekten Tasarım İşini Halleder mi?
Evet — bağlamda bir estetik skill, bir design system ve gerçek referans görseller olduğunda Kiro CLI, üretim kalitesinde, duyarlı (responsive) UI üretir; spec odaklı workflow'u da build'i belirtilen amaca sadık tutar. Bu bağlam olmadan genelde jenerik bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da budur.
Kiro CLI'yi Kullanmak İçin AWS Hesabına İhtiyacım Var mı?
Hayır — Kiro, AWS Builder ID, Google, GitHub veya kuruluşunuz (AWS IAM Identity Center) ile oturum açmanıza izin verir ve kullanmak için bir AWS hesabına gerek yoktur. Kiro önizleme aşamasındadır ve başlaması ücretsizdir. OpenDesign da her koşulda kimlik bilgilerinizi proxy'lemez.
Kiro CLI'ye Tasarım Avantajını Ne Sağlar?
Spec odaklı workflow'u: Kiro, kod yazmadan önce gereksinimleri, bir tasarım belgesini ve bir görev listesini yazar; böylece build taahhüt edilmeden önce yerleşimi ve kapsamı düzeltirsiniz. Steering dosyaları kurallarınızı taşır ve hook'lar kontrolleri zorunlu kılabilir — ancak zevk yine de sağladığınız design system, skill ve referanslardan gelir.
Ön Yüz Tasarımı: Kiro CLI mı Claude Code mu?
İkisi de güçlü. Claude Code, kod tabanına özgü, bilinçli tasarım kararlarıyla tanınır; Kiro CLI'nin avantajı ise steering ve hook'larla spec odaklı, incelenebilir workflow'udur. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım workflow'unuzu değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
Kiro CLI'yi Harici Tasarım Araçlarına Nasıl Bağlarım?
Kiro CLI, Model Context Protocol (MCP) sunucularını yönetir — bunları eklemek için kiro-cli mcp kullanın. Bir MCP sunucusu, ajana gerçek tasarım bağlamı ve araçları taşıyabilir; böylece üretilen kod kaynağa yaklaşmak yerine onunla eşleşir.
Kiro CLI Tam Olarak Nedir
Kiro, Amazon'dan gelen ve IDE, komut satırı arayüzü ve web arayüzü olarak sunulan, sizi spec odaklı geliştirme ile prototipten üretime taşımak için geliştirilmiş ajan tabanlı bir yapay zekadır. Kiro CLI bu ajanı terminalinize getirir: etkileşimli bir sohbet oturumu başlatabilir, ajanlar oluşturup yönetebilir ve Model Context Protocol sunucularını çalıştırabilirsiniz — hepsi komut satırından. Kiro önizleme aşamasındadır.
Tasarım işleri için belirleyici özellik iş akışıdır. Bir istemi doğrudan koda dönüştürmek yerine Kiro önce bir spec yazar — gereksinimler, bir tasarım belgesi ve sıralı bir görev listesi — ve buna göre uygular. Bu, herhangi bir UI oluşturulmadan önce ajanın planını görünür ve incelenebilir kılar; bu da tasarım kararlarının nasıl alınması gerektiğine temiz bir şekilde uyar: önce niyet, sonra yürütme.
Spec'ler: Kiro, kod yazmadan önce bir istemi yapılandırılmış bir spec'e dönüştürür — gereksinimler, bir tasarım belgesi ve ayrı görevler — böylece plan baştan incelenebilir.
Steering + kancalar: Steering dosyaları standartlarınızı, kurallarınızı ve tercih ettiğiniz araçları her çalıştırmaya taşır; ajan kancaları, arka plan görevlerini otomatik çalıştırmak için dosya kaydetme gibi olaylarda tetiklenir.
Başlamak ücretsiz, MCP'ye hazır: Bir Builder ID, Google, GitHub veya kuruluşunuzla oturum açın ve ücretsiz başlayın; Kiro CLI ayrıca harici bağlam getirmek için MCP sunucularını yönetir.
Kimlik bilgisi: AWS Builder ID, Google, GitHub veya kiro-cli login aracılığıyla AWS IAM Identity Center (AWS hesabı gerekmez)
Durum: Önizlemede; IDE, CLI ve web arayüzü olarak kullanılabilir
Sağlayıcı: Amazon (AWS)
Tasarım işleri için belirleyici özellik iş akışıdır. Bir istemi doğrudan koda dönüştürmek yerine Kiro önce bir spec yazar — gereksinimler, bir tasarım belgesi ve sıralı bir görev listesi — ve buna göre uygular. Bu, herhangi bir UI oluşturulmadan önce ajanın planını görünür ve incelenebilir kılar; bu da tasarım kararlarının nasıl alınması gerektiğine temiz bir şekilde uyar: önce niyet, sonra yürütme.
Spec'ler: Kiro, kod yazmadan önce bir istemi yapılandırılmış bir spec'e dönüştürür — gereksinimler, bir tasarım belgesi ve ayrı görevler — böylece plan baştan incelenebilir.
Steering + kancalar: Steering dosyaları standartlarınızı, kurallarınızı ve tercih ettiğiniz araçları her çalıştırmaya taşır; ajan kancaları, arka plan görevlerini otomatik çalıştırmak için dosya kaydetme gibi olaylarda tetiklenir.
Başlamak ücretsiz, MCP'ye hazır: Bir Builder ID, Google, GitHub veya kuruluşunuzla oturum açın ve ücretsiz başlayın; Kiro CLI ayrıca harici bağlam getirmek için MCP sunucularını yönetir.
Kimlik bilgisi: AWS Builder ID, Google, GitHub veya kiro-cli login aracılığıyla AWS IAM Identity Center (AWS hesabı gerekmez)
Durum: Önizlemede; IDE, CLI ve web arayüzü olarak kullanılabilir
Sağlayıcı: Amazon (AWS)
Spec odaklı geliştirme tasarıma neden uyar
Kiro CLI'nin tasarım avantajı iş akışından gelir — ancak her ajan gibi, zevk yine de sağlanmalıdır.
Piksellerden önce niyet: Kiro önce bir spec ve bir tasarım belgesi yazdığı için, ajan genel bir uygulamaya bağlanmadan önce düzen, hiyerarşi ve kapsamı planlama aşamasında düzeltebilirsiniz.
Steering markanızı taşır: Steering dosyaları token'larınızı, bileşenlerinizi ve kurallarınızı her çalıştırmada ajanın önünde tutar, böylece çıktı varsayılan bir görünüm yerine bir markaya göre çalışır.
Kancalar döngüyü zorunlu kılar: Ajan kancaları kaydetme sırasında kontrolleri otomatik çalıştırabilir — ajanın hatırlamasına güvenmek yerine bir doğrulama veya inceleme adımını bağlayabileceğiniz bir yer.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Ders her ajanın öğrettiğiyle aynıdır: Kiro CLI varsayılan olarak zevke sahip değildir. Bir spec bir yapıyı dürüst tutar, ancak iyi tasarımı yalnızca ona kısıtlamalar verdiğinizde ü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ı).
Piksellerden önce niyet: Kiro önce bir spec ve bir tasarım belgesi yazdığı için, ajan genel bir uygulamaya bağlanmadan önce düzen, hiyerarşi ve kapsamı planlama aşamasında düzeltebilirsiniz.
Steering markanızı taşır: Steering dosyaları token'larınızı, bileşenlerinizi ve kurallarınızı her çalıştırmada ajanın önünde tutar, böylece çıktı varsayılan bir görünüm yerine bir markaya göre çalışır.
Kancalar döngüyü zorunlu kılar: Ajan kancaları kaydetme sırasında kontrolleri otomatik çalıştırabilir — ajanın hatırlamasına güvenmek yerine bir doğrulama veya inceleme adımını bağlayabileceğiniz bir yer.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Ders her ajanın öğrettiğiyle aynıdır: Kiro CLI varsayılan olarak zevke sahip değildir. Bir spec bir yapıyı dürüst tutar, ancak iyi tasarımı yalnızca ona kısıtlamalar verdiğinizde ü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ı).
Tasarım için Kiro CLI'yi Sıfırdan Kurun
Kurulum sırası: yükle → kimlik doğrula → steering ve bir tasarım spesifikasyonu ekle → bir skill ekle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: token'larınızı, temel bileşenlerinizi ve kurallarınızı steering dosyalarına koyun; böylece ajan her çalıştırmada bunları okur ve çı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 sunucusu bağlayın; böylece Kiro gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arası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.
Önceki kılavuzdan geçmiş bir komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Tasarım kurallarınızı kodlayın: token'larınızı, temel bileşenlerinizi ve kurallarınızı steering dosyalarına koyun; böylece ajan her çalıştırmada bunları okur ve çı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 sunucusu bağlayın; böylece Kiro gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arası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. Kiro CLI'yi kurun (macOS/Linux/Windows komutu için kiro.dev/docs/cli'ye bakın)
# 2. Kimlik doğrulayın — oturum açmayı tamamlamak için tarayıcınızı açar
kiro-cli login # Builder ID, Google, GitHub veya kuruluşunuzu seçin
# 3. Oturum açtığınızı doğrulayın
kiro-cli whoami
# 4. Projenizde etkileşimli bir oturum başlatın
cd your-project
kiro-cli chat
# 5. MCP sunucularını bağlayın (isteğe bağlı, örn. tasarım devri için)
kiro-cli mcp add ...Önceki kılavuzdan geçmiş bir komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Kiro ile Ekran Görüntüsünden Arayüze İş Akışı
Kiro CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görselini çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemektir — önce spesifikasyonun amacı yakalamasına izin verip sonra ona göre inşa etmek.
Elinizdeki en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
Kiro'nun isteminizden bir spesifikasyon ve tasarım belgesi yazmasına izin verin ve inşa etmeden önce planı gözden geçirin — düzen ve kapsam sorunlarını erken yakaladığınız yer burasıdır.
Tasarım sisteminizi ve kurallarınızı steering dosyalarında tutun ve Kiro'ya token'ların ve kanonik temel bileşenlerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Kiro'nun gerçek bir tarayıcıda işlemesini, sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırmasını sağlayın.
Kiro'nun uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.
Etkileşimli bir oturum açın ve baştan somut kısıtlamalar verin; böylece yazdığı spesifikasyon gerçek amacınızı yansıtır:
Görevleri küçük ve odaklı tutun, iyi yinelemeleri işleyin ve kötüleri geri alın (geri aldığınızda Kiro'ya söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilir.
Önceki kılavuzdan geçmiş bir komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Elinizdeki en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
Kiro'nun isteminizden bir spesifikasyon ve tasarım belgesi yazmasına izin verin ve inşa etmeden önce planı gözden geçirin — düzen ve kapsam sorunlarını erken yakaladığınız yer burasıdır.
Tasarım sisteminizi ve kurallarınızı steering dosyalarında tutun ve Kiro'ya token'ların ve kanonik temel bileşenlerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Kiro'nun gerçek bir tarayıcıda işlemesini, sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırmasını sağlayın.
Kiro'nun uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamasını değil.
Etkileşimli bir oturum açın ve baştan somut kısıtlamalar verin; böylece yazdığı spesifikasyon gerçek amacınızı yansıtır:
Görevleri küçük ve odaklı tutun, iyi yinelemeleri işleyin ve kötüleri geri alın (geri aldığınızda Kiro'ya söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilir.
kiro-cli chat
# istemde:
> Referanslarım şunlar: reference-desktop.png ve reference-mobile.png.
Bir spesifikasyon yaz, sonra bu tasarımı React + Vite + Tailwind + TypeScript ile uygula.
Mevcut tasarım sistemi bileşenlerimi ve token'larımı yeniden kullan (steering dosyalarıma bak).
Boşluk, düzen ve hiyerarşiyi eşleştir; duyarlı yap.
Tarayıcıda işle ve kesme noktaları arasında referanslarla eşleşene kadar yinele.Önceki kılavuzdan geçmiş bir komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Specs, steering, hooks ve MCP
Dört uzantı noktası, Kiro CLI'yi sürdürülebilir tasarım çalışmaları için pratik hale getirir ve dördü de açık bir tasarım iş akışına temiz bir şekilde eşlenir.
Specs: Gereksinimler, bir tasarım belgesi ve sıralı bir görev listesi — bir özelliğin ne olması gerektiğinin kalıcı kaydı, geliştirme öncesinde ve sırasında incelenebilir.
Steering dosyaları: Ajanın her çalıştırmada okuduğu bağlam, kodlama standartları ve tercih edilen iş akışları veya araçları ekleyin — tasarım kurallarınız ve token'larınız için doğal bir yuva.
Ajan kancaları: Dosya kaydetme gibi olaylarda tetiklenen otomasyonlar, kontroller veya dokümanlar gibi arka plan görevlerini çalıştırma — bir doğrulama adımını otomatik olarak uygulamak için bir yer.
MCP sunucuları: Kiro CLI, Model Context Protocol sunucularını yönetir; bu, yalnızca Kiro'da değil, ajanlar arasında çalışan harici tasarım bağlamı ve araçlarını getirmenin taşınabilir yoludur.
Bunlar taşınabilir, çoklu ajan yetenekleridir — tam olarak OpenDesign'ın her proje için yeniden oluşturmak yerine düzenlemek için tasarlandığı şeydir.
Specs: Gereksinimler, bir tasarım belgesi ve sıralı bir görev listesi — bir özelliğin ne olması gerektiğinin kalıcı kaydı, geliştirme öncesinde ve sırasında incelenebilir.
Steering dosyaları: Ajanın her çalıştırmada okuduğu bağlam, kodlama standartları ve tercih edilen iş akışları veya araçları ekleyin — tasarım kurallarınız ve token'larınız için doğal bir yuva.
Ajan kancaları: Dosya kaydetme gibi olaylarda tetiklenen otomasyonlar, kontroller veya dokümanlar gibi arka plan görevlerini çalıştırma — bir doğrulama adımını otomatik olarak uygulamak için bir yer.
MCP sunucuları: Kiro CLI, Model Context Protocol sunucularını yönetir; bu, yalnızca Kiro'da değil, ajanlar arasında çalışan harici tasarım bağlamı ve araçlarını getirmenin taşınabilir yoludur.
Bunlar taşınabilir, çoklu ajan yetenekleridir — tam olarak OpenDesign'ın her proje için yeniden oluşturmak yerine düzenlemek için tasarlandığı şeydir.
Tasarım Karşılaştırması: Kiro vs Codex vs Claude Code vs Cursor vs Gemini CLI
Tasarım çalışmaları için tek bir kazanan yok — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları birleştirir. Adil bir özet:
Kiro CLI — Spec odaklı iş akışı — kodlamadan önce gereksinimler, tasarım belgesi ve görev listesi; steering dosyaları ve kancalar yapıları markaya uygun tutar — Amaç ve kapsamın uygulamadan önce kilitlendiği yapılandırılmış, incelenebilir yapılar
Codex — Bir frontend becerisiyle güçlü görsel cilalama; sanal alanda asenkron yapılar — Devredilmiş asenkron yapılar ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tip) ve kod tabanına duyarlı UX — Frontend muhakemesi ve geniş bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve çok geniş bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı çalışma ve tüm bir tasarım sistemini bağlamda tutma
Tekrarlayan topluluk kararı, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak sahiptir. Çözülmesi gereken gerçek sorun bu — ve bu, model şeklinde değil, tasarım aracı şeklindedir.
Ajan — Tasarım gücü — En uygun olduğu alan
Kiro CLI — Spec odaklı iş akışı — kodlamadan önce gereksinimler, tasarım belgesi ve görev listesi; steering dosyaları ve kancalar yapıları markaya uygun tutar — Amaç ve kapsamın uygulamadan önce kilitlendiği yapılandırılmış, incelenebilir yapılar
Codex — Bir frontend becerisiyle güçlü görsel cilalama; sanal alanda asenkron yapılar — Devredilmiş asenkron yapılar ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tip) ve kod tabanına duyarlı UX — Frontend muhakemesi ve geniş bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve çok geniş bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı çalışma ve tüm bir tasarım sistemini bağlamda tutma
Tekrarlayan topluluk kararı, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak sahiptir. Çözülmesi gereken gerçek sorun bu — ve bu, model şeklinde değil, tasarım aracı şeklindedir.
Ajan — Tasarım gücü — En uygun olduğu alan
Yaygın Tuzaklar ve “AI slop” Görünümünden Nasıl Kaçınılır
Yapay zekâ tarafından üretilen tasarımla ilgili en yaygın şikâyet, jenerik görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir yapay zekâ yaptı” diye bağıran Inter ve mor karışımı bir hava. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve kullanıcı arayüzü metnine sızan talimatlar yer alır. Bunların hiçbiri Kiro CLI'ye özgü değildir; herhangi bir ajanın küratörlü bir tasarım bağlamı olmadan çalışması durumunda olan şeydir — bir spesifikasyon bir yapıyı görevde tutar, ama zevk sağlamaz.
Estetik bir beceri ekleyin: Küratörlü bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Render edin ve kırılma noktaları arasında kendi kendini kontrol edin — yapabilirseniz bunu bir hook olarak bağlayın — böylece düzenler mobilde sessizce bozulmaz.
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ı yönlendirme dosyalarına kodlayın: “hero kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: Her hafifletme, ajana küratörlü bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
Estetik bir beceri ekleyin: Küratörlü bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Render edin ve kırılma noktaları arasında kendi kendini kontrol edin — yapabilirseniz bunu bir hook olarak bağlayın — böylece düzenler mobilde sessizce bozulmaz.
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ı yönlendirme dosyalarına kodlayın: “hero kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Dikkat edin: Her hafifletme, ajana küratörlü bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
Tasarım için OpenDesign İçinde Kiro CLI Kullanmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Kiro CLI'yi birinci taraf bağdaştırıcı olarak ele alır ve onu küratörlü bir beceri ile tasarım sistemi kitaplığına, yapılandırılmış bir render hattına ve yerel bir masaüstü kullanıcı arayüzüne sarar — böylece Kiro'yu iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. OpenDesign yerel önceliklidir, bu da eşleştirmeyi basit tutar: dosyalarınız ve oturum açma bilgileriniz makinenizde kalır.
AWS Builder ID'nizle veya başka bir oturum açma yöntemiyle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden 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ı kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Kiro CLI ajanı, aynı oturum açma — artı çevresinde gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. OpenDesign yerel öncelikli ve Apache-2.0'dır, yani işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Kiro CLI'yi seçin.
AWS Builder ID'nizle veya başka bir oturum açma yöntemiyle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden 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ı kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Kiro CLI ajanı, aynı oturum açma — artı çevresinde gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. OpenDesign yerel öncelikli ve Apache-2.0'dır, yani işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Kiro CLI'yi seçin.
OpenDesign Amazon veya AWS ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Kiro, Amazon'un ticari markasıdır.