brand-guidelines.md: Her Yapay Zeka Aracının Markanızı Bilmesi Gereken Tek Dosya

Marka yönergeleri için iyi paralar ödediniz. 18 ay önce tasarım ajansınızın teslim ettiği, Google Drive'ın bir yerinde duran 47 sayfalık bir PDF. Geliştiricileriniz onu hiç açmadı. Yapay zeka araçlarınız onu açamıyor. Ve ne zaman biri Cursor'da bir açılış sayfası oluştursa, Claude ile bir pazarlama e-postası taslağı hazırlasa veya v0'da bir bileşen iskeleti oluştursa, sıfırdan başlarlar: "Birincil rengimiz neydi yine? Inter mi yoksa Plus Jakarta Sans mı? Köşeleri yuvarlak mı yoksa keskin mi kullanıyoruz?"

Bu döngü — markayı açıklamak, yerleşmesini ummak, uymayanı düzeltmek — her hafta saatlere mal oluyor. Bir ekip genelinde, sadece yeniden işleme maliyeti ayda binlerce doları buluyor.

Google'ın Stitch design-md formatı bu döngüyü ortadan kaldırıyor. Ve Branding5 eksiksiz brand-guidelines.md dosyanızı otomatik olarak oluşturuyor — tek tıklamayla indirin, deponuza bırakın ve ekibinizin dokunduğu her yapay zeka aracı markanızı anında tanır.

design-md nedir? (Ve insanlar neden ona DESIGN.md diyor?)

Design-md, marka ve tasarım yönergeleri için düz metin tabanlı, Markdown tabanlı bir spesifikasyondur. Sadece insanların (teorik olarak) okuyabileceği bir PDF yerine, hem insanların hem de yapay zeka sistemlerinin ayrıştırabileceği, anlayabileceği ve üzerine inşa edebileceği yapılandırılmış bir .md dosyasıdır.

Google, bu formatı, yapay zeka destekli UI üretim platformu olan Stitch'in bir parçası olarak basit bir önermeyle oluşturdu: Bir yapay zekaya marka sisteminizin iyi yapılandırılmış bir açıklamasını verirseniz, yapay zeka UI oluşturabilir, metin yazabilir ve zaten markaya uygun tasarım kararları alabilir. Her oturumda kendinizi tekrar etmenize gerek kalmaz.

İki isim, tek fikir

Bu formatta yazılan dosyalar iki isimle anılır:

• DESIGN.md — geliştirici topluluklarındaki kısa adıdır. README.md ve CONTRIBUTING.md dosyalarının yanında projenin kökünde yer alır ve Cursor, Windsurf ve diğer yapay zeka kodlama araçları otomatik olarak onu arar.
• brand-guidelines.md — Branding5'in kullandığı isimdir, çünkü dosya görsel özelliklerden çok daha fazlasını içerir. Konumlandırmanızı, arketiplerinizi, İMP'lerinizi, sesinizi ve stratejinizi — sadece renkler ve yazı tipleri değil, tüm marka sistemini — kapsar.

İki isim de işe yarar. Format ve gücü aynıdır.

brand-guidelines.md dosyasının içinde neler bulunur?

Eksiksiz bir dosya, markanızın her katmanını, stratejiden piksel düzeyindeki özelliklere kadar kapsar. Branding5 tarafından oluşturulan bir brand-guidelines.md uygulamada şöyle görünür:

# Acme Analitik

## Marka Temeli

- **Konumlandırma:** Kurumsal düzeyde içgörülere öğrenme eğrisi olmadan ihtiyaç duyan
  teknik olmayan pazarlama ekipleri için oluşturulmuş tek analitik platformu.
- **Arketip:** Bilge — akıllı, güvenilir, veri odaklı
- **Misyon:** Veri okuryazarlığını her pazarlamacı için erişilebilir kılmak.
- **Değerler:** Karmaşıklık yerine netlik. Hız yerine doğruluk. Bağımlılık yerine güçlendirme.

