Tasarımdan Çalışan Koda: Handoff

Merhaba,

Bu yazımda sizlere Claude Design’da bitmiş bir tasarımı gerçekten çalışan bir sayfaya çevirme işini, yani handoff’u anlatacağım. Devir paketinin içinde ne olduğunu, kod tarafına hangi yollardan gittiğini ve en önemlisi bu aracın nerede durduğunu konuşacağız.

Daha önce kod tabanınızdan tasarım sistemi çıkarmayı anlatmıştım. Bu yazı, o yolun ters istikametini işliyor: tasarımdan koda.

Handoff Nedir ve Ne İşe Yarar?

Şöyle düşünün. Bir tasarımı bitirdiniz, ekranda güzel duruyor. Ama o hâliyle hâlâ bir tasarım; yayınlanabilir, tıklanabilir bir sayfa değil.

Handoff tam olarak bu aradaki köprüdür. Tasarımı çalışan koda çeviren geçiş adımının adı.

Klasik ekiplerde bu iş insan eliyle yapılır: tasarımcı dosyayı teslim eder, geliştirici bakarak yeniden kurar. Handoff’un yaptığı, o teslim paketini makinenin doğrudan okuyabileceği bir biçime sokmak.

Devir Paketinin İçinde Ne Var?

Tasarım hazır olduğunda Claude her şeyi bir devir paketine (handoff bundle) topluyor. Bu paketin içinde şunlar bulunur:

· Yapı (layout): Sayfanın bölümleri ve yerleşim düzeni.

· Bileşenler: Kart, buton, başlık gibi tekrar eden parçalar.

· Stiller: Renk, tipografi, boşluk değerleri.

· Tasarım sistemi referansı: Bu tasarımın hangi kurallara göre kurulduğu.

· İçerik: Sayfadaki gerçek metinler.

Amaç basit: kod tarafı bu paketi alıp doğrudan çalışan bir şeye çevirebilsin, aradaki yorumlama payı en aza insin.

Devir paketinin içeriği ve üç aktarım hedefi

Aktarımda Tek Bir Yol Yok

Paketi kod tarafına taşımak için elle uğraşmıyorsunuz. Tasarım tarafında tek bir dışa aktarma adımı yetiyor.

Ama o adımdan sonra karşınıza birden fazla hedef çıkıyor: paketi bilgisayarınızdaki kodlama ajanına gönderebilirsiniz, Claude Code Web’e yollayabilirsiniz ya da zip olarak indirip istediğiniz yerde açabilirsiniz.

Hangisini seçerseniz seçin varış aynı. Fark, sizin çalışma düzeninizde.

Yerel tarafta paket gerçek proje dosyalarına dönüşüyor, geliştirme sunucusunu ayağa kaldırıyorsunuz ve tarayıcıda yerel adresi açtığınızda karşınızda artık bir tasarım değil, çalışan bir sayfa duruyor. Butonun üstüne geldiğinizde tepki veriyor, tıklanıyor.

Küçük bir pratik not: her devir bir üretim turu demek. Aynı tasarımı merak ettiğiniz için üst üste devretmek kullanım hakkınızı yer; ihtiyacınız olanı alın, geçin.

Ön Yüz Evet, Arka Uç Hayır

Burada dürüst bir beklenti ayarı yapayım, çünkü en sık kırılan yer burası.

Handoff size çalışan bir ön yüz verir: sayfanın yapısı, görünümü, tıklanabilir kısımları. Claude Design bir backend ya da veritabanı üretmez.

Yani sunucu tarafı mantık, veri saklama, kullanıcı girişi gibi işleri bu paketten beklemeyin.

Şöyle düşünün: elinize güzel ve çalışan bir vitrin geçiyor. Ama o vitrinin arkasındaki depoyu, kasayı, sistemi siz kuruyorsunuz. Bir landing page için bu genelde yeterlidir; tam bir uygulama yapacaksanız arka ucu ayrıca inşa edeceğinizi baştan bilin.

Bu bir eksiklik değil, aracın nerede durduğunu bilme meselesi.

Devirden Sonra: Kısa Bir Kontrol Turu

Devir bitince “tamam, oldu” deyip geçmeyin. Koda dört başlıkta bakın:

· Yapı ve içerik: Tasarımdaki bölümlerin hepsi kodda var mı?

· Stiller: Tasarım sistemi tutarlı mı, bir yerde renk veya boşluk kaymış mı?

· Etkileşimler: Tıklanabilir olması gereken şeyler gerçekten çalışıyor mu?

· Arka uç gereken yerler: Form gönderimi, giriş, veri kaydetme. Bunlar tasarımda “varmış gibi” görünür; arkasını sizin bağlamanız gerekir. O noktaları baştan not edin.

Döngüyü İki Ayrı Kapı Kapatır

Artık elinizde kod olduğuna göre değişiklikleri kod tarafında da yapabilirsiniz. Kaba ve görsel işler tasarım tarafında, ince ve koda dokunan işler kod tarafında.

Peki kodda yaptığınız değişiklikler tasarım tarafından kopmasın diye ne yaparsınız? İşte burada /design-sync devreye girer; kod tabanının tasarım sistemini tasarım tarafıyla senkron tutmaya yarar.

Dikkat edin: bu tek bir sihirli komut değil. Gidiş-dönüş vardır ama döngüyü iki ayrı kapı kapatır. /design-sync kodu tasarım tarafına getirir, handoff tasarımı koda götürür.

Bu komut hâlâ yeni ve arayüzü değişebiliyor; sizin ekranınızda davranışı biraz farklı olabilir. Mantığı akılda tutmak yeterli.

Tasarım ile kod arasındaki iki yönlü döngü ve onu kapatan iki ayrı kapı

Claude Code Kullanmıyorsanız

Aynı hedefe daha hafif bir yoldan da gidilir. Claude Design tasarımı tek parça, bağımsız bir HTML sayfası olarak da dışa aktarabiliyor.

O dosyayı çift tıklayıp tarayıcıda açtığınızda çalışan sayfayı görürsünüz. Handoff kadar esnek değildir, kodun içine o kadar rahat giremezsiniz; ama “tasarımı çalışan bir sayfa hâlinde elime alayım” diyorsanız işinizi görür.

Toparlarsak

Handoff, tasarımla çalışan kod arasındaki köprüdür: paket hazırlanır, seçtiğiniz hedefe aktarılır, kod tarafında gerçek dosyalara dönüşür ve tarayıcıda çalışır.

En sık yapılan üç hata da bellidir: handoff’tan arka uç beklemek, devirden sonra koda hiç bakmadan “bitti” demek ve kod tarafında değişiklik yapıp tasarım tarafını unutmak.

Devir paketini alıp sayfayı tarayıcıda çalışır hâle getirdiğim bölümü uçtan uca görmek isterseniz, YouTube’daki ücretsiz FULL KURS videosunda → https://youtu.be/PcoZp3Hzx58 Faydalı bulursanız abone olmanız, bu tarz Türkçe içerik üretmeye devam etmem için en büyük destek.

Umarım faydalı olmuştur. Görüşmek üzere.