Tasarım Sistemi: Bileşen, Token ve Dokümantasyonda Yapay Zeka — UI/UX Tasarımında Yapay Zeka

Kazanimlar:

Tasarım tokenları, bileşen adlandırması ve kullanım kurallarını yapay zeka ile taslaklaştırıp tutarlı hale getirebilme
Bileşen dokümantasyonu, do/don't örnekleri ve kullanım metinlerini yapay zeka ile hızlı üretebilme
Yapay zeka önerilerini mevcut tasarım sistemiyle çelişki açısından denetleyip tekilliği koruyabilme

Tasarım sistemi (design system), bir ürün ailesinin tutarlı görünmesini ve davranmasını sağlayan ortak dildir: yeniden kullanılabilir bileşenler (buton, kart, form alanı), tasarım tokenları (renk, boşluk, tipografi gibi değerlerin adlandırılmış tanımları) ve bunların nasıl kullanılacağını anlatan dokümantasyon. İyi bir tasarım sistemi, on tasarımcının aynı ürünü sanki tek elden çıkmış gibi tasarlamasını sağlar. Bu sistemi kurmak ve bakımını yapmak yorucu, tekrarlı ve yazı yoğun bir iştir; tam da yapay zekanın parladığı yer. Ama sistemin özü tekillik ve tutarlılıktır; yapay zekanın önerileri mevcut sistemle çelişki açısından denetlenmeden kabul edilemez.

Tokenlar ve adlandırma: tutarlılığın temeli

Tasarım tokenı, bir tasarım kararının adlandırılmış, tekrar kullanılabilir değeridir: renk-birincil, boşluk-orta, yazi-baslik-buyuk. Tokenlar sayesinde bir rengi tek yerden değiştirir, tüm üründe güncellersiniz. Ama tokenların gücü adlandırmanın tutarlılığına bağlıdır; mavi-1, ana-mavi, primaryBlue karışık kullanılırsa sistem çöker.

Yapay zeka burada iki işte iyidir: mevcut token setinizi tutarlı bir adlandırma şemasına göre gözden geçirmek ve yeni tokenlar için şemaya uygun ad önermek. "Bu token listesini semantik (anlam temelli) adlandırmaya çevir" gibi bir istek, mavi-500 yerine renk-eylem-birincil gibi anlamı taşıyan adlar üretmenize yardım eder. Ama son adlandırma kararı ekibin sözleşmesidir; model sadece taslak sunar.

İpucu: Yapay zekaya token adlandırırken mevcut şemanızın 5-6 örneğini verin ve "aynı kalıpta devam et" deyin. Örneksiz istek, sisteminize yabancı adlar üretir.

Bileşen dokümantasyonu: yapay zekanın en verimli alanı

Bir bileşenin dokümantasyonu şunları içerir: ne işe yarar, ne zaman kullanılır, ne zaman kullanılmaz, varyantları, durumları (varsayılan, üzerine gelince, pasif, hata), erişilebilirlik notları ve "do/don't" (yap/yapma) örnekleri. Bu metinleri elle yazmak saatler alır ve çoğu ekip bu yüzden dokümantasyonu ihmal eder.

Yapay zeka bu boşluğu doldurur: bir bileşeni tarif ettiğinizde, tutarlı formatta taslak dokümantasyon, kullanım kuralları ve do/don't örnekleri üretir. Böylece dokümantasyon "hiç yok"tan "taslak var, düzeltilecek"e geçer ki bu büyük bir kazanımdır. Ancak model bileşenin gerçek davranışını bilmez; ürettiği kuralları sistemin gerçeğiyle eşleştirmek sizin işinizdir.

Doküman parçası

Yapay zekanın katkısı

İnsan doğrulaması

Ne işe yarar

Net taslak tanım

Gerçek amaca uygunluk

Ne zaman kullanılır

Genel senaryolar

Ürüne özgü kurallar

Do/Don't örnekleri

Hızlı taslak çiftleri

Gerçek yanlış kullanımlar

Erişilebilirlik notu

Standart hatırlatmalar

Gerçek testle teyit

Varyant/durum listesi

Olası liste

Sistemde gerçekten var olanlar

Çelişki denetimi: tekilliği korumak

Tasarım sisteminin baş düşmanı çoğaltmadır (duplication): aynı işi yapan iki buton, iki farklı boşluk ölçeği, çelişen iki kural. Yapay zeka yeni bir bileşen veya kural önerdiğinde, bu öneri mevcut sistemle çelişebilir — model sisteminizin tamamını akılda tutmaz. Bu yüzden her öneriyi "bu, zaten var olan bir şeyle çakışıyor mu?" sorusuyla süzün. Yapay zekayı çelişki taramasında da kullanabilirsiniz: mevcut sistem özetini ve yeni öneriyi verip çakışmaları listeletebilirsiniz. Ama nihai "tekil doğru" kararı ekibindir.

Üç mini vaka