## İdeal Müşteri Profilleri

### Müşteri Profili 1: Büyüme Pazarlama Yöneticisi

- 28–38 yaş, orta ölçekli SaaS (50–500 çalışan)
- Karmaşık BI araçlarından bıkmış; kendi başına oluşturabileceği gösterge panellerine ihtiyacı var
- Dil kalıpları: "eyleme geçirilebilir içgörüler", "self-servis", "değere ulaşma süresi"
- Temel itiraz: "Bu, mevcut BI yığınımızın yerini alacak mı?"

### Müşteri Profili 2: Pazarlama Başkan Yardımcısı

- 35–50 yaş, CMO veya CEO'ya rapor verir
- Kanallar arası ilişkilendirme ve yönetim kuruluna hazır raporlama ile ilgilenir
- ROI kanıtı ve entegrasyon genişliğine göre satın alır

## Görsel Kimlik

### Renkler

| Rol      | Hex       | Kullanım                                 |
| -------- | --------- | ---------------------------------------- |
| Birincil | `#2563eb` | CTAlar, aktif durumlar, temel UI öğeleri |
| İkincil  | `#f8fafc` | Arka planlar, kartlar, kapsayıcılar      |
| Vurgu    | `#16a34a` | Başarı durumları, pozitif metrikler      |
| Nötr 900 | `#0f172a` | Gövde metni, başlıklar                   |
| Nötr 400 | `#94a3b8` | Yer tutucu metin, devre dışı durumlar    |
| Hata     | `#dc2626` | Hata durumları, yıkıcı eylemler          |
| Uyarı    | `#f59e0b` | Uyarı durumları, dikkat bildirimleri     |

### Tipografi

| Rol      | Font Ailesi       | Kalınlık | Boyut | Satır Yüksekliği | Karakter Aralığı |
| -------- | ----------------- | -------- | ----- | ---------------- | ---------------- |
| H1       | Plus Jakarta Sans | 800      | 48px  | 1.1              | -0.02em          |
| H2       | Plus Jakarta Sans | 700      | 36px  | 1.2              | -0.01em          |
| H3       | Plus Jakarta Sans | 700      | 24px  | 1.3              | 0                |
| Gövde    | Inter             | 400      | 16px  | 1.6              | 0                |
| Açıklama | Inter             | 500      | 13px  | 1.4              | 0.01em           |
| Kod      | JetBrains Mono    | 400      | 14px  | 1.5              | 0                |

### Aralık ve Düzen

- Temel birim: 8px
- Bileşen iç boşluğu: 16px (kompakt), 24px (varsayılan), 32px (geniş)
- Bölüm aralığı: 64px (masaüstü), 48px (mobil)
- Maksimum içerik genişliği: 1200px
- Kenar yarıçapı: 8px (kartlar), 12px (modallar), 9999px (haplar/düğmeler)

### Gölgeler ve Yükseklik

- Kart: `0 1px 3px rgba(0,0,0,0.08)`
- Açılır menü: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`

## Marka Sesi ve Tonu

- **Ses:** Doğrudan, kendinden emin, jargonsuz. Açıklarız, ders vermeyiz.
- **Ton değişiklikleri:** Onboarding'de daha sıcak, satış metinlerinde daha iddialı,
  dokümantasyonda hassas ve nötr.
- **Cümle stili:** Kısa cümleler. Etken çatı. Fayda ile başlayın.
- **Kaçının:** Edilgen yapılar, "kaldıraç", "sinerji", dolgu ifadeleri,
  ürün arayüzünde ünlem işaretleri.

### Örnekler

- ✅ "Hangi kampanyaların gelir sağladığını tek tıklamayla görün."
- ❌ "Yenilikçi platformumuz, pazarlama ekibinizi sınıfının en iyisi analitik çözümlerle güçlendirmek için en son teknolojiden yararlanır."

## Bileşen Yönergeleri

### Düğmeler

- Birincil: dolu, `#2563eb`, beyaz metin, tam yuvarlak, min-yükseklik 44px
- İkincil: ana hatlı, 1px kenarlık `#2563eb`, şeffaf arka plan
- Hayalet: kenarlıksız, sadece metin, navigasyon ve üçüncül eylemlerde kullanılır
- Tüm düğmeler: 16px yatay dolgu, font-kalınlığı 600, büyük harf yok

