Tasarım teslimi, yaklaşık 2016'dan bu yana insan geliştiriciler için çözülmüş bir sorun haline geldi. Zeplin, InVision Inspect, Avocode, Figma'nın kendi Dev Mode'u — hepsi aynı şeyi yapıyor: bir geliştiriciye bir düğüme tıklayarak özelliklerini okuyabileceği bir web arayüzü sağlıyor.

Bu iş akışı, "geliştirici" bir yapay zeka ajanı olduğunda tamamen bozuluyor.

Bu makale nedenini, ajanların gerçekte neye ihtiyaç duyduğunu ve yaklaşık kod yerine doğru kod üreten bir teslim iş akışının nasıl yapılandırılacağını açıklıyor. Çözüm, Figma dosyanızdan doğrudan yapılandırılmış bir bağlam paketi dışa aktaran tarayıcı tabanlı bir araç olan figmascope'tur. Adım adım iş akışları için bkz. Figma'dan Claude Code'a veya Figma'dan Cursor'a.

Tasarım teslimi varsayımı

2023 öncesinde inşa edilmiş her teslim aracı aynı örtük varsayımı yapar: diğer tarafta bir insan var, tıklıyor, değerleri okuyor, yargı kararları veriyor. Aracın görevi, bilgiyi yeterince açık bir şekilde sunmak; böylece yetenekli bir geliştirici, tasarımcıya sürekli bağlam değiştirmeden üzerinden çalışabilsin.

Bu varsayım, bu araçların tüm UX'ine işlenmiş durumda:

Bunların hiçbiri yanlış değil. İnsan geliştirici iş akışı için doğru. Sadece bir ajan için yanlış arayüz.

Ajanların bir tasarımdan gerçekte neye ihtiyacı var

Bir tasarım görevi alan yapay zeka ajanının ihtiyacı:

  1. Herhangi bir şey yapmadan önce okuduğu bir şartname — kısıtlamalar, kapsam, token adlandırma kuralları, sürüm notları. Bir panelin üzerine gelerek ima edilmiyor; açıkça yazılıyor.
  2. Tipli bir token sözlüğü — ham hex değerleri ve piksel sayıları değil, değerleriyle birlikte adlandırılmış, tipli tokenlar. Ajanın doğru Tailwind sınıf adlarını veya CSS özel özelliklerini üretebilmesi için #d96a3a'nın color.accent olduğunu bilmesi gerekiyor.
  3. Tam ekran düzen ağacı — her düğümün hiyerarşisi, düzen ilişkileri, boyutları, token referansları. Talep üzerine bir seferde bir düğüm değil; bellekte tam ağaç.
  4. Birleştirilmiş dizeler — tüm metin içeriği, normalleştirilmiş, kaynak anahtarlarıyla. Bireysel düğümlere dağılmış halde değil.
  5. Görsel temel gerçek — ajanın çıktısını karşılaştırabileceği bir referans render. 2× çözünürlükte tasarımın ekran görüntüsü.
  6. Bileşen adları — oluşturulan kodun kullanması gereken kanonik tanımlayıcılar, uydurulmuş isimler değil.

Geleneksel teslim araçları bunların hiçbirini bir ajanın kullanabileceği biçimde sağlamıyor. figmascope uygulaması hepsini tek bir zip'te üretiyor — Figma URL'nizi yapıştırın, paketi alın. Yükleme yok, arka uç yok. Token formatı Yapay Zeka Ajanları için Tasarım Token Dışa Aktarma'da derinlemesine ele alınıyor.

Ekran görüntüleri neden başarısız oluyor

İnsanların denediği en hızlı geçici çözüm: Figma'dan bir PNG dışa aktarmak ve ajana "bu ekranı uygula" gibi bir istemle geçirmek. Ajan kod üretiyor. Bazen yakın görünüyor. Ama:

