Selamlar değerli dijital mimarlar ve arayüz geliştiricileri,
Türkiye pazarında 1yz.com.tr gibi otoriter, niş ve etkileşimi yüksek bir yapay zeka topluluğu inşa ediyorsanız, Flarum’un varsayılan görünümü bir noktadan sonra vizyonunuza dar gelmeye başlar. Kullanıcılar artık o eski hantal forum yapılarını değil; Vercel ekosisteminin sunduğu o pürüzsüz, anında yüklenen ve Next.js hissiyatı veren minimalist arayüzleri (UI/UX) talep ediyor.
Ancak Flarum’un frontend mimarisi oldukça spesifiktir. Arayüz LESS ile derlenir ve DOM manipülasyonları React değil, Mithril.js üzerinden yürür. ChatGPT veya Gemini’a sadece “Bana modern bir Flarum teması yaz” derseniz, size sistemin derleme (npm run build) aşamasında patlayacak, Core Web Vitals metriklerinizi altüst edecek ve Google’ın “Faydalı İçerik” algoritmalarından eksi puan alacak standart CSS yığınları sunar.
Arama motoru botlarının saniyesinde tarayabileceği, LSI odaklı semantik HTML yapısını bozmayan ve Flarum’u gerçek bir modern web uygulamasına (Web App) dönüştürecek 7 ustalık sınıfı tema promptunu aşağıda paylaşıyorum.
—
🎨 Modern Flarum Arayüzleri İçin 7 Master Prompt
1. Vercel Stili Global LESS ve CSS Değişken (Variable) Mimarisi
“Sen Flarum’un LESS derleme mimarisine ve modern UI/UX trendlerine tam hakim bir önyüz (frontend) mühendisisin. Flarum temamın custom.less dosyasını sıfırdan kurguluyorum. Vercel’in minimalist tasarım dilinden ilham alarak; :root seçicisi altında global CSS değişkenlerimi (renk paleti, tipografi, radius değerleri) tanımla. Klasik Flarum mavisi yerine monokrom, şık siyah/beyaz kontrastlarına dayalı, Inter veya Geist font ailesini kullanan, gölgeleri (box-shadow) son derece yumuşatılmış temiz bir global LESS iskeleti yaz.”
2. Next.js Hissiyatlı Minimalist Hero (Giriş) Alanı
“Flarum anasayfasındaki (IndexPage) standart ‘Hoş Geldiniz’ (Hero) kutusunu tamamen modernize etmek istiyorum. Flarum’un yerleşik .Hero ve .container sınıflarını (classes) ezerek (override), arka planı hafif gradient veya blur (backdrop-filter) efektli, yazıları dikeyde kusursuz ortalanmış ve kullanıcıyı yormayan, Next.js dokümantasyon sayfalarındaki gibi ultra-minimal bir karşılama alanı tasarlayacak LESS kodunu oluştur.”
3. Tartışma Listesi (DiscussionList) Grid ve Hover Animasyonları
“Flarum’un anasayfasında alt alta sıralanan tartışma (konu) listesinin görünümünü değiştireceğiz. .DiscussionListItem sınıfına müdahale ederek, bu listeyi masaüstü görünümde (Desktop) çok daha ferah, aralarında belirgin boşluklar (gap) olan, fare ile üzerine gelindiğinde (hover) yavaşça yukarı kalkan (transform: translateY) ve arka plan rengi hafifçe aydınlanan şık kartlar haline getir. Mobil uyumluluk için @media sorgularını eksiksiz ekle.”
4. Sticky (Yapışkan) ve Şeffaf Header Kurgusu
“Ziyaretçi sayfayı aşağı kaydırdığında Flarum’un üst navigasyon barının (Header) ekranda kalmasını, ancak bunu yaparken devasa bir blok gibi görünmemesini istiyorum. .App-header sınıfını modifiye ederek, header’ı ekrana sabitleyen (position: sticky), arka planını yarı şeffaf yapıp arkasındaki içeriği flulaştıran (backdrop-filter: blur(10px)) ve alt kısmına sadece 1px’lik çok zarif bir gri sınır (border-bottom) çeken CSS/LESS kodunu yaz.”
5. Post Stream (Mesaj Akışı) Temizliği ve Tipografi
“Konu okuma sayfalarındaki (PostStream) mesaj alanlarını, gereksiz görsel gürültüden arındırmak istiyorum. Kullanıcı avatarlarını tam yuvarlak yap, mesaj gövdesinin (.Post-body) font boyutunu okunabilirliği artıracak şekilde 16px/1.6em satır aralığına ayarla. Kullanıcı rütbelerini veya etiketlerini (badges) kalın kutular yerine, çok pastel arka planlara sahip ince ‘pill’ (hap) formatına dönüştüren temiz LESS kodlarını hazırla.”
6. Gece Modu (Dark Mode) Kusursuz Geçiş Mimarisi
“Flarum’un yerleşik gece modu (Night Mode) aktifleştirildiğinde, body.dark sınıfı devreye giriyor. Birinci promptta oluşturduğumuz CSS değişkenlerini baz alarak, sadece .dark sınıfı aktifken çalışacak ve tüm sitenin renk paletini göz yormayan bir ‘koyu lacivert/gri’ tonuna (Örn:
#111111 arka plan,
#eaeaea metin) tersine çevirecek optimize edilmiş renk kodlarını yaz. Kontrast oranlarının WCAG 2.1 erişilebilirlik standartlarına uygun olduğundan emin ol.”
7. Semantik SEO İçin Etiket (Tag) Hiyerarşisi Optimizasyonu
“Flarum’da etiketlerin (Tags) listelendiği sayfanın tasarımını, Google’ın semantik LSI okumasını kolaylaştıracak şekilde düzenleyeceğiz. Etiket ikonlarını (.TagIcon) daha modern ve minimal SVG boyutlarına sabitle, etiket açıklamalarının (.TagLabel-text) okunabilirliğini artır. Kodları yazarken DOM ağacını şişirecek gereksiz iç içe (nested) LESS kurallarından kaçın, sadece doğrudan ilgili sınıflara odaklanarak sayfanın render (oluşturma) hızını maksimumda tut.”
—
💡 Mimari Tavsiyeler ve Kodu İnsancıllaştırma
Yapay zeka modelleri kod üretirken mükemmel bir simetri arar. Ancak organik ve özgün bir arayüz tasarlamak istiyorsanız, bu kodlara mutlaka kendi “kusurlarınızı” ve markanızın ruhunu eklemelisiniz.
Lokal Testlerin Gücü: 1yz’nin o eşsiz forum mimarisini veya üzerinde çalıştığınız özel CSS yapılarını dış dünyadaki API’lere doğrudan göndermek istemiyorsanız; LM Studio veya Ollama gibi araçlarla kendi bilgisayarınızda çalıştırdığınız açık kaynaklı modeller (Örn: Llama 3) üzerinden LESS derlemelerinizi test edin. Fikri mülkiyetinizi yerelde tutmak her zaman en güvenli E-E-A-T stratejisidir.
Asimetrik Dokunuşlar: AI’ın verdiği her border-radius: 8px değerini körü körüne kullanmayın. Bazı butonlarda veya özel öne çıkan alanlarda bu değerleri kasıtlı olarak bozarak tasarıma organik bir hareket katın.
Aşırı Optimizasyon Tuzağı: Kodlarınızı olabildiğince kısa tutun. Flarum zaten yapısal olarak çok hafiftir. Her bir ekstra LESS satırının, son kullanıcının cihazında derlenecek bir yük olduğunu unutmayın. Sadece gerektiği yerde müdahale edin.
Flarum’u standart kalıplarından çıkarıp, Vercel sadeliğinde bir başyapıta dönüştürmek tamamen sizin elinizde. Kodlarınız temiz, derleme süreleriniz daima kısa olsun.
