İçindekiler
Yapay zekâya bir arayüz tasarlatınca sonuç genelde birbirine benzer: mor gradyanlar, ortalanmış dev başlık ve üç yuvarlak köşeli kart. Bakınca "bunu AI yapmış" demek kolay oluyor. oil-ui, tam bu tekdüzeliği kırmak için yayınlanan açık kaynak bir ajans becerisi (Skill).
oil-ui Nedir?
oil-ui, kod ajanlarının arayüz tasarımı kalitesini yükseltmek için hazırlanmış bir beceri paketi. MIT lisansıyla yayınlanıyor, GitHub'da 698 yıldıza ulaşmış ve Python ile yazılmış. Yazarının kendi tanımıyla amacı "yapay zekânın UI tasarım yeteneğini sınırına kadar zorlamak". Kurulumu bir satır: npx skills add oil-oil/oil-ui (Node.js 18 ve üzeri gerekiyor) ya da destekleyen ajana kurulum talimatı verilebiliyor. Ek API anahtarı istemiyor.
Sorun: Yapay Zekânın Tasarımları Neden Aynı?
Çünkü model, "güzel" ve "sade" gibi soyut sıfatlarla yönlendirildiğinde en tanıdık, en güvenli kalıba dönüyor. oil-ui'nin çıkış noktası bu: soyut beğeni yerine, ölçülebilir ve birbirinden ayrışan tasarım kararları üretmek.
Sekiz Adımlı Tasarım Yöntemi
Beceri, tasarımı sekiz adıma bölüyor:
- Önce kategoriyi tanı: Bu ne tür bir ürün, benzerlerindeki en karakterli iki-üç örnek nasıl yapmış?
- Önce tonu belirle: Enerji, tamamlanma, yoğunluk, ağırlık ve ciddiyet olmak üzere beş ölçekte çerçeve çizilir. "Havalı" gibi kelimeler; hangi yazı tipi, ne kadar boşluk, rengin ne kadar alan kaplayacağı gibi görünür kararlara çevrilir.
- Somut olandan başla: Her yön, bir malzeme + ortam, bir sahne ya da başka bir alandan alınmış bir anlatım biçimiyle başlar.
- İlk ekran kime hitap ediyor? İçeriğe bakan, ürün seçen ve çalışan sayfalar için ilk ekran doğrudan ilk içerik sırasıdır.
- Yönler arası farkı denetle: İskelet, tipografi, renk ve ana görsel dört kalemden en fazla biri ortak olabilir.
- Bir yerde iz bırak: Tüm sayfayı zorlamak yerine bir-iki nokta (bir tıklama geri bildirimi, ödeme başarı anı, 404 sayfası) sınıra kadar götürülür.
- Beğeniyi siz belirlersiniz: Örnekler tek bir karşılaştırma sayfasına dizilir.
- Gerçek görüntüye göre karar ver: Masaüstü ve mobil boyutlarda ekran görüntüsü alınıp kontrol edilir, sonra sadelik için eksiltme yapılır.
Stil Karşılaştırma Sayfası: Kararı Siz Veriyorsunuz
oil-ui'nin en pratik yanı, birkaç tasarım yönünü yan yana koyan dahili karşılaştırma sayfası. HTML dosyası, görsel ya da çalışan bir geliştirme sayfası olabilir; masaüstü ve mobil boyutlar arasında geçiş yapılıyor, ok tuşlarıyla geziliyor. Beğendiğinizi seçtiğinizde kopyalanan tek cümleyi ajana yapıştırıyorsunuz ve üretim o yönde devam ediyor. Yani karar modelin değil, sizin oluyor.
Gizlilik ve Veri Sınırı
Tasarım akışı ek API anahtarı gerektirmiyor. Beceri sürüm kontrolü için en fazla on dakikada bir kez çevrimiçi oluyor, iki saniyede yanıt gelmezse atlıyor ve yalnızca herkese açık sürüm listesini okuyor — proje içeriğini yüklemiyor. Ekran görüntüsü aracı, sizin belirttiğiniz sayfa için ayrı ve geçici bir tarayıcı açıyor. Geliştirici, akışı macOS'ta test ettiğini, Windows ve Linux tarafının henüz doğrulanmadığını belirtiyor.
Açık Kaynak Sürüm mü, Pro mu?
Açık kaynak sürüm; ton belirleme, yön ayrıştırma, stil karşılaştırma sayfası, görsel hiyerarşi, tipografi ve boşluk gibi temel adımları içeriyor. Ücretli Oil UI Pro ise etkileşim ve durumlar, sayfa düzeni ve ekrana uyarlama, SVG/shader efektleri, 19 kart prototipi ve dokuz puanlık bir değerlendirme döngüsü ekliyor. Fiyatı resmî sayfada tek seferlik 69 yuan olarak belirtiliyor; güncel fiyat için resmî sayfayı kontrol etmekte fayda var.
Sonuç
oil-ui, "yapay zekâ yine mor gradyan yaptı" şikâyetine yöntemle yanıt veriyor: soyut övgü yerine ölçülü, birbirinden ayrışan ve karşılaştırılabilir tasarım yönleri. Kod ajanını sık kullanan ve arayüz işini ciddiye alan geliştiriciler için kurulumu bedava, denemesi kolay bir beceri.