Bu hataların her biri tek başına küçük. Bir araya geldiklerinde önemli miktarda manuel düzeltme gerektiren bir bileşene dönüşüyorlar — bu da ajan kullanmanın zaman tasarrufunun büyük bölümünü ortadan kaldırıyor.

Örneklerle ayrıntılı bir döküm için bkz. yapay zeka kod üretimi için ekran görüntüleri neden başarısız oluyor.

Bir ekran görüntüsü ajana tasarımın nasıl göründüğünü söylüyor. Yapılandırılmış bağlam, tasarımın ne olduğunu söylüyor.

Geleneksel teslim araçları, değerlendirmesi

Zeplin

Zeplin'in birincil arayüzü, geliştiricilerin tasarımları düğüm düğüm incelediği bir web uygulamasıdır. Dosyadan renkleri ve tipografiyi toplayan bir "Styleguide" özelliği var — token dışa aktarmaya en yakın şey. Makine tarafından okunabilir düzen ağaçları dışa aktarmıyor. "Connected Components" özelliği, belgeleme için yararlı olan ancak bir ajanın yeni kod üretmesine yardımcı olmayan Storybook bileşenlerini Figma çerçevelerine bağlıyor.

Figma Dev Mode

Figma'nın teslime yönelik yerel yanıtı. Kod paneli, seçili düğümlerden CSS üretiyor ve ayarlandığında Değişken adlarını gösteriyor. İnsan geliştiriciler için iyi tasarlanmış. Dosya düzeyinde dışa aktarmayı desteklemiyor, düzen ağaçları oluşturmuyor ve kod parçacıkları yalnızca CSS (çerçeveden bağımsız tokenlar değil). Dev Mode lisansı gerektiriyor.

Avocode

Avocode, Abstract tarafından satın alındı ve ardından 2022'de kullanımdan kaldırıldı. "Tasarım teslim araçları" için arama sonuçlarında hâlâ göründüğü ve bazı karşılaştırma trafiği getirdiği için bahsediliyor. Artık mevcut değil.

Locofy, Builder.io, Anima

Bu araçlar, Figma tasarımlarından doğrudan gerçek çerçeve kodu (React, Next.js, HTML) üretmeye çalışıyor. Sorun alanına daha yakınlar — çıktının yalnızca bir özellik paneli değil, kod olması gerektiğini anlıyorlar. Ancak bir ajana besleyeceğiniz bağlamı değil, dağıtacağınız kodu üretiyorlar. Bu ayrım önemli: araç kodu kendisi üretirken "Settings ekranını uygula, zaten inşa ettiğim UserAvatar bileşenini yeniden kullan" diye soramazsınız. Yapılandırılmış bağlamı verdikten sonra bunu Claude Code veya Cursor'a sorabilirsiniz.

Ayrıntılı karşılaştırmalar için bkz. figmascope ve Locofy karşılaştırması ve figmascope ve Builder.io karşılaştırması.

Ajan hazır teslim nasıl görünüyor

Ajan hazır teslim, onu geleneksel teslimatten ayıran üç özelliğe sahiptir:

1. Bir kullanıcı arayüzü değil, dosya eseri

Teslim eseri, kodun yanında depoda yaşayan sürümlü bir dosya (veya dosya kümesi). Giriş gerektiren paylaşılan bir bağlantı değil. Bir web uygulamasındaki panel değil. JSON, PNG ve Markdown dosyalarını içeren bir design/ dizini.

Bunun birkaç sonucu var:

2. Oluşturulmuş metin değil, tipli veriler kullanıyor

tokens.json'daki tasarım tokenları tiplenmiş — $type: "color", $type: "dimension" — yalnızca bir Markdown tablosundaki dizeler değil. screens/*.json'daki düzen IR'si açık düğüm türlerine (stack, overlay, absolute, leaf) ve $ref notasyonu kullanan token referanslarına sahip. strings.json'daki dizeler noktalı gösterim anahtarlarına sahip, yalnızca insan tarafından okunabilir etiketler değil.

