Kiro + Claude 4.6 + Figma MCP / Tasarım koda nasıl dökülür?

Merhaba arkadaşlar,


Son dönemde Kiro IDE (AWS'nin agentic editörü) ve Claude Opus 4.6 kullanıyorum. En çok hoşuma giden kısım, Figma tasarımlarını doğrudan koda dökebilmek. Powers özelliği sayesinde token veya manuel API key uğraşmadan entegrasyon çalışıyor – MCP bağlantısını Kiro otomatik kuruyor.


Bu akış özellikle UI odaklı projelerde çok pratik: Tasarım frame'ini seçip link atıyorsun, prompt veriyorsun, agent spec çıkarıp pixel-perfect component üretiyor (React + Tailwind örneklerinde test ettim).


Kurulum (Powers yöntemi – token gerektirmiyor):

1. Kiro IDE'yi açın (en güncel versiyon olsun, 0.7+ öneririm).
2. Powers kataloguna gidin: kiro.dev/powers adresinden veya IDE içinden Powers paneline erişin.
3. "Figma" veya "Design to Code with Figma" power'ını bulun ve Install edin (tek tıkla tamamlanıyor, Kiro gerisini hallediyor).
4. Kurulum sonrası chat'te "design" veya "figma" kelimelerini kullanınca power otomatik aktif oluyor – ekstra config yok.

Kullanım akışı:

• Figma'da istediğiniz frame veya component'ı seçin, linkini kopyalayın (Copy link to selection).
• Kiro chat penceresine linki yapıştırın.
• Örnek prompt (bunu temel alıp uyarlayabilirsiniz):
  
  
  
• Kod:

  Bu Figma linkindeki tasarımı production-ready React + Tailwind component'a dönüştür.
  MCP ile design token'ları (colors, spacing, typography), layout ve variants'ı çek.
  Hover, active ve dark mode için variant'lar ekle.
  Mobile-first responsive yapı olsun.
  Önce requirements, design plan ve task breakdown yap (spec dosyaları oluştur).
  Sonra kodu diff olarak öner, değişiklikleri kabul edeyim.
  Kod temiz, okunaklı ve accessible olsun.

  
  Agent adım adım düşünüyor, spec dosyaları (requirements.md, design.md vb.) oluşturuyor, kodu öneriyor. Kabul edince dosya otomatik oluşuyor.
  
  
  Deneyimlerim:
  
  
  • Basit card veya button setleri: 1-2 dakikada hazır, spacing ve renkler Figma ile birebir eşleşiyor.
  • Daha karmaşık form veya dashboard elemanları: Claude 4.6 planning sayesinde edge case'leri (validation, accessibility) otomatik ekliyor, manuel müdahale minimum.
  • Avantaj: Powers ile context şişmiyor, sadece ihtiyaç anında tool'lar yükleniyor – hız ve kalite yüksek.
    
  Eski MCP yöntemlerinde (JSON config + personal token) uğraşmak gerekiyordu ama Powers ile bu tamamen kalkmış, çok daha temiz.
  
  
  
  

saol