Yapay zekâ ile yazılım geliştirirken bir noktadan sonra şunu fark ediyorsunuz: Ortaya kaliteli bir sonuç çıkması sadece kullanılan yapay zekâ modeline bağlı değil. Yapay zekâya projeyi ne kadar doğru anlattığınız da en az kullanılan teknoloji kadar önemli. Özellikle tasarım tarafında “modern bir arayüz oluştur” veya “profesyonel bir tasarım yap” demek çoğu zaman yeterli olmuyor. Çünkü yapay zekâ sizin kafanızdaki tasarım anlayışını kendiliğinden bilemez.
Ben bu nedenle projeye başlamadan önce tasarım ve geliştirme kurallarını Markdown dosyaları halinde proje klasöründe tutmanın daha sağlıklı olduğunu düşünüyorum. Buradaki amaç AI'ya sürekli aynı şeyleri tekrar anlatmak değil. Projenin içerisinde, yapay zekânın takip edeceği bir geliştirme rehberi oluşturmak.
Projenin Amacı ve Kapsamı
İlk olarak yapay zekânın üzerinde çalışacağı projeyi anlaması gerekiyor. Projenin ne işe yaradığı, kimlere hitap ettiği, hangi problemi çözdüğü, temel özellikleri, kullanıcıların yapabileceği işlemler ve projenin kapsamı açık şekilde yazılmalı.
Aynı şekilde proje dışında bırakılan özellikler de belirtilmeli. Bu bölüm aslında AI'nın bütün geliştirme sürecindeki kararlarını etkiliyor. Projenin amacını bilmeyen bir yapay zekâ, teknik olarak çalışan fakat ürünün genel amacına uymayan çözümler üretebilir.
Tasarım Mimarisi
Tasarımın genel mimarisi daha en başta belirlenmeli. Sayfanın hangi bölümlerden oluşacağı, ortak bileşenlerin nasıl kullanılacağı, component yaklaşımı, layout yapısı ve sayfalar arasındaki görsel bütünlük dokümante edilmeli.
Özellikle aynı bileşenin farklı sayfalarda tekrar tekrar oluşturulmasının önüne geçilmeli. Bir kez oluşturulan ortak UI bileşeninin mümkün olduğunca tekrar kullanılması istenmeli.
Bu yaklaşım hem kod tekrarını azaltır hem de proje büyüdükçe tasarımın dağılmasını engeller.
Dosya Yapısı
Yapay zekâ, proje dosya yapısını kendisine bırakıldığında her projede farklı bir mimari oluşturabilir. Bu nedenle kullanılacak klasörleri, dosyaları ve bunların görevlerini Markdown dosyasında önceden tanımlamak daha doğru olur. Hangi klasörde hangi dosyaların bulunacağı ve dosyaların ne amaçla kullanılacağı açıkça belirtilmelidir. Böylece yapay zekâ yeni dosyaları rastgele oluşturmak yerine mevcut proje mimarisine uygun hareket eder.
Yeni bir dosya gerektiğinde de önce mevcut yapıyı kontrol ederek uygun konuma yerleştirir. Bu yaklaşım, projenin büyüdükçe dağılmasını ve aynı iş için gereksiz dosyalar oluşturulmasını önler.
Bootstrap 5.3 mü, Tailwind CSS v4 mü?
Bu kararın yapay zekâya bırakılmaması gerekiyor. Projenin hangi CSS framework'ünü kullanacağı ve hangi sürümün kullanılacağı başlangıçta kesin olarak belirlenmeli.
Bootstrap 5.3 kullanılacaksa AI'nın Bootstrap'ın grid, utility ve component sistemine bağlı kalması sağlanmalı.
Tailwind CSS v4 kullanılacaksa tasarım sisteminin Tailwind'in utility-first yaklaşımına göre oluşturulması gerektiği belirtilmeli.
Aynı projede ihtiyaç olmadığı halde birden fazla CSS framework kullanılmamalı.
Buradaki amaç AI'nın her yeni özellikte farklı bir yöntem denemesini engellemek.
Alpine.js ve JavaScript Mimarisi
CSS framework kadar JavaScript tarafının da önceden belirlenmesi önemli. Projede Alpine.js kullanılacaksa hangi işlemlerde kullanılacağı açıkça belirtilmeli.
Menü, modal, dropdown, tab, filtreleme ve benzeri küçük frontend etkileşimlerinin Alpine.js üzerinden yönetilmesi istenebilir.
Ayrıca projeye ihtiyaç olmadığı halde yeni JavaScript kütüphaneleri eklenmemesi gerektiği de kurallara yazılmalı.
Böylece AI her ihtiyaçta farklı bir çözüm üretmek yerine belirlenen frontend mimarisine bağlı kalır.
HTML Mimarisi
HTML yapısı da en baştan tanımlanması gereken konulardan biri.
Sayfaların semantic HTML kullanması, anlamlı HTML elementlerinden oluşması ve gereksiz div kullanımından kaçınılması gerektiği belirtilmeli.
Header, navigation, main içerik, section, article, aside ve footer gibi yapıların uygun yerlerde kullanılması sağlanmalı.
Heading hiyerarşisi de belirli bir mantık içerisinde ilerlemeli. h1 h2 h3 h4 h5 h6 li span strong kullanımı ile ilgili kuralları yazarak kaliteli içerik oluşturmasını sağlarsınız.
Bu konu yalnızca SEO açısından değil, erişilebilirlik ve kodun sürdürülebilirliği açısından da önemli.
Tasarımın Genel Yapısı
AI'ya tasarımın nasıl bir karaktere sahip olması gerektiği anlatılmalı. Sade, kurumsal, minimal, modern veya daha farklı bir görsel yaklaşım tercih edilebilir.
Bunun yanında gereksiz gölge, aşırı gradient, fazla yuvarlatılmış alanlar, gereksiz animasyonlar ve görsel kalabalık gibi konularda da sınırlar belirlenmeli.
“Modern tasarım” gibi genel ifadelerin yanında tasarımın hangi özelliklere sahip olması ve hangi özelliklerden uzak durması gerektiği açıkça yazılmalı.
Renk Sistemi
Renk seçimi yapay zekânın her sayfada yeniden karar vereceği bir konu olmamalı. Ana renk, yardımcı renkler, arka plan, yüzey, metin, pasif metin, kenarlık ve durum renkleri belirlenmeli.
Bunun yanında renklerin hangi amaçlarla kullanılacağı da açıklanmalı.
AI yeni bir sayfa oluşturduğunda yeni renkler üretmek yerine mevcut renk sistemine bağlı kalmalı.
Font ve Tipografi
Font ailesi ve tipografi sistemi de baştan belirlenmeli. Başlıklar, açıklamalar, normal metinler, menüler ve butonlar arasında belirli bir görsel hiyerarşi bulunmalı. yoksa saçma sapn buton tasarım balrı saçma sapan düzensiz yapılar karşınıza cıkar. Font ağırlıkları, yazı boyutları, satır aralıkları ve mobildeki davranışları dokümante edilebilir.
Amaç her sayfada farklı bir tipografi ortaya çıkmasını engellemek.
Buton Tasarımı
Butonlar için ortak bir tasarım sistemi oluşturulmalı.
Birincil, ikincil, outline, pasif ve tehlikeli işlemler için kullanılacak buton türleri belirlenebilir.
Butonların boyutları, radius değerleri, yazı yapıları ve etkileşim durumları da bu sistem içerisinde tanımlanmalı.
AI yeni bir özellik geliştirirken yeni bir buton tasarlamak yerine mevcut sistemi kullanmalı.
Kart Tasarımı
Kartlar da belirli bir sistem içerisinde kullanılmalı. Padding, radius, border, shadow ve içerik hiyerarşisi standartlaştırılabilir.
Ancak her içeriğin kart içerisine alınmaması gerektiği de belirtilmeli. Kart kullanımı gerçekten içerik gruplamasına veya görsel hiyerarşiye katkı sağlıyorsa tercih edilmeli.
Responsive ve Mobil Tasarım
Mobil uyumluluk sonradan yapılacak bir düzeltme olarak görülmemeli. Proje başlarken mobil, tablet ve masaüstü davranışları düşünülmeli.
Menüler, sidebar, grid yapıları, tablolar, formlar, butonlar ve içerik alanlarının farklı ekranlarda nasıl davranacağı belirlenmeli.
Kullanılan framework'ün responsive sistemi tercih edilmeli ve proje boyunca aynı yaklaşım korunmalı.
Kullanıcı Deneyimi
Tasarımın sadece güzel görünmesi yeterli değil.
Kullanıcının ne yapacağını anlayabilmesi, yaptığı işlemin sonucunu görebilmesi ve hata durumunda ne yapması gerektiğini anlayabilmesi gerekiyor. Loading, success, error, empty state ve disabled gibi durumlar tasarımın bir parçası olarak düşünülmeli.
Özellikle yönetim panellerinde kullanıcıya verilen geri bildirimler oldukça önemli.
Animasyonlar
Animasyonlar da tasarım sisteminin bir parçası olarak tanımlanabilir.
Animasyonun amacı kullanıcı deneyimini geliştirmek olmalı.
Gereksiz hareketler, ağır geçişler ve sürekli animasyonlardan kaçınılması gerektiği belirtilmeli.
Böylece AI “modern tasarım” anlayışını gereksiz efektlerle yorumlamaz.
Semantic HTML ve SEO
Tasarım dokümantasyonunda SEO tarafı da unutulmamalı.
Semantic HTML, doğru heading yapısı, görseller için uygun alt açıklamaları, canonical yapısı ve meta bilgileri proje kurallarının içerisinde bulunabilir.
AI'ya sadece “SEO uyumlu yap” demek yerine hangi SEO kurallarına uyacağı açıkça belirtilmeli.
Schema Yapısı
Yapılandırılmış veri kullanımı da proje içerisinde ayrıca tanımlanmalı. Kullanılan Schema türlerinin sayfanın gerçek içeriğine uygun olması gerektiği belirtilmeli.
AI'nın gerçekte bulunmayan bilgileri Schema içerisine eklememesi özellikle önemli.
Schema'nın SEO için otomatik olarak her sayfaya eklenen bir kod parçası gibi değil, sayfa içeriğini doğru şekilde tanımlayan bir yapı olarak ele alınması gerekiyor.
Open Graph
Sayfaların sosyal medya ve mesajlaşma platformlarında nasıl görüneceği de önceden düşünülmeli. Open Graph başlık, açıklama, görsel, URL ve içerik türü gibi alanların sayfa yapısına göre oluşturulması gerektiği dokümante edilebilir.
Her sayfada aynı Open Graph bilgilerinin kullanılmaması ve sayfanın gerçek içeriğinin yansıtılması gerektiği belirtilmeli.
Neler Olmalı, Neler Olmamalı?
Markdown dosyalarında yalnızca yapılacak işler değil, yapılmayacak işler de açıkça yazılmalı.
Yapay zekâya mevcut tasarım sistemini değiştirmemesi, yeni framework eklememesi, gereksiz kütüphaneler kullanmaması, rastgele renk ve font seçmemesi, mevcut componentleri tekrar oluşturmaması gibi kurallar verilebilir.
Bu bölüm AI açısından oldukça önemli çünkü bir geliştiricinin projede kendi başına karar vermesini istemediği noktaları açıkça ortaya koyuyor.
Proje Klasöründe Markdown Yapısı
Bütün bu bilgileri tek bir dosyada toplamak yerine konu başlıklarına ayırmak daha düzenli olabilir. Proje klasöründe docs klasörü acıp bütün kuralları içine koyup proja anasayfasında istediklerini yasarak kaliteli tasarım elde edebilirsin.
Örneğin proje içerisinde; docs klasörü
PROJECT.md
PLANS.md
ARCHITECTURE.md
DESIGN.md
UI.md
UX.md
SEO.md
SCHEMA.md
OPEN-GRAPH.md
RULES.md
gibi dosyalar bulunabilir.
Böylece proje içerisinde sadece kod değil, AI'nın takip edeceği bir proje standardı da oluşmuş olur.
PROJENİN AMACI
Projenin amacı, mimarisi, HTML yapısı, CSS framework'ü, kullanılan sürüm, JavaScript yaklaşımı, renkleri, fontları, componentleri, responsive kuralları, kullanıcı deneyimi, SEO, Schema ve Open Graph yapısı önceden belirlenebilir.
En önemlisi de AI'ya sadece ne yapacağını değil; hangi teknolojiyi kullanacağını, nasıl bir yapı kuracağını, hangi standartlara uyacağını ve neleri yapmaması gerektiğini anlatmak.
Böyle yaptığınızda yapay zekâ proje içerisinde sürekli yeni kararlar veren bir araç olmaktan çıkıp, belirlediğiniz kurallar içerisinde çalışan bir geliştirici yardımcısına daha yakın hale geliyor.
Bence kaliteli sonuç almak için asıl mesele daha fazla kod yazdırmak değil. Yapay zekânın doğru karar verebilmesi için doğru çerçeveyi oluşturmaktır.
Arkadaşlar benim felsefem bu sizin felsefeniz nedir yazın tartışalım...
NOT: Projeyi İngilizce yazmanız daha dogru olur. Cünkü tüm yapay zeka modelleri global dil İngilizce ile calışıyor. Makine dilide ingilizce!!!!