Vaka 1 — Dokümantasyon borcu kapandı. Bir ekibin 24 bileşeninin yalnızca 6'sında dokümantasyon vardı. Yapay zekayla kalan 18 bileşen için taslak doküman üretildi; ekip her birini 10-15 dakikada düzeltti. Haftalarca ertelenen iş, iki günde tamamlandı.

Vaka 2 — Token adlandırma tutarlılaştı. Bir sistemde renkler mavi1, anaMavi, brand-blue gibi karışıktı. Yapay zeka mevcut 40 tokenı semantik şemaya çevirdi; ekip revize edip tek standarda geçti. Sonraki tasarımlarda renk hataları belirgin biçimde azaldı.

Vaka 3 — Çakışan bileşen reddedildi. Yapay zeka "ikincil eylem butonu" adında yeni bir bileşen önerdi. Ekip çelişki taraması yapınca bunun mevcut "hayalet buton"la aynı işi yaptığını gördü ve öneriyi reddetti. Ders: her öneri sisteme yeni bileşen eklemez; bazen mevcut olanı kullanmak doğrudur.

Kopyalanabilir promptlar

Bu token listesini semantik (anlam temelli) adlandırma şemasına çevir.Mevcut şema örneklerim: <<5-6 örnek>>. Aynı kalıpta devam et.Her token için eski ad -> yeni ad -> gerekçe tablosu ver.Liste: <<tokenlar>>

Çelişki taraması yap: Mevcut tasarım sistemim özeti: <<özet>>.Yeni önerilen bileşen/kural: <<öneri>>.Bu öneri mevcut sistemle çakışıyor mu (aynı işi yapan bileşen,çelişen kural, tekrar eden token)? Çakışmaları ve önerini listele.

Bu bileşen için "do/don't" örnek çiftleri üret:gerçekçi doğru kullanım ve gerçekçi yanlış kullanım senaryoları.Her çift için neden doğru/yanlış olduğunu tek cümle açıkla.Bileşen: <<ad ve amaç>>

Zayıf prompt / Güclü prompt

Zayıf: "Bu buton için dokümantasyon yaz."

Sonuç: Genel, formatı belirsiz, sistemle bağı olmayan bir metin.

Güçlü: "Bu butonu şu formatta dokümante et (ne işe yarar / ne zaman kullanılmaz / varyantlar / durumlar / erişilebilirlik / do-don't); bilmediğin davranışı uydurma, 'ekip doldurmalı' yaz."

Sonuç: Tutarlı formatta, dürüst boşluklu, düzeltilebilir taslak.

Fark: güçlü prompt format + uydurma yasağı + do/don't ister.

Sık yapılan hatalar

Token adlandırmayı örneksiz istemek. Model sisteminize yabancı adlar üretir; tutarlılık bozulur.
Çelişki taraması yapmadan bileşen eklemek. Çoğaltma, sistemin baş düşmanıdır.
Modelin uydurduğu davranışı doğru sanmak. Yapay zeka bileşenin gerçek davranışını bilmez.
Erişilebilirlik notunu testsiz kabul etmek. Standart hatırlatma, gerçek test yerine geçmez.
Dokümantasyonu bir kez yazıp güncellememek. Sistem değiştikçe doküman da güncellenmeli.

Özetle

Tasarım sistemi, tutarlılığın ve ölçeklenmenin altyapısıdır; ama bakımı yazı yoğun ve tekrarlı olduğu için sıkça ihmal edilir. Yapay zeka bileşen dokümantasyonu, do/don't örnekleri, kullanım metinleri ve token adlandırma taslaklarını hızla üreterek bu borcu kapatır. Ancak sistemin özü tekillik ve tutarlılıktır: her token adı örnek şemaya, her bileşen önerisi çelişki taramasına, her davranış açıklaması gerçeğe karşı doğrulanmalıdır. Modeli verimli bir taslakçı olarak kullanın; tekil doğru kararını ekip verir.

Uygulama görevi

Dokümantasyonu eksik bir bileşen seçip ilk prompt ile taslak doküman üretin.
"Ekip doldurmalı" işaretli alanları gerçek davranışla tamamlayın.
İkinci prompt ile 8-10 tokenınızı semantik şemaya çevirip eski/yeni ad tablosu çıkarın.
Yeni bir bileşen fikri için üçüncü prompt ile çelişki taraması yapın.
Dördüncü prompt ile bir bileşene do/don't örnek çiftleri üretip sisteme ekleyin.

Kontrol listesi

[ ] Token adlandırmayı örnek şemaya bağladım.
[ ] Yeni bileşenleri çelişki taramasından geçirdim.
[ ] Modelin uydurduğu davranışları gerçekle doğruladım.
[ ] Erişilebilirlik notlarını gerçek testle teyit etmeyi planladım.
[ ] Dokümantasyonu tutarlı bir formatta tuttum.
[ ] Tekilliği koruyup çoğaltmayı önledim.