Bir skill neler çizebilir

Soru

Bir fikri, onu yapan çalışan bir makineyi çizerek anlatmayı vaat eden bir skill. Zaten iyi bildiğin konuları verince bunu gerçekten yapabiliyor mu?

Ne vaat ediyor (README’sinden)

/anatomy explain how a token bucket rate limiter works, interactive
Önce gerçek sayıları topla, sonra nesneyi tasarla. Kutu, ok ve etiket yok; anlatan şey nesnenin kendisi.
Çıktı: SVG, SVG + WebGL ya da 3D (beta). Tek başına bir HTML sayfası, düz bir SVG ya da React bileşeni.

Ne denedim

İlk isteğim Türkçeydi: retarder nasıl çalışır, onu çiz. Retarder kamyon ve otobüslerdeki yardımcı fren. Kardan miline bağlı kanatlı bir çark, yağı hiç dönmeyen ikinci bir kanatlı çarka fırlatıyor; iki çark arasında savrulan yağ hızı ısıya çeviriyor. Sürtünme olmadığı için de aşınan bir şey yok.

Kanatları vurgulu olan rotor kardan miliyle dönüyor ve yağı gövdeye cıvatalı statora fırlatıyor. Kolu bir kademeye aldığında hava basıncı depodaki yağı çarkların arasına itiyor; ısıyı soğutucu alıp motorun soğutma suyuna veriyor. Kanatlar görünsün diye çarklar ayrık çizildi, gövdenin içinde yüz yüze duruyorlar. Sayılar Volvo'nun RET-TH ürün sayfasından; ünite Voith'un Retarder VR 3250'si: 750 rpm'de 3.000 N·m, 500 rpm'de 1.800 N·m.

Etkilendim.

Beni asıl etkileyen, daha tek çizgi çizmeden gidip araştırması oldu. Volvo’nun teknik sayfasını bulup gerçek sayıları oradan aldı; kadrandaki tork uydurma değil. Yakınlaşınca bile her vidanın bir yere oturması, kendi ekran görüntüsüne bakıp hatasını düzeltmesi artık agent’ların hep yaptığı şeyler. Burada hepsi tek bir figürde bir araya geliyor; nasıl çalıştığını sorunca da kendini bir makine olarak çiziyor.

Skill’in çizmeden önce yaptıkları, oturumdan:

Önce gerçek sayılara baktı. Kaynağı Volvo’nun RET-TH ürün sayfası, ürün Voith’un: kardan milinde en çok 3.250 N·m, 750 rpm’de 3.000, 500 rpm’de 1.800; 5,4 litre yağ; kolda 0 ve %20–100 arası 1–3 kademe.

Volvo’nun sayfası üreticiyi de yazıyor: Voith, retarder’ın ağası. Voith bu üniteye Retarder VR 3250 diyor: kendi yağ devresi olan, step-up bir retarder; Volvo FH ve FM serisinde kullanılıyor. Step-up, bir dişlinin rotoru kardan milinden hızlı döndürmesi demek, en çok 5.000 rpm. Volvo’nun sayfası gibi figür de o dişliyi göstermiyor. Voith’un ticari araç bölümü Kasım 2025’ten beri ayrı bir şirket: Driventic.
Nesneyi seçti: test tezgâhının üstünde retarder’ın kendisi; yanında yağ deposu, plakalı soğutucu, kumanda kolu ve tork kadranı.
Kendi ekran görüntülerine bakıp yanlışları üç turda düzeltti: depo statorun arkasında kalmıştı, bir boru gövdenin yanında havada bitiyordu, soğutma suyu hatları da görünmüyordu.

İkinci örneği skill’i daha zor bir nesnede görmek için seçtim: mekanik saatin tik tak eden kısmı, İsviçre tipi lever escapement.

Balans her ortadan geçişinde yakut impuls taşıyla çatalı bir dayama piminden öbürüne atıyor. Paletin biri dişi bırakıyor, öbürü sıradakini yakalıyor ve kaçış çarkı yarım diş, yani 12° ilerliyor. Saatte 28.800 vuruş saniyede 8 vuruş demek; çark da 3,75 saniyede bir tam tur atıyor. Balansı geri getiren, balans köprüsünün altındaki spiral yay.

İlk escapement büyük bir tezgâhın üstünde çok küçük kalmıştı, kaçış çarkı da sıradan bir dişliye benziyordu. Bir turda ikisi de düzeldi: tezgâh gitti, dişler de lever escapement’ta gerçekten olan eğik club dişlere döndü.

Skill, kendini çiziyor

Üçüncü istek skill’in kendisiydi: anatomy skill’i nasıl çalışıyor? Prompt’u Claude’la birlikte yazdık, boyut Hero:

Draw the anatomy skill explaining itself, as a drafting machine on a workbench: a concept card goes into a slot (the prompt); a reading head picks the idea and prints a parts list on a paper tape (concept and parts list before geometry); a rack of drawers holds small isometric parts (lathe-turned pieces, tubes, screws, springs = the kit); a gantry arm places them on a drawing board in painter’s order, back to front; a lamp with four filters gives four-tone shading; a 4× magnifier on the right inspects the drawing and adds missing parts; an audit gauge confirms nothing intersects. One control: a lever that steps the machine through the stages; readout shows the stage and part count.

Anatomy skill’i, kendi kitiyle, workflow’unda yazanı yapan bir makine olarak çizilmiş hali. 1: prompt bir kartla giriyor, her şeyden önce boyut belli oluyor (Hero 80–150 parça). 2: geometriden önce konsept ve parça listesi geliyor; şerit her parça için bir satır basıyor. 3: portal parçaları arkadan öne, ressamın sırasıyla kâğıda bırakıyor. 4: lambanın taretindeki dört filtre yan yüzlerin dört tonunu, en son da daha açık üst yüzleri veriyor. 5: lup 4× büyütüp ilk turda unutulan vidayı buluyor ve ekliyor, gösterge de audit’in on iki kontrolünü sayıyor. Kâğıttaki çizim skill’in en küçük örneği: ayaklı bir komparatör.

Kolun her konumu skill’in kendi workflow’undan bir adım, SKILL.md’de yazdığı gibi: önce boyutu söyle, geometriden önce konsepti ve parça listesini yaz, arkadan öne boya, gölgeyi kite bırak, 4× yakınlaşıp eksik parçaları ekle, audit’in her satırı sıfır diyene kadar çalıştır. Kâğıttaki çizim skill’in en küçük örneği, ayaklı bir komparatör; o da aynı kitle çizildi. Plotter onu bakış doğrultusunda uzatarak çiziyor, böylece durduğun yerden yan yatmış bir kâğıt gibi değil, bir figür gibi görünüyor.

Buradaki figürlerle farkı

Bu sitenin figürleri elle yapılıyor ve sadece CSS kullanıyor; tema düğmesi dışında JavaScript yok. Skill’in kendi figürleri ise JavaScript ile hareket ediyor (yaylar, fare, klavye), bazıları WebGL de kullanıyor. Burada statik SVG’ye dönmeleri gerekti, bütün hareket de CSS’e geçti: rotor dönüyor, yağ akıyor, balans salınıyor, çatal atıyor, çark adım adım ilerliyor. Her parça kendi düzleminde dönüyor. Makinenin kolu bir sıra radio button, turu da her parça için bir CSS animasyonu. Renkler sitenin gündüz ve gece temasına uyuyor.

Sonuç

Mekanik konuları anlamak için kesin kullanırım, görsel olarak merak ettiğim soyut konularda da işime yarar.