Bozuk Yapay Zeka Arayüzlerini Manuel Olarak Düzeltmeyi Bırakın

Yapay zeka kodlama araçlarınız tasarım konusunda genellikle başarısız olur.

Bir buton istersiniz. Yapay zeka size bir mavi tonu verir. Başka bir bileşen istersiniz. Yapay zeka size farklı bir mavi tonu verir. Bu, yapay zekanın katı bir tasarım sisteminden yoksun olması nedeniyle gerçekleşir.

Google Labs bunu çözmek için design.md'yi yayınladı.

Bu; Cursor, Claude Code ve GitHub Copilot gibi araçların tasarım kurallarınızı okumasını sağlayan bir spesifikasyondur. Bu sayede tutarsız boşluklar, yanlış yazı tipleri ve kayan renkler engellenir.

Nasıl çalışır:

design.md iki bölümden oluşan bir Markdown dosyasıdır.

  • YAML Front Matter: Hassas tasarım token'larını (design tokens) içerir. Renkleri, tipografiyi, boşlukları ve köşe yarıçaplarını burada tanımlarsınız.
  • Markdown Body: Tasarım mantığını (rationale) içerir. Bir rengi neden kullandığınızı ve ne zaman kaçınmanız gerektiğini açıklar.

Bu yapı, yapay zekanın hem veriyi hem de mantığı anlamasına yardımcı olur. Sadece bir hex kodu görmez; belirli bir rengin başlıklar için olduğunu ve gövde metni için kullanılmaması gerektiğini anlar.

design.md CLI'nın temel özellikleri:

  • Linting: Token'larınızın doğru olup olmadığını kontrol eder. Hatta WCAG AA erişilebilirlik kontrastını bile denetler.
  • Diffing: Tasarımınızı güncellediğinizde hangi token'ların tam olarak değiştiğini gösterir.
  • Exporting: Tasarım dosyanızı Tailwind CSS, JSON veya W3C Design Tokens formatına dönüştürür.
  • Spec: Dosyanızı nasıl okuyacağını yapay zekanıza öğretmek için ona verebileceğiniz bir kılavuz oluşturur.

Bu neden önemli:

Çoğu geliştirici genel kurallar için CLAUDE.md veya AGENTS.md kullanır. Bunlar yardımcı olsa da, bu dosyalar çoğunlukla doğal dilden oluşur. Yapay zeka yine de belirli değerleri tahmin etmek zorunda kalır.

design.md, tasarım sisteminizi makine tarafından okunabilir verilere dönüştürür.

Kullanmak için:

  1. DESIGN.md dosyasını proje kök dizinine yerleştirin.
  2. CLAUDE.md veya Cursor kurallarınıza şu satırı ekleyin: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Yapay zekanıza sürekli "yanlış renk" demeyi bırakın. Ona tek bir doğruluk kaynağı (single source of truth) verin.

Kaynak: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

İsteğe bağlı öğrenme topluluğu: https://t.me/GyaanSetuAi