AI Ajanları için Tasarım Sistemi: DESIGN.md Kılavuzu ve Uygulamaları

Yapay zeka destekli kodlama ajanları projelerinize katkıda bulunurken, genellikle en yaygın tasarım kalıplarını kullanmaya yöneliyor: standart mavi tonları, varsayılan yazı tipleri ve rastgele boşluklar. Peki projelerinizin benzersiz kimliğini korumanın bir yolu olsaydı? Google Labs’ın geliştirdiği DESIGN.md formatı tam da bunun için tasarlandı.

AI ajanları için neden gerekli?

Herhangi bir tasarım sistemine sahip olmayan bir AI ajanının ürettiği arayüzler, yalnızca eğitim verilerindeki yaygın desenlere dayanır. Bu da projelerinizin marka kimliğinden uzak, standart bir görünüm ortaya çıkarabilir. DESIGN.md ise tam olarak bu sorunu çözmek üzere geliştirildi: projelerinizin tasarım kurallarını ve renk paletini, hem makine hem de insan tarafından okunabilir bir formatta tek bir dosyada toplamanızı sağlıyor.

Örneğin, bir AI ajanının her seferinde tasarım sisteminizi yeniden açıklamasına gerek kalmaz. DESIGN.md dosyasını projenizin kök dizinine yerleştirerek, ajanınızın her etkileşiminde markanızın stilini otomatik olarak kullanmasını sağlayabilirsiniz. Bu sayede üretilen arayüzler, hem işlevsel hem de marka kimliğinize uygun hale gelir.

Dosya nerede bulunmalı ve nasıl çalışır?

DESIGN.md, projenizin kök dizininde yer alan basit bir metin dosyasıdır. Markdown formatında yazıldığı için özel bir derleme sürecine veya özel bir görüntüleyiciye ihtiyaç duymaz. AI ajanları bu dosyayı doğrudan okuyabilir ve projeyle birlikte taşınır. Bu da tasarım sisteminizin her yeni oturumda yeniden tanımlanmasına gerek olmadığı anlamına gelir.

Ajanınız, DESIGN.md dosyasını okuduktan sonra, içerdiği YAML ön ekindeki tasarım verilerini ve markdown içindeki açıklamaları kullanarak, markanıza özgü arayüzler oluşturabilir. Bu sayede hem tutarlılık sağlanır hem de ajanınızın üretkenliği artar.

Tasarım sisteminin iki bileşeni: Veri ve Açıklama

DESIGN.md dosyası, iki temel bileşenden oluşur:

• YAML ön ek (Front Matter): Projenizin tasarım kimliğine ait temel verileri içerir. Örneğin, renk paleti, tipografi kuralları ve özel stiller.
• Markdown içeriği: Bu verilerin nasıl uygulanacağına dair insan tarafından okunabilir açıklamalar ve kurallar.

Aşağıda, basit bir DESIGN.md dosyası örneği bulunmaktadır:

---
name: Kurumsal Kimlik
renkler:
  birincil: "#1A1C1E"
  üçüncül: "#B8422E"
tipografi:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---

## Renkler

Nötr tonlarda yüksek kontrast sağlayan birincil renk ve sıcak bir aksan renk kullanılır. Üçüncül renk yalnızca ana eylem düğmelerinde kullanılmalıdır; dekoratif amaçlı kullanımdan kaçınılmalıdır.

Bu yapı sayesinde, ajanınız hem doğru renk kodlarını bilir hem de bunların nasıl uygulanması gerektiğine dair kuralları anlar.

CLAUDE.md ve AGENTS.md ile ilişkisi

DESIGN.md, CLAUDE.md veya AGENTS.md dosyalarına benzer bir işleve sahiptir. Bu dosyalar, AI ajanlarına projeye özgü kodlama kurallarını ve stil kılavuzlarını aktarmak için kullanılırken, DESIGN.md ise doğrudan tasarım sistemini aktarmak üzere tasarlanmıştır. Bu üç dosya, birbirini tamamlayan katmanlar olarak düşünülebilir:

• CLAUDE.md: Projeye özel kodlama standartları ve en iyi uygulamalar.
• AGENTS.md: AI ajanlarının projeye nasıl yaklaşması gerektiğine dair talimatlar.
• DESIGN.md: Marka kimliğinizin ve tasarım kurallarının aktarılması.

Sık sorulan sorular

• Ücretsiz mi? Evet, DESIGN.md açık kaynaklı bir formattır ve kullanımı tamamen ücretsizdir. Ayrıca, kullanımını kolaylaştıran ücretsiz bir CLI aracı da mevcuttur.
• Derleme süreci gerekli mi? Hayır. Dosya doğrudan okunabilir ve özel bir derleme sürecine ihtiyaç duymaz.
• Hangi ajanlarla uyumlu? DESIGN.md, sürekli bağlam özelliğine sahip olan herhangi bir AI ajanında çalışabilir. Örneğin, Claude Code, Cursor, Kiro ve Windsurf bu formata destek verir.

Başlamak için adımlar

Projenizde DESIGN.md kullanmaya başlamak için aşağıdaki adımları izleyebilirsiniz:

1. Tasarım sisteminizi tanımlayın: Markanızın renk paleti, tipografi kuralları ve özel stilleri hakkında net bir anlayışa sahip olun.
2. DESIGN.md dosyasını oluşturun: Yukarıdaki örnekteki gibi, YAML ön ek ve markdown içeriğini bir araya getirin.
3. Dosyayı projenizin kök dizinine yerleştirin: Dosyanın adı DESIGN.md olmalı ve projenizin kök dizininde bulunmalıdır.
4. AI ajanınızı yapılandırın: Ajanınızın DESIGN.md dosyasını okuyabildiğinden emin olun. Bu genellikle ajanınızın yapılandırma dosyasında veya projeye özel talimatlarda belirtilmelidir.
5. Test edin ve iyileştirin: İlk denemelerinizde üretilen arayüzleri inceleyin ve gerekirse tasarım sisteminizi güncelleyin.

Tasarım sisteminizi bir kez tanımladıktan ve DESIGN.md dosyasını oluşturduktan sonra, AI ajanlarınızın markanıza uygun arayüzler üretmesi çok daha kolay hale gelecektir. Bu da hem zaman kazandırır hem de tutarlılığı artırır.

Günümüzde projelerinizde AI ajanlarını kullanırken tasarım sisteminizi yeniden açıklamak yerine, DESIGN.md gibi araçlarla bu süreci otomatikleştirmeyi düşünebilirsiniz. Bu sayede hem verimliliğinizi artırabilir hem de marka kimliğinizin korunmasını sağlayabilirsiniz.