### Kartlar

- Arka plan: beyaz, kenar yarıçapı 8px, hafif gölge
- Dolgu: 24px
- Başlık: H3 kalınlık, 8px alt boşluk
- Her zaman net bir CTA veya sonraki eylem ekleyin

### Formlar

- Girişin üzerinde etiket, font-kalınlığı 500
- Giriş yüksekliği: 44px, kenar yarıçapı 8px, 1px kenarlık nötr-300
- Girişin altında kırmızı, 13px hata mesajı
- Gerekli alanlar \* ile işaretlenmeli (sadece renkle değil)

## Yapılması ve Yapılmaması Gerekenler

- ✅ Her bölümde tek, net bir CTA bulundurun
- ✅ Örneklerde ve ekran görüntülerinde gerçek veriler kullanın, asla "Lorem ipsum" kullanmayın
- ✅ Kontrast oranlarını test edin — minimum WCAG AA (metin için 4.5:1)
- ❌ Tek bir bileşende asla 3'ten fazla renk kullanmayın
- ❌ Ekranlara işaret eden insanların stok fotoğraflarını kullanmayın
- ❌ 2 satırdan uzun gövde metinlerini ortalamaktan kaçının

Bu düz metin. Tescilli format yok. Özel araç gereksinimi yok. Herhangi bir yapay zeka aracına — Cursor, Claude, Stitch, v0, Bolt, Copilot — verin ve markanız, her çıktıyı otomatik olarak şekillendiren bir kısıtlama katmanı haline gelsin.

Bu neden şimdi önemli?

Makine tarafından okunabilir marka yönergelerini acil, isteğe bağlı olmaktan çıkaran üç güç bir araya geldi:

1. Yapay zeka araçları artık kod ve metnin çoğunu yazıyor

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — geliştiriciler ve pazarlamacılar yapay zeka yardımıyla her zamankinden daha hızlı ürün çıkarıyor. Ancak bu araçlar, siz söylemedikçe markanız hakkında sıfır bilgiye sahiptir. Her oturumda, her komut isteminde, renk paletinizi yeniden açıklıyorsunuz. Bu bir iş akışı değil — hızın üzerinde bir vergi.

Deponuzdaki tek bir brand-guidelines.md bu vergiyi kalıcı olarak ortadan kaldırır.

2. Google design-md'yi bir standart olarak destekliyor

Google, Stitch gibi bir ürün aracılığıyla bir format spesifikasyonu yayınladığında, ekosistem dikkat kesilir. Figma eklentileri, VS Code uzantıları ve yapay zeka bileşen jeneratörleri şimdiden proje kökünde bir DESIGN.md aramaya başlıyor. Dosyanızı bugün doğru bir şekilde hazırlamanız, yarının araçlarının migrasyon veya yeniden işleme olmadan çalışacağı anlamına gelir.

3. Yapay zeka hızında marka tutarlılığı makine tarafından okunabilir kurallar gerektirir

Ekibiniz ayda 50 blog yazısı, haftada 20 reklam varyasyonu ve her sprintte yeni bir açılış sayfası üretiyorsa, Google Drive'daki bir PDF işe yaramaz. Marka kurallarının üretimin yapıldığı yerde — depoda, komut istemi bağlamında, aracın belleğinde — yaşaması gerekir.

PDF vs. brand-guidelines.md: karşılaştırmalı bir bakış

PDF, paydaş sunumları için ölmedi. Ancak günlük uygulama için — yapay zeka araçlarının üretim yaptığı yerlerde — düz metin kesinlikle kazanır.

Google Stitch ile brand-guidelines.md nasıl kullanılır?