Tipli veriler, ajanın bunları programatik olarak akıl yürütmesine olanak tanır: "background.$ref == color.surface olan tüm düğümler aynı arka plan rengini kullanır," "aynı arka planda görünen tüm düğümler" değil.

3. Ajanın önce okuduğu bir şartname belgesi içeriyor

CONTEXT.md, tasarımcı ile ajan arasındaki sözleşmedir. Şunları açıklıyor:

Geleneksel teslimin eşdeğeri yok. Dev Mode'un çerçeve başına bir "geliştirici notları" alanı var, ancak tasarımcı tarafından yapı olmadan geçici olarak yazılıyor. CONTEXT.md, dosyanın gerçek içeriğinden tutarlı biçimde üretiliyor.

Teslim iş akışı adım adım

  1. Tasarımcı çerçeveleri hazır olarak işaretler — Figma'da tasarımcı, uygulamaya hazır çerçeveleri işaretler (adlandırma kuralı, "hazır" etiketi, takımınızın kullandığı ne olursa olsun).
  2. Geliştirici figmascope'u çalıştırır — dosya URL'sini ve PAT'ı figmascope.dev'e yapıştırın, dışa aktarmaya tıklayın, zip'i indirin.
  3. design/ içine sıkıştırmayı açın — unzip figmascope-<fileKey>.zip -d design/
  4. design/'i depoya aktarın — paket teslim eseridir. PR hem tasarım paketini hem de uygulamayı içeriyor.
  5. Ajan uygular — Claude Code veya Cursor'ı design/CONTEXT.md'ye ve ilgili ekran JSON'una yönlendirin. Ajan, paketteki token değerlerini, bileşen adlarını ve dizeleri kullanan kod üretiyor.
  6. İnceleyin ve yineleyin — geliştirici screens/*.png ile karşılaştırarak inceler, boşlukları not eder, istemleri iyileştirir.

Tasarım değiştiğinde, 2. adımdan tekrarlayın. _meta.json zaman damgası, paketin en son ne zaman oluşturulduğunu Figma dosyasının en son ne zaman değiştirildiğine göre söylüyor — basit bir tazelik kontrolü.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Değişmeyen şeyler

Ajan hazır teslim, tasarım incelemesinin yerini almıyor. Ajan yapılandırılmış bağlamdan uyguluyor; bir insan hâlâ çıktıyı doğruluyor. Etkileşim durumları, animasyonlar, duyarlı davranış, erişilebilirlik — bunlar ajanın yalnızca statik tasarım verisinden tahmin edebileceği ancak garanti edemeyeceği yargı gerektiriyor.

Yapılandırılmış bağlam aynı zamanda tasarımcı-geliştirici görüşmesinin yerini de almıyor. Bir token belirsizce adlandırılmışsa veya bir bileşen statik çerçevenin önerdiğinden farklı biçimde kesme noktalarında davranıyorsa, bu bir görüşme gerektiriyor. CONTEXT.md dosyada olanları yakalıyor; dosyanın ele almadığı durumlar için tasarımcının ne amaçladığını çıkarmıyor.

Değişen şey: kararlı bir tasarımdan statik ekran düzenlerinin uygulanması, saatler süren manuel bir süreçten istem-ve-inceleme iş akışına dönüşüyor. Ajan mekanik çeviriyi yönetiyor; geliştirici yargı kararlarını yönetiyor.

Kontrol listesi: tasarım tesliminiz ajan hazır mı?

Bunların çoğu eksikse, ajan iyi bağlamla sıfırdan başlamaktan daha fazla düzeltme gerektiren kod üretecektir. figmascope'un oluşturduğu paket bunların hepsini tek bir dışa aktarmada karşılıyor. Vaka çalışmaları ve her kontrol listesi öğesinde daha derin incelemeler için figmascope blog'u ziyaret edin veya Dev Mode ve eklentilerle doğrudan karşılaştırma için bkz. Figma Inspector Alternatifi.