Claude Design Hakkında Düşünceler ve İzlenimler
(samhenri.gold)- Tasarımların sistemleştirilmesi güçlendikçe Figma; component, style, variable ve props gibi kendi birimleri etrafında karmaşık bir yapı büyüttü ve gerçek uygulama ortamından uzaklaştı
- Figma’nın kendine özgü formatı, LLM eğitim verilerinin dışında doğal olarak kaldı; ajan çağında kod tabanlı araçlar yükselirken, tasarımın source of truth’u yeniden koda kaydı
- Claude Design, HTML/JS’yi doğrudan kullanan dürüst bir ortam olarak, Figma’daki gibi kodun kayıplı bir yaklaşık temsiline (lossy approximation) uğramadan, doğrudan gerçek uygulama ortamında çalışma yaklaşımını benimsiyor
- Claude Code ile olan kardeş ilişkisi sayesinde, tasarım ile uygulama arasındaki geri bildirim döngüsünü tek bir konuşmada birleştirebilen yapısal bir avantaja sahip
- Tasarım araçları pazarı kod tabanlı araçlar ile saf keşif araçları olarak ayrışırken, Figma’nın Sketch’in kaderini yaşama ihtimali ortaya çıkıyor:
**Sketch moment**
Figma’nın sistemleştirme paradoksu
- Ürün ekipleri büyüdükçe, tasarımın mühendislik organizasyonu içinde kendi varlığını meşrulaştırması gerekti ve bu yüzden sistemleştirme (systematization) yönüne itildi
- Figma bunun için component, style, variable ve prop gibi kendine özgü primitive’ler icat etti; ancak bunların bir kısmı programlamadan ödünç alındı, bir kısmı alınmadı ve sonuçta hiçbir şeyle temiz biçimde eşleşmeyen bir yapı oluştu
- Yönergeler sürekli değişiyor, migration’lar birikiyor ve otomasyon yapmak için kalitesi düşük birkaç plugin’e bağımlı kalınıyor
- Karmaşıklık o kadar arttı ki, bu sistemin kendisini yönetmeye odaklanan ayrı tasarım rolleri bile ortaya çıktı
Source of Truth’un yer değiştirmesi
- Figma ile kod arasında, asıl kaynağın (source of truth) ne olması gerektiği konusunda her zaman bir gerilim vardı
- Figma, Sketch’i geride bırakırken kendi aracının kanonik sürüm olacağını savundu
- Ancak bu zaferin gizli bir bedeli vardı: kilitli (locked-down) ve büyük ölçüde dokümante edilmemiş format, programatik olarak ele alınması zor olduğu için LLM eğitim verilerinin dışında doğal olarak kaldı
- LLM’ler kod üzerinde eğitildi, Figma primitive’leri üzerinde değil; bu yüzden modeller Figma’nın sistemini öğrenemedi
- Kod yazmak tasarımcılar için de kolaylaştıkça ve ajanlar geliştikçe, source of truth doğal olarak yeniden koda dönüyor
- Figma’nın son 10 yılda kurduğu karmaşık altyapı, bunun yanında ister istemez aşırı görünüyor
> "Çömlek yapmak istiyorsan neden çömleğin sulu boyasını çiziyorsun? Doğrudan kil şekillendirmek varken?"
Figma’nın kendi tasarım sistemindeki karmaşıklık
- Gerçek iş akışında, kodda doğrudan yapılan tasarım değişikliklerini Figma’ya geri taşımak (back-porting) son derece zahmetli
- Buna örnek olarak Figma’nın kendi ürün tasarım sistemi dosyası veriliyor; en yetkin tasarım sistemi ekiplerinden birinin üretimi olmasına rağmen sonuç son derece karmaşık
- 946 renk variable’ı, "bg/desktopBackgrounded" gibi iç içe gruplar halinde düzenlenmiş ve tek bir variable için Light, Dark, FigJam-Light gibi 8 farklı moda ait değer bulunuyor
- Modal footer component’inde 12 variant var; ayrıca "DS Library Swap", "QA Plugin" gibi değerlere sahip dropdown’lar ve 8 prop içeriyor
- Slider component’inin effect style’ı, 0.5px’lik tek bir drop shadow için ayrı adlandırılmış bir style olarak mevcut — çünkü CSS variable’larıyla eşleşmesini belgelemenin tek yolu bu
- Combo input component’inde 16 variant var ve layer adları "Default, Default, Close Button=False" gibi görünüyor
- Bir rengin neden yanlış göründüğünü debug etme süreci; component kontrolü → variable kontrolü → alias verilmiş başka bir variable kontrolü → mode kontrolü → instance seviyesinde override kontrolü → library swap uygulanmış iç içe component kontrolü şeklinde çok aşamalı bir iz sürme gerektiriyor
Figma Make vs Claude Design
- Source of truth koda kayarken, Figma pasif ve ajan öncesi (pre-agentic) bir sistemle biraz garip bir konumda kalıyor
- Geleceğin tasarım araçları muhtemelen iki belirgin biçime ayrılacak
- Figma’nın 2016’da yanıt verdiği şu soruya yeniden rekabet gelecek: "Bir tasarımcı olarak fikrimi en hızlı hangi araçla dışa vurabilirim?"
- Figma Make, zaten Figma sistemine alışkın insanlar için bir araç
- Figma style’larını, component library’lerini ve kendine özgü prop’ları (Prop Props) okuyor; ayrıca bu yeni ortamda hâlâ tasarım dosyasının kanonik kaynak olduğunu varsayan tek araç
- Sistem içinde kalmak isteyen ya da kalmak zorunda olan kişiler için bir araç
- Claude Design ise bunun tam tersi bir bahis
- Arts and Crafts hareketinin "truth to materials" ilkesiyle uyumlu — yani bir şeyin, kendi malzemesine ve üretilme biçimine dürüst olması gerektiği fikri
- Figma ise bunun tersine, son derece katı bir şemanın üzerine geçirilmiş özgür bir "vibe" kabuğu gibi; sanki A tipi bir kişilik zorla rahat görünmeye çalışırken içeride frame iç içeliği ve token ayrımları yüzünden çığlık atıyor
- Claude Design kaba olabilir ama en azından ne olduğu konusunda dürüst: baştan sona HTML ve JS
Claude Design’ın yapısal avantajları
- Claude Design’ın kardeş ürününün, kod konusunda güçlü olan Claude Code olması temel yapısal avantaj
- Nihayetinde Claude Design’dan Claude Code’a doğrudan aktarım yapmak ya da tersini yapmak mümkün olacak bir yapı söz konusu
- Claude Design onboarding sürecinde şimdiden repo içe aktarma özelliği sunuyor
- Tasarım ile uygulama arasındaki, tarihsel olarak sürekli sürtüşme yaratan geri bildirim döngüsü tek bir konuşmada birleşiyor
Koddan bağımsız başka araçların ortaya çıkma ihtimali: saf keşif ortamı
- Ayrışmanın diğer ucunda, kod beklentisi hiç olmayan araçlar ortaya çıkabilir
- Dikdörtgenler yerleştirip, layer style’ları üst üste koyup, blend mode ve gradient’lerle özgürce oynanan; sistemlere ya da prompt kurallarına bağlı olmayan saf bir keşif ortamı
- Bu, iPad + Pencil destekli uygulamalarda hızlıca dikdörtgen karalamak gibi bir şey de olabilir; 37signals için ilginç bir deneme alanı da olabilir
- Diğer yönde ise Photoshop gibi, yüksek sadakatli (high-fidelity) kompozit üretime odaklanıp CSS effect’lerinin sınırlarından çıkan, hayal gücünü serbest bırakan araçlara gidilebilir
- Figma’nın ömrünün %90’ında layer effect olarak yalnızca drop shadow ve blur sunmuş olması tuhaf görünüyor
Figma’nın "Sketch moment"ı
- Figma’nın Sketch moment’ı — yani Sketch nasıl Figma karşısında geride kaldıysa, Figma’nın da geride kalacağı an — hızla yaklaşıyor
1 yorum
Hacker News görüşleri
Daha önce yaptığım tasarım sistemini logo, branding ve fontları da ekleyerek bugün gözden geçirdim; sinir bozacak kadar sürekli düzeltme yaptıktan sonra ancak tatmin edici bir sonuç alabildim
Ama kullanım miktarına bakınca haftalık Claude Design kotasının %95’ini zaten tüketmiş olduğumu gördüm
Bu haliyle bana gerçek bir üretim aracından çok örnek amaçlı bir oyuncak gibi geldi
İstediğimiz stille hiç uyuşmuyordu ama içerik gruplama ve bazı IA kararları kendi çalışmama da alınabilecek cinstendi
Genel izlenimim olumluydu ama sonradan Twitter’da başka birinin başarı örneğini görünce, benim aldığım mockup’la neredeyse aynı olduğunu fark edip güldüm
Bu tür tekdüzelik sorununun, yapay zekanın ürettiği metin, kod ve görsellerde olduğu gibi peşimizi bırakmayacağını düşünüyorum
Baldızım küçük bir giyim şirketi işletiyor; son 6 yılda becerisi çok gelişti ama ilk zamanlarda fikirleri gerçek çıktılara dönüştürmekte gerçekten zorlanıyordu
Böyle biri için ilk giriş bariyerini düşüren herhangi bir araç fazlasıyla denemeye değer bence
Yine de şu an research preview aşamasında, o yüzden ileride değişeceğini düşünüyorum
İlk tasarım sistemiyle iPaaS startup’ımın yeni footer bölümünü yaptım ve dört seçenek arasından dördüncüsü oldukça iyiydi
Sonra Claude Code ile bağlayıp biraz düzenledim, kodu ürettim ve doğrudan deploy ettim. İlgileniyorsanız tediware.com’un alt kısmında soldaki "Origin story" ile sağdaki kayıt paneline bakabilirsiniz
Karmaşık bir uygulama değildi ama ortaya çıkan fikirler ve entegrasyon akışı o kadar kolaydı ki büyük bir potansiyel hissettirdi
Claude Design, önceki modellere göre daha pahalı olan Opus 4.7 kullanıyor
Henüz ikinci gününde, yani bitmiş bir ürün değil; ayrıca Anthropic genelde inanılmaz hızlı iyileştiriyor
Üstelik Claude’u uzun süredir kullanıyorsanız zaten benim zevkimi ve stilimi biliyor; başka bir yapay zeka tasarım aracına geçersem her şeye yeniden en baştan başlamak zorunda kalacağım
Yine de ZIP dışa aktarma vardı; o dosyayı Google’ın Stitch’ine koymayı denedim ama uyumluluk pek iyi değildi
Claude Design’ın tasarımdaki tüm karmaşıklığı ortadan kaldıracağı iddiasına pek katılmıyorum
Claude ile vibe coding yapılarak üretilen uygulamalar basit görünüyorsa, bunun nedeni aslında ürün kapsamının basit olması
Bisikletle uçağı aynı ölçütle karşılaştırıp sadeliği karıştırmak gibi geliyor
Aynı tasarım sistemi bileşenlerini kodda ve Figma’da yaptığınızda, kod koşullar ve kontrol akışı sayesinde daha yalın olabilir
Ama kod, doğrudan ekran üzerinde çizim yapmaktan daha az esnektir ve yaratıcı özgürlük üretmek de daha zordur
Sonuçta karmaşıklığı çoğu zaman insanlar kendi elleriyle yaratıyor; 4 ürüne 8 mod ve açık/koyu tema eklemek gibi
Claude bakım işini biraz kolaylaştırabilir ama karmaşıklığın kendisini kayda değer biçimde ortadan kaldırabileceğini sanmıyorum
Bu yüzden bu akışın Figma’ya oldukça büyük bir darbe vuracağını düşünüyorum
Bunu başaran yazılımın sonunda kazanacağını düşünüyorum
Doğru anlayıp anlamadığımı sormak istedim
Küçüklüğümden beri yazılım geliştiriyorum ama CSS konusunda özgüvenim yok; gerçekten geliştiricilerin, hatta frontend geliştiricilerin bile, sadece logo ya da landing page taslağı değil ürünün tüm tasarımını Figma benzeri araçlarla yöneten tasarımcılarla birlikte çalıştığı organizasyonlar çok mu merak ettim
Ve bu tasarımcıların geliştirici olmadan da bir tür stil veritabanı tutup koddaki değişikliklere dokunmadan görünümü yönetmesi mi hedefleniyor, yoksa genelde frontend geliştiriciler de Figma’yı birlikte kullanıyor ama koddan ayrı olmasından hoşlanmıyorlar mı, bunu merak ediyordum
Müşteri de ya doğrudan bunu görüyor ya da en azından o Figma çıktısının yansıdığı branding slaytlarını onaylıyordu
Sonrasında frontend ekibi Figma’ya bakıp CSS ile yeniden uyguluyor ama Figma’nın CSS kopyalama özelliği fiilen ancak işe yaramaz bir inline CSS düzeyinde olduğundan, neredeyse her zaman en iyi yaklaşık karşılığı yeniden yazıyorlar
Ölçü sistemi uyuşmuyor; üst/alt öğe ilişkileri, CSS değişkenleri ya da class hiyerarşisi gibi şeyler de yansımıyor
Birden fazla frontend geliştirici kendi bileşenlerini ayrı ayrı uyguladığında zamanla sapmalar da oluşuyor
Bu yüzden Storybook gibi araçlarla bir başka frontend referans noktası daha oluşturuluyor; oradan React ya da NextJS’e aktarılıyor veya CMS bileşeni olarak yeniden uygulanıyor
Sonra da gerçek source of truth’un hangisi olduğu sorusu çıkıyor ama pratikte olan şey, telefon oyununa benzeyen birden çok referans zinciri
Ana projenin dışında ayrı yapılan promosyon landing page’leri çıkınca, aynı tasarım bir kez daha başka bir sistemde yeniden uygulanıyor
Sonuçta tasarımdan koda geçişteki handoff boşluğu içinde tasarımcının niyeti kayboluyor ya da geliştirici, metin uzunluğu, öğe sayısı değişimi, gerçek scroll davranışı, farklı ekran boyutlarına uyum gibi gerçek dünya sorunlarını sonradan sırtlanmak zorunda kalıyor
Bu kısa meme videosu hem komik hem de değil, çünkü tam da bu gerçeği çok iyi yakalıyor
Genel olarak tasarımcılar kod yazmıyor, geliştiriciler de tasarım yapmıyor; ikisini de iyi yapan insanlar gerçekten çok nadir
Açıkçası oldukça korkunç bir yöntem ama önceki alternatiflere göre daha iyi olduğunu da düşünüyorum
Yine de görsel tasarımı koda çevirme gibi sıkıcı işi büyük ölçüde otomatikleştiren ve kodla doğrudan bağlantılı araçların gerisinde kalıyor
Claude Design’ı henüz kullanmadım ama Figma’nın sayısız GUI seçeneğine kıyasla kodla çok daha rahat eden biriyim
Benim geçmişim de soru sorana benziyor olabilir; bu yüzden böyle bir bakış açısına içgüdüsel olarak direnç duyuyorum
Zaman geçse de tüm mühendislerin stil farkları yaratmadan tutarlı uygulamalar yapmasını sağlamak için belli ölçüde merkezi bir referans gerekiyor
Bu aralar figma-kiwi-protocol ile Figma protokolünü reverse engineer etmeye çalışıyorum; bu yüzden "Figma ajan çağında ihtiyaç duyduğu eğitim verisini kendisi dışladı" sözüne gerçekten katıldım
Figma’nın binary formatı her şeyi sıfırdan kurma yaklaşımında; web, Android, iOS ve diğer tüm tasarımları kapsamak isteyince çok amaçlı hale geliyor ama web’le tam 1:1 eşleşmiyor
Bir ajana faydalı olabilmesi için niyetin açık olması gerekir ama bir UX tasarımcısının hazırladığı Figma’yı gerçekten hayata geçirmiş olanlar bilir; insanlar için bile tasarım niyetini doğru anlamak çoğu zaman zor
Almanca gibi kelimelerin uzadığı dillerde buton ne olacak, CSS’e aktarınca iki satıra kırılırsa ne yapacağız, iPhone dışındaki telefonlarda nasıl davranacak, CSS’te mümkün olmayan gradient border yerine ne kullanacağız, 4K ekranda nasıl görünecek gibi sorular peş peşe geliyor
props ya da autolayout bazı cevapları verebilir ama gerçek hayattaki UX sorumlusu her zaman Figma’yı kusursuz kullanan efsanevi bir varlık değil
Bu yüzden içi HTML tabanlı araçların hızla yetişmesini umuyorum; mümkünse ürün yöneticisinin UX sorumlusuna verdiği prompt’ları da birlikte görebilsek çok iyi olurdu
Yazının kendisi iyiydi ve son birkaç paragraf gerçekten çok komikti
Özellikle bir şeyin başka bir şeymiş gibi davranmak yerine kendi kimliğine dürüst olması gerektiği kısmını sevdim
Bu da bana PenPot’un bu ajan çağında epey avantajlı bir konumda olabileceğini düşündürdü
fig türü canvas yaklaşımı yerine gerçek markup tabanlı tasarım tarafına yöneldikleri için, o yöne ilgi varsa daha da umut verici görünüyor
InVision kapandıktan ve dijital whiteboard tarafına döndükten sonra, benim için bu tasarım aracı pazarı fiilen bitmiş gibi hissettirdi
O kadar zor bir pazar olduğunu düşünüyorum
Daha temelde, tasarım sistemlerini uzun vadede düzgün korumak çok zor; özellikle de kod ve bileşen kütüphaneleriyle derin biçimde iç içeyken, o katmanlara tasarımcılar neredeyse hiç dokunmuyor
Claude Design da Figma da başka hiçbir araç da, yeniden kullanılabilir ve iyi görünen bileşenler ile layout’ların etrafındaki Storybook cehennemini kökten çözecek gibi gelmiyor
Çözüm sanki daha aşağıda, yani bileşen seviyesinde değişmesi gereken bir şey
Şu anda her yeni tasarım için takıp çıkarılacak bileşenler üretme düşüncesine sıkışmış durumdayız
Beğendiğiniz bir bileşen ortaya çıktığında onun tanımını markdown olarak kaydedip, sonraki tasarımda araca bu markdown’u okuyup gerektiğinde o bileşeni kullanmasını söyleyebilirsiniz
Bence bu çok daha esnek ve ilginç bir akış yaratır
Script edilebilir olmalı ve elle çizime de izin vermeli; tasarım değiştiğinde frontend kodu anında değişmeli, koddaki değişiklikler de aynı düzeyde tasarıma geri yansımalı
Nihai modelin, tasarımcı ile frontend mühendisinin handoff olmadan ortak yazar haline gelmesi olduğunu düşünüyorum
Ama ileride düzenleme, çıkarma ve temizleme neredeyse bedava hale geleceği için böyle bir yapılandırmanın kendisinin daha az önemli olacağını söyleyenler de var
Henüz tamamen ikna olmuş değilim ama neden böyle söylendiğini anlıyorum
Son birkaç yıldır bizzat tasarım araçları geliştiren biri olarak, bu yazının hem tasarım alanını hem de Figma’yı şirket olarak oldukça temelden yanlış anladığını düşünüyorum
Figma başından beri, başarılı bir üründen en az onun kadar başarılı bir şirket kurmaya odaklandı
İlk zamanlarda daha iddialı yönleri de vardı ve Evan Wallace gibi yetenekler sayesinde bunu uygulama gücü de bulunuyordu; ama sonuçta WebGL demolarından ziyade para kazandıran somut ürünlere odaklandığı için bugünkü iş yapısına ulaştı
3D özelliklerin olmamasını da bu tercihin sonucu olarak görüyorum
Figma, tasarım aracından önce gerçek şirketlerin kullandığı ürünler geliştiren bir şirketti; IPO aşamasına geldiğinde bu hedefini büyük ölçüde zaten gerçekleştirmişti
Pazarın bundan sonra nereye gideceğini bilmiyorum ama teknik açıdan göz alıcı demolardan çok savaş sandığı olan tarafın daha avantajlı olabileceğini düşünüyorum
Ayrıca yazıda sözü geçen problemleri Figma’dakiler de, aslında tasarım aracı yapmış herkes de zaten çok iyi biliyor
UI/UX’in tasarım, geliştirme ve PM’in kesişiminde olduğu da; kod gibi bir source of truth’a daha yakın olması gerektiği de zaten ortada
Sorun, bunu gerçekten hayata geçirmeye kalkınca işin tasarım araçlarının ötesine geçip kodlama, veri yönetimi ve mimari araçlara kadar uzanan devasa bir probleme dönüşmesi
Yapay zeka tarafında ben de emin değilim ama son dönemin SOTA modelleri o kadar genel amaçlı ki, özel veriden çok temel modelin muhakeme gücü daha önemli olabilir gibi geliyor
Çünkü UI tasarımı dışarıya açık bilgi açısından zengin ve web’den kazınabilecek çok şey var
Bu mücadelede özel bir çıkarım yok ve asıl yazının analizinin doğru olup olmadığını da bilmiyorum
Yine de "özel dosya formatı yüzünden geride kaldı" türü hikâyeleri duyunca az da olsa bir schadenfreude hissi geliyor
Bazı tespitler iyiydi ama genel çerçevede tamamen katılmıyorum
Sketch’in Figma’ya yenilmesinin nedeni tasarım araçları ve çok oyunculu deneyimdi diye düşünüyorum
Nasıl fiziksel ürünler gerçek üretimden önce tasarlanıyorsa, dijital ürünlerde de tasarım aşamasının tümüyle ortadan kalkacağını sanmıyorum
Hatta Figma’nın oraya buraya yayılmaya çalışmak yerine, tam olarak ne olacağına dair kimliğini daha hızlı belirlemesi gerektiğini düşünüyorum
Mac uygulaması kurdurup belirli bir dosyayı açtırma modeli zamanla hem dosyaları eskitti hem de erişilebilirliği düşürdü
Bununla bağlantılı olarak yakın zamanda Claude Design hakkında bir HN başlığı vardı ve 2026 Nisan itibarıyla 732 yorum alacak kadar büyük ilgi görmüştü