Tasarımcıya teslim ettiğimiz repo: kilitli klasörler, serbest bir alan ve gerçek gibi davranan veri

Prototype to Code serisi · Bölüm 2

Bir tasarımcıya «al, burada kod üret» demek kulağa riskli geliyor. Açıkçası öyle de. İyi niyetli tek bir değişiklik bütün uygulamadaki butonları bozabilir.

Bu yüzden tasarımcıya boş bir repo vermedik. Neyin değişebileceği, neyin değişemeyeceği baştan belli olan bir repo verdik.

Temel: hazır ve erişilebilir bir kütüphane

Sıfırdan component yazmadık. Temel olarak Untitled UI React kullanıyoruz; altında React 19, Tailwind CSS v4 ve React Aria var. React Aria sayesinde klavye kullanımı, odak yönetimi ve ekran okuyucu desteği component'lerin içinde hazır geliyor. Tasarımcının bunları ayrıca düşünmesi gerekmiyor.

İki tür klasör: kilitli olan ve serbest olan

Repoda iki tür component var:

• Kütüphane çekirdeği (kilitli). Untitled UI'dan gelen component'ler orijinal kaynakla birebir senkronize duruyor. Bir GitHub Action güncellemeleri doğrudan bu klasörlere çekiyor. Buradaki dosyalara dokunulursa her güncellemede çakışma çıkar ve aynı component'i kullanan bütün sayfalar etkilenir.
• PeopleBox Onyx katmanı (serbest). Ürüne özel her ihtiyaç pb/ klasöründe yaşıyor. Burada kütüphanedeki component içe aktarılıyor ve üzerine ürünün istediği davranış ekleniyor. Kütüphanenin kendisi değişmiyor.

Kural basit: ürüne özel bir varyant varsa kütüphanenin ham hali doğrudan kullanılmaz. Bu kural tasarımı tutarlı tutan en önemli tek kural.

Kilit sadece bir rica da değil. Üç katmanda uygulanıyor:

1. Claude Code'un izin ayarları, bu klasörlerde dosya düzenlemeyi reddediyor.
2. Bir hook, kilidi terminal komutlarıyla dolanmaya çalışan girişimleri yakalıyor.
3. Bir git hook'u, başka bir editörle yapılmış değişiklikleri commit anında durduruyor.

API yok, ama prototip gerçek gibi davranıyor

Bir prototipin en büyük yalanı, tıklandığında hiçbir şeyin hatırlanmamasıdır. Biz bunu kabul etmedik.

Repoda backend yok. Onun yerine her veri türünün kendi küçük depolama modülü var: adaylar, görevler, teklif şablonları gibi. Bu modüller veriyi tarayıcıda saklıyor, okurken bozuk kayıtları ayıklıyor ve değişiklik olduğunda ilgili ekranları haberdar ediyor. Sonuç olarak tasarımcının ürettiği ekran, sayfa yenilendiğinde ya da başka bir sekmede açıldığında da tutarlı davranıyor.

Bir örnek: işe alım uzmanı, adaya gönderilecek bir görev linki oluşturuyor. Bu link gerçekten açılabilen bir sayfa. Aday görevi kendi sayfasında tamamlıyor ve uzmanın ekranı, hiçbir «simüle et» butonuna basılmadan kendiliğinden güncelleniyor. Akışın iki tarafı da gerçek.

Prototip iskelesi: teslimde silmesi kolay

Demo için gereken kısayollar (bir sayfaya atlamak, rol değiştirmek gibi) ürünün arayüzüne karışmıyor. Hepsi iki belirli yerde duruyor: bir prototip dizin sayfası ve hesap menüsündeki küçük bir bölüm. Geliştiriciye teslim sırasında bu iki yeri silmek, bütün iskeleyi kaldırmak için yeterli.

Kısacası

Tasarımcıya özgürlük verdik, ama sınırları çizilmiş bir alanda. Kütüphane kilitli, ürün katmanı serbest ve veri gerçek gibi davranıyor.

Bir sonraki bölümde bu sınırların nasıl yazıldığını anlatacağım. Kuralları bir dokümanda bırakmak yerine nasıl doğrudan AI'ın çalışma bağlamına koyduk?

Musa Turan, PeopleBox'ta AI Software Engineer olarak LLM ve AI sistemleri üzerinde çalışıyor. «Prototype to Code» serisinde, PeopleBox Onyx'te tasarımcının çalışan kod teslim ettiği akışı anlatıyor.