Yapay zeka destekli tasarım sistemlerinde en büyük zorluklardan biri, sisteminizi tanımlayan belgelerinizin ajanlar tarafından doğru şekilde anlaşılmasıdır. Bir DESIGN.md dosyasını sadece renk kodları ve tipografi tanımlarıyla doldurmak yeterli değildir. Asıl önemlisi, bu belgelerin niyetinizi ve kurallarınızı net bir şekilde ifade etmesidir.
Tasarım Belgelerinde Zayıf ve Güçlü Yaklaşımlar
Bir DESIGN.md dosyası hazırlarken en yaygın hatalardan biri, sadece teknik değerleri listelemektir. Örneğin, renk tanımları yalnızca hex kodlarıyla verildiğinde, ajanlar bu renklerin ne anlama geldiğini ve nerede kullanılacağını anlamakta zorlanır.
- Zayıf yaklaşım: "Birincil renk #FF5733, ikincil renk #33FF57"
- Güçlü yaklaşım: "Ana eylem butonları için yüksek kontrastlı turuncu (#FF5733) kullanın. İkincil içeriklerde yumuşak yeşil (#33FF57) tercih edin. Renkler, kullanım amacına göre seçilmelidir."
Güçlü yaklaşımdaki gibi yazılmış bir belge, ajanlara yalnızca belirli durumları değil, benzer tüm durumları da doğru şekilde değerlendirme yeteneği kazandırır. Bu sayede sisteminizin marka kimliğini korurken, tasarım hatalarının önüne geçebilirsiniz.
Neden İyi Yazılmış Tasarım Belgeleri AI Ajanlarına Etkili Olur?
Yapay zeka modelleri, büyük ölçüde yapılandırılmış metinler üzerinde eğitilir. Markdown formatı da bu yapıya sahiptir. Bu nedenle, DESIGN.md belgelerinizin düzgün bir şekilde yapılandırılması, ajanların belgelerinizi yüksek sadakatle anlamasını sağlar.
Ajanlar için değerler, renklerin ne olduğunu söyler; ancak kurallar, onların ne zaman ve nasıl kullanılacağını belirler. Örneğin:
- "Ana butonlar için #FF5733 kullanın" → Ajanlar bu rengi kullanır, ancak neden kullanıldığını anlamaz.
- "Ana eylem butonları için kullanılan turuncu renk (#FF5733), kullanıcıyı harekete geçirmek amacıyla tasarlanmıştır. Bu renk, yalnızca en önemli eylemler için kullanılmalıdır." → Ajan, rengin kullanım amacını anlar ve benzer durumlarda doğru şekilde uygular.
Bu fark, tasarım sisteminizin tutarlılığını ve marka kimliğinizin korunmasını doğrudan etkiler.
DESIGN.md Dosyasında Olması Gereken Temel Bölümler
Etkili bir DESIGN.md dosyası, ajanların karşılaşabileceği tüm belirsizlikleri ortadan kaldıracak şekilde yapılandırılmalıdır. İşte olmazsa olmaz bölümler:
Genel Bakış
Bu bölüm, tasarım sisteminin kişiliğini ve hedeflerini tanımlar. Ajanlara, sisteminizin neyi temsil ettiğini ve hangi kullanıcı deneyimini hedeflediğini açıkça belirtin. Örneğin:
- "Tasarım sistemimiz, kullanıcı dostu ve erişilebilir bir deneyim sunmayı hedefler. Basitlik ve okunabilirlik ön plandadır."
Renkler
Renkler bölümünde, renklerin ne olduğu kadar, niçin o şekilde kullanıldığına da değinmek önemlidir. Ajanların renk seçimlerinde tutarlılığı sağlamasına yardımcı olun.
- Birincil renk: Yüksek kontrastlı turuncu (#FF5733), kullanıcıyı harekete geçirmek için tasarlanmıştır. Sadece en önemli eylemlerde kullanılmalıdır.
- İkincil renk: Yumuşak yeşil (#33FF57), ikincil içerikler ve yardımcı unsurlar için kullanılır.
Bu tanımlar, ajanların renk seçimlerinde marka kimliğinizi korumasına olanak tanır.
Tipografi
Tipografi bölümünde, her bir yazı stilinin ne amaçla kullanıldığını açıklayın. Örneğin:
- Başlık 1: Ana başlıklar için kullanılır. Kalın ve büyük puntolu olmalıdır.
- Metin: Ana içerik için kullanılır. Okunabilirliği yüksek bir font tercih edilmelidir.
Bu tanımlar, ajanların metin düzenlemelerinde tutarlılığı sağlamasına yardımcı olur.
Düzen ve Boşluk
Düzen ve boşluk bölümünde, ızgara sistemi ve bileşenler arasındaki boşluklar hakkında net kurallar belirleyin. Örneğin:
- Dikey boşluk: Bileşenler arasında 16px boşluk bırakılmalıdır.
- Yatay boşluk: İçerik blokları arasında 24px boşluk kullanılmalıdır.
Bu kurallar, ajanların tasarım sisteminizi doğru şekilde uygulamasına olanak tanır.
Yapılması Gerekenler ve Yapılmaması Gerekenler
Bu bölüm, DESIGN.md dosyanızın en değerli kısmıdır. Ajanların yapabileceği ve yapamayacağı eylemleri net bir şekilde tanımlayın. Örneğin:
Yapılması Gerekenler
- Bir ekranda yalnızca bir adet ana eylem butonu bulunmalıdır.
- Renk kontrastı, WCAG AA standartlarına uygun olmalıdır (normal metin için 4.5:1).
- İki farklı font ağırlığı kullanılabilir.
Yapılmaması Gerekenler
- Aynı ekranda hem yuvarlak hem de keskin köşeli bileşenler kullanılmamalıdır.
- Üçten fazla font ağırlığı kullanılmamalıdır.
- Dekoratif amaçlarla renk kullanılmamalıdır.
Bu kurallar, ajanların tasarım sisteminizden sapmasını engeller ve marka kimliğinizin korunmasını sağlar.
Ne Kadar Ayrıntı Yeterli?
Bir DESIGN.md dosyasını yazarken, en önemli kriterlerden biri, belgelerinizi okuyan birinin sistemi doğru şekilde uygulayıp uygulayamayacağıdır. Belgelerinizde, hatalardan kaçınmaya yönelik kuralları net bir şekilde belirtin ve gereksiz ayrıntılardan kaçının.
Sıkça Sorulan Sorular
Renklerin tanımlayıcı adları kullanılabilir mi?
Evet, ancak bu adlar, token isimleriyle bağlantılı olmalıdır. Örneğin, #FF5733 rengi için "anaEylemRengi" kullanılabilir. Bu sayede ajan, rengin ne anlama geldiğini ve nerede kullanılacağını daha iyi anlar.
En önemli bölüm hangisidir?
Yapılması gerekenler ve yapılmaması gerekenler bölümüdür. Bu bölüm, ajanların yapabileceği ve yapamayacağı eylemleri net bir şekilde tanımlar ve tasarım sisteminizin tutarlılığını doğrudan etkiler.
Sonuç: Tasarım Belgelerinizin Gücünü Keşfedin
Tasarım sistemleri yalnızca token değerlerinden ibaret değildir. Kurallar ve niyetler, sisteminizin marka kimliğini korumanın ve ajanların doğru şekilde çalışmasının anahtarıdır. DESIGN.md belgelerinizi yazarken, değerlerin yanı sıra, bu değerlerin nasıl uygulanacağını da net bir şekilde tanımlayın. Bu sayede, yapay zeka destekli araçlarınızın sisteminizi doğru şekilde anlamasını ve uygulamasına olanak tanıyın.
Yeni bir tasarım sistemine başlarken, bu kuralların ne kadar önemli olduğunu unutmayın. Tasarım belgelerinizin kalitesi, sisteminizin gelecekteki başarısını doğrudan etkileyecektir.
Yapay zeka özeti
AI ajanlarının tasarım sisteminizi doğru şekilde anlaması ve uygulaması için DESIGN.md belgelerinizi nasıl yazacağınızı öğrenin. Renkler, tipografi ve kurallar hakkında detaylı bir rehber.