Google Stitch, brand-guidelines.md dosyanızı okur ve UI üretimini kısıtlamak için kullanır. Jenerik Material bileşenleri üretmek yerine, renk sisteminize, tipografinize, aralığınıza ve bileşen kurallarınıza uyan UI çıktısı verir.

İş akışı üç adımdan oluşur:

1. Dosyayı yükleyin veya yerleştirin. brand-guidelines.md dosyasını proje kökünüze bırakın veya doğrudan Stitch arayüzüne yükleyin.
2. Doğal bir şekilde komut verin. İhtiyacınız olanı sorun: "Üç katmanlı ve vurgulanmış popüler bir plan içeren bir fiyatlandırma bölümü oluştur."
3. Markaya uygun çıktı alın. Stitch, renklerinizi, tip hiyerarşinizi, düğme stillerinizi ve aralığınızı otomatik olarak uygular. Temel şeyler için tasarım incelemesine gerek yoktur.

Sonuç sadece markanıza daha yakın olmakla kalmaz; aynı zamanda, normalde tüm bir öğleden sonrayı yiyen düzeltme adımını atladığınız için daha hızlı ürün çıkarmanızı sağlar.

Cursor, Copilot ve yapay zeka kodlama araçlarıyla kullanma

DESIGN.md (veya brand-guidelines.md) dosyasını deponuzun köküne bırakın ve komutlarınızda ona başvurun:

Cursor:

@DESIGN.md Ana sayfa için bir kahraman bölümü oluştur.
Dosyadaki birincil CTA stilini, başlık tipografisini ve renk sistemini kullan.

GitHub Copilot (çalışma alanı modu):

#file:DESIGN.md Burada tanımlanan kart yönergelerini ve boşluk sistemini kullanarak bir referans kartı ızgara bileşeni oluştur.

Claude / ChatGPT (dosyayı yapıştırın veya ekleyin):

İşte marka yönergelerim [ekli: brand-guidelines.md].
Marka sesine uygun ve Müşteri Profili 1 (Büyüme Pazarlama Yöneticisi) ile konuşan üç ana sayfa başlık seçeneği yaz.

v0 / Bolt / Lovable: brand-guidelines.md dosyasını bir proje dosyası olarak yükleyin veya ilgili bölümleri komut isteminize yapıştırın. Bu araçlar, renklerinizi, türünüzü ve bileşen özelliklerinizi her üretimde uygulayacaktır.

Getirisi: Marka yönergelerini hiç okumamış geliştiriciler, ilk komut istemlerinden itibaren markaya uygun kod üretirler. Kısıtlama iş akışına yerleşiktir — inceleme döngüleri ve Slack mesajları aracılığıyla dayatılmaz.

Görsellerin ötesinde: dosyadaki strateji neden her şeyi değiştirir?

Çoğu tasarım sistemi dosyası renkler ve yazı tipleriyle sınırlıdır. Branding5'ten gelen bir brand-guidelines.md daha derine iner — ve bu derinlik, yapay zeka çıktısını "doğru görünüyor"dan "doğru hissettiriyor"a dönüştüren şeydir.

Marka temeli, yapay zekaya markanın neden bu seçimleri yaptığını anlatır. Bir yapay zeka, teknik olmayan pazarlamacıları hedefleyen bir Bilge arketipi olduğunuzu bildiğinde, sadece doğru düğme rengini seçmekle kalmaz — abartılı ve nefessiz bir dil yerine net ve kendinden emin bir metin yazar.

İdeal Müşteri Profilleri, yapay zekaya ilgili mesajlaşmayı oluşturmak için hedef kitle bağlamını sağlar. Bir Pazarlama Başkan Yardımcısı için bir başlık, bir Büyüme Pazarlama Yöneticisi'ni hedefleyenden çok farklı okunur. Dosyada İMP'ler olmadan, yapay zeka tahmin yürütür. Onlarla birlikte ise hedefler.

