Tasarım için Kiro CLI.

Kiro CLI'nin ne olduğu

Kiro, Amazon tarafından geliştirilen ve IDE, komut satırı arayüzü ve web arayüzü olarak sunulan, prototipten üretime özellik odaklı geliştirmeyle sizi götürmek için tasarlanmış bir agentic AI'dı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şi için belirleyici özellik iş akışıdır. Kiro, bir istemi doğrudan koda dönüştürmek yerine, önce bir özellik belgesi — gereksinimler, tasarım dokümanı ve sıralı görev listesi — yazar ve buna göre uygular. Bu, ajanın planını herhangi bir kullanıcı arayüzü oluşturulmadan önce görünür ve incelenebilir hale getirir; bu da tasarım kararlarının nasıl alınması gerektiğine net bir şekilde uyar: önce niyet, sonra uygulama.

• Özellik belgeleri: Kiro, kod yazmadan önce bir istemi yapılandırılmış bir özellik belgesine — gereksinimler, tasarım dokümanı ve ayrık görevler — dönüştürür, böylece plan baştan gözden geçirilebilir.
• Yönlendirme + kancalar: Yönlendirme dosyaları standartlarınızı, kurallarınızı ve tercih ettiğiniz araçları her çalıştırmaya taşır; ajan kancaları, dosya kaydetme gibi olaylarda arka plan görevlerini otomatik olarak çalıştırır.
• Başlamak ücretsiz, MCP destekli: 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.

• Satıcı: Amazon (AWS)
• Kimlik bilgisi: AWS Builder ID, Google, GitHub veya kiro-cli login ile AWS IAM Identity Center (AWS hesabı gerekmez)
• Durum: Önizlemede; IDE, CLI ve web arayüzü olarak kullanılabilir

Özellik odaklı geliştirme neden tasarıma uyuyor

Kiro CLI'nin tasarım üstünlüğü iş akışından gelir — ancak her ajanda olduğu gibi, zevk yine de sizin tarafınızdan sağlanmalıdır.

• Piksellerden önce niyet: Kiro önce bir özellik belgesi ve tasarım dokümanı yazdığı için, ajan genel bir uygulamaya geçmeden önce planlama aşamasında düzen, hiyerarşi ve kapsam düzeltmesi yapabilirsiniz.
• Yönlendirme markanızı taşır: Yönlendirme dosyaları, token'larınızı, bileşenlerinizi ve konvansiyonları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 olarak çalıştırabilir — ajanın hatırlamasına güvenmek yerine bir doğrulama veya inceleme adımını bağlayabileceğiniz bir yer.

Ders, her ajanın öğrettiği dersle aynıdır: Kiro CLI varsayılan olarak zevk sahibi değildir. Bir şartname, yapıyı dürüst tutar, ancak yalnızca ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir skill ve somut referanslar. Open Design tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).

Kiro CLI'yi tasarım çalışması için sıfırdan kurun

Temiz bir makineden UI oluşturup doğrulayabilen bir Kiro CLI'ye giden tam yol burada.

# 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 whoami

# 4. Start an interactive session in your project
cd your-project
kiro-cli chat

# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...

• Tasarım kurallarınızı kodlayın: Token'larınızı, ilkel öğelerinizi ve konvansiyonlarınızı yönlendirme dosyalarına koyun, böylece ajan bunları her çalıştırmada okur ve çıktı genel bir görünüme varsayılan olarak düşmek 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 render yapar ve yalnızca yapının geçtiğini doğrulamak yerine çıktısını kesme noktaları boyunca kontrol eder.

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

Kiro CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görseli çalışan, duyarlı bir UI'ya dönüştürmek ve eşleşene kadar yinelemektir — şartname önce niyeti yakalamasına, ardından ona göre oluşturmasına izin vermek.

1. Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahramanlık çekimi değil, birden fazla durum (masaüstü ve mobil, hover, boş, yükleniyor) ekleyin.
2. Kiro'nun komutunuzdan bir şartname ve tasarım belgesi yazmasına izin verin ve oluşturmadan önce planı gözden geçirin — düzen ve kapsam sorunlarını erkenden yakaladığınız yer burasıdır.
3. Tasarım sisteminizi ve kurallarınızı steering dosyalarında tutun ve Kiro'ya tokens ve kanonik ilkellerin nerede olduğunu söyleyin.
4. Bir geliştirme sunucusu çalıştırın ve Kiro'nun gerçek bir tarayıcıda render etmesini sağlayın; sonucu kontrol etmek için breakpoint'lere göre yeniden boyutlandırın.
5. Kiro'nun kendi implementasyonunu referanslarla karşılaştırmasını sağlayarak iterasyon yapın — yalnızca derlendiğini onaylamasını değil.

