Yapay Zeka Araçlarında Tasarım Sisteminizi Tek Bir Dosyayla Yönetin

Yapay zeka destekli kodlama araçlarıyla çalışırken en önemli sorunlardan biri, tasarım sisteminizin tutarlılığını korumaktır. Birçok geliştirici, farklı arayüzler için tasarım kararlarını yeniden açıklamak zorunda kalıyor. Neyse ki, DESIGN.md adı verilen basit bir dosya formatıyla bu süreci kökten değiştirebilirsiniz. Bu dosya, yapay zeka ajanlarına projenizin görsel kimliğini, renk paletini, tipografisini ve bileşen kurallarını tek bir yerden iletmenizi sağlıyor.

Yapay Zeka Araçlarında Tasarım Kılavuzunu Entegre Etmek

Her yapay zeka kodlama aracının, sürekli bağlam (persistent context) adı verilen bir mekanizması bulunuyor. Bu mekanizma sayesinde, belirli dosyaları veya kuralları aracın belleğine yerleştirebilirsiniz. DESIGN.md dosyasını bu mekanizmaya dahil etmek, aracın tüm UI üretimlerinde tasarım kılavuzunuzu otomatik olarak dikkate almasını sağlıyor.

İşte farklı araçlarda nasıl uygulayacağınıza dair adım adım yöntemler:

1. Claude Code ile Tasarım Kılavuzunu Aktarma

Claude Code kullanırken, projenizin kök dizininde bulunan CLAUDE.md dosyasını düzenleyin. Bu dosyaya aşağıdaki satırları ekleyin:

# Tasarım Bu proje, görsel kimliği tanımlayan DESIGN.md dosyasına sahiptir. 
# Herhangi bir UI üretilmeden veya değiştirilmeden önce DESIGN.md'yi okuyun ve belirtilen renk tokenlarını, tipografi kurallarını ve bileşen yönergelerini uygulayın. 
# Vurgulama rengini yalnızca DESIGN.md'de belirtildiği şekilde kullanın.

Bu değişiklik, Claude Code'un UI bileşenleri oluştururken DESIGN.md dosyasındaki kuralları otomatik olarak takip etmesini sağlayacaktır.

2. Cursor'da Tasarım Kurallarını Kural Dosyasına Entegre Etme

Cursor kullanırken, rules.txt veya benzeri bir kural dosyası oluşturun. Bu dosyaya DESIGN.md dosyanızın yolunu ekleyin:

include: ./DESIGN.md

Bu sayede, Cursor herhangi bir UI bileşeni üretirken DESIGN.md dosyasındaki tasarım kurallarını otomatik olarak dikkate alacaktır.

3. Kiro ve Windsurf'te Tasarım Dosyasını Bağlama

• Kiro: Projenizin steering dizinine DESIGN.md dosyasını ekleyin. Araç, bu dizindeki dosyaları otomatik olarak bağlam olarak kullanacaktır.
• Windsurf: Küresel kural dosyanızı DESIGN.md dosyanızın yoluna işaret edecek şekilde yapılandırın. Örneğin:

rulesFile: ./DESIGN.md

Bu adımlar, DESIGN.md dosyanızın her üç araç tarafından da tanınmasını sağlayacaktır.

Tasarım Kılavuzunun Uygulanıp Uygulanmadığını Kontrol Etme

DESIGN.md dosyanızı araçlara entegre ettikten sonra, basit bir test yaparak kuralların uygulanıp uygulanmadığını doğrulayabilirsiniz. Örneğin, bir düğme bileşeni oluşturmasını isteyin ve aşağıdaki unsurları kontrol edin:

• Düğmenin rengi tasarım kılavuzunuzda belirtilen vurgulama rengini kullanıyor mu, yoksa varsayılan bir mavi mi?
• Köşeler tasarım sisteminizdeki önerilen yuvarlama yarıçapına uygun mu?
• Boşluklar (spacing) tasarım sisteminizdeki ölçeğe göre ayarlanmış mı?

Genellikle ilk denemede bazı unsurların eksik olduğunu fark edeceksiniz. Bu durumda, DESIGN.md dosyanızı iyileştirerek kuralların daha net ifade edilmesini sağlayabilirsiniz. Bir kez doğru şekilde yapılandırıldığında, bu ayarlar kalıcı olacaktır.

Tek Bir Dosya, Birden Fazla Araca Hizmet Ediyor

DESIGN.md, açık bir dosya formatı olarak tasarlandığından, farklı yapay zeka araçları tarafından aynı şekilde okunabilir. Bu sayede, her araca özel tasarım kılavuzları oluşturmanıza gerek kalmaz. Bir dosya, tüm araçlarda tutarlı bir şekilde kullanılabilir ve tasarım sisteminizdeki sapmaların önüne geçilir.

Sıkça Sorulan Sorular

DESIGN.md dosyaları nereden gelir?

• El ile elle yazabilirsiniz.
• Bir yapay zeka aracıyla ilk taslak oluşturabilirsiniz.
• Google Stitch gibi araçlardan dışa aktarabilirsiniz.

Tasarım kılavuzu farklı araçlar arasında çalışır mı?

Evet! DESIGN.md, her aracın kendi bağlam mekanizması tarafından okunabildiği için farklı araçlar arasında tutarlılığı korur.

Sonuç: Tasarım Sistemini Yapay Zeka Araçlarına Taşımanın En Basit Yolu

Yapay zeka destekli kodlama araçlarında tasarım tutarlılığını sağlamanın en etkili yolu, DESIGN.md dosyasını aracın sürekli bağlam mekanizmasına dahil etmektir. Bu sayede, tüm UI üretimleri projenizin tasarım sistemine otomatik olarak uyum sağlayacaktır. Tek bir dosya, birçok araca hizmet eder ve tasarım sisteminizdeki sapmaları ortadan kaldırır. Tasarım kılavuzunuzu yapay zeka araçlarına entegre etmek için bugün DESIGN.md dosyanızı oluşturun ve kurallarınızı net bir şekilde tanımlayın.