Somut örneklerle (iyi ve kötü) ses ve ton yönergeleri, metin kalitesi için en yüksek kaldıraçlı bölümdür. İyi yazılmış bir "yap / yapma" örneği, bir yapay zekaya yüzlerce soyut ses açıklamasından daha fazlasını öğretir.

Yapılması ve yapılmaması gerekenler katı kısıtlamalar olarak işlev görür. "Bir bileşende asla 3'ten fazla renk kullanmayın" ve "her bölümde her zaman bir CTA bulundurun" gibi kurallar, yapay zekanın her zaman harfiyen uygulayabileceği kurallardır. Belirsizlik yok, sapma yok.

Branding5 sizinkini nasıl oluşturur?

Branding5'teki marka analizinizi tamamladıktan sonra, brand-guidelines.md dosyanız panodan indirilmeye hazır hale gelir. Sahne arkasında neler olduğuna bir göz atalım:

1. Marka stratejiniz dosyayı besler. Konumlandırma, arketip, İMP'ler, rakip analizi, ton — Branding5'te oluşturduğunuz her şey doğrudan yapılandırılmış Markdown çıktısına akar.
2. Görsel özellikler, konumlandırmanızdan türetilir. Renkler, tipografi ve bileşen kuralları, genel bir şablondan alınmak yerine, marka kişiliğinize uyacak şekilde oluşturulur.
3. Çıktı design-md spesifikasyonunu takip eder. Stitch ve uyumlu araçlar onu doğal olarak ayrıştırır. Dönüştürme veya yeniden formatlama yoktur.
4. Hemen kullanıma hazırdır. Deponuza bırakın, yapay zeka aracınıza ekleyin veya ekibinizle paylaşın. Tek dosya, her araç, ilk günden itibaren.

Branding5'te geçirdiğiniz 30 dakika şunları üretir:

• Paydaşlarınız ve yatırımcılarınız için bir strateji PDF'i
• Pazarlama ekibiniz için mesajlaşma çerçeveleri
• Mühendislik ve tasarım ekibinizin kullanacağı her yapay zeka aracı için bir brand-guidelines.md

Metin yazarlığı yok. Manuel formatlama yok. Markdown uzmanlığına gerek yok.

Başlangıç: beş dakikalık kontrol listesi

Zaten bir marka stratejiniz var mı? Sıfırdan yapay zeka uyumlu bir marka sistemine beş dakikada nasıl geçileceği aşağıda açıklanmıştır:

1. Dosyanızı oluşturun. Branding5'te marka analizinizi yapın ve panonuzdan brand-guidelines.md dosyasını indirin.
2. Deponuzun köküne bırakın. Ekibiniz geliştirici kuralını tercih ediyorsa ona DESIGN.md adını verin veya netlik için brand-guidelines.md olarak tutun.
3. Ekibinize bildirin. Tek satırlık bir mesaj paylaşın: "Marka yönergelerimiz artık proje kökündeki DESIGN.md dosyasında. Her yapay zeka komut isteminde buna başvurun."
4. Her yapay zeka oturumunda ona başvurun. Cursor'da @DESIGN.md kullanın, Claude veya ChatGPT'ye ekleyin, v0 veya Bolt'a yükleyin.
5. Güncel tutun. Markanız geliştikçe dosyayı güncelleyin ve kaydedin. Git değişikliği izler. Her araç anında alır.

İşte bu kadar. Oryantasyon sunumu yok. Tasarım inceleme darboğazı yok. Slack'te artık "marka rengimiz neydi?" sorusu yok.

Sonuç

Yapay zeka araçları kodunuzu yazıyor, metninizi üretiyor ve bileşenlerinizi iskeletini oluşturuyor. Tek soru, bunu markaya uygun bir şekilde mi yapıyorlar — yoksa kafalarına göre mi yapıyorlar.

Bir brand-guidelines.md bu soruyu bir kez yanıtlar. Sonra her üretimde, her araçta, ekibinizdeki her kişi için otomatik olarak tekrar yanıtlar.