İnteraktif bir oturum açın ve baştan somut kısıtlamalar verin; böylece yazdığı spec gerçek niyetinizi yansıtsın:

kiro-cli chat
# in the prompt:
> Here are my references: reference-desktop.png and reference-mobile.png.
  Write a spec, then implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see my steering files).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Görevleri küçük ve odaklı tutun, iyi iterasyonları commit edin ve kötü olanları geri alın (geri aldığınızda Kiro'ya söyleyin); böylece her geçiş temiz bir temel üzerine inşa edilsin.

Spec'ler, steering, hook'lar ve MCP

Dört genişleme noktası Kiro CLI'yi sürdürülebilir tasarım çalışması için pratik hale getirir ve dördü de açık bir tasarım iş akışıyla temiz bir şekilde eşleşir.

• Spec'ler: Gereksinimler, bir tasarım belgesi ve sıralı bir görev listesi — bir özelliğin ne olması gerektiğinin kalıcı kaydı; yapım öncesinde ve sırasında gözden geçirilebilir.
• Steering dosyaları: Bağlam, kodlama standartları ve agent'ın her çalıştırmada okuduğu tercih edilen iş akışları veya araçlar ekleyin — tasarım kurallarınız ve tokens'larınız için doğal bir ev.
• Agent hook'ları: Dosya kaydetme gibi olaylarda tetiklenen ve kontroller veya belgeler gibi arka plan görevlerini çalıştıran otomasyonlar — bir doğrulama adımını otomatik olarak uygulamak için bir yer.
• MCP sunucuları: Kiro CLI, Model Context Protocol sunucularını yönetir; harici tasarım bağlamını ve sadece Kiro'da değil, agent'lar arasında çalışan araçları getirmenin taşınabilir yolu.

Bunlar taşınabilir, çok-agent yetenekleridir — tam da Open Design'ın proje başına yeniden yaratmak yerine orkestre etmek için tasarlandığı türden şeyler.

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

Tasarım işi için tek bir kazanan yoktur — her agent'ın farklı bir gücü vardır ve deneyimli ekipler bunları birbiriyle kullanır. Adil bir özet:

Topluluktan gelen tekrarlayan karar şu: zevk insanlardan gelir—hepsi skill, referans ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun bu—ve bu model biçimli değil, tasarım-aracı biçimli bir sorundur.

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

AI tarafından üretilen tasarım hakkındaki en yaygın şikayet, genel göründüğü yönündedir—yumuşak degradeler, yüzen paneller, aşırı büyük yuvarlak köşeler, dramatik gölgeler, "bunu bir AI yaptı" diye bağıran bir Inter-ve-mor atmosferi. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI kopyasına sızan talimatlar yer alıyor. Bunların hiçbiri Kiro CLI'ye özgü değildir; bunlar, herhangi bir agent küratörlüğü yapılmış bir tasarım bağlamı olmadan çalıştığında olan şeylerdir—bir spec bir yapıyı görevde tutar, ancak zevk sağlamaz.

• Bir estetik skill ekleyin: Küratörlüğü yapılmış bir tasarım skill, agent'ı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
• Gerçek bir tarayıcıda doğrulayın: Breakpoint'ler genelinde render edin ve kendi kendini kontrol edin—mümkünse bunu bir hook olarak bağlayın—böylece düzenler mobilde sessizce bozulmaz.
• tokens ve referanslar sağlayın: Gerçek tasarım tokens'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
• Kuralları yönlendirme dosyalarında kodlayın: "Hero card yok, maksimum iki yazı tipi, marka öncelikli hiyerarşi" gibi stil kurallarını agent'ın her çalıştırmada okuduğu yere koyun.

Her azaltma önleminin agent'a küratörlüğü yapılmış bir tasarım bağlamı vermekle ilgili olduğunu fark edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmetdir.

Open Design içinde Kiro CLI ile tasarlama

Open Design, yukarıdaki iş akışının istediği açık kaynaklı tasarım katmanıdır. Kiro CLI'yi birinci taraf bir adaptör olarak ele alır ve onu küratörlüğü yapılmış bir skill ve design-system kütüphanesi, yapılandırılmış bir render pipeline'ı ve yerel bir masaüstü UI ile sarar—böylece Kiro'yu iyi yapan tasarım bağlamı her seferinde elle toplanmak yerine ilk çalıştırmadan itibaren oradadır. Open Design yerel önceliklidir, bu da eşleştirmeyi basit tutar: dosyalarınız ve oturum açma bilgileriniz makinenizde kalır.

1. Open Design'ı kurun ve agent olarak Kiro CLI'yi seçin.
2. AWS Builder ID'niz veya başka bir oturum açma ile kimlik doğrulama yapın—kimlik bilgileri makinenizde kalır ve asla bizim aracılığımızla proxy'lenmez.
3. Bir design system ve bir skill seçin, ardından tutarlı zevkle desteler, prototiplar ve açılış sayfaları oluşturun.
4. Her yapı ve DESIGN.md dosyası barındırılan bir bulutta değil, kendi repo'nuzda yaşar.

Aynı Kiro CLI ajanı, aynı oturum açma — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Open Design yerel-öncelikli ve Apache-2.0 lisanslıdır, dolayısıyla çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

Sık sorulan sorular

1. 01 Kiro CLI gerçekten tasarım işi yapabilir mi? +

   Evet — bir estetik skill, bir tasarım sistemi ve bağlam içinde gerçek referans görselleri ile Kiro CLI üretime hazır, duyarlı arayüzler üretir ve spec odaklı iş akışı, yapımı belirtilen amaca karşı sorumlu tutar. Bu bağlam olmadan jenerik bir görünüme varsayılan olarak yönelir, Open Design'ın doldurduğu boşluk budur.

2. 02 Kiro CLI kullanmak için bir AWS hesabına ihtiyacım var mı? +

   Hayır — Kiro, AWS Builder ID, Google, GitHub veya kuruluşunuz (AWS IAM Identity Center) ile oturum açmanıza olanak tanır ve kullanmak için bir AWS hesabına ihtiyacınız yoktur. Kiro önizleme aşamasındadır ve başlamak ücretsizdir. Open Design de kimlik bilgilerinizi hiçbir şekilde proxy üzerinden geçirmez.

3. 03 Kiro CLI'ı özellikle tasarım için iyi yapan nedir? +

   Spec odaklı iş akışı: Kiro, kod yazmadan önce gereksinimler, bir tasarım belgesi ve bir görev listesi yazar, böylece yapım commit edilmeden önce düzen ve kapsamı düzeltirsiniz. Yönlendirme dosyaları kural ve uygulamalarınızı taşır ve kancalar kontrolleri zorunlu kılabilir — ancak zevk yine de sağladığınız tasarım sistemi, skill ve referanslardan gelir.

4. 04 Frontend tasarımı için Kiro CLI mi Claude Code mu? +

   İkisi de güçlü. Claude Code belirli, kod tabanı-bilinçli tasarım kararlarıyla bilinir; Kiro CLI'ın avantajı yönlendirme ve kancalarla spec odaklı, gözden geçirilebilir iş akışıdır. Birçok ekip ikisini birden kullanır — Open Design, tasarım iş akışınızı değiştirmeden ajan değiştirmenize olanak tanır.

5. 05 Kiro CLI'ı harici tasarım araçlarına nasıl bağlarım? +

   Kiro CLI, Model Context Protocol (MCP) sunucularını yönetir — eklemek için kiro-cli mcp kullanın. Bir MCP sunucusu, ajan içine gerçek tasarım bağlamı ve araçlar getirebilir, böylece üretilen kod kaynağa yaklaşmak yerine ona uyar.

6. 06 Open Design, Amazon veya AWS ile bağlantılı mı? +

   Hayır. Kiro, Amazon'un (AWS) bir ürünüdür; Open Design, onu birinci taraf adaptör olarak destekleyen bağımsız bir açık kaynak projesidir. Kiro, Amazon'un ticari markasıdır.

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

   Evet — Open Design yerel-öncelikli ve Apache-2.0 lisanslıdır. Dosyalarınız, yapıtlarınız ve DESIGN.md kendi reponuzda kalır ve Kiro oturum açmanız doğrudan ajanınız tarafından kullanılır, Open Design sunucuları üzerinden asla yönlendirilmez.