DESIGN.md nedir? Yapay zekâ kodlama ajanlarının okuduğu tasarım dosyası (ücretsiz mobil uygulama örnekleriyle)

DESIGN.md, bir ürünün görsel kimliğini yapay zekâ kodlama ajanlarına tanımlayan bir Markdown dosyasıdır. Google Labs formatı, isteğe bağlı YAML tasarım belirteçlerini bunların nasıl kullanılacağına dair yazılı rehberlikle birleştirir. Bir ajanın arayüz üretmeden önce okuyabileceği somut renk, tipografi, boşluk ve bileşen kuralları sunar.

Mobil uygulama geliştiricileri için en kullanışlı yönü, bu tercihleri bir sonraki ekrana taşıyabilmektir. Ücretsiz mobil DESIGN.md kütüphanemizden bir dosyayla başlayın, yanındaki ekranları inceleyin ve kuralları kendi uygulamanıza uyarlayın.

DESIGN.md'yi kim hazırladı?

Google Labs, Stitch tarafından kullanılan DESIGN.md formatını yayımlar. Google, DESIGN.md içe ve dışa aktarımını Mart 2026 Stitch duyurusunda tanıttı, ardından Nisan ayında taslak spesifikasyonu açık kaynak hale getirdi. Resmî depo formatı hâlâ alfa olarak etiketliyor, bu yüzden bir entegrasyon geliştirirken güncel spesifikasyonunu kontrol edin.

DESIGN.md adlı bir dosya sıradan bir proje belgesi de olabilir. Bir dosya paylaşırken hangi formatı kullandığını belirtin ve ham metnin incelenmek üzere erişilebilir kalmasını sağlayın.

Bir DESIGN.md dosyasında neler yer alır?

Google Labs spesifikasyonu, isteğe bağlı YAML üstbilgisine (frontmatter) sahip bir Markdown gövdesini tanımlar. Belirteç grupları renkleri, tipografiyi, yuvarlatılmış köşeleri, boşlukları ve bileşenleri kapsar. Gövde ise vurgu renginin nereye ait olduğu veya butonların kartlardan nasıl ayrıştığı gibi kararları açıklar. Kesin değerler ile yazılı rehberlik farklı görevler üstlenir.

Spesifikasyon, hex değerleri de dâhil olmak üzere CSS renk metinlerini kabul eder. YAML içinde hex renklerini tırnak içine alın; tırnaksız bir kare simgesi yorum başlatır. {colors.primary} gibi bir referans dosyadaki başka bir belirtece işaret eder. Sleek kütüphanesi, paleti indirmeden önce kontrol edebilmeniz için orijinal metnin yanında hex renk örneklerini de gösterir.

Minimal bir DESIGN.md örneği nasıl görünür?

Başlangıç seviyesindeki bir DESIGN.md tek bir küçük görsel sistemi tanımlayabilir: palet, gövde stili, boşluk değeri ve buton. Aşağıdaki örnek bu rehber için hazırlanmıştır. Dosyayı DESIGN.md olarak kaydedin ve ardından mobil uygulamanız ihtiyaç duydukça kurallar ekleyin. Bu bir nihai bileşen kütüphanesi değil, bir başlangıç noktasıdır.

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

Kendi eklemelerinizi deponun lint komutuyla kontrol edin. Buradaki bulgular, bozuk referansları ve renk çifti kontrast sorunlarını yakalamanıza yardımcı olabilir. Yine de oluşturulan ekranı gözle inceleyin; bir metin dosyası size kesilmiş bir etiketi, kafa karıştırıcı bir kontrolü veya bir formu kapatan klavyeyi gösteremez.

npx @google/design.md lint DESIGN.md

DESIGN.md, Claude Code ile nasıl kullanılır?

DESIGN.md dosyasını projenizde tutun ve UI görevlerinde Claude Code'dan okumasını isteyin. Anthropic'in bellek belgeleri, CLAUDE.md içe aktarımlarının oturum başında yüklendiğini açıklar. Gerektiğinde okunması için düz bir dosya yolu referansı kullanın veya .claude/rules/ altında UI dosyalarınızla eşleşen paths kalıpları içeren bir kural oluşturun.

Örneğin, @ ile içe aktarma kullanmadan şu talimatı CLAUDE.md dosyasına ekleyin:

For UI tasks, read DESIGN.md before creating or changing app screens.

Ardından belirli bir ekran ve bu ekranın durumlarını isteyin. Örneğin boş durumu ve senkronizasyon hatası durumu olan bir görev listesi talep edin. Üretilen kullanıcı arayüzünün dosyadaki değerlere uyup uymadığını gözden geçirin ve tasarımı bilinçli olarak değiştirdiğinizde dosyayı güncelleyin. Claude ile tasarım yapma rehberimiz daha geniş iş akışını kapsamaktadır.

DESIGN.md, Cursor veya Stitch ile nasıl kullanılır?

Cursor'da DESIGN.md dosyasını göreve açıkça ekleyin veya bir proje kuralından referans gösterin. Stitch'te ise tasarım kurallarını projeler arasında taşımak için DESIGN.md içe ve dışa aktarma iş akışını kullanın. Aradaki fark önemlidir: bir kodlama ajanının dosyaya kendi bağlamında ihtiyacı varken Stitch, bu format üzerine kurulu bir iş akışı sunar.

Cursor için kurallar dokümantasyonu proje kurallarını ve dosya referanslarını açıklar. Bir kural, kullanıcı arayüzü değişikliklerinde ajana DESIGN.md dosyasını okuma talimatı verebilir. Kuralın ne zaman geçerli olacağını seçin, böylece ilgisiz sunucu tarafındaki görevler uzun bir tasarım belgesi taşımaz.

Stitch için Google'ın DESIGN.md duyurusu, tasarım kurallarını projeler arasında içe ve dışa aktarabileceğinizi doğrulamaktadır. İçe aktardıktan sonra üretilen ekranı kaynakla karşılaştırın ve gerektiğinde kuralları düzenleyin.

Sleek, mobil uygulama stilleri için DESIGN.md'yi nasıl kullanır?

Sleek, yeniden düzenlenebilir her öne çıkan referansla birlikte bir tasarım dosyası saklar. Bu stili kullanın seçeneğini belirleyip uygulamanızı tarif ettiğinizde Sleek, bu dosyayı uygulama tarifinizle birlikte üretim sürecine aktarır. Dosya estetiği tanımlar; uygulama tarifiniz ise uygulamanın amacını ve içeriğini belirler. Öncesinde hem ekranları hem de dosyayı inceleyebilirsiniz.

Referans galerisi ve DESIGN.md kütüphanesi aynı öne çıkan projeleri kullanır. Sleek, Google Labs yapısını kullanır ve kenarlıklar ile gölgeler gibi bileşen özellikleri ekler; linter bunları uyarı olarak bildirir. Ayrıca simgeler, illüstrasyon, hiyerarşi ve özgün görsel detaylar için rehberlik ekler. Stil dosyası, yeni bir uygulama üretmek için kullanılacak görsel seçimleri kaydeder.

DESIGN.md dosyasını kopyalamak veya indirmek için kütüphanedeki bir stili açın ya da uygulama fikrinizi girmek için Use this style in Sleek seçeneğini belirleyin. Sleek'i kodlama ortamınızdan yönetmek istiyorsanız ajan kurulum rehberi bu ayrı entegrasyonu açıklamaktadır.

DESIGN.md SSS