Google'ın Stitch formatı, makine tarafından okunabilir marka yönergelerini bir standart haline getiriyor. DESIGN.md, geliştiricilerin proje kökünde bulmayı beklediği dosya haline geliyor. Bunu şimdi benimseyen markalar daha hızlı ürün çıkaracak, daha tutarlı kalacak ve hedefi tutturamayan yapay zeka çıktısını düzeltmek için daha az zaman harcayacak.

Marka stratejiniz zaten Branding5'te. brand-guidelines.md dosyanız tek tık uzaklıkta.

Sıkça sorulan sorular

DESIGN.md ile brand-guidelines.md arasındaki fark nedir?

Aynı formattadırlar. DESIGN.md, geliştirici topluluklarında popüler olan kısa adıdır — README.md adlandırma kurallarını yansıtır. brand-guidelines.md daha açıklayıcıdır, dosyanın sadece görsel özellikler değil, marka stratejisi (konumlandırma, ses, İMP'ler) içerdiğini belirtir. Ekibinizin tercih ettiği adı kullanın; yapay zeka araçları her ikisini de aynı şekilde ayrıştırır.

Dosyayı oluşturmak veya düzenlemek için Markdown bilmem gerekiyor mu?

Hayır. Branding5 dosyayı marka analizinizden otomatik olarak oluşturur. Daha sonra manuel düzenlemeler yapmak isterseniz, Markdown basit formatlamaya sahip düz metindir (# başlıklar için, - listeler için, ** kalın yazmak için). Herkes temellerini iki dakikada öğrenebilir.

Hangi yapay zeka araçları design-md / DESIGN.md'yi destekliyor?

Google Stitch onu doğal olarak okur. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt ve Lovable, dosyayı referans verdiğinizde veya eklediğinizde hepsi onunla çalışır. Düz Markdown olduğu için, herhangi bir LLM destekli araç onu ayrıştırabilir ve takip edebilir — eklenti veya entegrasyon gerekmez.

brand-guidelines.md dosyam ne kadar detaylı olmalı?

Belirsizliği ortadan kaldıracak kadar detaylı. En azından, kullanım kurallarıyla birlikte renk paletinizi, tipografi özelliklerini, düğme/kart/form kurallarını ve örneklerle birlikte ses yönergelerini ekleyin. Yapılması ve yapılmaması gerekenleriniz ne kadar spesifik olursa, yapay zeka çıktısı o kadar tutarlı olur. Branding5 varsayılan olarak kapsamlı bir dosya oluşturur — ihtiyaç duymadığınız bölümleri her zaman kesebilirsiniz.

Markam geliştikçe dosyayı nasıl senkronize tutarım?

Diğer tüm kaynak dosyaları gibi davranın: düzenleyin, kaydedin, gönderin. Git'te yaşadığı için, ekibiniz neyin ne zaman değiştiğini tam olarak görür. Branding5'te marka analizinizi yeniden çalıştırırsanız, güncellenmiş bir sürümü indirebilir ve eski dosyanın yerine koyabilirsiniz. Ajans ücreti yok, aylık revizyon döngüsü yok.

brand-guidelines.md dosyasını blog yazıları veya reklam metinleri yazmak gibi kod dışı görevler için kullanabilir miyim?

Kesinlikle. Claude, ChatGPT veya herhangi bir yazma asistanına komut verirken dosyayı ekleyin (veya Marka Sesi ve İMP bölümlerini yapıştırın). Ses yönergeleri, ton örnekleri ve hedef kitle ayrıntıları, sadece kod değil, yapay zeka tarafından oluşturulan metin kalitesini artırmak için özel olarak tasarlanmıştır.

brand-guidelines.md dosyanızı alın

Branding5'te marka analizinizi yapın ve design-md uyumlu bir brand-guidelines.md (DESIGN.md) indirin — Google Stitch, Cursor, Copilot ve tüm yapay zeka araç yığınınız için hazır.

brand-guidelines.md dosyanızı oluşturun →